Google OAuth 2.0身份验证在React应用程序中不起作用:我做错了什么?

我想做一个简单的应用程序,在其中我需要通过谷歌帐户进行身份验证,由于我从未这样做过,我决定从它开始。

为此,我使用@react oauth/google,并进行了注册和配置 https://console.cloud.google.com/

import './index.css';
import App from './App';
import { GoogleOAuthProvider } from '@react-oauth/google';

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

这是index.tsx,在这里我将应用程序包装在一个提供程序中,并添加属性clientId

REACT_APP_GOOGLE_CLIENT_ID_TOKEN我从.env文件中获取它,该文件位于项目的根文件夹中

import { GoogleLogin } from '@react-oauth/google';
import './App.css';

function App() {
  return (
    <GoogleLogin
      onSuccess={credentialResponse => {
        console.log(credentialResponse);
      }}
      onError={() => {
        console.log('Login Failed');
      }}
    />
  );
}

export default App;

这个app.tsx在这里我只是通过谷歌添加了一个登录按钮,我想在控制台中查看凭据

在打开的窗口中,没有显示任何内容,但很明显,应用程序看到了clientId

这就是打开的窗口的地址栏的样子

我仍然需要通过firebase添加注册和登录,然后将它们与谷歌登录连接,但现阶段我不明白我现在做错了什么

很可能有一些事情我不知道,你能告诉我吗?