React/TypeScript应用OAuth2授权码模式实现方案咨询

我正在开发一款基于React/TypeScript的应用，通过Fitbit和Oura API获取数据并生成周度仪表盘。作为前端开发者，我没有后端开发经验。由于这两个API均要求采用OAuth2的Authorization Code Grant（服务器端）模式完成认证，我需要一个服务器来接收授权码并自动向API请求访问令牌，再返回给我的应用。目前我用Google Firebase管理数据，但没找到在Firebase中实现该功能的方法。请问对于前端开发者而言，最高效、低门槛的集成方案是什么？

我当前使用@tasoskakour/react-use-oauth2包的useOAuth2钩子，现有隐式流示例代码如下：

import { useOAuth2 } from '@tasoskakour/react-use-oauth2'

type AuthorizeApi = {
    url: string
    id: string
    scope: string
}

function AuthorizeWearableButton({ url, id, scope }: AuthorizeApi) {
    const { data, loading, error, getAuth } = useOAuth2({
        authorizeUrl: url,
        clientId: id,
        redirectUri: `${document.location.origin}/callback`,
        responseType: 'token',
        scope,
        onSuccess: (payload) => console.log('Success', payload),
        onError: (error_) => console.log('Error', error_),
    })

    return (
        <button
            className="rounded-lg px-12 py-8 bg-green-600 text-white"
            type="button"
            onClick={() => getAuth()}
        >
            Authorize
        </button>
    )
}

export default AuthorizeWearableButton

针对你的情况，推荐以下几个无需复杂后端开发的方案，都是前端开发者容易上手的：

1. Firebase Cloud Functions（适配现有技术栈） #

你已经在用Firebase，其实可以用它的云函数实现OAuth2授权码流程，步骤如下：

• 创建HTTP类型云函数，作为授权回调接收端点（比如/api/fitbit-callback和/api/oura-callback）
• 用户在前端触发授权后，跳转到Fitbit/Oura的授权页面，授权成功后授权码会传到你的云函数端点
• 云函数接收到授权码后，用客户端ID、客户端密钥向Fitbit/Oura的令牌端点POST请求，获取访问令牌和刷新令牌
• 云函数把令牌返回给前端，或存入Firebase Auth的用户自定义Claims，方便后续前端调用API

示例云函数（以Fitbit为例）：

const functions = require("firebase-functions");
const axios = require("axios");

exports.fitbitCallback = functions.https.onRequest(async (req, res) => {
  const { code } = req.query;
  const clientId = functions.config().fitbit.client_id;
  const clientSecret = functions.config().fitbit.client_secret;
  const redirectUri = "https://your-firebase-project.cloudfunctions.net/fitbitCallback";

  try {
    const tokenResponse = await axios.post(
      "https://api.fitbit.com/oauth2/token",
      new URLSearchParams({
        grant_type: "authorization_code",
        code,
        redirect_uri: redirectUri,
        client_id: clientId,
        client_secret: clientSecret,
      }).toString(),
      {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }
    );

    // 可将令牌存入Firebase Firestore或用户Auth，再重定向回前端传递令牌
    res.redirect(`https://your-frontend-domain.com/dashboard?access_token=${tokenResponse.data.access_token}&refresh_token=${tokenResponse.data.refresh_token}`);
  } catch (error) {
    functions.logger.error("Token request failed", error);
    res.redirect(`https://your-frontend-domain.com/error?message=${error.message}`);
  }
});

前端修改useOAuth2配置为授权码模式：

import { useOAuth2 } from '@tasoskakour/react-use-oauth2'

type AuthorizeApi = {
    url: string
    id: string
    scope: string
    callbackUrl: string // 新增云函数回调地址
}

function AuthorizeWearableButton({ url, id, scope, callbackUrl }: AuthorizeApi) {
    const { data, loading, error, getAuth } = useOAuth2({
        authorizeUrl: url,
        clientId: id,
        redirectUri: callbackUrl, // 替换为云函数回调地址
        responseType: 'code', // 切换为授权码模式
        scope,
        onSuccess: (payload) => console.log('Success', payload),
        onError: (error_) => console.log('Error', error_),
    })

    return (
        <button
            className="rounded-lg px-12 py-8 bg-green-600 text-white"
            type="button"
            onClick={() => getAuth()}
        >
            Authorize
        </button>
    )
}

export default AuthorizeWearableButton

2. Netlify/Vercel 无服务器函数 #

如果用Netlify或Vercel部署前端，可直接在项目中创建netlify/functions或pages/api目录，编写Node.js函数处理授权码交换，逻辑和Firebase Cloud Functions类似，部署更简单，无需额外配置云函数环境。

示例Vercel API路由（pages/api/oura-callback.ts）：

import type { NextApiRequest, NextApiResponse } from 'next'
import axios from 'axios'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { code } = req.query
  const clientId = process.env.OURA_CLIENT_ID
  const clientSecret = process.env.OURA_CLIENT_SECRET
  const redirectUri = 'https://your-vercel-project.vercel.app/api/oura-callback'

  try {
    const tokenResponse = await axios.post(
      'https://api.ouraring.com/oauth/token',
      new URLSearchParams({
        grant_type: 'authorization_code',
        code: code as string,
        redirect_uri: redirectUri,
        client_id: clientId,
        client_secret: clientSecret,
      }).toString(),
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      }
    )

    res.redirect(`https://your-frontend-domain.com/dashboard?${new URLSearchParams(tokenResponse.data).toString()}`)
  } catch (error) {
    res.status(500).json({ error: 'Failed to fetch token' })
  }
}

• 客户端密钥必须存于服务器环境变量，绝对不能暴露在前端代码中
• 刷新令牌需妥善保存（如存入Firebase Auth用户Claims或前端HttpOnly Cookie），用于定期刷新访问令牌
• 回调地址必须与Fitbit/Oura开发者后台配置的地址完全一致

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