使用react-google-login实现Google OAuth授权时遇Authorization Error

问题原因 #

你使用的react-google-login依赖Google旧版OAuth 2.0 JavaScript库（gapi），而Google已宣布该库进入弃用阶段，新创建的客户端应用必须使用Google Identity Services (GIS) 库，因此会触发idpiframe_initialization_failed错误，清理缓存无法解决此问题，因为本质是依赖库的版本兼容性问题。

解决方案 #

替换react-google-login为官方推荐的支持GIS的库@react-oauth/google，步骤如下：

1. 安装新依赖 #

执行以下命令安装替代库：

npm install @react-oauth/google
# 或使用yarn
yarn add @react-oauth/google

2. 配置全局OAuth Provider #

在项目入口文件（如index.js）中添加GoogleOAuthProvider，传入你的客户端ID：

import { GoogleOAuthProvider } from '@react-oauth/google';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_API_TOKEN}>
    <App />
  </GoogleOAuthProvider>
);

3. 修改Login组件代码 #

替换原GoogleLogin组件为新库提供的版本，调整逻辑适配新的返回格式：

import React from 'react';
import { GoogleLogin } from '@react-oauth/google';
import { useNavigate } from 'react-router-dom';
import { FcGoogle } from 'react-icons/fc';
import shareVedio from '../assets/share.mp4';

const Login = () => {
  const responseGoogle = (response) => {
    console.log('登录成功:', response);
    // 提取ID Token用于后端验证：response.credential
    // 此处可添加后续登录逻辑，比如跳转首页或调用后端接口
  };

  return (
    <div className='flex justify-start items-center flex-col h-screen'>
      <div className='relative w-full h-full'>
        <video
          src={shareVedio}
          type='video/mp4'
          loop
          controls={false}
          muted
          autoPlay
          className='h-full w-full object-cover'
        />
        <div className='absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0 bg-blackOverlay'>
          <div className='p-5'>
            <h3 className='text-xl font-bold text-white'>SHARE_HERE</h3>
          </div>
          <div className='shadow-2xl'>
            <GoogleLogin
              onSuccess={responseGoogle}
              onError={() => {
                console.log('登录失败');
              }}
              render={(renderProps) => (
                <button
                  type='button'
                  onClick={renderProps.onClick}
                  className='bg-mainColor flex justify-center items-center p-3 rounded-lg cursor-pointer outline-none'
                  disabled={renderProps.disabled}
                >
                  <FcGoogle className='mr-4' /> Sign in with Google
                </button>
              )}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;

额外说明 #

• 新库返回的response结构与旧库不同，核心的ID Token存储在response.credential字段中，需调整后端验证逻辑适配该字段。
• 确保Google Cloud控制台中，OAuth客户端ID的授权重定向URI和JavaScript来源配置正确，与当前项目的域名一致。

内容的提问来源于stack exchange，提问作者Abdul Mannan