鲁达 使用 React 实现 Google OAuth2
如果我们需要与任何 Google 服务进行交互，或者只是使用 Google 对用户进行身份验证，我们必须使用 Google 实现身份验证机制。 一些用例可以是：
- 使用 React 将文件上传到 Google 驱动器
- 从 React 与 YouTube API 交互
- React 与 Google 表格的交互
为了实现这一点，我们已经有一个很好的库，叫做 login with google。 让我们看看如何使用它。
首先，安装依赖：
yarn add react-google-login先决条件
您需要在 Google Cloud 上拥有一个帐户。 如果您还没有，请先创建一个免费帐户，然后继续。
您还需要一个 Google Cloud 项目并从凭据仪表板获取 CLIENT_ID。 我假设你已经有了。
使用谷歌登录
然后导入 GoogleLogin 并在代码中使用它。
import React from "react"; import { GoogleLogin } from "react-google-login";const CLIENT_ID = "YOUR_CLIENT_ID_HERE";function Login() { const responseGoogle = (response: any) => { con); }; return ( <div className="App"> <GoogleLogin clientId={CLIENT_ID} buttonText="Login" onSuccess={responseGoogle} onFailure={responseGoogle} cookiePolicy={"single_host_origin"} /> </div> ); }export default Login;如果登录成功，您将在响应对象中获得一个 accessToken 和一个 tokenId。 将该令牌保存在状态变量或其他内容中。 您可以使用此 accessToken 进一步调用其他服务。
登出
我们还可以使用同一个库来实现注销功能。
import { GoogleLogout } from "react-google-login";function Logout() { const logoutHandler = () => { con('successfully logged out!); }; return ( <GoogleLogout clientId={CLIENT_ID} buttonText="Logout" onLogoutSuccess={logoutHandler} /> ); }export default Logout;在现实生活中的应用程序中，我们希望根据身份验证状态使用这两个功能。 我们可以结合这两个功能来跟踪登录状态并显示适当的组件。
最终的代码看起来像这样。
import { useState } from "react"; import GoogleLogin, { GoogleLogout, GoogleLoginResponse, GoogleLoginResponseOffline } from "react-google-login"; const CLIENT_ID = "YOUR_CLIENT_ID"; const SCOPE = ";; export const GoogleAuthentication = () => { const [isSignedIn, setIsSignedIn] = useState(false); const signOutHandler = () => { con("logged out!"); setIsSignedIn(false); }; const signInHandler = (response: GoogleLoginResponse | GoogleLoginResponseOffline) => { con(response); setIsSignedIn(true); }; return ( <> {isSignedIn ? ( <GoogleLogout clientId={CLIENT_ID} buttonText="Logout" onLogoutSuccess={signOutHandler} /> ) : ( <GoogleLogin clientId={CLIENT_ID} buttonText="Login" onSuccess={signInHandler} onFailure={signInHandler} cookiePolicy={"single_host_origin"} isSignedIn={true} scope={SCOPE} /> )} </> ); };您会注意到我们在这里引入了一个名为 scope 的新变量。 为了调用 YouTube API 或 Google Drive API 等服务，我们必须在此处定义范围。
您可以从 OAuth2 Playground 获取范围。
今天就是这样！ 希望你学到了新的东西！
关注七爪网，获取更多APP/小程序/网站源码资源！