在本地主机上使用Google登录时出现idpiframe_initialization_failed错误

Question

在本地主机上使用Google登录时出现idpiframe_initialization_failed错误

javascriptgoogle-apigoogle-oauthgoogle-signingoogle-plus-signin

49

我正在尝试按照此链接的步骤创建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 Origins为http://localhost 和 http://192.168.0.100:3000
我已设置了Redirect 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>

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

- Shihan Khan

你使用了你的客户端ID吗？<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com"> - ThdK

1

是的。由于安全原因，我只是没有在这里放置它。 - Shihan Khan

尝试这个解决方案。它需要www.localhost。 - Neo Pham

13个回答

9

只需要清除浏览器缓存或在隐身模式下打开您的URL，问题就可以解决。

- Rahul More

2

根据我的经验，在隐身模式下，Google登录通常无法正常工作。 - Brian

它的工作方式与普通浏览器窗口中的工作方式相同。 - Rahul More

由于不允许使用Cookie，因此您无法在隐身模式下使用它。 - d0rf47

9

我遇到的解决方案是在谷歌开发者控制台API中为该应用程序白名单源。

- Cliff Coulter

7

对我而言，需要进入"设置" -> "网站设置" -> "Cookie"，确保未选中"阻止第三方 Cookie"。

- Aidin

更多信息请参考 https://developers.google.com/identity/sign-in/web/troubleshooting#known_issues - Dhruv Pandey

6

我在几个提供Google登录的网站上遇到了这个错误。我需要在“显示cookie和其他网站数据”中“允许”accounts.google.com cookie，才能使该站点正常工作（重新加载页面后）。可能是浏览器阻止第三方cookie导致了这个错误。

- gergelykocse

6

文档指出不要忽视两个关键步骤（"在按照说明进行的过程中，重要的是不要忽视这两个关键步骤：启用分析 API。以下是适用于我的方法：

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

- Aravind Siruvuru

这对我有用！清除缓存没有用。 - Radek Mezuláník

这对我也是解决方案，谢谢！ - Lippai Zoltan

2

如果您正在使用Angular进行社交媒体登录，且使用的是“@abacritt/angularx-social-login”，则以下修复方法适用于我。此问题会发生在所有新创建的客户端ID上。可以通过在提供程序中添加“plugin_name”来解决此问题。

在app.module.ts中，创建一个包含“plugin_name”的对象。

const googleLoginOptions = {
  scope: 'profile email',
  plugin_name:'sample_login' //can be any name
};

在提供者中，将“googleLoginOptions”对象与Google客户端ID一起传递。

@NgModule({
 declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    NgbModule,
    AppRoutingModule,
    CommonModule,
    HttpClientModule,
    SocialLoginModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  providers: [
        {
          provide: 'SocialAuthServiceConfig',
          useValue: {
            autoLogin: false,
            providers: [
              {
                id: GoogleLoginProvider.PROVIDER_ID,
                provider: new GoogleLoginProvider(
                  'YOUR GOOGLE CLIENT_ID', 
                   googleLoginOptions
                )
              }
            ],
            onError: (err) => {
              console.error(err);
            }
          } as SocialAuthServiceConfig,
        }
  ],
  bootstrap: [AppComponent]
})

现在，清除浏览器缓存，它应该可以工作了。有关app.component.ts中的更改，您可以参考@abacritt/angularx-social-login-文档链接。

请注意，此解决方案仅适用于使用@abacritt/angularx-social-login NPM包的Angular应用程序。

- Veena K. Suresh

这在我的Angular应用程序上有效。非常感谢。 - Priti jha

+1 我没有使用Angular，但在尝试清除缓存后，设置插件名称对我有用。创建新凭据。尝试不同的浏览器。在实时网站上运行。 - Mooze

0

我尝试清除缓存和浏览器，但对我没有用。

所以我有一个解决方案可以帮助我修复它。

安装 gapi-script (https://www.npmjs.com/package/gapi-script)。

npm install --save gapi-script

在组件中使用。

  import { loadGapiInsideDOM } from "gapi-script";
  ...
  useEffect(() => {
    (async () => {
      await loadGapiInsideDOM();
    })();
  });

- Khoa Tran

0

这是我遇到的问题，尝试了很多方法后，这是对我有效的方法：
步骤1：在React项目中使用gapi-script
npm i gapi-script
步骤2：将其导入到项目中
import { gapi } from "gapi-script";
步骤3：编写useEffect函数
useEffect(() => { const clientId = "在此输入您的客户端ID"; function start() { gapi.client.init({ clientId: clientId, scope: "", }); } gapi.load("client:auth2", start); });
步骤4：就是这样。

- Shrikrishna parab

0

我的解决方案是添加 http://localhost:yourPort 和 https://localhost:yourPort。然后只需删除缓存和浏览器数据即可。

- Imanol

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathan Wailes · Accepted Answer

88

我遇到了这个问题，这个解决方案对我有用。

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

在谷歌浏览器中：设置→隐私和安全性→清除浏览数据→缓存的图像和文件。

- Nathan Wailes

谢谢，清除浏览器缓存使得在bigquery-maps-api示例的第3步中身份验证工作正常。 - Loren

2

有时候你清除了缓存，但由于某些原因它并没有完全被清除，你继续看到问题，心想“这是怎么回事？”。只需在隐身窗口中检查您的网站，以确保问题不是由于缓存引起的。 - TitanFighter

我想补充一点，如果你正在使用像Privacy Badger这样的扩展程序来阻止谷歌cookie，那么什么都不会起作用。 - mel