Google API：不是客户端的有效来源：URL 尚未被列入客户端 ID“ID”的白名单答案

【问题标题】：Google API: Not a valid origin for the client: url has not been whitelisted for client ID "ID"Google API：不是客户端的有效来源：URL 尚未被列入客户端 ID“ID”的白名单
【发布时间】：2017-10-13 08:32:37
【问题描述】：

我需要帮助。我没有找到我的问题的答案。我尝试谷歌搜索并尝试在其他方面询问，但我从未找到答案。

我正在使用谷歌 API（Youtube 数据 API），我使用谷歌方面的示例代码，我对此非常确定。尝试启动脚本时出现错误：

details: "Not a valid origin for the client: "MyURL" has not been whitelisted for client ID "MyID". 请转到 https://console.developers.google.com/ 并将此来源列入您项目的客户端 ID 的白名单。"

错误：“idpiframe_initialization_failed”

我将我的网站列入白名单的问题已被接受。我不知道出了什么问题。我应该怎么做才能将我的域“列入白名单”（已列入白名单）

还有一个问题。我之前没有搜索过这个问题的答案。

我认为我可以使用本地主机上的代码，我认为我必须将我的本地主机地址或类似的东西列入白名单。但是白名单不起作用。

梦想玩家

【问题讨论】：

仍然面临同样的问题。有没有其他方法可以解决这个问题？
就我而言，使用http 会导致问题。切换到https 解决了这个问题。
对于已经在授权域中添加域的人，只需清除您网站的缓存，如果所有数据设置正确，它肯定会工作。

标签： google-api youtube-data-api whitelist

【解决方案1】：

我清除了缓存。然后开始工作。

在 Chrome 中：设置 --> 高级 --> 清除浏览数据 --> 缓存的图像和文件

【讨论】：

谢谢你，我做的一切都是正确的，但我遇到了麻烦。
这在我的网络应用程序中使用谷歌登录时对我有用。谢谢！
几个月前发生这种情况时，我已经为你投了一次票，但你应该得到另一个……+1
这个答案对我没有帮助。
有很多请求正在进行。我认为其中一个正在被浏览器缓存，因此它不知道您在 API 控制台中所做的更改。但我认为在浏览器开发工具打开时完全禁用缓存更容易。大多数时候，“网络”选项卡中有一个选项（复选框）。启用后刷新页面就足以使其工作。

【解决方案2】：

遇到了同样的问题，我是这样解决的：

在您的项目中激活 Analytics 和 Google Plus API
创建新的 OAUTH 2.0 客户端凭据
- 在Restrictions部分下添加Authorized Javascript Origins
使用新的客户端 ID。

享受吧。

【讨论】：

天啊，非常感谢！它为我工作。我的问题之一是我使用了客户端密钥而不是客户端 ID。
如果您已经为不同的端口创建了 oAuth，我应该澄清一下；出于某种原因，您不能重新编辑端口以使用不同的端口。我基本上为新端口“创建了另一个凭据”。显然，这将创建另一个令牌；所以只需抓住它并使用它。您可以将这两个令牌保留在控制台中。
谢谢！这是反直觉的，但它是正确的答案。您不能只将所需的 API（这也不明显）添加到现有密钥中，这太疯狂了。为密钥重新创建整个配置很痛苦。
您是说要激活 Googe Plus API。但是 Youtube API 和 Google Plus API 之间的关系是什么。
我不太了解这里的相关性，但这是唯一对我有用的东西（显然还有其他人）。

【解决方案3】：

清除缓存对我有用

【讨论】：

一旦你这样做了，别忘了再次登录到stackoverflow来投票

【解决方案4】：

尝试清除缓存，这可能是缓存/本地存储的问题。

【讨论】：

【解决方案5】：

对我来说，它无需添加任何额外的 API（如谷歌分析）即可工作。只需确保添加完整的客户端 ID 并在隐身窗口中打开应用程序以避免保存缓存。如果已经在常规窗口中打开了应用程序， 1-关闭应用程序打开的所有选项卡。 2-清除缓存和cookie。在 chrome 中，它在设置 -> 密码和表单 -> 清除浏览数据 -> 高级（选项卡） -> 选择 a）Cookie 和其他站点数据和 b）缓存的图像和文件 3- 打开一个全新的隐身窗口并测试您的应用。

【讨论】：

不需要关闭所有标签，只需要打开一个隐身窗口即可。

【解决方案6】：

文档说不要忽略两个关键步骤（“在阅读说明时，重要的是不要忽略这两个关键步骤：启用 Analytics API 这对我有用：

启用分析 API
返回您的凭据，删除以前的 OAuth 2.0
现在创建具有正确来源的新 OAuth

【讨论】：

【解决方案7】：

我也按照快速入门示例中的说明进行操作，遇到了同样的问题，尝试了此处建议的所有解决方案均无济于事，尝试了我能想象到的所有方法，但没有帮助。

终于看到我复制了CLIENT_ID，末尾有一个空格。

  var CLIENT_ID = '44********-*****************.apps.googleusercontent.com ';

一旦我解决了这个问题（删除了多余的空间），它就起作用了。

我猜在这种情况下错误信息不是很精确。希望这会有所帮助。

【讨论】：

【解决方案8】：

我只是犯了同样的错误：尝试了official quickstart example 并收到了与您相同的错误消息。

这相当令人困惑，因为该示例比我个人需要的要复杂得多：它使用 OAuth 进行用户登录，而不仅仅是 API key。如果您像我一样，不想使用 OAuth，只想检索一些 Youtube 数据，没有任何特权操作（例如，如果您只想搜索或列出视频、频道或播放列表），这个例子是给你。

解决方案很简单，只需将clientId 而不是clientId 提供给gapi.client.init（链接：API docs），如下所示：

const apiKey = '<my API key>';

function gooApiInitClient() {
  // Array of API discovery doc URLs for APIs used by the quickstart
  const discoveryDocs = [
    "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"
  ];

  return gapi.client.init({
    apiKey,
    discoveryDocs
  });
}

// see: https://developers.google.com/api-client-library/javascript/reference/referencedocs
gapi.load('client', {
  callback: function() {
    // we now have gapi.client! initialize it.
    gooApiInitClient().
      then(() => {
        // we can start using the API here!
        // e.g. gapi.client.youtube.videos.list(...);
      }).then(results => { 
        // use results here....
      });
  }
});

【讨论】：

我建议简化代码 sn-p 以使这个答案更好。 init 调用只有 4 行，而这确实是唯一改变的地方。其他的东西没有那么有用。
清理了一下 :)

【解决方案9】：

我也试图让示例工作（来自）https://developers.google.com/drive/api/v3/quickstart/js

即使将 ip 地址添加到 WebAPI，它也不断失败。

但您必须将 localhost:8000（不仅仅是 127.0.0.1:8000）添加到您的 OAUTH，如下所示：

浮动在 OAUTH 客户端文本上，它将成为一个链接。单击该链接，您可以添加包含端口的 URI。我的已经有 127.0.0.1:8000 但不是 locahost:8000。

这是有趣/奇怪的事情。当我 ping localhost 时，我看到：

我认为这是 IPV6 的事情。

无论如何，如果我 ping 127.0.0.1，我会看到预期的响应（通过 IPV4）

也许这是一个红鲱鱼，但我不确定在 OAUTH 中输入的值是否受到它的影响。

我什至注意到这一点的原因是，当我按照教程中的指示启动 Python Web 服务器时，我看到以下内容并认为这很奇怪：

只有在 OAUTH 中添加 localhost:8000 URI 后它才能工作，但添加后它确实工作正常。

【讨论】：

【解决方案10】：

正如许多人在这里指出的那样，这只是一个浏览器缓存问题。无需创建新密钥，甚至无需清除缓存。只需在新的浏览器隐身（匿名）窗口上重试，它应该可以正常工作。

【讨论】：

【解决方案11】：

我在尝试登录我的网络应用时遇到了类似的问题。我所做的只是从 Cloud Platform 重新创建 OAuth 客户端 ID 凭据。当我这样做并使用新的客户端 ID 时，一切正常。不知道以前是什么问题，但现在完全正常。

如果有人从 Google 或其他渠道找到此内容，请尝试一下。它可能只是工作。它可以解释 Ezra Obiwale 的答案，因为这实际上是在添加几个 API 之后创建一个新的客户端 ID。

如果有人知道为什么会发生这种情况，我们将不胜感激。

【讨论】：

【解决方案12】：

Create authorization credentials

任何使用 OAuth 2.0 访问 Google API 的应用程序都必须具有向 Google 的 OAuth 2.0 服务器识别应用程序的授权凭据。以下步骤说明了如何为您的项目创建凭据。然后，您的应用程序可以使用凭据访问您为该项目启用的 API。

转到Credentials page。
单击创建凭据 > OAuth 客户端身份证。
选择 Web 应用程序类型。
填写表格。使用 JavaScript 发出授权的 Google API 请求的应用程序必须指定授权的 JavaScript 来源。源标识您的应用程序可以从哪些域向 OAuth 2.0 服务器发送请求。

【讨论】：

【解决方案13】：

一个 Tap Google chrome 身份验证不会显示给我的所有域，所以

我关注这本书：

https://developers.google.com/identity/one-tap/web/guides/features

这个问题的总结：

将您的所有域和子域添加到： https://console.developers.google.com/apis/credentials 编辑或创建：

OAuth 2.0 客户端 ID ->

Web 客户端（由 Google 服务自动创建）（编辑此行）

在此处添加域和子：

授权的 JavaScript 来源

URI

在此之后，一键登录开始显示登录用户在 Chrome 浏览器上注册的帐户。

【讨论】：

【解决方案14】：

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

脚本必须在标签<head></head>

就我而言，我在标签</main> 之后加上了，所以它失败了。然后我尝试在标签<head>中写入，它工作！

=== 正确的是

    <!DOCTYPE html>
    <html lang="vi">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    <meta name="google-signin-client_id" content="APP_CODE.apps.googleusercontent.com">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
    </head>
    <body>
    <main>
<div class="g-signin2" data-onsuccess="onSignIn"></div>    
    </main>
    <script>
        function onSignIn(googleUser) {...}
...

【讨论】：

【解决方案15】：

我遇到了同样的问题 - 我的解决方案是进入 API Manager 并启用 Analytics API。不知道是什么问题，但这似乎已经解决了！

【讨论】：

我启用了 Analytics API，但没有任何改变。 :C

【解决方案16】：

我认为这与缓存有关，尝试转到浏览器并清除缓存，尝试：在 chrome 中，> 设置 > 高级 > 清除浏览数据：>：缓存的图像和文件。

【讨论】：

【解决方案17】：

它无法工作的原因之一是某些client ID的登录次数超过了（100）。

您可以访问 google API console page 并创建新的 Oauth2 客户端凭据（记得在 Authorized Javascript Origins 下添加您的应用程序 URL）然后使用它。

【讨论】：

【解决方案18】：

我也遇到了同样的问题，直到我意识到当我复制 client_ID 时，我的文件中有空格，所以我从字符串中删除了空格，现在一切正常。

【讨论】：

【解决方案19】：

在我的本地主机上使用 react-social-login 使用 google 登录时，我遇到了同样的问题。在白名单来源中，我们必须提供http://localhost:3000 才能使其工作。

【讨论】：

【解决方案20】：

使用以下最新方式为客户端更新有效来源：

转到https://console.developers.google.com/
点击启用 APIS 和服务 链接
添加 Google Analytics API 并返回主页。
您可以在主页中看到添加的 API 列表，如下图所示
点击左侧菜单中的凭证链接
点击 OAuth 客户端，如果它不可用，请使用 CREATE CREDENTIAL 按钮创建
添加 authorized javascript origins 链接，如下所示。
最后点击保存按钮
然后，在 Chrome 中：Settings --> Advanced --> Clear browsing data --> Cached images and files（为了避免旧缓存导致跨源问题）

希望对大家有所帮助

【讨论】：