响应google登录返回错误"idpiframe_initialization_failed“
我尝试过使用react google登录包来实现google登录。我已经将客户端Id放在URL正确的http://localhost:3000和https://localhost:3000上。但是，我得到了错误消息"idpiframe_initialization_failed“的问题，并详细说明如下：您已经创建了一个新的客户端应用程序，它使用库进行用户身份验证或授权，很快就会被废弃。新客户端必须使用新库；现有客户端还必须在这些库被弃用之前进行迁移。我真的很困惑。请你慢慢来帮我做这件事。谢谢。在这里输入图像描述
<header className="App-header">
<h1>React Google Login App</h1>
<div>
{loginData ? (
<div>
<h3>You logged in as {loginData.email}</h3>
<button onClick={handleLogout}>Logout</button>
</div>
) : (
<GoogleLogin
clientId={"846142574809-apbj2h6v9upultr3qvfskn6kfght9udb.apps.googleusercontent.com"}
buttonText="Log in with Google"
onSuccess={handleLogin}
onFailure={handleFailure}
cookiePolicy={'single_host_origin'}
></GoogleLogin>
)}
<GoogleLogout clientId='846142574809-apbj2h6v9upultr3qvfskn6kfght9udb.apps.googleusercontent.com' buttonText='logout' onLogoutSuccess={handleoutSuccess}></GoogleLogout>
</div>
</header>
</div>```回答 4
Stack Overflow用户
发布于 2022-10-06 04:46:05
登录使用的是旧版本的google，该版本将在2023年3月31日被废弃。详细的这里。检查实现这里
您可以移动到使用新的库，它支持上面的新版本作为注释，比如https://www.npmjs.com/package/@react-oauth/google。
您还可以自己实现:首先，您需要从google加载脚本。详细链接：
https://developers.google.com/identity/gsi/web/guides/client-library
然后，您需要做一些设置并呈现google按钮：
export function GoogleLoginButton({
onSuccess,
onError,
type = 'standard',
theme = 'outline',
size = 'large',
text,
shape,
logoAlignment,
width,
locale,
...props
}: GoogleLoginProps): React.ReactElement {
const [isOAuthClientLoaded, setIsOAuthClientLoaded] = React.useState(false);
const btnContainerRef = useRef<HTMLDivElement>(null);
const onSuccessRef = useRef(onSuccess);
onSuccessRef.current = onSuccess;
const onErrorRef = useRef(onError);
onErrorRef.current = onError;
useEffect(() => {
const scriptTag = document.createElement('script');
scriptTag.src = 'https://accounts.google.com/gsi/client';
scriptTag.async = true;
scriptTag.defer = true;
scriptTag.onload = () => {
setIsOAuthClientLoaded(true);
};
scriptTag.onerror = () => {
setIsOAuthClientLoaded(false);
};
document.body.appendChild(scriptTag);
return () => {
document.body.removeChild(scriptTag);
};
}, []);
useEffect(() => {
if (!isOAuthClientLoaded) {
return;
}
window.google?.accounts.id.initialize({
client_id: clientId,
callback: (credentialResponse: OAuthCredentialResponse): void => {
if (!credentialResponse.clientId || !credentialResponse.credential) {
onErrorRef.current?.(
new Error('Client id is invalid when initializing')
);
return;
}
onSuccessRef.current(credentialResponse);
},
...props
});
window.google?.accounts.id.renderButton(btnContainerRef.current!, {
type,
theme,
size,
text,
shape,
logo_alignment: logoAlignment,
width,
locale
});
}, [
onSuccess,
onError,
clientId,
type,
theme,
size,
text,
shape,
logoAlignment,
width,
locale,
props,
isOAuthClientLoaded
]);
return <div ref={btnContainerRef} />;
}Stack Overflow用户
发布于 2022-05-22 10:37:09
Google登录是迁移到新的google服务标识SDK，您可以在https://developers.google.com/identity/gsi/web上实现它。
或者你可以使用@react oauth/google，它使用的是新的SDK
Stack Overflow用户
发布于 2022-05-21 13:34:43
我们正在停止谷歌登录的JavaScript平台库的网页.在2023年3月31日之后，图书馆将无法下载。相反，在Web上使用新的Google身份服务。默认情况下，新创建的客户端ID现在被阻止使用旧平台库，现有客户端ID不受影响。2022年7月29日之前创建的新客户端ID可以设置plugin_name以启用。
https://stackoverflow.com/questions/72329965
复制相似问题
腾讯云开发者
