在Next.js应用中从Auth0获取Access Token与社交媒体ID

一、客户端直接获取并发送到PHP API #

useUser钩子仅返回用户基础信息，要获取tokens需使用useSession钩子（@auth0/nextjs-auth0内置），同时可从user.sub字段提取社交媒体ID。

修改你的登录组件代码 #

import React from "react";
import { useUser, useSession } from "@auth0/nextjs-auth0";

const Login = () => {
  const { user, isLoading, error } = useUser();
  const { data: session } = useSession();

  // 提取tokens
  const accessToken = session?.accessToken;
  const idToken = session?.idToken;

  // 拆分社交媒体ID：user.sub格式为「oauth提供商|平台用户ID」
  let socialMediaId = null;
  if (user?.sub) {
    const [provider, userId] = user.sub.split('|');
    socialMediaId = userId;
  }

  // 发送数据到自定义PHP API的函数
  const sendToPHPAPI = async () => {
    if (!accessToken || !socialMediaId) return;
    
    try {
      const response = await fetch('https://你的PHPAPI地址/验证接口', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          accessToken,
          idToken,
          socialMediaId,
          auth0UserId: user?.sub
        })
      });
      const result = await response.json();
      console.log('PHP API返回结果:', result);
      // 后续处理：如存入本地状态、跳转页面等
    } catch (err) {
      console.error('发送请求失败:', err);
    }
  };

  return (
    <div>
      <div className="contentContainer">
        <div className="contentRight">
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              flexDirection: "column",
              height: "100vh",
              width: "100vw",
            }}
          >
            {user ? (
              <div style={{ display: "flex", flexDirection: "column", gap: '1rem' }}>
                <a href="/api/auth/logout">退出登录</a>
                <img src={user.picture} alt={user.name} />
                <h1>{user.name}</h1>
                <button onClick={sendToPHPAPI}>同步到自有数据库</button>
              </div>
            ) : (
              <a href="/api/auth/login">登录</a>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;

二、服务器端转发方案（更安全） #

若不想在客户端暴露tokens，可通过Next.js API路由在服务器端获取tokens并转发给PHP API，避免客户端直接接触敏感凭证。

1. 创建Next.js API路由（pages/api/forward-to-php.js） #

import { getSession } from '@auth0/nextjs-auth0';

export default async function handler(req, res) {
  // 从服务器端获取session
  const session = await getSession(req, res);
  if (!session) {
    return res.status(401).json({ error: '未授权' });
  }

  const { accessToken, idToken, user } = session;
  const [_, socialMediaId] = user.sub.split('|');

  try {
    // 转发请求到PHP API
    const response = await fetch('https://你的PHPAPI地址/验证接口', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        accessToken,
        idToken,
        socialMediaId,
        auth0UserId: user.sub
      })
    });
    const result = await response.json();
    res.status(response.status).json(result);
  } catch (err) {
    res.status(500).json({ error: '转发请求失败' });
  }
}

2. 前端调用该API路由 #

修改登录组件中的sendToPHPAPI函数：

const sendToPHPAPI = async () => {
  try {
    const response = await fetch('/api/forward-to-php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' }
    });
    const result = await response.json();
    console.log('PHP API返回结果:', result);
  } catch (err) {
    console.error('发送请求失败:', err);
  }
};

三、PHP API端验证Token示例 #

使用Auth0 PHP SDK验证Access Token的有效性，确保请求来自合法用户：

use Auth0\SDK\Auth0;

// 初始化Auth0 SDK
$auth0 = new Auth0([
  'domain' => '你的Auth0域名（如xxx.auth0.com）',
  'audience' => '你的PHP API在Auth0中注册的受众（Audience）',
]);

try {
  $accessToken = $_POST['accessToken'];
  // 验证Token的签名、过期时间、受众等
  $auth0->decodeToken($accessToken);

  // 验证通过后，处理自有数据库逻辑
  $socialMediaId = $_POST['socialMediaId'];
  // 示例：查询数据库是否存在该用户，不存在则创建
  // $user = 查询数据库操作...

  echo json_encode(['status' => 'success', 'message' => '用户验证通过']);
} catch (\Exception $e) {
  http_response_code(401);
  echo json_encode(['status' => 'error', 'message' => '无效Token']);
}

关键注意事项 #

• 确保Auth0应用已配置正确：在Auth0后台注册你的PHP API为API资源，设置受众（Audience），并在登录请求中请求对应权限。
• Access Token是短期有效凭证（默认24小时），过期后需重新登录或使用Refresh Token刷新（需在Auth0后台启用）。
• user.sub是Auth0全局唯一用户ID，格式固定为「提供商标识|平台用户ID」，可安全用于关联自有数据库用户。

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