服务器端Webapp的Google Oauth2的CORS问题 [英] CORS issue with Google Oauth2 for server side webapps

问题描述

我在SO上提到了这个问题: 但建议的解决方案是使用隐式授予流的 Javascript网络应用.

I referred this question on SO: Google oauth 400 response: No 'Access-Control-Allow-Origin' header is present on the requested resource but the solution suggested is for Javascript web app using implicit grant flow.

我的设置是使我的前端基于angular 4构建，但是我打包并将其与rest api一起部署在同一服务器上.是的，我正在遵循服务器端网络应用程序流程: https://developers.google.com/identity/协议/OAuth2WebServer (在下面的示例中，服务器端口为8300)

My setup is such that my front end is built on angular 4 but I package it and deploy it alongwith rest api on the same server. Si I am following the server side web app flow: https://developers.google.com/identity/protocols/OAuth2WebServer (In the below example the server port is 8300)

我已将 http://localhost:8300 授权为Javascript来源，并向有角度的应用程序发出请求驻留在 http://localhost:8300/auth/oauth/test 上的api 但我仍然收到CORS错误:

I have authorized http://localhost:8300 as Javascript origin and making a request from an angular app to a rest api residing on http://localhost:8300/auth/oauth/test but I am still getting CORS error:

无法加载 https://accounts.google.com/o/oauth2/v2/auth?client_id=568176070083-1lc20949a0q58l0rhmq93n95kvu8s5o6.apps.googleusercontent.com&redirect_uri=http://localhost:8300/auth/myauth/oauth/callback&response_type = code& scope = https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile& state = EUTZF8 : 请求中不存在"Access-Control-Allow-Origin"标头 资源.因此，不允许使用来源" http://localhost:8300 " 访问.

Failed to load https://accounts.google.com/o/oauth2/v2/auth?client_id=568176070083-1lc20949a0q58l0rhmq93n95kvu8s5o6.apps.googleusercontent.com&redirect_uri=http://localhost:8300/auth/myauth/oauth/callback&response_type=code&scope=https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&state=EUTZF8: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8300' is therefore not allowed access.

我的问题是:

1. 建议的解决方案是这里，唯一的出路吗?
2. 我错过了Google API页面上的一些配置吗?
3. 如果我直接访问其余api http://localhost:8300/auth/oauth/test 直接从浏览器运行，一切正常.但是，如果我正在从浏览器向此url发出get请求(由于它是安全的，则应进行重定向到google api，在身份验证之后，至少应击中该rest api断点).因为在两种情况下，都可以访问
   我最后的假设错了吗?

1. Is the solution suggested here, the only way out?
2. Is there some config on the Google APIs page which I missed?
3. If I access the rest api directly http://localhost:8300/auth/oauth/test directly from the browser, everything works great. But if I am making a get request from browser to this url (since it is secured, redirection to google api should happen, after authentication, at least this rest api breakpoint should be hit). Because in both the cases, it's access to
   Is my last assumption wrong?

如果这是相关的，我正在执行以下角度获取请求:

If this is of relevance, I am doing angular get request like:

loginWithGoogle(){
    console.log(" Login with oauth2 ");
    let oauthUrl = "http://localhost:8300/auth/oauth/test";
    return this.http.get(oauthUrl)                                
      .subscribe(
        res => {                    
          this.onSuccess(res);
        }, error => {
          this.onFailure(error);
        });

}

编辑

实际上，我的第三点是为什么当通过XHR从角度应用程序通过XHR访问rest api时会抛出CORS的原因，而该应用程序也与rest api位于同一域，而不是直接从浏览器访问rest api.

Actually my 3rd point is why is CORS thrown when rest api is accessed through XHR from angular app which is also on same domain as rest api and not when rest api is accessed directly fron browser.

推荐答案

使用授权码授予(后端应用程序的OAuth2-&response_type=code)时，必须将浏览器重定向到/auth端点-您不能使用XHR为此.验证后将重定向用户.

When you use the Authorization code grant (OAuth2 for backend apps - &response_type=code), you must redirect the browser to the /auth endpoint - you cannot use XHR for that. The user will be redirected back after authentication.

重定向到/auth端点后，用户需要在地址栏中看到该页面来自Google(受信任的来源)，并且Google可能需要执行更多重定向以验证用户身份并显示同意页面.因此无法使用XHR.

After redirecting to the /auth endpoint, user needs to see in an address bar that the page is from Google (trusted source) and Google may need to do some more redirects in order to authenticate the user and present the consent page. So using XHR is not possible.

更新:第三点，如果请求中不包含有效的凭据(不是现在的HTTP 30x重定向)，则后端API应该返回HTTP 401.然后，您的Angular应用程序需要一个HTTP错误处理程序，该处理程序将根据HTTP 401响应重定向浏览器.

Update: For the third point, your backend API should return the HTTP 401 if the request doesn't contain valid credentials (not HTTP 30x redirect as it does now). Then, your Angular application needs an HTTP error handler which redirects the browser on HTTP 401 response.

但是，如果要将令牌保留在Angular应用程序中，最好使用Implicit授予，该授予是为在浏览器中运行的应用程序设计的.因为使用授权代码授予，所以后端具有客户端角色(在OAuth2方案中)，但是您希望Angular应用程序成为客户端(因为它拥有令牌).

But if you want to keep the token in your Angular application, it's better to use the Implicit grant, which is designed for applications running in a browser. Because using the Authorization code grant, your backend has the role of client (in OAuth2 scheme), but you want the Angular application to be the client (since it holds the token).

这篇关于服务器端Webapp的Google Oauth2的CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！