代码之家  ›  专栏  ›  技术社区  ›  Dmitr Zar

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

  •  0
  • Dmitr Zar  · 技术社区  · 1 年前

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

    为此,我使用@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在这里我只是通过谷歌添加了一个登录按钮,我想在控制台中查看凭据

    these are my settings

    this is the console content

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

    address bar

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

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

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

    1 回复  |  直到 1 年前
        1
  •  0
  •   DMabulage    1 年前

    两者相加 http://localhost:3000 http://localhost 到授权的js来源

    js origins