用于服务器端 Web 应用的 Google Oauth2 的 CORS 问题 [英] CORS issue with Google Oauth2 for server side webapps

问题描述

我在 SO 上提到了这个问题:

我的问题是:

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

如果这是相关的，我正在做有角度的获取请求，例如:

loginWithGoogle(){console.log("使用 oauth2 登录");让 oauthUrl = "http://localhost:8300/auth/oauth/test";返回 this.http.get(oauthUrl).订阅(水库=>{this.onSuccess(res);}, 错误 =>{this.onFailure(错误);});}

编辑

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

解决方案

当您使用授权码授权(OAuth2 for backend apps - &response_type=code)时，您必须将浏览器重定向到/auth 端点 - 你不能为此使用 XHR.用户在认证后会被重定向回来.

重定向到 /auth 端点后，用户需要在地址栏中看到该页面来自 Google(可信来源)，并且 Google 可能需要进行更多重定向以验证用户并显示同意页面.所以使用 XHR 是不可能的.

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

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

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.

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)

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:

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.

My questions are :

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);
        });

}

EDIT

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.

解决方案

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.

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.

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.

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).

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