我正尝试通过 此链接 创建一个 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."
这是代码，
<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>
如何在我的控制台中获得结果？
对我有用的解决方案是将该应用程序的谷歌开发者控制台 api 中的来源列入白名单。
只需清除缓存或以隐身模式打开您的 URL。它:)。 您的问题将得到解决。
对我来说，它是设置 > 网站设置 > Cookies >“阻止的第三方 cookies”必须未选中。
我在几个提供谷歌登录的网站上遇到了这个错误。 我必须在“显示 cookie 和其他网站数据”中“允许”accounts.google.com cookie 才能使网站正常工作（重新加载页面后）。 可能在浏览器中阻止第 3 方 cookie 是第一名的根本原因，
文档说不要忽略两个关键步骤（“当您按照说明进行操作时，重要的是您不要忽略这两个关键步骤：启用 Analytics API 以下是对我有用的方法：
如果您使用“@abacritt/angularx-social-login”使用 Angular 进行社交媒体登录，则以下修复对我有用。所有新创建的客户端 ID 都会出现此问题。这可以通过在 Angular 的提供者中添加“plugin_name”来克服。
在 app.module.ts 中，创建一个包含“plugin_name”的对象。
const googleLoginOptions = {
scope: 'profile email',
plugin_name:'sample_login' //can be any name
};
在提供者中，将“googleLoginOptions”对象与谷歌客户端 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-documentation
请注意，此解决方案仅适用于使用 @abacritt/angularx-social-login NPM 包的 Angular 应用程序。
我的解决方案是添加
http://localhost:yourPorthttps://localhost:yourPort对我有用的是，我不小心在名为“授权重定向 URI”而不是“授权 JavaScript 来源”的字段中输入了地址。替换这两个字段并重试。
这是我遇到的问题，在尝试了很多事情之后，这对我有用：
第 1 步：为此在 React 项目中使用 gapi-script
npm i gapi-script
第二步：在项目中导入
从“gapi-script”导入{gapi}；
第三步：写一个useEffect函数
useEffect(() => {
const clientId =
“在这里输入您的客户编号”；
功能开始（）{
gapi.client.init({
客户编号：客户编号，
范围： ””，
});
}
gapi.load("client:auth2", 开始);
});
步骤4：
就是这样。
我尝试删除缓存和浏览器，但它对我不起作用。 所以我有一个解决方案可以帮助我修复它。
安装 gapi-script (https://www.npmjs.com/package/gapi-script).
npm install --save gapi-script在组件中使用它。
import { loadGapiInsideDOM } from "gapi-script";
...
useEffect(() => {
(async () => {
await loadGapiInsideDOM();
})();
});
我也遇到过很多次这个错误，找了很长时间的解决方案，
对我来说，在对 http://127.0.0.1:3000 到授权的 JavaScript 来源和谷歌 API 中的授权重定向 URI 进行白化后，问题得到了解决
在我的例子中，它是多个域，而且是子域。删除一个并为另一个创建新的客户端 ID 解决了这个问题。