React提取Autodesk Forge OAuth2.0授权码，Node.js Axios换访问令牌

当用户登录成功重定向回http://localhost:3001/时，URL中的code参数可以通过浏览器的URLSearchParams工具解析。在你的App.js里可以这么实现：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 解析URL中的查询参数
    const searchParams = new URLSearchParams(window.location.search);
    const authCode = searchParams.get('code');
    const state = searchParams.get('state');

    if (authCode) {
      // 这里建议把授权码传给后端处理（避免前端暴露敏感密钥）
      fetch('/api/exchange-token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ code: authCode }),
      })
      .then(res => res.json())
      .then(data => {
        console.log('拿到访问令牌:', data.access_token);
        // 可将令牌存入localStorage或状态管理工具供后续使用
      })
      .catch(err => console.error('换令牌失败:', err));
    }
  }, []);

  return (
    <div>
      <a href="你的授权登录URL">Grant Access</a>
    </div>
  );
}

export default App;

首先安装Axios依赖：

npm install axios

下面用Express框架写一个后端接口处理令牌兑换（如果不用Express，逻辑也通用）：

const express = require('express');
const axios = require('axios');
const app = express();

// 解析JSON请求体
app.use(express.json());

// 替换为你的授权服务配置信息
const CLIENT_ID = '你的客户端ID';
const CLIENT_SECRET = '你的客户端密钥';
const TOKEN_URL = '授权服务的令牌接口地址';
const REDIRECT_URI = 'http://localhost:3001/'; // 必须和授权时配置的重定向URI完全一致

app.post('/api/exchange-token', async (req, res) => {
  const { code } = req.body;

  try {
    // 发送POST请求兑换令牌，注意请求体要以x-www-form-urlencoded格式传递
    const response = await axios.post(TOKEN_URL, new URLSearchParams({
      grant_type: 'authorization_code',
      code: code,
      redirect_uri: REDIRECT_URI,
      client_id: CLIENT_ID,
      client_secret: CLIENT_SECRET,
    }), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    });

    // 将令牌返回给前端
    res.json(response.data);
  } catch (error) {
    console.error('兑换令牌出错:', error.response?.data || error.message);
    res.status(500).json({ error: '兑换令牌失败' });
  }
});

// 启动后端服务（端口避免和React冲突，比如用3000）
app.listen(3000, () => {
  console.log('后端服务运行在 http://localhost:3000');
});

• 敏感信息必须放在后端：客户端密钥绝对不能在前端代码中暴露，必须由后端发起兑换请求。
• 重定向URI必须完全匹配：授权服务后台配置的重定向地址，要和代码中的REDIRECT_URI完全一致，否则会被拒绝。
• 验证state参数防攻击：发起授权请求时建议生成随机state存在前端，重定向后对比该参数，防止CSRF攻击。

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