Google登录错误：“ popup_closed_by_user”

Question

设置并使用自己的客户端ID运行后，我将完成登录过程，并在弹出窗口中选择所需的Google帐户。

选择此选项后，登录将失败，控制台中的错误为：

err = {error: "popup_closed_by_user"}

有人可以帮我解决这个问题吗

Answer 1

尝试清除浏览器缓存。

在 Chrome 中：设置？先进的 ？清除浏览数据 ？缓存的图像和文件

Answer 2

对于那些在 2022 年面临此问题的人，您应该注意到，默认情况下，新创建的客户端 ID 现在被阻止使用旧的平台库，现有客户端 ID 不受影响。2022 年 7 月 29 日之前创建的新客户端 ID 可以设置 plugin_name 以启用 Google Platform Library。

尝试使用以下库

https://www.npmjs.com/package/@react-oauth/google

并阅读此页面： https://developers.google.com/identity/gsi/web

Google 要求新的 OAuth 客户端使用最新的库，否则旧库无法正确初始化，从而导致此错误。

另外，您可以使用之前创建的 clientID 来使用react-google-login

Answer 3

当我想使用 angular4-social-login 登录时，即使我也遇到了同样的问题。这是因为浏览器中的 cookie 和弹出设置。它将在 IE 中正常工作而不会出错。在 Chrome 设置中，转到更改 cookie 设置的内容设置并允许弹出窗口。然后清除缓存并重新加载。应用程序。

Answer 4

如果您正在使用端口对localhost进行测试，那么我们应该add port number在 google 开发者控制台中的Authorized JavaScript origins 部分，如下所示

http://本地主机:3000

希望这能解决问题。

Answer 5

2022 年反应更新！

我面临着同样的问题..经过大量的解决方法后，我发现我错过了gapi初始化！

步骤如下：

首先安装gapi脚本

npm i gapi-script

从gapi脚本导入gapi

import { gapi } from "gapi-script";

然后在App()中初始化

gapi.load("client:auth2", () => {
  gapi.client.init({
    clientId:
      "*****.apps.googleusercontent.com",
    plugin_name: "chat",
  });
});

完成这些步骤后，您的应用程序应该可以正常工作 ^_^

JS更新

我不是 100% 确定 JS 解决方法，但包括这可能适用于您的应用程序

window.gapi.load('client:auth2', () => {
        window.gapi.client.init({
            clientId: '******.apps.googleusercontent.com',
            plugin_name: "chat"
        })
})

Answer 6

我有同样的问题，在 google 开发者控制台中将端口号添加到 url 并清除当前页面的缓存后，一切正常。

Answer 7

popup_closed_by_user 出现此问题的原因是 Chrome 默认阻止所有第三方 cookie。您必须通过 chrome 设置允许第三方 cookie。

但我们不能要求客户为此允许第三方 cookie。最好的解决方案可能是您可以在后端调用 google API（验证 google 帐户），并且后端不会出现此问题。