Question

我正在尝试在我的django应用中实施google oauth2身份验证。我按照docs按照所有步骤进行了操作。

在浏览器地址栏上，如果我浏览此https://foo.bar.net/api/v1/auth/login/google-oauth2/此网址，则会通过Google正确验证，并将google-auth-token返回到上述redirect-url并获取auth-token并转换为它是一个普通的令牌，然后以json格式发送给用户或前端。

但如果我尝试从我的js代码向上述url发出GET请求，则会显示

Reason: CORS header 'Access-Control-Allow-Origin' missing

前端的完整回溯看起来像，

GET https://foo.bar.net/api/v1/auth/login/google-oauth2/ 302 Found 718ms    
polyfil...ndle.js (line 7507)
GET https://accounts.google.com/o/oauth2/auth?client_...DW&response_type=code&scope=openid+email+profile 200 OK
Login Failed Response { _body=Event error,  status=0,  ok=false,  more...}
main.bundle.js (line 367)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/o/oauth2/auth?client_id=kguygvh868697-khgkhvkgvkgkgv.apps.googleusercontent.com&redirect_uri=https://foo.bar.net/api/v1/auth/complete/google-oauth2/&state=Cbms1QhSQVzjO3xkjhkyuu&response_type=code&scope=openid+email+profile. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

我搜索了谷歌，提示我安装djang-CORS-headers。我已经安装并配置了上面的包。但是出现了同样的错误。

settings.py的一部分看似，

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'oauth2_provider.middleware.OAuth2TokenMiddleware',
]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'oauth2_provider',
    'corsheaders',
    'rest_framework_swagger',
]

CORS_ORIGIN_ALLOW_ALL = True

实际上，前端（ang）和后端（django）都有两个独立的项目。我同意ajax问题。所以我让google oauth网址在另一个窗口中打开。

在后端，我已经完成了获取服务器访问令牌并将其与我们的应用程序的访问令牌交换。目前我正在以json格式返回令牌详细信息。所以这个json将显示在新打开的窗口中。但不知道如何

从窗口获取令牌并将其存储在浏览器的临时存储中。
一旦出现细节，关闭新窗口。
通过在请求标头中传递令牌信息，重定向到用户/个人资料页面。

不知道这个oauth流程是否正确。而且我也不希望完整的oauth流程在js部分（oauth隐式流程）。请指导我正确的方向。

Answer 1

问题是前端不应该使用授权代码流，这里需要使用隐式流（https://developers.google.com/actions/identity/oauth2-implicit-flow）而不是授权代码流（https://developers.google.com/actions/identity/oauth2-code-flow）

我想你也错过了提及标题

  CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

Django CORS Access-Control-Allow-Origin缺失

1 个答案: