Django中Google登录按钮（GIS）遭遇CSRF验证失败求助

问题根源分析 #

• 手动编写GSI登录按钮HTML时，redirect模式下Google不会自动携带Django要求的CSRF令牌，导致回调时验证失败
• CSRF_TRUSTED_ORIGINS配置错误：添加了无关的Google地址和本地回调路径，该配置仅需指定你的前端站点源，不需要包含第三方服务或内部路径

修复步骤 #

1. 修正settings.py中的CSRF配置 #

将CSRF_TRUSTED_ORIGINS改为仅保留你的站点源，删除多余条目：

CSRF_TRUSTED_ORIGINS = [
    'http://localhost:8000',
    # 若使用HTTPS，需添加对应的https://localhost:8000
]

注：SECURE_REFERRER_POLICY和SECURE_CROSS_ORIGIN_OPENER_POLICY的配置无需修改，它们是解决origin问题的正确设置。

2. 使用django-allauth内置标签渲染美观的Google登录按钮 #

无需手动编写GSI的HTML结构，利用allauth的模板标签可直接渲染官方样式按钮，同时自动处理CSRF令牌：

步骤1：在模板顶部加载allauth标签

{% load socialaccount %}

步骤2：渲染Google登录按钮

{% providers_media_js %}
<a href="{% provider_login_url 'google' process='login' scope='profile email' auth_params='access_type=online' %}" 
   class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</a>

• {% providers_media_js %}会自动加载Google GSI的客户端脚本，无需手动引入外部<script>标签
• provider_login_url生成的链接会自动包含CSRF令牌，直接解决验证失败问题
• 保留你需要的data-*属性，完全匹配你想要的按钮样式

3. 验证Google Cloud控制台配置 #

确认授权重定向URI已正确设置为：http://localhost:8000/accounts/google/login/callback/（与你当前配置一致即可）

方案原理 #

django-allauth的provider_login_url会自动生成含CSRF令牌的登录链接，用户点击按钮时请求会携带Django所需的CSRF信息，避免手动注入令牌的复杂度；同时官方GSI脚本会识别g_id_signin类，渲染出你需要的美观按钮，实现功能与样式的双重需求。

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