使用Google API OAuth时遇到授权错误（已解决）

此问题已解决，John在评论区给出了正确方案。

原问题描述 #

各位程序员朋友，我正在实现基于Google OAuth的登录按钮，在浏览器中测试时出现错误：

Access denied: Authorization error. The OAuth client was not found. Error 401: invalid_client

我已在对应平台创建测试ClientID和Client Secret，测试邮箱为elroydegans@gmail.com，怀疑遗漏了配置但无法定位，相关React代码如下：

import { useNavigate } from "react-router-dom"
import { Login } from "../componenten/LogIn"
import { Logout } from "../componenten/LogOut"
import { useEffect, useState } from "react"
import { gapi } from "gapi-script"

const clientId = "342462410453 - igjbmq83j1rplroap1lu8he9dua5db2b.apps.googleusercontent.com"

export const LoginPage = () => {
  const navigate = useNavigate()
  const [isSignedIn, setIsSignedIn] = useState(false)

  useEffect(() => {
    const start = () => {
      gapi.auth2.init({
        clientId: clientId,
        scope: ""
      })
    }
    gapi.load("client:auth2", start)
    setIsSignedIn(true)
  }, [])

  return (
    <div className="grid">
      <div className="container">
        <div className="box">
          <h1>Login</h1>
          {isSignedIn ? <Login /> : <Logout />}
          <button style={{ color: "black", borderColor: "black", border: "solid" }} onClick={() => navigate("/")}>
            Back
          </button>
        </div>
      </div>
    </div>
  )
}

解决方案（John提供） #

• 修正Client ID格式：当前代码里的Client ID包含空格，需移除空格，改为342462410453-igjbmq83j1rplroap1lu8he9dua5db2b.apps.googleusercontent.com
• 检查Google Cloud平台OAuth客户端配置：
  • 确认创建的是Web应用类型的客户端ID
  • 在「已获授权的JavaScript来源」中添加测试环境域名（比如http://localhost:3000）
  • 核对客户端ID是否完整复制，无多余字符或遗漏
• 代码逻辑调整：
  • gapi.auth2.init需指定必要权限范围，例如scope: "profile email"，空scope会导致授权流程异常
  • 修正useEffect中的状态更新时机，应在初始化完成后再设置isSignedIn，避免渲染逻辑错误：

    useEffect(() => {
      const start = async () => {
        await gapi.load("client:auth2");
        const auth2 = await gapi.auth2.init({
          clientId: clientId,
          scope: "profile email"
        });
        setIsSignedIn(auth2.isSignedIn.get());
      };
      start();
    }, []);
    

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