AngularJS Spring Социальная Facebook Проблема CORS - PullRequest
Новая
       45

AngularJS Spring Социальная Facebook Проблема CORS

0 голосов
/ 17 декабря 2018

Я пытаюсь создать пример входа в систему, используя AngularJS (1.6) FE и Spring Boot (2.1) BE, работающие на разных портах.Я использую Spring Boot Social для включения входа в систему FB.

Но когда я пытаюсь войти в систему с помощью Facebook, я получаю следующее:

Ошибка CORS

Мой 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 я тоже попытался включить CORS в своей FE.Ошибка CORS теперь исчезла, но любой запрос, который я отправляю в свой BE после входа в систему, возвращает index.html

FE в FES 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).Также я попытался удалить конфигурацию CORS в FE, а затем внедрил прокси Zuul для решения ошибки CORS, и произошло то же самое.Index.html всегда возвращается любым запросом.Так что я думаю, что моя проблема заключается в моем WebSecurityConfigurerAdapter.Я что-то там пропустил?

EDIT3

Решил исходную проблему, поэтому я вернул заголовок обратно к «Проблема CORS» и добавил обратно тег CORS.См ответ, если интересно.

1 Ответ

0 голосов
/ 20 декабря 2018

Хорошо, так что я нашел способ обойти эту проблему.Я думаю, что функция FBLogin в javascript SDK Facebook не подходит для моей текущей реализации Spring Social.Он не может авторизовать пользователя даже при успешном входе в FB, поэтому мой бэкэнд пытается перенаправить меня обратно на страницу входа в мой интерфейс (которая не имеет реализации CORS) из-за этого кода: 

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

Поэтому вместо того, чтобы использовать функцию FBLogin, я перенаправил свою страницу прямо в / auth / facebook примерно так: 

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