idpiframe_initialization_failed 在 Google 从 Localhost 登录

Posted 2023-02-16

技术标签:

【中文标题】idpiframe_initialization_failed 在 Google 从 Localhost 登录【英文标题】：idpiframe_initialization_failed in Google Sign In from Localhost 【发布时间】：2018-03-10 10:07:07 【问题描述】：

我正在尝试通过关注this link 创建一个 Google 登录按钮。到目前为止，帐户选择对话框即将出现，但之后我在控制台中看不到任何结果。相反，我在页面加载时收到此错误，

"idpiframe_initialization_failed", details: "Not a valid origin for the client: http://localhos…itelist this origin for your project's client ID."
details: "Not a valid origin for the client: http://localhost has not been whitelisted for client ID 386404527657-q4ss06np5g27dllq5ds7aif42udkh7e5.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."

我已经设置了 javascript 起源 http://localhost & http://192.168.0.100:3000 我已设置重定向 URI http://localhost:8080/Callback & http://localhost:8080

这里是代码，

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"</div>
    <script>
      function onSignIn(googleUser) 
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      ;
    </script>
  </body>
</html>

如何在控制台中获取结果？

【问题讨论】：

您是否使用了您的客户 ID？是的。只是出于安全原因，我没有把它放在这里。试试this solution。它需要 www.localhost 【参考方案1】：

我遇到了这个确切的问题，this solution 为我工作。

简而言之：清除浏览器缓存。

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

【讨论】：

谢谢，清除浏览器缓存允许身份验证在 bigquery-maps-api 示例的第 3 步中工作。有时你会删除缓存，但由于某种原因它没有[完全]删除，你继续看到问题在想'这到底是什么？'。只需在隐身窗口中检查您的网站，以确保问题不在于缓存。我想补充一点，如果您使用像 Privacy Badger 这样的扩展程序来阻止 google cookie，那么什么都不会起作用。【参考方案2】：

只需清除缓存或以隐身模式打开 URL。它:)。您的问题将得到解决。

【讨论】：

根据我的经验，Google 登录通常无法在隐身模式下使用。它的工作方式与普通浏览器窗口中的工作方式相同。【参考方案3】：

对我有用的解决方案是将该应用程序的谷歌开发者控制台 api 中的来源列入白名单。

【讨论】：

【参考方案4】：

我在多个提供 Google 登录功能的网站上遇到了这个错误。我必须在“显示 cookie 和其他站点数据”中“允许”accounts.google.com cookie 才能使站点正常工作（重新加载页面后）。可能在浏览器中阻止 3rd 方 cookie 是首要原因，

【讨论】：

【参考方案5】：

对我来说，设置 > 站点设置 > Cookies > “已阻止的第三方 Cookie”必须未选中。

【讨论】：

【参考方案6】：