[SPRING] OAuth2.0 - 프론트 엔드와 백엔드가 다른 서버에서 실행되는 GitHub를 사용한 인증. CORS 오류

OAuth2.0 - 프론트 엔드와 백엔드가 다른 서버에서 실행되는 GitHub를 사용한 인증. CORS 오류

프론트 엔드 및 백엔드 애셋을 분리 한 응용 프로그램을 만들려고합니다. 예를 들어, 백 엔드가 Heroku에 배포되는 동안 프런트 엔드 측면은 결국 gh 페이지에서 호스팅됩니다.

내 주요 공급자 인 GitHub로 내 클라이언트를 인증하기 위해 OAuth2.0 프로토콜을 사용하고 싶습니다.

'개념 증명'으로서, 이런 종류의 인증을 활용하는 더미 응용 프로그램을 만들고 싶었습니다. 아래는 코드입니다.

프론트 엔드 (Angular2 응용 프로그램) - localhost : 8080에서 실행

// template
<h1>
  {{title}}
</h1>
<button type="button" (click)="getServerResponse()">getServerResponse()</button>
<h1>{{response}}</h1>

// component
export class AppComponent {
  title = 'app works!';
  response = 'server response';

  constructor(private http: Http) {}

  getServerResponse() {
    this.http.get('http://localhost:9000/hello')
      .subscribe(res => this.response = JSON.stringify(res.json()));
  }
}

백엔드 (Java + Spring 애플리케이션) - localhost : 9000에서 실행

// Application.java
@SpringBootApplication
@EnableOAuth2Sso
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

// HelloController.java
@Controller
public class HelloController {

    @RequestMapping("/hello")
    public String hello() {
        return "Hello!";
    }
}

// FilterConfig.java
@Configuration
public class FilterConfig {

    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(1);
        return bean;
    }

}

// resources/config/application.yml
security:
  oauth2:
    client:
      clientId: xxx
      clientSecret: yyy
      accessTokenUri: https://github.com/login/oauth/access_token
      userAuthorizationUri: https://github.com/login/oauth/authorize
      clientAuthenticationScheme: form
      scope: repo, user, read:org
    resource:
      userInfoUri: https://api.github.com/user
  filter-order: 5

server:
  port: 9000

GitHub에서 OAuth Application으로 localhost : 8080과 localhost : 9000을 모두 등록 해 보았습니다.하지만 getServerResponse () 버튼을 클릭 할 때마다 동일한 결과가 나타납니다.

그런 방식으로 자산을 분리하는 것이 가능한지 여부를 묻고 싶습니다. 그렇다면 어디에서 실수를합니까?

고맙습니다!

해결법

1. ==============================

   1.표시되는 CORS 메시지는 코드가 https://github.com/login/oauth/authorize에 원본 교차 요청을 보내고 있기 때문에 github의 응답에 Access-Control-Allow-Origin 응답이 포함되어 있지 않기 때문입니다 머리글.

   표시되는 CORS 메시지는 코드가 https://github.com/login/oauth/authorize에 원본 교차 요청을 보내고 있기 때문에 github의 응답에 Access-Control-Allow-Origin 응답이 포함되어 있지 않기 때문입니다 머리글.

   따라서 Spring 코드에서 CORS 설정을 변경하는 것은 중요하지 않습니다. 변경해야 할 동작은 github 측에 있으므로 변경할 필요가 없으므로 아무런 차이가 없습니다.

   현재하고있는 프론트 엔드 코드보다는 백엔드에서 oauth 요청을 원하거나 https://github.com/Rob--W/cors-anywhere/를 사용하여 CORS 프록시를 설정하거나 그런, 그렇지 않으면 https://github.com/prose/gatekeeper와 같은 것을 설정하십시오 :

2. ==============================

   2.Spring-Boot를 사용하는 경우 Spring 구성에서이 작업을 수행 할 수 있습니다.

   Spring-Boot를 사용하는 경우 Spring 구성에서이 작업을 수행 할 수 있습니다.

       @Bean
       public WebMvcConfigurer corsConfigurer() {
           return new WebMvcConfigurerAdapter() {
               @Override
               public void addCorsMappings(CorsRegistry registry) {
                   registry.addMapping("/**").allowedOrigins("http://localhost:8080", "http://127.0.0.1:8080");
               }
           };
       }
   

from https://stackoverflow.com/questions/43693447/oauth2-0-authentication-using-github-with-front-end-and-back-end-running-on-di by cc-by-sa and MIT license