将 Google 登录添加到 React 应用程序的指南

有时我们只想使用应用程序，没有耐心先注册并使用我们的电子邮件和密码登录。我们也可能只是想试用该应用程序，而不希望为此而不得不创建一个新帐户的负担。

同时，应用程序的所有者需要知道有多少用户使用了他们的应用程序，以获取有关谁在使用他们的应用程序以及如何使用他们的应用程序的反馈。为此，他们需要用户使用他们的电子邮件注册以获取统计信息。

这两种情况让用户和应用程序所有者都陷入了困境。这就是拥有谷歌登录功能发挥非常重要作用的地方。

由于 Google 是世界上最受欢迎的电子邮件平台，因此允许用户在您的 React 应用程序中使用 Google 登录可以消除用户和应用程序所有者之间的摩擦。轻闪PDF(lightpdf.cn)，PDF在线编辑格式转换，完全免费一键操作更简单！用户几乎可以立即开始使用应用程序，而无需创建全新的帐户。

在本文中，我们将了解 Google 登录的工作原理以及如何使用名为react-google-login. 我们将涵盖：

将 Google 登录添加到您的 React 应用程序所需的软件包
为您的项目获取 Google 客户端 ID
为您的 React 应用程序配置 Google 登录同意屏幕
创建您的网络客户端 ID
把它放在一起react-google-login
根据用户的 Google 个人资料在 React 应用中创建用户个人资料

要学习本教程，您应该在本地计算机上安装 React 并熟悉如何使用它。如果你已经安装了 React，那么你应该已经安装了 Node.js、npm 和 Yarn。

将 Google 登录添加到您的 React 应用程序所需的软件包

要使用 Google 登录，我们将安装两个软件包。

首先，gapi-script是一个 npm 包，用于加载 Google API 脚本并初始化一些函数。

第二个包被调用react-google-login，它允许我们将 Google 登录功能集成到我们的 React 应用程序中。次元狗动漫(acgndog.com/)，收录了国内外优质漫画资源，老牌漫迷分享社区！此外，react-google-login它还允许我们快速安全地获取访问所有 Google API 所需的访问令牌。

在我们安装并开始集成gapi-script到react-google-login我们的 React 应用程序之前，我们必须首先使用 Google 配置一些东西。让我们从获取 Google 客户端 ID 开始。

为您的项目获取 Google 客户端 ID

客户端 ID 是与帮助客户端和服务器OAuth 2.0 身份验证的应用程序关联的唯一标识符。

要从 Google 获取客户端 ID，请转到您的Google Cloud Console并创建一个新项目。在本文中，我将项目命名为“Google Sign In”，但您可以随意命名：

创建项目后，进入项目即可看到如下图所示的仪表板。您当前的项目名称应显示在仪表板页面左上角的 Google Cloud 徽标旁边：

接下来，让我们来看看如何在创建凭据之前配置您的同意屏幕。

为您的 React 应用程序配置 Google 登录同意屏幕

顾名思义，同意屏幕是一个同意页面，它会提示用户使用外部或第三方库登录。乐秀视频剪辑App，无限制VIP高级会员版，可导出无水印超清格式视频！此步骤会提醒用户他们将离开您应用的根页面并允许访问第三方-派对页面。

简而言之，当您使用 OAuth 2.0 进行授权时，您的应用会请求用户从 Google 帐户授权一个或多个访问范围。访问范围包括允许您的应用访问或在用户帐户上执行的任何信息或活动。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

您的应用向用户显示的 Google 登录同意屏幕可能包括对您的项目、其政策和请求的访问范围的简要说明。

一个简单的同意页面可能如下所示：

要为您的 React 应用程序配置 Google 同意页面，请转到 Google Cloud Console 左侧菜单上的“OAuth 同意屏幕”选项卡。

进入此选项卡后，选择外部——这实际上是您可以选择的唯一选项，除非您使用的是经过 Google 验证的组织或应用程序——然后单击“创建”按钮以创建您的同意屏幕。

接下来，在同一个选项卡中，为您的应用程序选择一个名称和一个电子邮件地址，以获取有关您项目的任何更改的通知。您现在可以将其他要求和选项留空。如果您已准备好详细信息，则可以根据需要在此步骤中添加它们。

您现在也可以跳过其余的注册部分。只需向下滚动每个部分，然后单击“保存并继续”，直到完成后您最终返回仪表板。

创建您的网络客户端 ID

接下来，在左侧菜单中，您将看到一个标有“凭据”的选项卡。单击此选项卡可转到您可以创建 Web 客户端 ID 的页面。

在此页面上，单击页面顶部的“创建凭据”，然后单击“OAuth 客户端 ID”选项。

来自 LogRocket 的更多精彩文章：

不要错过来自 LogRocket 的精选时事通讯The Replay
了解LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect优化应用程序的性能
在多个 Node 版本之间切换
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri，一个用于构建二进制文件的新框架
比较NestJS 与 Express.js

系统将提示您选择应用程序类型，如下图所示。如果您为 React 应用程序执行这些步骤，请选择“Web 应用程序”。这是因为我们将 Google 客户端 ID 用于网络。

如果您要将其集成到 React Native、Flutter 或 Swift 应用程序中，您可以为两个相应的操作系统选择 Android 或 iOS 选项。

接下来，我们将为我们的客户 ID 选择一个名称。此名称仅用于记录或定义我们正在创建的特定 ID。例如，如果我们正在创建 Web、iOS 和 Android ID，我们可以在它们的名称中包含“Web ID”、“Android ID”、“iOS ID”等来区分它们。

接下来，我们还将添加两种类型的 URL：授权的 JavaScript 来源和授权的重定向 URL。

授权的 JavaScript 来源 URL 是您的应用程序从中发起登录的 URL；即，对于 React 开发人员，localhost 和 localhost:3000，或者如果您托管了您的应用程序，则为您的托管 URL。

授权重定向 URL 是用户登录成功后 Google 会将用户重定向到的链接。例如，您可能希望将用户带回您的原始链接，或者可能将用户重定向到另一个链接。无论哪种方式，您都必须在此处包含 URL。

对于本教程的授权 JavaScript 来源和授权重定向 URL，请编写您的 localhost URL：http://localhost:3000。见下文：

最后，单击“创建”按钮以创建您的 Web 客户端 ID。您将被带回主页，在那里您将看到您新创建的凭证。单击复制图标以复制您的新 Web 客户端 ID。

现在我们已经成功创建了我们的 Web 客户端 ID，让我们进入我们的 React 应用程序，安装，然后集成 Google 登录。

把它放在一起react-google-login

gapi-script您可能还记得，我们将为我们的项目安装这两个包react-google-login。运行以下任一命令来安装它们：

//npm
npm install react-google-login gapi-script

//Yarn
yarn add react-google-login gapi-script

就像 React 中每个已安装的包一样，我们必须先导入模块才能使用它们。在您的App.js文件中，通过编写以下代码导入模块：

/*App.js*/

import { GoogleLogin } from 'react-google-login';
import { gapi } from 'gapi-script';

接下来，我们初始化clientIdusing gapi，这是 Google 的浏览器端 JavaScript 客户端库。它是一个帮助我们加载 gapi 脚本和初始化函数的包，它用于谷歌登录和其他外部网页，以轻松连接谷歌的 API。

为了初始化我们的客户端，我们将在我们的useEffect钩子中调用 gapi 函数，以便在我们的页面加载或每次渲染时调用它：

/*App.js*/

const clientId = '386932037035-k8v833noqjk************.apps.googleusercontent.com';\

useEffect(() => {const initClient = () => {gapi.client.init({clientId: clientId,scope: ''});};gapi.load('client:auth2', initClient);
});

接下来，我们将添加我们从中导入的登录按钮react-google-login：

/*App.js*/
const onSuccess = (res) => {console.log('success:', res);};const onFailure = (err) => {console.log('failed:', err);};return (<GoogleLoginclientId={clientId}buttonText="Sign in with Google"onSuccess={onSuccess}onFailure={onFailure}cookiePolicy={'single_host_origin'}isSignedIn={true}/>);

该GoogleLogin按钮调用clientId并返回success响应或错误。

如果响应成功，该onSuccess函数将处理它。如果返回的响应是错误，则onFailure函数会处理它。该isSignedIn属性通过调用onSuccess回调使用户保持登录状态。

在我们的浏览器中，测试上面的代码如下所示；

此外，单击“使用 Google 登录”按钮将提示同意屏幕或模式，如下所示：

现在我们已经了解了如何将 Google 登录添加到我们的 React 应用程序，让我们更进一步，获取用户的详细信息以在我们的应用程序中创建用户配置文件。我们只会将用户重定向到主页，然后获取用户的电子邮件、姓名和图像。

根据用户的 Google 个人资料在 React 应用中创建用户个人资料

将 Google 登录与我们的应用程序集成使我们能够访问用户的个人资料，其中包括用户的姓名、电子邮件地址、图像、、、、accessToken等。我们将使用这些信息来创建我们的用户资料。googleId``id_token

仍然在我们的App.js组件中，让我们用下面的代码替换我们现有的代码：

/*App.js*/

import React, { useState, useEffect } from 'react';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import { gapi } from 'gapi-script';

function App() {const [ profile, setProfile ] = useState([]);const clientId = '386932037035-k8v833noqjk7m4auae0t83vnkrqvvg3t.apps.googleusercontent.com';useEffect(() => {const initClient = () => {gapi.client.init({clientId: clientId,scope: ''});};gapi.load('client:auth2', initClient);});
const onSuccess = (res) => {setProfile(res.profileObj);};
const onFailure = (err) => {console.log('failed', err);};
const logOut = () => {setProfile(null);};
return (<div><h2>React Google Login</h2><br /><br />{profile ? (<div><img src={profile.imageUrl} alt="user image" /><h3>User Logged in</h3><p>Name: {profile.name}</p><p>Email Address: {profile.email}</p><br /><br /><GoogleLogout clientId={clientId} buttonText="Log out" onLogoutSuccess={logOut} /></div>) : (<GoogleLoginclientId={clientId}buttonText="Sign in with Google"onSuccess={onSuccess}onFailure={onFailure}cookiePolicy={'single_host_origin'}isSignedIn={true}/>)}</div>);
}
export default App;

GoogleLogin在上面的代码中，我们GoogleLogout从react-google-login.

该GoogleLogin按钮向我们提供的发出登录请求clientId，gapi 使用相同的将我们连接到 Google API clientId。如果请求失败，我们会在onFailure函数中处理错误。如果请求成功，我们在onSuccess函数中处理它。

接下来，在我们的onSuccess函数中，我们使用返回的数据设置我们的配置文件状态。此数据包含用户的详细信息，如google_id、访问和id_token、电子邮件、姓名等。

最后，我们使用条件来更改我们的 UI：如果 profile 是true，UI 将向我们显示登录用户的个人资料以及他们的图像、姓名和电子邮件。如果配置文件变为空（即当用户使用按钮注销时GoogleLogout），它将向我们显示登录按钮。

结论

Google 登录是我们应用程序中包含的一项重要功能，可节省时间并改善用户体验。添加此功能的另一个重要原因是它既快速又易于实现和使用。

在本教程中，我们回顾了如何使用react-google-login. 对于另一种方法，了解如何使用 Firebase 为您的 React 应用程序处理 Google 身份验证和登录。

我希望您发现这篇文章既易于理解又对您自己的项目有所帮助。