react后台开源框架（七爪源码如何使用）

使用 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) => { console.log(response.accessToken); }; 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 = () => { console.log('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 = "https://www.googleapis.com/auth/drive"; export const GoogleAuthentication = () => { const [isSignedIn, setIsSignedIn] = useState(false); const signOutHandler = () => { console.log("logged out!"); setIsSignedIn(false); }; const signInHandler = (response: GoogleLoginResponse | GoogleLoginResponseOffline) => { console.log(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/小程序/网站源码资源！