OAuth2.0-使用GitHub进行身份验证，前端和后端在不同的服务器上运行. CORS错误 [英] OAuth2.0 - authentication using GitHub with front-end and back-end running on different servers. CORS error

问题描述

我正在尝试创建一个前端和后端资产分开的应用程序.举例来说，假设前端将最终托管在gh页上，而后端将部署在Heroku上.

I'm trying to create an application that has front-end and back-end assets separated. For the sake of example, let's say that front-end side will eventually be hosted on gh-pages, while back-end is gonna be deployed on Heroku.

我想使用OAuth2.0协议对我的客户端进行身份验证，而GitHub是我的主要提供者.

I want to use OAuth2.0 protocol for authenticating my clients with GitHub being my main provider.

作为概念验证"，我想创建一些利用这种身份验证的虚拟应用程序.下面是代码:

As a 'Prove of Concept', I wanted to create some dummy app that takes advantage of this kind of authentication. Below is the code:

前端(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上将 localhost:8080 和 localhost:9000 注册为OAuth应用程序，但是无论如何，只要我尝试单击getServerResponse()按钮， ，我得到相同的结果:

I've tried registering both localhost:8080 and localhost:9000 as OAuth Application on GitHub, but regardless of that whenever I try to click on getServerResponse() button, I get the same result:

我想问问是否有可能以这种方式分离资产?如果是这样，我在哪里出错?

I wanted to ask whether it is even possible to have assets separated in such a manner? And if so, where do I make mistake?

谢谢！

推荐答案

您看到的CORS消息是因为您的代码正在向https://github.com/login/oauth/authorize发送跨域请求，但是github的响应中不包含Access-Control-Allow-Origin响应标头.

The CORS message you’re seeing is because your code is sending a cross-origin request to https://github.com/login/oauth/authorize but the response from github doesn’t include the Access-Control-Allow-Origin response header.

因此，在Spring代码中对CORS配置进行的任何更改都无关紧要-不会有任何区别，因为需要更改的行为在github端，您无法更改.

So whatever changes you make to the CORS configuration in your Spring code won’t matter—it won’t make any difference because the behavior that would need to change is on the github side and you can’t change that.

您可能想要从后端而不是前端代码执行oauth请求，或者使用

You probably either want to do the oauth request from your backend rather than your frontend code as you’re doing now, or else set up a CORS proxy using https://github.com/Rob--W/cors-anywhere/ or such, or else set up something like https://github.com/prose/gatekeeper:

由于某些与安全性相关的限制，Github阻止您在仅客户端应用程序上实现OAuth Web应用程序流.

Because of some security-related limitations, Github prevents you from implementing the OAuth Web Application Flow on a client-side only application.

这真是个无赖.因此，我们构建了Gatekeeper，这是使它工作所需的缺少的部分.

This is a real bummer. So we built Gatekeeper, which is the missing piece you need in order to make it work.

Gatekeeper与Github.js配合良好，可帮助您从浏览器访问Github API.

Gatekeeper works well with Github.js, which helps you access the Github API from the browser.

这篇关于OAuth2.0-使用GitHub进行身份验证，前端和后端在不同的服务器上运行. CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！