为什么在 Django 中出现 Google-Auth(Google Identity) 空白弹出窗口？答案

【问题标题】：Why Google-Auth(Google Identity) Blank popup in Django?为什么在 Django 中出现 Google-Auth(Google Identity) 空白弹出窗口？
【发布时间】：2022-07-05 01:46:27
【问题描述】：

我的 Google 身份验证卡在弹出身份验证流程中。一键式身份验证工作得很好，但按钮<div id="g_id_signin"></div> 不行。我点击它，弹出窗口打开，但它仍然空白，没有任何进展。

<script>
   function handleCredentialResponse(response) {
     console.log("Encoded JWT ID token: " + response.credential);
     ...
    }
   window.onload = function () {
     google.accounts.id.initialize({
       client_id: "531144-------",
       callback: handleCredentialResponse
     });
     google.accounts.id.renderButton(
       document.getElementById("g_id_signin"),
       { theme: "outline", size: "large" }  // customization attributes
     );
     google.accounts.id.prompt(); // also display the One Tap dialog
   }
</script>
<div id="g_id_signin"></div>

我在授权重定向 URI 和重定向中添加了所有域、localhost。但我仍然无法让弹出窗口填充并完成身份验证流程。任何帮助表示赞赏。

此时我在 FIREFOX 中遇到的错误：

未捕获的类型错误：window.opener 为空李https://ssl.gstatic.com/_/gsi/_/js/k=gsi.gsi.en.i....O/am=wg/d=1/rs=AF0...w/m=credential_page_library:291 米https://ssl.gstatic.com/_/gsi/_/js/k=gsi.gsi.en.i.....O/am=wg/d=1/rs=AF0...w/m=credential_page_library:29

在 Chrome 中：

未捕获的类型错误：无法读取 null 的属性（读取 'postMessage'）在 li (m=credential_page_library:291:151)

【问题讨论】：

标签： javascript django google-authentication google-identity

【解决方案1】：

您必须在 settings.py 中将 SECURE_CROSS_ORIGIN_OPENER_POLICY 设置为 "same-origin-allow-popups"。

参考：https://github.com/google/google-api-javascript-client/issues/796#issuecomment-1118136612

【讨论】：