//Npm npm install @react-oauth/google@latest //Yarn yarn add @react-oauth/google@latest
在首页中引入 GoogleOAuthProvider,并写上google后台的clientId
/*index.js*/ import React from 'react'; import ReactDOM from 'react-dom'; import { GoogleOAuthProvider } from '@react-oauth/google'; import App from './App'; ReactDOM.render( <GoogleOAuthProvider clientId="386932037035-k8v833noqjk7m4***********.apps.googleusercontent.com"> <React.StrictMode> <App /> </React.StrictMode> </GoogleOAuthProvider>, document.getElementById('root') );
组件页面中
/*App.js*/ import React from 'react'; import { GoogleLogin } from '@react-oauth/google'; function App() { const responseMessage = (response) => { console.log(response); }; const errorMessage = (error) => { console.log(error); }; return ( <div> <h2>React Google Login</h2> <br /> <br /> <GoogleLogin onSuccess={responseMessage} one rror={errorMessage} /> </div> ) } export default App;
也可以更改谷歌登录样式
/*App.js*/ import React, { useState, useEffect } from 'react'; import { googleLogout, useGoogleLogin } from '@react-oauth/google'; import axios from 'axios'; function App() { const [ user, setUser ] = useState([]); const [ profile, setProfile ] = useState([]); const login = useGoogleLogin({ onSuccess: (codeResponse) => setUser(codeResponse), one rror: (error) => console.log('Login Failed:', error) }); useEffect( () => { if (user) { axios .get(`https://www.googleapis.com/oauth2/v1/userinfo?access_token=${user.access_token}`, { headers: { Authorization: `Bearer ${user.access_token}`, Accept: 'application/json' } }) .then((res) => { setProfile(res.data); }) .catch((err) => console.log(err)); } }, [ user ] ); // log out function to log the user out of google and set the profile array to null const logOut = () => { googleLogout(); setProfile(null); }; return ( <div> <h2>React Google Login</h2> <br /> <br /> {profile ? ( <div> <img src={profile.picture} alt="user image" /> <h3>User Logged in</h3> <p>Name: {profile.name}</p> <p>Email Address: {profile.email}</p> <br /> <br /> <button onClick={logOut}>Log out</button> </div> ) : ( <button onClick={login}>Sign in with Google 标签:google,const,log,登录,App,谷歌,react,import From: https://www.cnblogs.com/xiaoyaoweb/p/18349758