React+NodeJS+Nginx环境下如何实现OAuth0前后端统一认证流程

一、前期配置准备 #

首先在OAuth0控制台完成基础配置：

• 创建单页应用（SPA类型），配置允许的回调地址为 https://recognitiongame.eu/login/callback
• 配置允许的登出地址为 https://recognitiongame.eu，允许的Web源为 https://recognitiongame.eu
• 再创建对应NodeJS后端的API应用，记下三个核心参数：OAuth0域名、SPA客户端ID、后端API标识符（Audience），后续前后端开发都会用到

二、React SPA前端实现 #

依赖安装 #

执行命令安装官方SDK：npm install @auth0/auth0-react

基础配置 #

在项目入口文件外层包裹Auth0Provider组件，示例代码如下：

import { Auth0Provider } from '@auth0/auth0-react';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Auth0Provider
    domain="替换为你的OAuth0域名"
    clientId="替换为你的SPA客户端ID"
    authorizationParams={{
      audience: "替换为你的后端API标识符",
      redirect_uri: window.location.origin + '/login/callback'
    }}
  >
    <App />
  </Auth0Provider>
);

业务逻辑实现 #

• 路由配置：/login路径对应登录组件，加载后调用loginWithRedirect()方法跳转到OAuth0登录页，登录成功后SDK会自动解析回调返回的参数，将accessToken存储在本地
• 全局请求拦截：给axios/fetch添加请求拦截器，每次调用后端接口时自动携带token，示例代码如下：

axios.interceptors.request.use(async (config) => {
  const { getAccessTokenSilently } = useAuth0();
  try {
    const token = await getAccessTokenSilently();
    config.headers.Authorization = `Bearer ${token}`;
  } catch (e) {
    // 无法获取有效token时跳转登录页
    window.location.href = '/login';
  }
  return config;
});

• 路由守卫：给所有需要登录才能访问的路由添加校验逻辑，无有效token时直接跳转登录页

三、NodeJS后端实现 #

依赖安装 #

执行命令安装官方校验中间件：npm install express-oauth2-jwt-bearer

校验逻辑实现 #

初始化jwt校验中间件，所有需要鉴权的接口都挂载该中间件即可自动完成token有效性校验，示例代码如下：

const { auth } = require('express-oauth2-jwt-bearer');

// 初始化校验中间件
const jwtCheck = auth({
  audience: '替换为你的后端API标识符',
  issuerBaseURL: 'https://替换为你的OAuth0域名/',
  tokenSigningAlg: 'RS256'
});

// 给需要鉴权的接口挂载中间件
app.get('/api/user/info', jwtCheck, (req, res) => {
  // 校验通过后req.auth.payload会返回解析完成的token信息，可直接获取用户唯一标识等字段
  res.json({ userId: req.auth.payload.sub });
});

校验逻辑会自动验证token的签名、有效期、受众等核心字段，校验失败会直接返回401状态码。

四、Nginx部署配置 #

不需要针对OAuth0做特殊配置，只要保证SPA路由适配和接口转发规则正常即可，参考配置如下：

server {
  listen 443 ssl;
  server_name recognitiongame.eu;
  # SSL证书配置省略

  # 前端静态文件路径
  root /var/www/recognitiongame/dist;
  index index.html;

  # 接口请求转发到NodeJS服务
  location /api {
    proxy_pass http://127.0.0.1:3001;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  # SPA路由适配，避免刷新页面404
  location / {
    try_files $uri $uri/ /index.html;
  }
}

如果存在跨域问题，可直接在Nginx配置跨域头，或者在NodeJS服务中配置cors规则即可。

五、功能验证 #

1. 访问https://recognitiongame.eu/login，确认可以正常跳转到OAuth0登录页，登录完成后可以正常跳转回站点
2. 触发前端接口请求，检查请求头是否携带Authorization: Bearer xxx字段
3. 手动构造无效token请求后端接口，确认会返回401状态码，前端可以自动跳转登录页
4. 验证token过期场景，确认前端可以自动触发重新登录逻辑

内容的提问来源于stack exchange，提问作者Imre Revesz