Django本地部署时Google/Facebook认证遇Error 400: redirect_uri_mismatch问题

错误现象 #

测试本地Django网站的Google认证时，出现以下错误：

Access blocked: This app’s request is invalid
You can’t sign in because this app sent an invalid request. You can try again later, or contact the developer about this issue. Learn more about this error
If you are a developer of this app, see error details.
Error 400: redirect_uri_mismatch

Facebook认证也出现类似的重定向URI不匹配问题。

现有配置信息 #

Google开发者控制台 #

• 授权JavaScript来源：

http://localhost:8000
http://127.0.0.1:8000
http://localhost:3000
http://localhost

• 授权重定向URI：

http://127.0.0.1:8000/
http://localhost:8000
http://localhost:3000
http://localhost

Django项目配置 #

settings.py

MIDDLEWARE = [
    'social_django.middleware.SocialAuthExceptionMiddleware',
]

# context_processors
'social_django.context_processors.backends',
'social_django.context_processors.login_redirect',

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

LOGIN_URL = '/'
LOGIN_REDIRECT_URL = '/'
LOGOUT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = '****'    # 保密隐藏
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = '****'    # 保密隐藏

urls.py

path('social-auth/', include('social_django.urls', namespace='social'))

模板代码

<a href="{% url 'social:begin' 'google-oauth2' %}"><i class="fab fa-google"></i></a>

新手友好解决方案 #

针对Google认证的核心修复 #

错误根源是Google开发者控制台配置的重定向URI，和Django-social-auth实际发送的回调地址不一致。

• 添加正确的重定向URI到Google控制台
  Django-social-auth处理Google认证的回调地址是：http://localhost:8000/social-auth/complete/google-oauth2/ 和 http://127.0.0.1:8000/social-auth/complete/google-oauth2/
  打开Google开发者控制台，找到你的OAuth 2.0客户端ID，在「授权重定向URI」里添加这两个完整地址，注意保留结尾的斜杠。

• 本地测试的额外配置（可选但保险）
  在settings.py里添加一行，确保本地HTTP请求能正常重定向：

  SOCIAL_AUTH_REDIRECT_IS_HTTPS = False
  

• 清除浏览器缓存或用无痕模式测试
  浏览器可能缓存了旧的重定向地址，清除缓存后再测试，或者直接用无痕窗口打开网站。

针对Facebook认证的通用修复 #

原理和Google完全一致：

• 打开Facebook开发者平台的应用配置页，在「Valid OAuth Redirect URIs」中添加Django-social-auth的Facebook回调地址：http://localhost:8000/social-auth/complete/facebook/ 和 http://127.0.0.1:8000/social-auth/complete/facebook/
• 同样注意地址的完整性和结尾斜杠。

内容的提问来源于stack exchange，提问作者Mossaddak