Vue+Spring Boot集成Facebook OAuth2认证失败求助

我的Vue+Spring Boot项目中，Google OAuth2认证可正常运行，第6步能获取到Name、Granted Authorities等认证信息，但使用Facebook认证时后端无任何输出，Vue控制台出现AxiosError。已确认accessToken、clientId和clientSecret均正确，求排查问题。

相关代码 #

Vue前端代码 #

getFBStatus() {
    const FB = this.$store.state.FB
    FB.getLoginStatus(response => {
        if (response.status === 'connected') {
            const code = response.authResponse.accessToken;
            this.sendCodeToBackend('facebook', code)
        }
    })
},
sendCodeToBackend(name, code) {
    this.$axios.post('http://localhost:8081/api/oauth/' + name, this.socialLoginForm, {
        headers: { 'Content-Type': 'application/json' },
    })
        .then(response => {
            this.loginResponseProcessiing(response);
        })
        .catch(error => {
            console.log(error);
        })
},

Spring Boot Controller代码 #

@PostMapping("/api/oauth/facebook")
public ResponseEntity<LoginResponse> facebookTest(@RequestBody SocialLoginRequest socialLoginRequest,HttpServletRequest request) {
    LoginResponse res = socialLoginTokenService.createToken(socialLoginRequest,request);
    return ResponseEntity.ok(res);
}

SocialLoginTokenService代码 #

public LoginResponse createToken(SocialLoginRequest socialLoginRequest,HttpServletRequest request) {
    String readCode = socialLoginRequest.getCode();
    
    ClientRegistration clientRegistration = createGoogleClientRegistration(socialLoginRequest);

    String clientName = clientRegistration.getClientName();

    //1.resolver 
    DefaultOAuth2AuthorizationRequestResolver authorizationRequestResolver = new DefaultOAuth2AuthorizationRequestResolver(clientRegistrationRepository, "/auth");
    //2.request 
    OAuth2AuthorizationRequest authorizationRequest = authorizationRequestResolver.resolve(request, clientName);
    //3.response
    OAuth2AuthorizationResponse authorizationResponse = OAuth2AuthorizationResponse
            .success(readCode)
            .code(readCode)
            .redirectUri("postmessage") 
            .state(authorizationRequest.getState())
            .build();
    // 4. authentication
    Authentication authentication = new OAuth2LoginAuthenticationToken(
            clientRegistration, new OAuth2AuthorizationExchange(authorizationRequest, authorizationResponse));

    // 5. authenticationProvider 
    OAuth2LoginAuthenticationProvider authenticationProvider  = new OAuth2LoginAuthenticationProvider(tokenResponseClient, userService);
            // 6. authenticate
    authentication = authenticationProvider.authenticate(authentication);
            System.out.println(authentication);
    //7. get useretails
    DefaultOAuth2User userDetails =(DefaultOAuth2User) authentication.getPrincipal();
}

OAuth2Config代码 #

private ClientRegistration facebookClientRegistration() {
    
    return ClientRegistration.withRegistrationId("Facebook")
            .clientId("my id")
            .clientSecret("my secret")
            .redirectUri("postmessage")
            .authorizationUri("https://www.facebook.com/v3.0/dialog/oauth") 
            .tokenUri("https://graph.facebook.com/v3.0/oauth/access_token")
            .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE)
            .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_POST)
            .scope("email","public_profile")
            .userInfoUri("https://graph.facebook.com/me?fields=id,name,email,birthday,gender,location")
            .clientName("Facebook")
            .userNameAttributeName("id")
            .build();
}

排查关键点 #

• ClientRegistration获取错误：SocialLoginTokenService中调用createGoogleClientRegistration(socialLoginRequest)获取客户端配置，但当前是Facebook认证，应该获取Facebook的ClientRegistration，错误的配置会导致后续认证流程完全失效。
• 前端参数传递错误：前端将Facebook JS SDK返回的accessToken当作授权码code传给后端，而OAuth2授权码模式需要的是code而非直接的accessToken。后端用授权码流程处理令牌，必然导致失败。需调整后端逻辑适配Facebook令牌，或前端改为获取授权码。
• Facebook API版本过时：当前使用v3.0版本的Facebook API，该版本已不再被Facebook官方支持，存在兼容性问题，建议升级至最新稳定版本（如v18.0）。
• 后端异常未捕获：authenticationProvider.authenticate(authentication)执行时若抛出异常，会直接中断请求且无日志输出，导致后端无任何反馈。需添加try-catch块捕获并打印异常，才能定位具体错误原因。
• redirectUri不一致：Facebook开发者平台配置的redirectUri必须与后端facebookClientRegistration()中的redirectUri("postmessage")完全一致，否则会被Facebook拒绝请求。

内容的提问来源于stack exchange，提问作者陳冠諭