Spring microservices SSO with ReactJS

Question

我正在使用 spring-cloud-netflix 在我的项目中使用微服务架构应用程序进行单点登录实现。目前我已经完成了OAuth2服务和网关服务。

这是我对网关的安全配置：

/**
* SSO security config.
*/
@Configuration
@EnableZuulProxy
@EnableOAuth2Sso
@EnableWebSecurity
public class SsoSecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private OAuth2ClientAuthenticationProcessingFilter ssoFilter;
@Autowired
private AuthenticationEntryPoint authenticationEntryPoint;
@Autowired
private SsoLogoutSuccessHandler logoutSuccessHandler;
/**
* SSO http config.
*
* @param http configurer
* @throws Exception exception
*/
@Override
public void configure(HttpSecurity http) throws Exception {
http
//                .cors().and()
.csrf().disable()
.authorizeRequests()
.antMatchers("/", "/test", "/favicon.ico", "/sockjs-node/**", "/static/**", "/*.js", "/*.jpg",
"/rest/**", "/uaa/**", "/backend/**",
"/users/**", "/files/**", "/roles/**").permitAll()
.anyRequest().authenticated().and()
//                .exceptionHandling().authenticationEntryPoint(authenticationEntryPoint).and()
.logout().logoutSuccessHandler(logoutSuccessHandler)
.and()
.sessionManagement().maximumSessions(1)
.expiredUrl("/")
.maxSessionsPreventsLogin(false);
//        http.addFilterAfter(ssoFilter, BasicAuthenticationFilter.class);
}
/**
* OAuth2 config.
*/
@Configuration
protected static class OAuth2Config {
@Bean
public OAuth2ClientAuthenticationProcessingFilter ssoFilter(
SsoLoginSuccessHandler ssoLoginSuccessHandler,
OAuth2ClientContext beaconOAuth2ClientContext,
RemoteTokenServices remoteTokenServices,
OAuth2ProtectedResourceDetails resourceDetails) {
OAuth2ClientAuthenticationProcessingFilter filter =
new OAuth2ClientAuthenticationProcessingFilter("/login");
filter.setRestTemplate(new OAuth2RestTemplate(resourceDetails,
beaconOAuth2ClientContext));
filter.setTokenServices(remoteTokenServices);
//            filter.setAuthenticationSuccessHandler(new SavedRequestAwareAuthenticationSuccessHandler());
return filter;
}
//
//        @Bean
//        public CorsConfigurationSource corsConfigurationSource() {
//            final CorsConfiguration configuration = new CorsConfiguration();
//            configuration.setAllowedOrigins(ImmutableList.of("*"));
//            configuration.setAllowedMethods(ImmutableList.of("HEAD",
//                    "GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
//            configuration.setAllowCredentials(true);
//            configuration.setAllowedHeaders(
//                    ImmutableList.of("Authorization", "Cache-Control", "Content-Type"));
//            final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
//            source.registerCorsConfiguration("/**", configuration);
//            return source;
//        }
}
}

网关 YAML 配置

security:
oauth2:
client:
preEstablishedRedirectUri: http://localhost:3000/login
registeredRedirectUri: http://localhost:3000/login
accessTokenUri: http://localhost:10035/uaa/oauth/token
userAuthorizationUri: http://localhost:10035/uaa/oauth/authorize
clientId: react_app
clientSecret: react_app_secret
useCurrentUri: true
resource:
tokenInfoUri: http://localhost:10035/uaa/oauth/check_token

我有点困惑，如果 react 应用程序客户端在不同的端口(webpack 开发服务器，端口 3000(上运行，我应该如何授权它？

Answer 1

一种替代方法是使用 webpack 设置代理，例如，在您的 webpack 配置中添加如下：

devServer: {
contentBase: '/static',
historyApiFallback: true,
port: 3000,
compress: false,
inline: false,
hot: true,
host: '0.0.0.0',
proxy: {
'/api': { // <---- Intercept all calls to `/api`
target: 'http://localhost:8080', // <--- Your API server in a different port
changeOrigin: true,
secure: false,
},
},
},

以前的配置设置了一个代理，因此每当有请求/api时，它都会将请求代理到在其他端口运行的服务器。