如何在React和Express应用中设置新的Google Auth

>本文演示了如何将新的Google登录按钮集成到React.js和Express.js应用程序中。 与不弃用的JavaScript库相比，使用Google的Identity Service SDK使用了更新的“使用Google登录”按钮，提供了简化且更安全的身份验证体验。 此改进的方法包括诸如用于帐户选择的个人资料图片预览和一个点击登录的功能。>>

密钥功能：

• 简化的Google Auth：本指南简化了新的Google登录按钮在React和Express应用程序中的集成，强调了易于使用和安全性增强功能。>
>逐步实现：>文章提供了详细的演练，涵盖了从生成Google客户端ID到秘密到对客户端和服务器侧面处理身份验证的所有步骤。为了清楚
• ，包括代码片段。 完整的解决方案：
教程提供了指向服务器和客户端实现的完整源代码的链接。
设置Google凭据：

>

Google Cloud Console：

访问Google Cloud Console。
1. 新项目：
创建一个新项目（例如，
2. ）。> connect-google-auth-2024 oauth同意屏幕：
配置OAuth同意屏幕，提供应用程序详细信息（名称，电子邮件，徽标）。 切记在部署时用您的实际域替换占位符uris。
3. > 凭据：
使用“ Web Application”类型创建OAuth 2.0客户端ID。 添加
4. 和作为授权的重定向URI（稍后用您的生产域替换）。 http://localhost>http://localhost:3000>下载凭据：
>下载或复制客户ID和秘密。

> React App Setup：

>使用创建React App或Vite创建React应用程序。安装：

@react-oauth/google Express Server设置：

npm install @react-oauth/google

创建服务器文件夹并安装以下软件包：

>使用

和

配置

npm install express cors dotenv google-auth-library jsonwebtoken nodemon

脚本。 用您的

>和package.json。 startdev>客户端实现（react）：nodemon>

使用@react-oauth/google库的GoogleLogin组件。 使用react-router-dom实施路由。 创建用于着陆，注册，登录和家庭页面的组件。 自定义挂钩（useFetch）处理对Express Server的API调用以进行身份​​验证。>

>服务器端实现（Express）： Express Server使用>验证Google令牌。 它包括

和

路由，以处理React应用程序的身份验证请求。 JWT用于会话管理。 对于无效令牌和其他问题，实施了错误处理。google-auth-library> /signup/login附加说明：

> >本文涵盖了创建一个自定义的Google登录按钮，以获得更好的品牌。>

一击登录被解释和实现。

> 讨论了
• 令牌刷新机制。
>
• >用于管理用户详细信息和处理错误的最佳实践。
提供了与其他身份验证方法的比较。
• >
• >此修订后的响应维护原始图像顺序和格式，同时显着提高了信息的清晰度和组织。 它将冗长的原始文本凝结成适合重写文章的更简洁，更可读的格式。

以上是如何在React和Express应用中设置新的Google Auth的详细内容。更多信息请关注PHP中文网其他相关文章！