錯誤：'idpiframe_initialization_failed'ReactApp嘗試實作谷歌登錄

我正在嘗試使用 react-google-login 實作 google 登錄。我使用 http://localhost:3000 和 https://localhost:3000 設定 de 憑據。并且錯誤：“idpiframe_initialization_failed”仍然顯示在控制臺中。

這是錯誤

{error: 'idpiframe_initialization_failed', details: 'You have created a new client application that use…i/web/guides/gis-migration) for more information.'}
details: "You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the [Migration Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more information."
error: "idpiframe_initialization_failed"
[[Prototype]]: Object
constructor: ? Object()
hasOwnProperty: ? hasOwnProperty()
isPrototypeOf: ? isPrototypeOf()
propertyIsEnumerable: ? propertyIsEnumerable()
toLocaleString: ? toLocaleString()
toString: ? toString()
valueOf: ? valueOf()
__defineGetter__: ? __defineGetter__()
__defineSetter__: ? __defineSetter__()
__lookupGetter__: ? __lookupGetter__()
__lookupSetter__: ? __lookupSetter__()
__proto__: (...)
get __proto__: ? __proto__()
set __proto__: ? __proto__()

這是代碼

<GoogleLogin 
                    clientId="CLIENT_ID.apps.googleusercontent.com"
                    render={(renderProps) => (
                        <Button className={classes.googleButton} color="primary" fullWidth onClick={renderProps.onClick} disabled={renderProps.disabled} startIcon={<Icon />} variant="contained"
                        >Google Sing in</Button>
                    )}
                    onSuccess={googleSuccess}
                    onFailure={googleFailure}
                    cookiePolicy="single_host_origin"
                />

uj5u.com熱心網友回復：

為我作業：

在隱身標簽中嘗試，

嘗試重新創建您的憑據，

確保您沒有意外使用 https，

筆記：

It may take 5 minutes to a few hours for settings to take effect

或者

嘗試這個：

默認情況下，現在阻止新創建的客戶端 ID 使用舊平臺庫，現有客戶端 ID 不受影響。在 2022 年 7 月 29 日之前創建的新客戶端 ID 可以設定 plugin_name 以啟用 Google 平臺庫。

所以，就我而言，解決方案是：

window.gapi.load('client:auth2', () => {
            window.gapi.client.init({
                clientId: '******.apps.googleusercontent.com',
                plugin_name: "chat"
            })

uj5u.com熱心網友回復：

我發現解決方案在 REACT JS 中很新，但在 React 應用程式中有一個解決方案。

首先你需要安裝gapi-script npm i gapi-script 然后創建以下useEffect

 useEffect(() => {
        function start() {
          gapi.client.init({
            clientId: '**YOUR_CLIENT_ID**.apps.googleusercontent.com',
            scope: 'email',
          });
        }
    
        gapi.load('client:auth2', start);
      }, []);

這是完整的代碼，或者至少是我們正在研究的主題

import React, { useState, useEffect } from 'react';
import { Avatar, Button, Paper, Grid, Typography, Container} from "@material-ui/core";
import { GoogleLogin } from "react-google-login";
import { gapi } from "gapi-script"

import Icon from "./icon";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined"
import Input from './Input';
import useStyles from "./styles";

function Auth() {

useEffect(() => {
        function start() {
          gapi.client.init({
            clientId: '**YOUR_CLIENT_ID**.apps.googleusercontent.com',
            scope: 'email',
          });
        }
    
        gapi.load('client:auth2', start);
      }, []);
      
       const googleSuccess = async (res) => {
        console.log(res);
    };

    const googleFailure = (error) => {
        console.log(error);
        console.log("Google Sing In ha fracasado intentelo denuevo mas tarde");
    };
      
 return (
 
 <GoogleLogin 
                    clientId="**YOUR_CLIENT_ID**.apps.googleusercontent.com"
                    render={(renderProps) => (
                        <Button className={classes.googleButton} color="primary" fullWidth onClick={renderProps.onClick} disabled={renderProps.disabled} startIcon={<Icon />} variant="contained"
                        >Google Sing in</Button>
                    )}
                    onSuccess={googleSuccess}
                    onFailure={googleFailure}
                    cookiePolicy="single_host_origin"
                />
 
 )
 
 

標籤：反应 验证 oauth-2.0 谷歌身份验证 反应谷歌登录

上一篇：如何從at獲得“fido-u2f”證明

下一篇：saml2idp認證轉發