Question

我正在尝试使用在不同端口上运行的AngularJS（1.6）FE和Spring Boot（2.1）BE建立示例登录。我正在使用Spring Boot Social启用FB登录。

但是当我尝试使用Facebook登录时，我得到了：

我的FE看起来像这样：

<button ng-click="FBLogin()">Facebook Login</button>

然后将呼叫：

$scope.FBLogin = function(){
    FB.login(function(response) {
        if (response.status === 'connected') {
            console.log(response);
        } else {
            console.log("User cancelled login or did not fully authorize.");
        }
    }
}

我的FE成功从Facebook获得访问令牌。

然后我的BE看起来像这样：

ActivityController.java

@RestController
@RequestMapping(value = "/act/")
public class ActivityController {
   @Autowired
   ActivityService activityService;

   @RequestMapping(value = "getallactivity")
   @ResponseBody
   public List<Activity> getAllActivity(Principal principal) {
       List<Activity> allActivity = activityService.getAllActivity();
       return allActivity;
   }
}

WebSecurityConfig.java

@Configuration
@EnableWebSecurity
@Order(-1)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

@Autowired
private UserDetailsService userDetailsService;

@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
    auth.userDetailsService(userDetailsService);
}

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
    .cors()
    .csrf().disable()
    .authorizeRequests()
    .antMatchers("/", "/signup", "/login**", "/logout", "/auth/facebook")
        .permitAll()
    .antMatchers("/act/**")
        .authenticated()
    .and().formLogin()
      .loginProcessingUrl("/login") // Submit URL
      .loginPage("https://localhost:8444/#!/login")
      .usernameParameter("username")
      .passwordParameter("password");
}

@Bean
CorsConfigurationSource corsConfigurationSource() {
    System.out.println("CORS BEAN");
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("*"));
    configuration.setAllowedMethods(Arrays.asList("HEAD", "GET", "POST", "PUT", "DELETE", "OPTIONS"));
    configuration.setAllowCredentials(true);
    configuration.setAllowedHeaders(Arrays.asList("content-type", "accept", "X-Requested-With", "remember-me", "authorization"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}


@Override
public UserDetailsService userDetailsService() {
    return userDetailsService;
}
}

EDIT1

根据sideshowbarker的建议，我也尝试在我的FE中启用CORS。现在，CORS错误消失了，但是登录后发送给我的BE的任何请求都返回我的FE的index.html

FE的WebSecurityConfig.Java

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
    .cors()
    .and().authorizeRequests()
    .antMatchers("/**")
        .permitAll()
      .and().formLogin()
      // Submit URL of login page.
    .loginProcessingUrl("https://localhost:8082/login")
    .loginPage("https://localhost:8444/#!/login")
    .defaultSuccessUrl("https://localhost:8444/#!/selectperson")
    .usernameParameter("username")
    .passwordParameter("password");
}

@Bean
CorsConfigurationSource corsConfigurationSource() {
    System.out.println("CORS BEAN");
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("*"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "DELETE", "OPTIONS"));
    configuration.setAllowCredentials(true);
    configuration.setAllowedHeaders(Arrays.asList("content-type", "accept", "X-Requested-With", "remember-me", "authorization"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}
}

EDIT2

已编辑标题以适合当前问题（以前是CORS错误）。我也尝试过删除FE中的CORS配置，然后实施Zuul代理来解决CORS错误，并且发生了同样的事情。任何请求始终返回Index.html。所以我想我的问题出在我的WebSecurityConfigurerAdapter上。我在那里缺少什么吗？

EDIT3

解决了原始问题，因此我将标题恢复为“ CORS问题”，并添加了CORS标签。如果有兴趣，请参阅答案。

Answer 1

好的，所以我已经找到解决此问题的方法。我认为Facebook javascript SDK的FBLogin函数与我当前的Spring Social实现不太兼容。即使通过成功的FB登录也无法授权用户，所以由于以下代码，后端试图将我重定向回到前端的登录页面（该页面没有CORS实现）：

http.
.loginPage("https://localhost:8444/#!/login")

因此，我没有使用FBLogin函数，而是直接将页面重定向到/ auth / facebook，

    $scope.login = function(){
        $window.location.href = 'https://localhost:8082/auth/facebook';
    }

AngularJS Spring Social Facebook CORS问题

EDIT1

EDIT2

EDIT3

1 个答案: