如何在基于Django all-auth的Web应用中合规使用Google登录按钮

以下是针对开发及生产环境的分步配置方案，同时保留原有登录认证流程：

一、修正Settings.py配置（核心错误点修复） #

你混淆了django-allauth与django-social-auth的配置变量，需将Google凭据移至django-allauth的标准配置项中，同时统一Client ID：

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'APP': {
            'client_id': '你的Google Client ID',  # 必须与模板、Google控制台的ID完全一致
            'secret': '你的Google Client Secret',
            'key': ''
        },
        'SCOPE': [
            'profile',
            'email'  # 建议添加，便于账号关联与后续功能扩展
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        },
        'OAUTH_PKCE_ENABLED': True,  # 开启PKCE，符合Google最新安全规范
    }
}

# 删除以下无效配置（属于django-social-auth，all-auth不读取）
# SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = '564.....apps.googleusercontent.com'  
# SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'GOC....'

# 保留原有其他配置
SITE_ID = 1
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
LOGIN_URL = '/accounts/google/login/'
ACCOUNT_MAX_EMAIL_ADDRESSES = 1 
ACCOUNT_EMAIL_VERIFICATION = 'none'

二、调整登录模板代码 #

移除Google按钮的无效form包裹，动态生成回调地址以适配开发/生产环境：

{% if provider.name == 'Google' %}
<div id="g_id_onload"
     data-client_id="{{ socialaccount.provider.app.client_id }}"
     data-context="signin"
     data-ux_mode="redirect"
     data-login_uri="{{ request.build_absolute_uri('/accounts/google/login/callback/') }}"
     data-auto_prompt="false">
</div>

<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>
{% else %}
<form method="post">
  {% csrf_token %}
  <button class="btn btn-outline-info" type="submit">{% translate "Sign In" %}</button>
</form>
{% endif %}

<script src="https://accounts.google.com/gsi/client" async defer></script>

三、Google Cloud控制台配置 #

1. 进入「API和服务」→「凭据」，找到你的OAuth 2.0客户端ID
2. 添加已授权的重定向URI：
   • 开发环境：http://127.0.0.1:8000/accounts/google/login/callback/
   • 生产环境：https://你的域名/accounts/google/login/callback/
3. 确保已启用Google Identity Services相关API（默认已启用）

四、环境测试与验证 #

开发环境 #

1. 重启Django开发服务器，清除浏览器缓存
2. 点击Google合规按钮，验证是否跳转至Google账号选择页，完成登录后返回应用首页
3. 测试其他社交账号登录按钮，确认原有流程未被破坏

生产环境 #

1. 确保网站使用HTTPS（Google要求生产环境必须使用HTTPS）
2. 替换域名后，再次验证Google控制台的重定向URI是否匹配
3. 建议通过环境变量存储Client ID与Secret，避免硬编码泄露：

   import os
   SOCIALACCOUNT_PROVIDERS = {
       'google': {
           'APP': {
               'client_id': os.environ.get('GOOGLE_CLIENT_ID'),
               'secret': os.environ.get('GOOGLE_CLIENT_SECRET'),
               'key': ''
           },
           # 其他配置...
       }
   }
   

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