web中实现Google登录和firebase登录以及google token转firebase token

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-your_own_param_1_to_login="any_value"
     data-your_own_param_2_to_login="any_value">
</div>

<script src="https://accounts.google.com/gsi/client" async></script>

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt((notification) => {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
            // try next provider if OneTap is not displayed or skipped
        }
    });
  }
</script>

https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

function generateNonce() {
  return [...Array(30)]
    .map(() => Math.floor(Math.random() * 36).toString(36))
    .join('');
}
// 实例化谷歌登录
export const googleSignAction = (callback: (success: boolean, msg?: string, res?: any) => void) => {
            const clientId = "xxx-xxx.apps.googleusercontent.com";
            const url = location.protocol.replaceAll(":", "") + "://" + location.host;
	    const redirectUri = encodeURIComponent(url);
	    const scope = encodeURIComponent("email profile openid");
	    const responseType = "id_token"; // code、access_token
      const nonce = generateNonce(); // id_token 必须要传此字段，且随机
		
	    const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=${responseType}&state=google&nonce=${nonce}`;
	    window.location.href = authUrl;
}

/**
 * 当Google授权登录成功之后，读取path，从path中获取code，然后发送post请求，获取access token以及id token。
 * - id token用来和firebase进行授权，获取firebase的token。
 * - success：返回从firebase获取到的id token
 */
export const HandleGoogleAuthRedirect = async (path: string, success: (token: string) => void, fail: (err: any) => void) => {
	let searchParams = path
	let searchList = path.split("/#/")
	if (searchList.length > 0) {
		searchParams = searchList[searchList.length - 1]
	}
	searchList = searchParams.split("?")
	if (searchList.length > 0) {
		searchParams = searchList[searchList.length - 1]
	}
	const params = new URLSearchParams(searchParams)
	const idToken = params.get('id_token')
  ...
}

{
  "dependencies": {
    ...
    "firebase": "^10.12.3",
    ...
  },
  ...
}

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AxxxxQk",
  authDomain: "xxx.firebaseapp.com",
  projectId: "xxxx",
  storageBucket: "xxx.firebasestorage.app",
  messagingSenderId: "xxxx",
  appId: "1:xxxx:web:xxxx",
  measurementId: "G-xxx"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { GetCurrentFirebase } from "../../../env/firebase";

const firebaseConfig = GetCurrentFirebase()

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export { auth, provider, signInWithPopup, GoogleAuthProvider };

...
import { auth, provider, signInWithPopup, GoogleAuthProvider  } from "./firebase";
...

const onClickGoogleBtn = (callback: (success: boolean, msg?: string, res?: any) => void) => {
  signInWithPopup(auth, provider)
	  .then(async (result) => {
		  console.log("Google授权登录获取到的值是：", res);
		  if (result && result.user) {
			  const user = result.user;
			  user.getIdToken(true).then((id_token) => {
                              callback(true, id_token, res)
			  }).catch(error => {
                              callback(false, typeof error == 'string' ? error : (error.message || error.msg));
			  });
		  } else {
			  callback(false, TXT_PleaseTryAgain);
		  }
	  })
	  .catch((error) => {
		console.log("Google授权登录失败是：", error);
		callback(false, typeof error == 'string' ? error : (error.message || error.msg));
	  });
}

...
import { signInWithCredential } from "firebase/auth";
import { auth, GoogleAuthProvider  } from "./firebase";
...

        const params = new URLSearchParams(searchParams)
	const idToken = params.get('id_token')
	if (idToken != null && idToken.length > 0) {
		const credential = GoogleAuthProvider.credential(idToken);
		const result = await signInWithCredential(auth, credential);
		const user = result.user;
		user.getIdToken(true).then((token) => {
			// 这里获取到的就是firebase 的 id token
			success(token);
		}).catch(error => {
			// 这里就是出错了
			fail(error)
		});
	}
...