2

我正在尝试Signup with Github在一个示例项目中实现，其中前端代码由 ReactJS 组成，后端 API 由 Spring Boot 组成。

我没有使用 ThymeLeaf 或 Mustache 等服务器模板引擎，而只是创建 RESTful API。

下面是我的 Spring 安全配置。

@RequiredArgsConstructor
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    private final GithubOAuth2UserService githubOAuth2UserService;

    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http
                .httpBasic().disable()
                .csrf().disable()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                    .authorizeRequests()
                        .antMatchers("/v1/health-check")
                        .permitAll()
                .and()
                    .logout()
                        .logoutSuccessUrl("/")
                .and()
                    .oauth2Login()
                        .userInfoEndpoint()
                            .userService(githubOAuth2UserService);
    }
}
  • 下面是我的代码GithubOAuth2UserService
@RequiredArgsConstructor
@Service
public class GithubOAuth2UserService implements OAuth2UserService<OAuth2UserRequest, OAuth2User> {
    private final UserRepository userRepository;

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2UserService<OAuth2UserRequest, OAuth2User> delegate = new DefaultOAuth2UserService();
        OAuth2User oAuth2User = delegate.loadUser(userRequest);

        String registrationId = userRequest.getClientRegistration().getRegistrationId();
        System.out.println(registrationId);
        String userNameAttributeName = userRequest.getClientRegistration()
                .getProviderDetails().getUserInfoEndpoint()
                .getUserNameAttributeName();
        System.out.println(userNameAttributeName);

        OAuthAttributes attributes = OAuthAttributes.ofGithub(userNameAttributeName, oAuth2User.getAttributes());

        User user = saveUser(attributes);

        return new DefaultOAuth2User(
                Collections.singleton(new SimpleGrantedAuthority(user.getRole().name())),
                attributes.getAttributes(),
                attributes.getNameAttributeKey()
        );
    }

    @Transactional
    protected User saveUser(OAuthAttributes attributes) {
        System.out.println("SAVE USER!");
        if(userRepository.findByEmail(attributes.getEmail()).isPresent()) {
            throw new UserEmailConflictException();
        } else {
            User user = attributes.toEntity();
            return userRepository.save(user);
        }
    }
}
  • 最后，OAuthAttributes如下图。
@Getter
public class OAuthAttributes {
    private Map<String, Object> attributes;
    private String nameAttributeKey;
    private String name;
    private String email;

    @Builder
    public OAuthAttributes(Map<String, Object> attributes, String nameAttributeKey, String name, String email) {
        this.attributes = attributes;
        this.nameAttributeKey = nameAttributeKey;
        this.name = name;
        this.email = email;
    }

    public static OAuthAttributes ofGithub(String userNameAttributeName, Map<String, Object> attributes) {
        return OAuthAttributes.builder()
                .name((String) attributes.get("name"))
                .email((String) attributes.get("email"))
                .attributes(attributes)
                .nameAttributeKey(userNameAttributeName)
                .build();
    }

    public User toEntity() {
        return User.builder()
                .name(name)
                .email(email)
                .build();
    }
}
  • 通过 PostMan，我可以看到 API 结果如下，但是我的 ReactJS 代码没有显示任何内容，只是刷新了页面。

在此处输入图像描述

  • 在 ReactJS 上，它像下面这样调用这个 API。
// OnClick function
const result = await axios.get("http://localhost:8080/oauth2/authorization/github");
console.log(result);

  • 更新

  • 我遇到了 CORS 策略违规，我使用下面的配置类进行了配置。这与SecurityConfig班级有关吗？

@Configuration
@EnableWebMvc
public class CORSConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowedMethods("*");
    }
}

非常感谢你。如果需要显示任何代码，我会很乐意编辑这篇文章。

4

0 回答 0