将 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”，但您可以随意命名ÿ