将 Google Sign-In 与 React 集成：开发人员友好指南

# Web 开发 # JavaScript # 编程 # 初学者

问题

想象一下这样一个世界：用户必须记住他们访问的每个网站的密码。

哦等等，这就是这个世界！

让我们通过集成 Google Sign-In 为您的应用解决该问题，以便用户可以轻松使用他们的 Big G 凭证登录。

解决方案

将 Google Sign-In 集成到你的 React 应用中比调试“useEffect”中的拼写错误更容易。

认真地讲，只需两个步骤即可欢迎 Big G 加入您的项目。让我们开始吧！

步骤 1：向 Google 注册你的应用

在奇迹发生之前，您需要告知 Google 您的应用。方法如下：

转到 Google Cloud Console：https://console.cloud.google.com/。

导航到 API 和服务：进入后，单击仪表板上的“API 和服务”。

凭证侧栏：在左侧，单击“凭证”。

创建凭证：在顶部导航栏中，点击创建凭证并选择 OAuth 客户端 ID。

配置 OAuth 客户端：选择 Web 应用程序作为应用程序类型。在授权 JavaScript 来源下，添加：您的本地服务器 URL（例如，http://localhost:3000）。您计划部署应用程序的域（例如，https://yourdomain.com/signup）。

单击创建：Google 现在将生成您的客户端 ID 和密钥。

复制客户端 ID 和密钥：将它们保存在安全的地方（但不是纯文本，因为我们比这更好）。

恭喜！主要设置已完成。现在是时候开始编写一些代码了。

第 2 步：编写集成代码

我们将使用 @react-oauth/google 包。既然有人已经做到了，何必再重新发明轮子呢？

安装软件包：

npm install @react-oauth/google

编写代码：这里有一个简单的示例可以帮助您入门：

// App.jsx
   import { useState } from "react";
   import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";

   function Homepage() {
     const [authData, setAuthData] = useState(null);

     const gContainer = {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
       marginTop: '50px'
     };

     return (
       
         
            {
               setAuthData(credentialResponse);
               console.log("Success!", credentialResponse);
             }}
             onError={() => {
               console.log("Login Failed");
             }}
           />
           {authData && (
             
               Credential: {authData.credential}
               Select By: {authData.select_by}
             
           )}
         
       
     );
   }

   export default Homepage;

运行您的应用程序：使用 npm start 或 yarn start 启动您的应用程序，就可以开始了！

现在用户可以登录，您将可以访问他们的 Google 访问令牌以在您的后端对他们进行身份验证（或在您的控制台日志中查看）。

刚刚发生了什么？

通过以下步骤，您已成功将 Google Sign-In 添加到您的 React 应用中。当用户登录时，您将收到他们的访问令牌。

您可以使用此令牌调用 API 端点来获取与用户相关的信息。例如：

const userInfoEndpoint = `https://oauth2.googleapis.com/tokeninfo?id_token=${accessToken}`;

该请求将返回用户的个人资料数据。

建议在后端处理此问题，以防止滥用您的 API 进行虚假登录。

为了进行快速测试，我将使用 LiveAPI 向此端点发送请求并确认是否可以从我们之前获得的令牌中检索用户信息。

就这样！现在您已经拥有了 OAuth 所需的所有数据，如个人资料图片、姓名和电子邮件。

总结

使用 Google Cloud Console 注册您的应用以获取客户端 ID。

使用@react-oauth/google 将 Google Sign-In 集成到您的 React 应用中。

调用 Google API 端点从后端安全地获取用户信息。

请允许我再占用您一分钟时间。

我正在开发一个名为 LiveAPI 的超级方便的文档生成工具。

LiveAPI 将您的存储库作为输入，并为您拥有的所有 API 输出漂亮、安全的 API 文档。

加分点：它允许您直接从文档执行 API 并以任何语言生成请求片段。

祝您编码愉快，愿 Big G 永远伴随着您，并希望 LiveAPI 为您节省一些时间！

CLIS.CC

将 Google Sign-In 与 React 集成：开发人员友好指南

问题

解决方案

步骤 1：向 Google 注册你的应用

第 2 步：编写集成代码

刚刚发生了什么？

总结