我想做一个简单的应用程序,在其中我需要通过谷歌帐户进行身份验证,由于我从未这样做过,我决定从它开始。
为此,我使用@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添加注册和登录,然后将它们与谷歌登录连接,但现阶段我不明白我现在做错了什么
很可能有一些事情我不知道,你能告诉我吗?