Chrome 上的 Google Auth API Javascript idpiframe 初始化错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42668299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Auth API Javascript idpiframe initialization error on Chrome
提问by David Pascual
I use GSuite and I'm coding a very simple web app to use Google Auth API, and I get an exception "idpiframe_initialization_failed".
我使用 GSuite 并且我正在编写一个非常简单的网络应用程序来使用 Google Auth API，但出现异常“idpiframe_initialization_failed”。
Now I have the exact HTML as shown in the google Sample: https://developers.google.com/api-client-library/javascript/samples/samples
现在我有谷歌示例中显示的确切 HTML：https: //developers.google.com/api-client-library/javascript/samples/samples
1) I've created a project on the Google Developer Console
1) 我在Google Developer Console上创建了一个项目
2) I setup the OAUTH authorization screen
2）我设置了 OAUTH 授权屏幕
3) I've created the client ID, creating restrictions and redirection URL
3) 我已经创建了客户端 ID，创建了限制和重定向 URL
4) I've also created the API KEY
4) 我还创建了 API KEY
5) Finally I've enabled the People API, because discovery services was failing when setting the discoveryDocs parameter
5) 最后我启用了 People API，因为在设置 discoveryDocs 参数时发现服务失败
With all of these steps, When I call the gapi.client.init, it raises an exception ONLY in chrome, I cannot understand why.
通过所有这些步骤，当我调用 gapi.client.init 时，它仅在 chrome 中引发异常，我不明白为什么。
The code for initializing the API is:
初始化API的代码是：
gapi.client.init({
apiKey: 'MY_API_KEY',
discoveryDocs: ["https://people.googleapis.com/$discovery/rest?version=v1"],
clientId: 'MY_CLIENT_ID.apps.googleusercontent.com',
scope: 'profile'
}).then(function (response) {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
},function(reason){
console.log('onerror');
console.log(reason);
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
The code is running the error block, and the message is:
该代码正在运行错误块，消息为：
details: "Failed to read the 'localStorage' property from 'Window': Access is denied for this document."
error:"idpiframe_initialization_failed"
Any ideas why I'm coming into this error?
任何想法为什么我会遇到这个错误？
Thanks!
谢谢！
回答by lavleen
I encountered the same issue. After investing some time, found the reason. This error is because in chrome settings, you have the Block third-party cookies and site data option enabled.
我遇到了同样的问题。投入了一段时间后，找到了原因。此错误是因为在 Chrome 设置中，您启用了阻止第三方 cookie 和站点数据选项。
It can be resolved by disabling this option: "To find the setting, open Chrome settings, type "Content settings" in the search box, click the Content Settings button, and view the fourth item under Cookies." Uncheck the box "Block third-party cookies and site data".
可以通过禁用这个选项来解决：“要查找设置，打开Chrome设置，在搜索框中输入“内容设置”，点击“内容设置”按钮，查看Cookies下的第四项。取消选中“阻止第三方 cookie 和站点数据”框。
Hopefully this helps you in resolving your issue.
希望这有助于您解决问题。
回答by Commander Coffee
The problem is with Google's API console and how it handles creating credentials. It only seems to work when I access it through the following url https://developers.google.com/identity/sign-in/web/sign-in#before_you_beginThere is a link that lets you create your app and the OAuth credentials. When I go to the console and create it through that screen it doesn't seem to work. After trying and re-create again and test with a fresh app I found out that the URL you add to the Authorized Javascript Origins doesn't always get added.
问题在于 Google 的 API 控制台以及它如何处理创建凭据。它似乎只有当我通过以下网址访问它时才有效 https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin有一个链接可让您创建应用程序和 OAuth 凭据. 当我转到控制台并通过该屏幕创建它时，它似乎不起作用。在尝试并重新创建并使用新的应用程序进行测试后，我发现您添加到 Authorized Javascript Origins 的 URL 并不总是被添加。
If everything is good then the url should be available in the credentials page
如果一切正常，则 url 应该在凭据页面中可用
回答by mbonnin
In my case, I just had to wait a bit for Google to take the origin into account. I cannot tell exactly how long it took. I waited ~30min. I then went to sleep and it was working the following morning.
就我而言，我只需要稍等一下，Google 就会考虑来源。我无法确切地说出花了多长时间。我等了大约 30 分钟。然后我去睡觉，第二天早上它正在工作。
Edit: Ooops I just realized I was using http://and not https://. That was the actual problem.
编辑：哎呀，我刚刚意识到我正在使用http://而不是https://. 这才是真正的问题。
回答by mbonnin
I had the same problem and I searched for 3 days: Resolve " popup_closed_by_user" Go to your console.google go to your API MANAGE : Credentials:modify your credentials:
我遇到了同样的问题，我搜索了 3 天：解决“popup_closed_by_user”转到您的 console.google 转到您的 API 管理：凭据：修改您的凭据：
Authorized Javascript origin (http://localhost:port);
authorized redirect URI(http://localhost:port/auth/google/callback);
授权的 Javascript 来源 ( http://localhost:port); 授权重定向 URI( http://localhost:port/auth/google/callback);
Example:|| Authorized Javascript origin (http://localhost:4200);
authorized redirect URI (http://localhost:4200/auth/google/callback)
示例：|| 授权的 Javascript 来源 ( http://localhost:4200); 授权重定向 URI ( http://localhost:4200/auth/google/callback)
