如何在React和Express应用程序中设置新的谷歌认证
在本文中，您将学习如何在React.js和Express.js应用程序中配置新的谷歌认证“用谷歌登录”按钮。
这种新方法简化了开发人员实现谷歌认证的方式。它带来了一些显著的优势，例如允许用户查看个人资料照片，以选择正确的谷歌帐户-这可以防止注册错误，并确保您的应用程序不会受到影响，当谷歌停止旧的“用谷歌登录JavaScript库于2023年3月31日发布。
值得注意的是，新创建的客户端id现在被阻止使用旧的客户端id平台库谷歌认证必须以这种方式实现。
生成一个谷歌客户端ID和秘密
实现谷歌身份验证的第一步是为您正在创建的应用程序生成客户端ID和秘密。
步骤1
我们首先前往谷歌控制台．
步骤2
点击上面突出显示的下拉菜单。之后，单击下面突出显示的新项目。
步骤3
添加项目名称。我选择了connect-google-auth-article．
步骤4
单击步骤1中的下拉菜单选择项目。
步骤5
您看到的下一个屏幕应该类似于下面的示例。然后点击仪表板。
步骤6
下一步是配置oauth同意。要实现这一点，请将鼠标悬停在“api和服务”上，然后单击“OAuth同意屏幕”。
步骤7
选择您想要的同意类型。我选择了外部和打击创建．
步骤8
一旦设置了同意，点击凭证来设置你的应用细节。由于我的应用程序托管在本地主机上，我设置如下图所示的细节。
注意:当您准备好部署应用程序时，您应该将URI1和URI2替换为您想要使用的域名—例如https://example.com．
步骤9
成功存储凭据后，可以复制或下载生成的客户端ID和Secret。
安装React应用程序
引导React.js应用程序最简单的方法是使用创建React应用．
因此，创建一个文件夹，命名为任何你想要的。然后打开终端，运行以下代码:NPX create-react-app app．
设置快速服务器
在根目录下创建另一个文件夹。我在命名我的服务器．然后，打开一个终端，cd到服务器:光盘服务器．
之后，创建一个server.js文件，然后生成package.json通过运行NPM init -y．接下来，安装以下包:
- Express.js:“一个最小且灵活的Node.js web应用程序框架，为web和移动应用程序提供了一组健壮的功能”。
- CORS:一个Node.js包，用于提供一个Connect/Express中间件，该中间件可用于通过各种选项实现跨源资源共享。
- Dotenv:加载环境变量的Node.js包
.env文件。 - Google-auth- Library:谷歌API的Node.js认证客户端库。
- Jsonwebtoken:用于Node.js的JSON Web Token实现库。
- Nodemon:一个简单的监控脚本，用于开发Node.js应用程序。
可以执行以下命令安装上述软件包:
npm安装Express cors dotenv google-auth-library jsonwebtoken nodemon之后，通过这样做配置你的脚本:
/ / package.json“脚本”：｛“开始”：“节点server.js”，“开发”：“nodemon server.js”｝，你的package.json应该是这样的:
/ / package.json｛“名称”：“connect-google-auth-article”，“版本”：“1.0.0”，“描述”：＂＂，“主要”：“server.js”，“脚本”：｛“开始”：“节点server.js”，“开发”：“nodemon server.js”｝，“依赖”：｛“歌珥”：“^ 2.8.5”，“dotenv”：“^ 16.0.2”，“表达”：“^ 4.18.1”，“google-auth-library”：“^ 8.5.2”，“jsonwebtoken”：“^ 8.5.1”，“nodemon”：“^ 2.0.20”｝，“关键词”：［］，“作者”：＂＂，“许可证”：“ISC”｝在此之后，将以下代码写入server.js和运行运行开发启动你的服务器:
/ / server.js常量表达＝需要（“表达”）；常量应用程序＝表达（）；需要（“dotenv /配置”）；//配置从.env读取常量歌珥＝需要（“歌珥”）；常量｛OAuth2Client｝＝需要（“google-auth-library”）；常量jwt＝需要（“jsonwebtoken”）；应用程序．使用（歌珥（｛起源：［“http://localhost: 3000”］，方法：“GET、POST、PUT、DELETE选项”，｝））；应用程序．使用（表达．json（））；让DB＝［］；应用程序．听（“5152”，（）= >控制台．日志（“服务器运行在端口5152上”））；准备React应用程序
为了准备我们的客户端应用程序，我们将添加谷歌脚本到我们的头部公共/ index . html文件:
<！--index . html--><脚本src＝＂https://accounts.google.com/gsi/client＂异步推迟>脚本>我们的index . html文件应该是这样的:
<！--index . html--><！文档类型超文本标记语言><超文本标记语言朗＝＂在＂><头><元字符集＝＂utf - 8＂/><链接rel＝＂图标＂href＝＂% PUBLIC_URL % / ico。位于＂/><元的名字＝＂视窗＂内容＝＂宽度=设备宽度,初始= 1＂/><元的名字＝＂主题颜色＂内容＝＂# 000000＂/><元的名字＝＂描述＂内容＝＂使用create-react-app创建的网站＂/><链接rel＝＂apple-touch-icon＂href＝＂% PUBLIC_URL % / logo192.png＂/><链接rel＝＂清单＂href＝＂% PUBLIC_URL % / manifest.json＂/><！--去ogle Signup/signin script --><脚本src＝＂https://accounts.google.com/gsi/client＂异步推迟>脚本><标题>反应的应用标题>头><身体><noscript>您需要启用JavaScript来运行此应用程序。noscript><divid＝＂根＂>div>身体>超文本标记语言>接下来，我们将在src：屏幕而且钩子．
的屏幕文件夹将包含五个文件:Home.jsx，Landing.jsx，Login.jsx，Signup.jsx而且index.js．的钩子文件夹将只包含一个文件:useFetch.jsx．
配置客户端路由
我们将用于客户端路由的包是react-router-dom．打开一个新的终端，cd到应用程序中，并运行以下代码:NPM安装react-router-dom．
然后我们可以更新App.js看起来像这样:
/ / App.js进口反应，｛useEffect｝从“反应”；进口｛useState｝从“反应”；进口｛BrowserRouter，路线，路线，导航｝从“react-router-dom”；常量应用程序＝（）= >｛常量［用户，setUser］＝useState（｛｝）；返回（<BrowserRouter><路线></路线></BrowserRouter>）；｝；出口默认的应用程序；创建登录页面
在我们的例子中，登录页面是对未经身份验证的用户可用的唯一页面。它将包含到注册和登录页面的链接。它看起来是这样的:
/ / Landing.jsx进口反应从“反应”；进口｛链接｝从“react-router-dom”；常量着陆＝（）= >｛返回（<><标题样式＝｛｛textAlign：“中心”｝｝><h1>欢迎我的世界</h1></头><主要的风格＝｛｛显示：“弯曲”，justifyContent：“中心”，差距：“2快速眼动”｝｝><链接来＝“/注册”风格＝｛｛textDecoration：“没有”，边境：1px纯灰色，填充：“0.5雷姆1快速眼动”，写成backgroundColor：“小麦”，颜色：“333 #”，｝｝>标志向上</链接><链接来＝“/登录”风格＝｛｛textDecoration：“没有”，边境：1px纯灰色，填充：“0.5雷姆1快速眼动”，写成backgroundColor：“烟白”，颜色：“333 #”，｝｝>登录</链接></主要></>）；｝；出口默认的着陆；让我们来分析一下:
- 该组件返回一个由空标记表示的React片段元素。
- 该片段包含两个元素:
<标题>而且<大>．标头返回一个<标题>并将其中的文本居中，而main元素返回来自的两个链接react-router-dom并居中。 - 为两个链接提供了不同的背景色，以提高用户体验。
接下来，我们可以打开屏幕/ index.js文件并导出Landing.jsx像这样:
/ / index.js出口｛默认的作为着陆｝从”。/着陆”；之后，我们可以将它导入App.js文件，我们为它配置路由:
/ / App.js进口｛着陆｝从”。/屏幕”；另外:
/ / App.js<路线路径＝“/”元素＝｛用户？.电子邮件?<导航来＝“/ home”/>：<着陆/>｝/>创建一个useFetch钩子
一个钩是一种特殊的函数，它允许你使用React的功能。要创建钩子，打开钩子/ useFetch.jsx并添加以下代码:
/ / useFetch.jsx进口｛useState｝从“反应”；常量useFetch＝（url）= >｛常量［加载，setLoading］＝useState（假）；常量［错误，setError］＝useState（＂＂）；常量handleGoogle＝异步（响应）= >｛控制台．日志（响应）｝；返回｛加载，错误，handleGoogle｝；｝；出口默认的useFetch；创建注册页面
打开屏幕/ Signup.jsx文件并添加以下代码:
/ / Signup.jsx进口反应，｛useEffect｝从“反应”；进口｛链接｝从“react-router-dom”；进口useFetch从“. . /钩/ useFetch”；/ / https://developers.google.com/identity/gsi/web/reference/js-reference常量注册＝（）= >｛常量｛handleGoogle，加载，错误｝＝useFetch（“http://localhost: 5152 /注册”）；useEffect（（）= >｛/* global谷歌*/如果（窗口．谷歌）｛谷歌．账户．id．初始化（｛client_id：过程．env．REACT_APP_GOOGLE_CLIENT_ID，回调：handleGoogle，｝）；谷歌．账户．id．renderButton（文档．getElementById（“signUpDiv”），｛// type: "standard"，主题：“filled_black”，// size: "small"，文本：“continue_with”，形状：“药”，｝）；/ / google.accounts.id.prompt ()｝｝，［handleGoogle］）；返回（<><导航样式＝｛｛填充：“2快速眼动”｝｝><链接来＝“/”>去回来</链接></导航><标题样式＝｛｛textAlign：“中心”｝｝><h1>注册来继续</h1></头><主要的风格＝｛｛显示：“弯曲”，justifyContent：“中心”，flexDirection：“列”，alignItems：“中心”，｝｝>｛错误＆＆<p风格＝｛｛颜色：“红色”｝｝>｛错误｝</p>｝｛加载?（<div>加载.．.．</div>）：（<div id＝“signUpDiv”数据-文本＝“signup_with”></div>）｝</主要><页脚></页脚></>）；｝；出口默认的注册；让我们来分析一下:
- 中提取可用的状态和函数
useFetch钩。我们还将将调用的URL传递给服务器以处理登录。 - 在
useEffect，我们检查谷歌的脚本的可用性-由我们放入public.index.html文件。 - 然后我们使用
初始化方法处理身份验证按钮的功能。 - 我们还传递一个回调函数，它已经在
useFetch钩。
接下来，我们将使用renderButton方法在屏幕上显示身份验证按钮。参数传递的第一个参数是按钮将嵌入其中的元素getElementById方法。接下来可以传递的参数用于自定义按钮的外观。它具有以下必需的设置:
类型:这接受两个值-标准和图标。
此外，它有可选的设置，包括以下:
主题:按钮主题。它可以接受以下选项之一:filled_blue，大纲,filled_black．大小:定义按钮的大小。它接受大，媒介,小．文本:定义按钮文本。它接受下列条件之一:signin_with，signup_with，continue_with,signin．形状:定义按钮的形状。它接受矩形，药丸，圆,或广场．logo_alignment:定义图标如何放置在按钮中。它可以接受左或中心．宽度:定义按钮的宽度。值得注意的是，最大宽度为400。
另一个选择是语言环境，用于设置为特定的语言。
我们还检查错误的可用性并将其显示给用户。我们还检查加载状态。
创建登录页面
登录页面类似于注册页面。唯一的区别是服务器URL和按钮文本。代码应该是这样的:
/ / Login.jsx进口反应，｛useEffect｝从“反应”；进口｛链接｝从“react-router-dom”；进口useFetch从“. . /钩/ useFetch”；/ / https://developers.google.com/identity/gsi/web/reference/js-reference常量登录＝（）= >｛常量｛handleGoogle，加载，错误｝＝useFetch（“http://localhost: 5152 /登录”）；useEffect（（）= >｛/* global谷歌*/如果（窗口．谷歌）｛谷歌．账户．id．初始化（｛client_id：过程．env．REACT_APP_GOOGLE_CLIENT_ID，回调：handleGoogle，｝）；谷歌．账户．id．renderButton（文档．getElementById（“loginDiv”），｛// type: "standard"，主题：“filled_black”，// size: "small"，文本：“signin_with”，形状：“药”，｝）；/ / google.accounts.id.prompt ()｝｝，［handleGoogle］）；返回（<><导航样式＝｛｛填充：“2快速眼动”｝｝><链接来＝“/”>去回来</链接></导航><标题样式＝｛｛textAlign：“中心”｝｝><h1>登录来继续</h1></头><主要的风格＝｛｛显示：“弯曲”，justifyContent：“中心”，flexDirection：“列”，alignItems：“中心”，｝｝>｛错误＆＆<p风格＝｛｛颜色：“红色”｝｝>｛错误｝</p>｝｛加载?<div>加载.．.．</div>：<div id＝“loginDiv”></div>｝</主要><页脚></页脚></>）；｝；出口默认的登录；注意:google.accounts.id.prompt ()是用来自动要求用户登录立即他们打开你的网页。它可以放在根文件或登录页面中。
同时创建一个.env.local文件，并添加以下内容:
REACT_APP_GOOGLE_CLIENT_ID＝您的客户id中导出注册和登录页面screens.index.js文件:
/ / index.js……出口｛默认的作为登录｝从”。/登录”；出口｛默认的作为注册｝从”。/注册”；配置路由App.js文件:
/ / App.js进口｛着陆，登录，注册｝从”。/屏幕”；另外:
/ / App.js<路线路径＝“/注册”元素＝｛用户？.电子邮件?<导航来＝“/ home”/>：<注册/>｝/><路线路径＝“/登录”元素＝｛用户？.电子邮件?<导航来＝“/ home”/>：<登录/>｝/>更新useFetch
谷歌身份验证返回带有JWT凭据的响应。但是，为了验证其真实性并为用户创建会话，我们将对服务器进行后续调用。我们应该更新钩子/ useFetch文件看起来像这样:
/ / useFetch.jsx常量handleGoogle＝异步（响应）= >｛setLoading（真正的）；获取（url，｛方法：“职位”，头：｛“内容类型”：“application / json”，｝，身体：JSON．stringify（｛凭证：响应．凭证｝），｝）．然后（（res）= >｛setLoading（假）；返回res．json（）；｝）．然后（（数据）= >｛如果（数据？.用户）｛localStorage．setItem（“用户”，JSON．stringify（数据？.用户））；窗口．位置．重新加载（）；｝扔新错误（数据？.消息||数据）；｝）．抓（（错误）= >｛setError（错误？.消息）；｝）；｝；让我们来分析一下:
- 我们的回调函数接受来自谷歌身份验证的参数作为响应传入。
- 然后我们使用
获取向服务器发出请求。 - 当我们得到适当的响应时，我们将用户存储到
localStorageJSON格式。
创建注册和登录路由
打开server.js文件。首先，我们将创建一个函数来验证我们将接收的凭证:
/ / server.js/** *验证谷歌帐号*/常量GOOGLE_CLIENT_ID＝过程．env．GOOGLE_CLIENT_ID；常量客户端＝新OAuth2Client（GOOGLE_CLIENT_ID）；异步函数verifyGoogleToken（令牌）｛试一试｛常量票＝等待客户端．verifyIdToken（｛idToken：令牌，观众：GOOGLE_CLIENT_ID，｝）；返回｛有效载荷：票．getPayload（）｝；｝抓（错误）｛返回｛错误："检测到无效用户。请再试一次”｝；｝｝创建一个.env在服务器根目录下，添加如下内容:
＃．envGOOGLE_CLIENT_ID＝您的客户idJWT_SECRET＝mySecret接下来，创建注册路径:
/ / server.js应用程序．帖子（“/注册”，异步（要求的事情，res）= >｛试一试｛// console.log({verified: verifyGoogleToken(req.body.credential)});如果（要求的事情．身体．凭证）｛常量verificationResponse＝等待verifyGoogleToken（要求的事情．身体．凭证）；如果（verificationResponse．错误）｛返回res．状态（400）．json（｛消息：verificationResponse．错误，｝）；｝常量配置文件＝verificationResponse？.有效载荷；DB．推（配置文件）；res．状态（201）．json（｛消息：“注册成功”，用户：｛firstName：配置文件？.given_name，姓：配置文件？.family_name，图片：配置文件？.图片，电子邮件：配置文件？.电子邮件，令牌：jwt．标志（｛电子邮件：配置文件？.电子邮件｝，“myScret”，｛expiresIn：“一维”，｝），｝，｝）；｝｝抓（错误）｛res．状态（500）．json（｛消息：“发生错误。注册失败了。”，｝）；｝｝）；同时创建登录路由:
/ / server.js应用程序．帖子（“/登录”，异步（要求的事情，res）= >｛试一试｛如果（要求的事情．身体．凭证）｛常量verificationResponse＝等待verifyGoogleToken（要求的事情．身体．凭证）；如果（verificationResponse．错误）｛返回res．状态（400）．json（｛消息：verificationResponse．错误，｝）；｝常量配置文件＝verificationResponse？.有效载荷；常量existsInDB＝DB．找到（（人）= >人？.电子邮件= = =配置文件？.电子邮件）；如果（！existsInDB）｛返回res．状态（400）．json（｛消息：“你没有登记。请报名吧。”，｝）；｝res．状态（201）．json（｛消息："登入成功"，用户：｛firstName：配置文件？.given_name，姓：配置文件？.family_name，图片：配置文件？.图片，电子邮件：配置文件？.电子邮件，令牌：jwt．标志（｛电子邮件：配置文件？.电子邮件｝，过程．env．JWT_SECRET，｛expiresIn：“一维”，｝），｝，｝）；｝｝抓（错误）｛res．状态（500）．json（｛消息：错误？.消息||错误，｝）；｝｝）；让我们来分析一下:
- 在路由中，我们首先检查凭证是否传递到主体中。然后尝试验证凭据。如果出现错误，我们将其以JSON格式发送回客户端。
- 在注册路由中，我们将用户的配置文件存储在DB数组中，并以JWT签名的电子邮件作为令牌发送成功响应。
- 在登录路由中，我们检查用户是否存在于DB中，如果不存在，则抛出一个错误。如果它存在，我们还会发送一个成功响应，并使用JWT签名的电子邮件作为带有其他参数的令牌。
更新App.js
在App.js的文件中，我们将更新该文件以检查本地存储使用以下代码:
/ / App.jsuseEffect（（）= >｛常量使用＝localStorage．getItem（“用户”）；如果（使用＆＆！使用．包括（“定义”））｛setUser（JSON．解析（使用））；｝｝，［］）；创建Home.jsx
的Home.jsxFile是用户成功注册或登录后可用的页面:
/ / Home.jsx进口反应从“反应”；常量首页＝（｛用户｝）= >｛常量注销＝（）= >｛localStorage．removeItem（“用户”）；窗口．位置．重新加载（）；｝；返回（<div风格＝｛｛textAlign：“中心”，保证金：“3快速眼动”｝｝><h1>亲爱的｛用户？.电子邮件｝</h1><p>你正在查看这页面，因为您已记录了日志在或者你只是注册了</p><div><按钮onClick＝｛注销｝风格＝｛｛颜色：“红色”，边境：1px纯灰色，写成backgroundColor：“白色”，填充：“0.5雷姆1快速眼动”，光标：“指针”，｝｝>注销</按钮></div></div>）；｝；出口默认的首页；接下来，我们将从屏幕/ index.js文件是这样的:
出口｛默认的作为首页｝从“/ Home。”；在此之后，我们将导入并设置它的路由App.js：
进口｛首页，着陆，登录，注册｝从”。/屏幕”；另外:
<路线路径＝“/ home”元素＝｛用户？.电子邮件?<首页用户＝｛用户｝/>：<导航来＝“/”/>｝/>结论
恭喜你!我们已经设置了新的谷歌身份验证。
相关阅读:
