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 for more information." error: "idpiframe_initialization_failed"
Gapi sign-in method will be deprecated by March 2023 and it will be not used.so you must go with the new method mentioned here
Update: Also you can add plugin_name to your code to bypass error like this:
window.gapi.client .init({ clientId:'Your Client ID', scope: "email", plugin_name:'App Name that you used in google developer console API' })
您可以使用@react-oauth/google它使用新的 google 服务标识 SDK
check these blog https://github.com/anthonyjgrove/react-google-login/issues/502
or try these
Here is what I am using.
First I have a general hook called useScript that can load any tag into the HTML head and has a callback function for when the script fully loads:
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;
Then I have created a GoogleLogin component that loads Google's button.
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>; }
Pretty straightforward!
This is how I solved it in my React Application.
npm i gapi-script
import { gapi } from "gapi-script";
useEffect
code in your file. useEffect(() => {
function start() {
gapi.client.init({
clientId: process.env.REACT_PUBLIC_GOOGLE_CLIENT_ID,
scope: 'email',
});
}
gapi.load('client:auth2', start);
}, []);
it will solve the problem
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.