如何解决本地主机的“idpiframe_initialization_failed”？答案

【问题标题】：How to solve "idpiframe_initialization_failed" for localhost?如何解决本地主机的“idpiframe_initialization_failed”？
【发布时间】：2018-09-27 04:14:39
【问题描述】：

这是我的初始化代码：

            function HandleGoogleApiLibrary() {
                // Load "client" & "auth2" libraries
                gapi.load('client:auth2', {
                    callback: function () {
                        // Initialize client & auth libraries
                        gapi.client.init({
                            apiKey: 'My API Key',
                            clientId: 'My Client ID',
                            scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me'
                        }).then(
                            function (success) {
                                console.log("Yaaay");
                            },
                            function (error) {
                                console.log("Nope");
                                console.log(error);
                            }
                        );
                    },
                    onerror: function () {
                        // Failed to load libraries
                    }
                });
            }

这给了我以下错误消息：

details: "Not a valid origin for the client: http://127.0.0.1 has not been whitelisted for client ID 388774754090-o7o913o81ldb2jcfu939cfu36kh9h0q6.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
error: "idpiframe_initialization_failed"

我的应用程序尚未投入生产，因此我使用 localhost 进行开发。问题是，在每个堆栈溢出/引用上，我发现他们已经指定在Authorised JavaScript origins 和Authorised redirect URIs 上我必须使用http://localhost 而不是http://127.0.0.1。如果我这样做，如果我尝试登录，则会收到该错误和 Permission denied to generate login hint for target domain.。

如果我在两者上都使用http://127.0.0.1，我在初始化时不会得到idpiframe_initialization_failed，但是当我尝试登录时会得到相同的权限被拒绝。

没有意义，没有其他方法可以指定本地主机，我就是无法使用 API。

【问题讨论】：

看来你在google api 控制台中启用了api 限制（带有HTTP 引用限制的API 密钥），进入google 开发者控制台并将127.0.0.1 添加到允许的域或ip
不，我已经检查过了。在“应用程序限制”下没有限制（无）。此外，在 OAuth 同意屏幕上，在“授权域”中，我不能输入 127.0.0.1 或 localhost，它说：无效域：必须是顶级私有域。
你能检查一下这是否是导致问题的原因developers.google.com/identity/sign-in/web/…
不，不阻止 cookie。我正在尝试使用xip.io。
另请参阅 stackoverflow.com/a/44488113/27614 - 您可以通过重新添加一组新的 OAuth 凭据来解决此问题，使用与之前相同的 http://localhost[:PORT]。

标签： javascript google-api google-oauth

【解决方案1】：

就我而言，这是两个方面的问题。

需要将来源添加到谷歌控制台。

原点是什么样子的？ http://localhost
清除缓存。

这有时不起作用，您可能会开始认为这不是缓存问题。详情如下。

1.如何将您的来源添加到谷歌控制台？

去这里：https://console.cloud.google.com/apis/credentials
在顶部选择您需要的项目。
找到 OAuth 2.0 client IDs 并在此部分中选择（或创建）一个客户端 ID。
在打开的窗口中找到Restrictions -> Authorized JavaScript origins 部分并添加http://localhost 或http://localhost:8000（指定您需要的端口）。

2。清除缓存。

如果第 1 步没有解决问题，则需要清除缓存。

如果您只想删除localhost 缓存，在Chrome 中您可以通过以下方式进行：

打开设置->更多工具->开发者工具；
右键单击重新加载按钮 -> 清空缓存和硬重新加载。

有时缓存清除不起作用。请确定，这仍然是缓存问题，请使用隐身模式打开浏览器并再次检查您的网站。

【讨论】：

对我不起作用。我已经尝试了此页面中提供的所有解决方案。可能是什么问题？

【解决方案2】：

为了拯救未来的读者，我通过在客户端 ID 创建（凭据/开发人员控制台）中的“授权的 Javascript 起源”上准确输入 http://www.localhost 来成功地从本地主机进行身份验证。完全不明显和反用户，但 http://localhost 或 http://127.0.0.1 都不起作用。

【讨论】：

它不适合我说“无效的来源：必须以公共顶级域（例如 .com 或 .org）结尾。”

【解决方案3】：

对我来说，问题是通过禁用 AdBlocker 解决的

【讨论】：