10 分钟内将 Google 登录添加到你的 React 应用

作为客户端开发者，创建带有身份验证的应用可能是一个繁琐的过程。因为我们需要在服务器端处理身份验证并维护代码。根据不同的身份验证机制（例如 Basic、OAuth 等），确实存在一些需要维护的情况。本博客将帮助您为 React 应用创建一个独立的后端，无需身份验证。（或者，您也可以添加服务器配置来使用服务器进行身份验证。）

为什么使用 OAuth？

使用 OAuth 的原因有很多。

它是安全的。
它不需要用户提供任何凭证。因此无需记住多个密码。
网站还可以获取有关用户的基本信息，而无需花费太多时间填写表格。

具体来说，在我们的例子中，我们不需要服务器进行身份验证或获取用户的初始详细信息。😉

我找到了一个名为的包react-google-login。它提供了添加 Google 登录的简单机制。您可以直接使用其GoogleLogin组件，也可以使用自定义按钮。它们还提供自定义钩子，例如useGoogleLogin和，useGoogleLogout因此钩子爱好者可以轻松使用。（两种方法如下所述）

他们为这个存储库提供的文档非常棒。但它在某些方面有所缺失，而这篇博客对此进行了解决。就像详细说明一样，这篇博客可以帮助您在 Google 开发者控制台中创建应用程序并访问clientId。此软件包获得的初始版本access_token仅持续一小时（出于安全原因）。我们需要迭代该过程才能使用访问新的access_token版本refresh_token。这样您就可以创建一个可用于生产的应用程序。

步骤

我们需要在 Google 开发者控制台中创建一个应用程序。它提供clientId用于识别您的应用程序的身份验证详细信息。请按照以下步骤获取客户端 ID。
1. 转到 “凭据”页面。（如果您是新手，请创建一个项目并按照以下步骤操作）
2. 单击 创建凭据 > OAuth 客户端 ID。
3. 选择 Web 应用程序 类型。
4. 命名您的 OAuth 2.0 客户端并单击 “创建”
确保您提供了域名和重定向网址。这样 Google 才能识别可以提供身份验证的原始域名。