使用Google Identity Service创建注册按钮，弹窗无内容显示求助

问题描述 #

点击「使用Google注册」按钮后，弹窗内无任何内容显示，已排查过客户端ID来源限制相关问题，但仍未解决。当前使用Django作为后端，相关配置及代码如下：

前端代码 #

<html>
<head>
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
  <div id="g_id_onload" data-client_id="client_id" data-context="signup" data-ux_mode="popup" data-login_uri="http://localhost:8000/users/register/signinWithGoogle" data-nonce="" data-auto_prompt="false">
  </div>

  <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signup_with" data-size="large" data-logo_alignment="left">
  </div>
</body>
</html>

Django settings.py配置 #

SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"

CSRF_COOKIE_SECURE = True
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SAMESITE = 'None'
SESSION_COOKIE_SAMESITE = 'None'

可能原因与修复步骤 #

1. Google Cloud客户端ID授权配置错误 #

这是最常见的原因，必须确保授权来源和重定向URI完全匹配当前环境：

• 登录Google Cloud控制台，找到对应OAuth 2.0客户端ID
• 授权JavaScript来源必须添加http://localhost:8000（注意协议、域名、端口都不能错）
• 授权重定向URI必须添加http://localhost:8000/users/register/signinWithGoogle，和前端data-login_uri完全一致
• 保存配置后等待5-10分钟，Google的配置生效有延迟

2. Django安全配置与本地开发环境冲突 #

当前配置强制Cookie使用HTTPS，但本地开发用的是HTTP，导致Cookie无法正常传递，影响弹窗加载：

• 修改settings.py，本地开发时暂时关闭HTTPS Cookie强制：

  CSRF_COOKIE_SECURE = False
  SESSION_COOKIE_SECURE = False
  

• 调整Referrer策略，确保Google能识别来源：

  SECURE_REFERRER_POLICY = "origin"
  

3. 前端代码细节遗漏 #

• data-nonce字段为空，建议生成随机字符串填入（比如用JS生成：Math.random().toString(36).substring(2)），避免潜在验证问题
• 替换data-client_id中的占位符为你实际的Google客户端ID，不要保留client_id字符串

4. 查看浏览器控制台报错 #

按F12打开开发者工具，切换到「控制台」标签，点击按钮后查看具体错误信息：

• 如果提示「The given origin is not allowed...」，说明Google授权配置未生效或填错
• 如果有Cookie相关报错，说明Django的Cookie配置有问题

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