在服务器上交换令牌代码时的 Google OAuth2 redirect_uri_mismatch答案

【问题标题】：Google OAuth2 redirect_uri_mismatch when exchanging the code for token on the server在服务器上交换令牌代码时的 Google OAuth2 redirect_uri_mismatch
【发布时间】：2020-05-08 11:53:25
【问题描述】：

尽管这已经涵盖了相当多的内容，但一段时间以来，我仍在努力配置我的网站以正确使用 Google Oauth 进行身份验证。当我尝试在服务器上交换身份验证令牌的代码时，我收到“redirect_uri_mismatch”错误。我想从根本上理解这一点。前端通过此请求成功获取离线代码：

https://accounts.google.com/o/oauth2/iframerpc?action=issueToken&response_type=token%20id_token&login_hint=AXXXXXXXX&client_id=XXX.apps.googleusercontent.com&origin=http%3A%2F%2Flocalhost%3A8000&scope=openid%20profile%20email&ss_domain=http%3A%2F%2Flocalhost%3A8000

然后将代码转入后端。后端发出此请求并失败：

send: b'POST /o/oauth2/token HTTP/1.1\r\nHost: accounts.google.com\r\nUser-Agent: python-requests/2.22.0\r\nAccept-Encoding: gzip, deflate\r\nAccept: application/json\r\nConnection: keep-alive\r\nContent-Type: application/x-www-form-urlencoded\r\nContent-Length: 294\r\n\r\n'
send: b'grant_type=authorization_code&code=XXXX&client_id=XXXX.apps.googleusercontent.com&client_secret=XXXX&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2F'
reply: 'HTTP/1.1 400 Bad Request\r\n'
header: Content-Type: application/json; charset=utf-8
header: Vary: Origin
header: Vary: X-Origin
header: Vary: Referer
header: Content-Encoding: gzip
header: Date: Wed, 22 Jan 2020 10:06:01 GMT
header: Server: ESF
header: Cache-Control: private
header: X-XSS-Protection: 0
header: X-Frame-Options: SAMEORIGIN
header: X-Content-Type-Options: nosniff
header: Alt-Svc: quic=":443"; ma=2592000; v="46,43",h3-Q050=":443"; ma=2592000,h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000
header: Transfer-Encoding: chunked
Authentication process canceled; ; {'error': 'redirect_uri_mismatch', 'error_description': 'Bad Request'}
WARNING Bad Request: /api/v1/login/social/knox_user/google-oauth2/
WARNING "POST /api/v1/login/social/knox_user/google-oauth2/ HTTP/1.1" 400 0

我已将“http://localhost:8000/”添加到 Google 控制台中的“授权重定向 URI”中。授权的 JavaScript 来源也是正确的：“http://localhost:8000”。

我的堆栈是“react-google-login”：前端的“^5.0.7”。我非常喜欢 iframe 弹出登录流程。这可以很好地获取离线身份验证代码。

在服务器端，我使用 rest-social-auth==3.0.0、social-auth-app-django==3.1.0 和 social-auth-core==3.2.0 进行此设置：

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'XXX.apps.googleusercontent.com'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'XXX'
SOCIAL_AUTH_LOGIN_REDIRECT_URL = 'http://localhost:8000/'
SOCIAL_AUTH_LOGIN_ERROR_URL = 'http://localhost:8000/'
SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = ['email', 'profile', 'openid']

AUTHENTICATION_BACKENDS = [
    'social_core.backends.google.GoogleOAuth2',
    'django.contrib.auth.backends.ModelBackend',
]

...
urlpatterns = [
    path('api/v1/login/', include('rest_social_auth.urls_knox')),

任何帮助将不胜感激。

【问题讨论】：

如果将origin 参数重命名为redirect_uri 会发生什么？
将尝试以某种方式模拟这一点。该请求是通过gapi完成的，所以我需要破解它或在邮递员中模拟它。一旦我得到一些结果，就会在这里发布。

标签： google-oauth google-signin python-social-auth

【解决方案1】：

您正在使用 response_type='token id_token' 这是（过时的）隐式流程。我看不到您将如何收到代码值。尝试使用 response_type='code'。

如果您正在构建单页应用程序，则 STANDARD 消息是来自my blog post 的第 4 步和第 7 步。

我已经有一段时间没有使用谷歌了，所以他们的解决方案总是可能会有所不同。

【讨论】：