当我尝试运行此代码时，我会得到这个问题（gapi.auth2.getauthinstance（）。

Question

错误：'iDpiframe_initialization_failed'，详细信息：'您创建了一个新的客户端应用程序，该应用程序使用…i/web/guides/gis/gis迁移）以获取更多信息。'} 详细信息：“您创建了一个新的客户端应用程序，该应用程序使用库进行用户身份验证或授权，该应用程序将很快被弃用。新客户必须使用新库；现有客户也必须在对这些库进行弃用之前也必须迁移。请参阅迁移指南有关更多信息。” 错误：“ iDpiframe_initialization_failed”

Answer 1

GAPI登录方法将在2023年3月之前弃用，并且将不使用。因此，您必须使用提到的新方法此处

更新：您也可以将插件添加到代码中以绕过错误：

window.gapi.client
        .init({
          clientId:'Your Client ID',
          scope: "email",
          plugin_name:'App Name that you used in google developer console API'
        })

Answer 2

您可以使用@react-oauth/google/google 它使用新的Google服务服务身份SDK

Answer 3

这就是我在React应用程序中解决的方式。

1. npm i gapi-script
2. 在您的身份验证或登录文件导入。 从“ gapi-script”中导入{gapi};
3. 在文件中使用此使用代码。

 useEffect(() => {
    function start() {
      gapi.client.init({
        clientId: process.env.REACT_PUBLIC_GOOGLE_CLIENT_ID,
        scope: 'email',
      });
    }

    gapi.load('client:auth2', start);
  }, []);

它将解决问题

Answer 4

检查这些博客
https://github.com/github.com/anthonyjgrove/react-google-google-loogle-login/siss/ 502

或

在这里尝试这些是我使用的。

首先，我有一个名为usecript的通用钩子，可以将任何标签加载到HTML头部，并在脚本满载时具有回调函数：

import { useEffect } from "react";

const useScript = (url, onload) => {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = url;
    script.onload = onload;

    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, [url, onload]);
};

export default useScript;

然后，我创建了一个加载Google按钮的Googlelogin组件。

import { useRef } from "react";
import useScript from "hooks/useScript";

export default function GoogleLogin({
  onGoogleSignIn = () => {},
  text = "signin_with",
  // feel free to add more options here
}) {
  const googleSignInButton = useRef(null);

  useScript("https://accounts.google.com/gsi/client", () => {
    window.google.accounts.id.initialize({
      client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
      callback: onGoogleSignIn,
    });
    window.google.accounts.id.renderButton(
      googleSignInButton.current,
      { theme: "outline", size: "large", text, width: "250" } // customization attributes
    );
  });

  return <div className="test" ref={googleSignInButton}></div>;
}

非常简单！

Answer 5

解决了这一

。

const googleLoginOptions = {
  scope: 'profile email',
  plugin_name:'sample_login' 
};

1

imports:[SocialLoginModule]

问题

providers: [
    {
      provide: 'SocialAuthServiceConfig',
      useValue: {
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              CLIENT_ID,
              googleLoginOptions
            )
          }
        
        ],
        onError: (err) => {
          console.error(err);
        }
      } as SocialAuthServiceConfig,
    }