Next.js+Clerk与.NET 8 Web API认证互通问题求助

核心问题 #

Next.js登录Clerk后调用API时未正确传递认证令牌，导致.NET API判定未授权并返回302重定向到登录页。以下是具体解决步骤：

1. 在Next.js中正确获取Clerk认证令牌 #

使用Clerk官方提供的钩子或服务端方法获取有效令牌：

• 客户端组件：用useAuth钩子的getToken方法
• 服务器端（API路由/Server Components）：用getAuth方法

2. 调用API时在请求头携带令牌 #

所有请求.NET API的接口都要在Authorization头中带上Bearer {token}，确保API能识别Clerk的认证信息。

客户端组件调用示例

import { useAuth } from '@clerk/nextjs';

async function fetchAPI() {
  const { getToken } = useAuth();
  // 若.NET API配置了自定义令牌模板，替换为你的模板名称，否则用默认模板
  const clerkToken = await getToken({ template: 'dotnet-api' });

  if (!clerkToken) {
    console.error('未获取到Clerk认证令牌');
    return;
  }

  try {
    const res = await fetch('https://your-api-domain/api/your-endpoint', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${clerkToken}`,
        'Content-Type': 'application/json'
      }
    });

    if (!res.ok) {
      throw new Error(`请求失败：${res.status}`);
    }

    const data = await res.json();
    console.log('API返回数据:', data);
  } catch (err) {
    console.error('调用API出错:', err);
  }
}

Next.js API路由（服务器端）调用示例

import { getAuth } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';

export async function GET(request) {
  const { getToken } = getAuth(request);
  const clerkToken = await getToken({ template: 'dotnet-api' });

  if (!clerkToken) {
    return NextResponse.json({ error: '未授权' }, { status: 401 });
  }

  try {
    const apiRes = await fetch('https://your-api-domain/api/your-endpoint', {
      headers: {
        'Authorization': `Bearer ${clerkToken}`
      }
    });

    const data = await apiRes.json();
    return NextResponse.json(data);
  } catch (err) {
    return NextResponse.json({ error: '调用API失败' }, { status: 500 });
  }
}

3. 调整.NET API的认证配置避免302重定向 #

默认情况下，ASP.NET Core会将未授权请求重定向到登录页（返回302），但API场景应返回401状态码。在Program.cs中修改JWT认证配置：

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        // 替换为你的Clerk实例域名，比如https://your-clerk-domain.clerk.accounts.dev
        options.Authority = "https://your-clerk-instance-url";
        // 替换为你的API受众（在Clerk控制台配置）
        options.Audience = "your-api-audience";
        
        // 禁用自动重定向，返回401而非302
        options.Events = new JwtBearerEvents
        {
            OnChallenge = context =>
            {
                context.HandleResponse();
                context.Response.StatusCode = StatusCodes.Status401Unauthorized;
                return Task.CompletedTask;
            }
        };
    });

4. 关键检查项 #

• 确认Next.js和.NET API使用同一个Clerk实例（域名一致）
• 检查Clerk控制台中，API受众（Audience）已正确配置并与.NET API的options.Audience匹配
• 验证令牌是否有效：可以在Clerk控制台的令牌调试工具中解析获取到的令牌，检查issuer、audience、过期时间是否正确

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