在React和Express应用中设置新版Google认证

主要内容

生成Google客户端ID和密钥

首先需要在Google Cloud Console中创建OAuth 2.0客户端ID和密钥：

访问Google控制台并创建新项目
配置OAuth同意屏幕，填写应用名称、支持邮箱等信息
创建Web应用类型的凭据，设置授权重定向URI
下载生成的客户端ID和密钥

设置React应用

使用Create React App或Vite创建React应用，安装必要的依赖包：

1
2


npx create-react-app app
npm install @react-oauth/google react-router-dom

配置Express服务器

创建服务器文件夹并安装所需包：

1

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

配置服务器脚本和基本设置：

1
2
3
4
5
6


{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  }
}

客户端路由配置

使用react-router-dom配置客户端路由，包括：

登录页面
注册页面
首页
落地页

创建自定义Hook

实现useFetch Hook处理Google认证响应：

1
2
3
4
5
6
7
8
9


const useFetch = (url) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleGoogle = async (response) => {
    // 处理认证逻辑
  };
  return { loading, error, handleGoogle };
};

实现认证页面

创建登录和注册页面，集成Google认证按钮：

1

import { GoogleLogin } from '@react-oauth/google';

服务器端认证路由

实现验证Google令牌的函数和认证路由：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


async function verifyGoogleToken(token) {
  // 验证令牌逻辑
}

app.post("/signup", async (req, res) => {
  // 注册逻辑
});

app.post("/login", async (req, res) => {
  // 登录逻辑
});

令牌管理和刷新

实现JWT令牌的生成和刷新机制：

1
2
3


jwt.sign({ email: profile?.email }, process.env.JWT_SECRET, {
  expiresIn: "1d",
});

自定义登录按钮

创建符合品牌风格的自定义登录按钮：

1
2
3
4
5
6
7
8
9


import { useGoogleLogin } from '@react-oauth/google';

const CustomGoogleButton = () => {
  const login = useGoogleLogin({
    onSuccess: (response) => console.log(response),
    onError: () => console.error('Login Failed'),
  });
  // 自定义按钮样式
};

One Tap登录功能

启用一键登录功能：

1
2
3
4
5


google.accounts.id.prompt((notification) => {
  if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
    console.warn("One Tap prompt was not displayed.");
  }
});

与其他认证方法的比较

方法	优点	缺点
Google认证	无缝登录、个人资料集成、支持One Tap登录	需要Google账户、依赖第三方服务
Facebook认证	社交集成、用户基数大	隐私问题、采用率低于Google
GitHub认证	适合开发者工具、与GitHub API集成	仅限于开发者、不适合通用应用
邮箱/密码	不依赖第三方服务	需要额外的密码管理安全措施

结论

成功在React.js和Express.js应用中实现了新版Google认证，支持Web登录和One Tap登录功能。这种结合React Google Auth、Google OAuth React和react-oauth/google的方案提供了强大的认证框架，既简化了集成过程又保持了可扩展性。

完整源代码可在服务器端和客户端获取。

常见问题解答

如何在React应用中使用Express后端设置Google登录？

在Google开发者控制台创建凭据获取客户端ID，配置OAuth同意屏幕，安装必要的npm包，使用react-google-login组件进行前端集成。

如何安全地获取访问令牌？

使用react-oauth/google包，利用Google的OAuth 2.0协议安全处理认证令牌。

如何实现注销功能？

提供注销按钮，移除本地存储中的用户详情和服务器会话，重定向到登录页面。

如何刷新令牌？

使用Google OAuth 2.0服务器提供的刷新令牌获取新的访问令牌，在Express后端设置中间件检查令牌有效性。

如何创建自定义登录按钮？

通过react-google-login组件提供的自定义选项，可以修改按钮的大小、文本和颜色等外观属性。

在React和Express应用中配置新版Google认证的完整指南

本文详细介绍了如何在React.js和Express.js应用中集成新版Google认证，包括生成Google客户端ID和密钥、配置前后端认证流程、实现One Tap登录功能以及与其他认证方法的对比分析。