给定的客户端 ID (GSI) 不允许使用给定的来源

Question

我正在重构我的“使用 Google 登录”，将其替换gapi为gsion http://localhost:8080。

声称如何才能gapi毫无问题地工作。gsiThe given origin is not allowed for the given client ID

加皮

<script src="https://apis.google.com/js/api:client.js" async defer></script>

<script src="https://apis.google.com/js/api:client.js" async defer></script>

通用汽车公司

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

window.gapi.load('auth2', () => {
  const auth2 = window.gapi.auth2.init({ client_id })
  auth2.signIn().then(console.log)
})

错误如下：The given origin is not allowed for the given client ID

Answer 1

我添加了没有端口的源来解决这个问题。

关键点：将http://localhost和http://localhost:<port_number>添加到授权 JavaScript 来源框中以进行本地测试或开发。

来源：https ://developers.google.com/identity/gsi/web/guides/get-google-api-clientid

Answer 2

Referrer-Policy如果您的服务器已设置为，也可能会发生这种情况no-referrer。Google 需要此 HTTP 标头，否则对https://accounts.google.com/gsi/button和https://accounts.google.com/gsi/iframe/select的请求将响应 400 并产生该错误

如果使用头盔 - 以下配置将修复请求

referrerPolicy: {
  policy: 'strict-origin-when-cross-origin'
}

有关推荐人策略的 MDN 文章

Answer 3

我遇到了同样的问题。由于某种原因，这里讨论的解决方案都不适合我。我通过将这些添加到 Google 云控制台中的授权来源解决了这个问题

• http://localhost
• http://localhost:<端口号>

Answer 4

来自 @Behzad 的评论值得它自己的答案：

由于某种原因，127.0.0.1 将无法使用，即使您在 Google 仪表板中注册也是如此。

但一旦你使用localhost，它就会开始工作。

我正在使用 Live Server for VSCode，并且必须查找如何更改它所服务的主机。

转到“代码”>“首选项”>“设置”>“实时服务器配置”>“主机”，并将其更改为本地主机。

然后确保 localhost 已在您的 Google 仪表板中注册：

Answer 5

在测试此问题时找到了一种解决方案，因为尽管将站点域添加到了Authorised JavaScript origins：

加载资源失败：服务器响应状态为 403 ()

[GSI_LOGGER]：给定的客户端 ID 不允许给定的源。

如果您使用的域名不是localhost，请确保您通过以下方式访问您的网站https（如果证书尚不可用，则使用自签名证书/如果在非生产环境中进行测试）。

Answer 6

根据他们的文档，它说；

执行本地测试或开发时，必须将 http://localhost 和 http://localhost:<port_number> 添加到“授权 JavaScript 来源”框中。使用 http 和 localhost 时，Referrer-Policy 标头还必须设置为 no-referrer-when-downgrade。

根据您的情况，您似乎需要添加no-referrer-when-downgrade渲染按钮的指令