使用Node.js OAuthClient授权码流遇401错误的解决请求

问题背景 #

开发一款需读取用户Google日历的SaaS应用，目标是用户首次授权后应用可随时访问其日历，无需重复授权。当前基于@react-oauth/google实现授权码流，前端已成功获取授权码并传给后端，但后端调用oAuth2Client.getToken(req.body.code)兑换访问令牌和刷新令牌时，出现401（未授权客户端）错误。

已完成配置：

• 在Google Cloud将后端配置为OAuth客户端
• 为该客户端授予Calendar API权限
• 用户均为个人Gmail账号，服务账号的域范围委派不适用

排查与解决步骤 #

1. 验证客户端信息与重定向URI匹配 #

• 确认后端代码中的CLIENT_ID和CLIENT_SECRET与Google Cloud控制台中OAuth客户端的信息完全一致，无拼写错误或多余空格
• 检查重定向URI配置：
  • 若前端使用postmessage作为回调（对应后端OAuth2Client初始化的'postmessage'参数），需在Google Cloud控制台的OAuth客户端设置中，将postmessage添加到已获授权的重定向URI
  • 同时将前端域名（如本地开发的http://localhost:3000）添加到已获授权的JavaScript来源

2. 补充授权请求的权限范围 #

前端发起授权请求时需明确指定Calendar API的权限范围，否则会导致权限不足或授权无效。修改前端useGoogleLogin配置：

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

export const LoginModal = () => {
    const googleLogin = useGoogleLogin({
        flow: "auth-code",
        // 根据需求选择权限：只读用calendar.readonly，读写用calendar
        scope: "https://www.googleapis.com/auth/calendar.readonly",
        onSuccess: async codeResponse => {
            console.log(codeResponse);
            const tokens = await axios.post("http://localhost:3001/auth/google/", {
                code: codeResponse.code
            });
            console.log(tokens);
        }
    })

    return (
        <>
            {/* 你的HTML代码 */}
            <button onClick={() => googleLogin()}>登录Google账号</button>
        </>
    )
}

3. 修正后端令牌兑换逻辑 #

确保后端OAuth2Client初始化的重定向URI与前端配置一致，并添加错误捕获便于排查：

require('dotenv').config();

const express = require('express');
const { OAuth2Client, UserRefreshClient } = require('google-auth-library');
const cors = require('cors');

const app = express();

app.use(cors());
app.use(express.json());

const CLIENT_ID = process.env.GOOGLE_CLIENT_ID;
const CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET;

// 初始化OAuth客户端，重定向URI需与Google控制台配置匹配
const oAuth2Client = new OAuth2Client(
    CLIENT_ID,
    CLIENT_SECRET,
    'postmessage' // 或前端实际地址，如http://localhost:3000
);

// 兑换授权码为令牌
app.post('/auth/google', async (req, res) => {
    try {
        const { tokens } = await oAuth2Client.getToken(req.body.code);
        // 此处可将tokens（含refresh_token）存储到数据库
        res.json(tokens);
    } catch (error) {
        console.error('令牌兑换失败:', error.response?.data || error.message);
        res.status(error.response?.status || 500).json({ 
            error: error.message,
            details: error.response?.data 
        });
    }
});

// 刷新访问令牌
app.post('/auth/google/refresh-token', async (req, res) => {
    try {
        const user = new UserRefreshClient(
            CLIENT_ID,
            CLIENT_SECRET,
            req.body.refreshToken,
        );
        const { credentials } = await user.refreshAccessToken();
        res.json(credentials);
    } catch (error) {
        console.error('刷新令牌失败:', error.response?.data || error.message);
        res.status(error.response?.status || 500).json({ error: error.message });
    }
})

app.listen(3001, () => {
    console.log(`服务器运行在端口3001`)
});

4. 确保授权码仅单次使用 #

授权码是一次性有效凭证，若前端重复发送同一授权码给后端会触发401错误，需确保每次授权请求都获取新的授权码并仅使用一次。

5. 确认Calendar API已启用 #

在Google Cloud控制台的「API和服务」→「已启用的API和服务」中，确认Calendar API已被启用，仅授予权限但未启用API也会导致授权失败。

内容的提问来源于stack exchange，提问作者Shrey Joshi