在本教程中,我们将学习如何使用新的 Google Identity Services SDK for React @react-oauth/google🚀,通过 Google OAuth2 实现身份验证,从而让注册变得轻松无忧。

你需要

• 创建反应应用程序向您的 API 发出请求的反应应用程序

• 安装jwt-decode

• React基础知识

• Node.js 已安装

• 代码编辑器(最好是Visual Studio Code)

设置您的 Google Cloud 项目

要将 Google Login 集成到我们的 React 应用程序中,您需要一个 Google Client ID。首先,您需要创建一个 Google Cloud 项目。

1. 创建一个项目并为您的项目选择一个名称。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--tE3Bw1OI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/l1sb2qmq3yevwyg8dnl0.png)

1. 项目到位后,继续进行凭据 - 创建凭据 - OAuth 客户端 ID。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--xru8Jwfh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/q2wm704lirw8xnp2dfi6.png)

1. 您需要配置您的 OAuth 同意屏幕。选择外部,因为我们希望向拥有 Google 帐户的所有人授予访问权限。然后谷歌会询问应用程序的名称以及一些开发者联系方式。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--KNi3TTqP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/17dihkcz7dwkc5j99p1r.png)

1. 填写应用注册表格。在大多数情况下,您可以将其留空。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--m4590-cG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/y0bxhrr5b2gbp5lugu63.png)

选择最适合您要开发的应用程序的范围,并根据您的应用程序要求填写所有其他必要的输入。

我们返回凭据 - 创建凭据 - OAuth 客户端 ID。选择 Web 应用程序类型,我们可以提供所有授权来源和重定向 URL。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--mdi2ASPP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/e5rlpos9ipq9gf42g3la.png)

我们将看到我们的 Google 客户端 ID 和客户端密码。我们只需要客户端 ID。

让我们创建我们的 React 应用程序和登录组件

获得 Google 客户端 ID 后,我们开始创建 React 应用程序以集成 Google 登录。

我们将从 create-react-app 应用程序开始,并使用新的 Google Identity Services SDK for React 添加所有必要的依赖项,即 Google OAuth2 @react-oauth/google🚀 和 jwt-decode 是一个帮助解码 JWT 令牌的小型浏览器库它们是 Base64Url 编码的。

让我们开始运行以下命令,但请确保您具有在 React 中验证 Google 登录的必要要求

• Node.js 已安装

• 代码编辑器(最好是Visual Studio Code)

• 谷歌客户端 ID

• React基础知识

npx create-react-app google-login cd google-login npm install @react-oauth/google jwt-decode react-router-dom

创建一个名为 src/lib/GoogleLoginPage.js 的文件,其内容如下:

import React from 'react';
import { FcGoogle } from 'react-icons/fc';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';

const GoogleLoginPage = () => {
  const responseGoogle = (response) => {
    console.log(response);
  }

  return (
    <div className="">
          <div className="">
            <GoogleOAuthProvider 
                clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
                >
             <GoogleLogin
              render={(renderProps) => (
                <button
                  type="button"
                  className=""
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  <FcGoogle className="" /> Sign in with google
                </button>
              )}
              onSuccess={responseGoogle}
              onFailure={responseGoogle}
              cookiePolicy="single_host_origin"
            />
            </GoogleOAuthProvider>
          </div>
    </div>
  )
}

export default GoogleLoginPage

进入全屏模式 退出全屏模式

您可以运行 npm start 并检查您的控制台以接收我们将使用 jwt-decode 解码的编码令牌。

使用 JWT-DECODE 解码 Google 令牌

现在我们已经获得了您的谷歌响应令牌,让我们解码以获取所有必要的用户信息。

仍然在 GoogleLoginPage.js 中,让我们更新它

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FcGoogle } from 'react-icons/fc';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';
import { client } from '../client';
import jwt_decode from "jwt-decode";

const GoogleLoginPage = () => {
  const navigate = useNavigate();

  const responseGoogle = (response) => {
   //console.log(response);
    const userObject = jwt_decode(response.credential);
    //console.log(userObject);
    localStorage.setItem('user', JSON.stringify(userObject));
    const { name, sub, picture } = userObject;
    const doc = {
      _id: sub,
      _type: 'user',
      userName: name,
      image: picture,
    };
    client.createIfNotExists(doc).then(() => {
      navigate('/', { replace: true });
    });

  }

  return (
    <div className="">
          <div className="">
            <GoogleOAuthProvider 
                clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
                >
             <GoogleLogin
              render={(renderProps) => (
                <button
                  type="button"
                  className=""
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  <FcGoogle className="" /> Sign in with google
                </button>
              )}
              onSuccess={responseGoogle}
              onFailure={responseGoogle}
              cookiePolicy="single_host_origin"
            />
            </GoogleOAuthProvider>
          </div>
    </div>
  )
}

export default GoogleLoginPage

进入全屏模式 退出全屏模式

让我们分解一下我们刚刚所做的事情。

在 responseGoogle() 中获得 Google 登录响应后,我们创建了一个变量来存储解码后的令牌,方法是导入 jwt-decode 包并调用我们从 Google 登录获得的响应。

现在令牌已被解码,我们现在可以获取我们的用户信息,将其存储到我们的 localStorage 中,解构必要的所需信息并将其发送到数据库。

重新配置 Google OAuth

最后不要忘记在您的 Google API 中配置所有必要的授权 JavaScript 来源和授权重定向 URI。

欢呼!!!我们现在可以查看、享受和测试我们完成的应用程序

[](https://res.cloudinary.com/practicaldev/image/fetch/s--GZY0efSM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/bff4aljyb0k02xw9l0ii.png)

你可以在这里查看现场演示

您可以在查看和下载我们的源代码

结论

在本教程中,我们学习了如何使用新的 Google Identity Services SDK for React @react-oauth/google🚀 使用 Google OAuth2 对用户进行身份验证,并使用 JWT-DECODE 解码令牌。

我真的希望你今天学到了一些新东西,别忘了点赞、分享和评论。

参考文献

Google OAuth2 使用新的Google Identity Services SDK for React@react-oauth/google🚀

解码经过 Base64Url 编码的 JWT 令牌。