WebアプリをAIから操作できるようにした話（第3回）— Bearer Token認証とDynamoDBによるトークン管理

{
  "mcpServers": {
    "team-task-scheduler": {
      "type": "http",
      "url": "https://your-app.cloudfront.net/api/mcp",
      "headers": {
        "Authorization": "Bearer <your-token>"
      }
    }
  }
}

// メインレコード（ユーザーIDで引ける）
PK: USER#<userId>
SK: MCP_TOKEN#<tokenId>
{
  tokenId, name, hashedToken, userId, createdAt, lastUsedAt
}

// ハッシュ逆引きレコード（トークンハッシュで認証できる）
PK: MCP_TOKEN_HASH#<hashedToken>
SK: METADATA
{
  tokenId, userId, name
}

// src/lib/mcp/auth.ts
import crypto from 'crypto';

export function generateToken(): { raw: string; hashed: string } {
  const raw = crypto.randomBytes(32).toString('hex'); // 64文字
  const hashed = crypto.createHash('sha256').update(raw).digest('hex');
  return { raw, hashed };
}

export async function authenticateMcpRequest(
  authHeader: string | null
): Promise<{ userId: string; tokenId: string } | null> {
  if (!authHeader?.startsWith('Bearer ')) return null;

  const rawToken = authHeader.slice(7); // "Bearer " を除く
  if (!rawToken) return null;

  const hashed = crypto.createHash('sha256').update(rawToken).digest('hex');

  // DynamoDB でハッシュ逆引き
  const record = await mcpTokenRepository.findByHash(hashed);
  if (!record) return null;

  // lastUsedAt を非同期更新（レスポンスを遅延させない）
  mcpTokenRepository.updateLastUsed(record.tokenId, record.userId).catch(() => {});

  return { userId: record.userId, tokenId: record.tokenId };
}

// プロジェクト一覧取得
async handler(args, userId) {
  const teamId = args.teamId as string;

  // 認可チェック
  const isMember = await teamRepository.isMember(teamId, userId);
  if (!isMember) {
    return errorResult('このチームへのアクセス権がありません');
  }

  const projects = await projectRepository.findByTeamId(teamId);
  return json({ projects, count: projects.length });
}

// タスク更新
async handler(args, userId) {
  const taskId = args.taskId as string;
  const task = await taskRepository.findById(args.projectId as string, taskId);
  if (!task) return errorResult('タスクが見つかりません');

  // タスク → プロジェクト → チーム の連鎖でチームIDを取得
  const project = await projectRepository.findById(task.projectId);
  const isMember = await teamRepository.isMember(project.teamId, userId);
  if (!isMember) return errorResult('アクセス権がありません');

  // 更新処理...
}

// src/app/api/mcp-tokens/route.ts

// GET: トークン一覧（tokenId, name, createdAt, lastUsedAt のみ。hashedToken は返さない）
export async function GET(request: NextRequest) {
  const session = await auth();
  if (!session?.user?.id) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

  const tokens = await mcpTokenRepository.findByUserId(session.user.id);
  return NextResponse.json({ tokens });
}

// POST: トークン発行（生トークンは1回のみ返す）
export async function POST(request: NextRequest) {
  const session = await auth();
  if (!session?.user?.id) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

  const { name } = await request.json() as { name: string };
  const { raw, hashed } = generateToken();

  await mcpTokenRepository.create({
    userId: session.user.id,
    name,
    hashedToken: hashed,
  });

  // 生トークンはここでのみ返す。次回以降は取得不可
  return NextResponse.json({ rawToken: raw, name }, { status: 201 });
}

// src/app/api/mcp-tokens/[id]/route.ts

// DELETE: トークン失効
export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  const session = await auth();
  if (!session?.user?.id) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

  const token = await mcpTokenRepository.findById(session.user.id, params.id);
  if (!token) return NextResponse.json({ error: 'Not found' }, { status: 404 });

  // 所有者確認（他人のトークンを削除できないように）
  if (token.userId !== session.user.id) {
    return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
  }

  // デュアルレコードを両方削除
  await mcpTokenRepository.delete(session.user.id, params.id, token.hashedToken);
  return new NextResponse(null, { status: 204 });
}

// src/components/settings/McpTokenSettings.tsx（抜粋）

export function McpTokenSettings() {
  const [newToken, setNewToken] = useState<string | null>(null);

  const createMutation = useMutation({
    mutationFn: (name: string) =>
      fetch('/api/mcp-tokens', {
        method: 'POST',
        body: JSON.stringify({ name }),
      }).then((r) => r.json()),
    onSuccess: (data) => {
      setNewToken(data.rawToken); // ← ここで1回だけ表示
      queryClient.invalidateQueries({ queryKey: ['mcp-tokens'] });
    },
  });

  return (
    <>
      {newToken && (
        <div className="alert">
          <p>トークンをコピーしてください。再表示はできません。</p>
          <code>{newToken}</code>
          <button onClick={() => navigator.clipboard.writeText(newToken)}>コピー</button>
        </div>
      )}
      {/* トークン一覧・発行フォーム */}
    </>
  );
}

Next.js + DynamoDB で MCP Bearer Token 認証を実装してください。

【トークンの仕様】
- 生トークン: crypto.randomBytes(32).toString('hex')（64文字の hex 文字列）
- 保存するのは SHA-256 ハッシュのみ。生トークンはDBに保存しない
- 発行時のみ生トークンをレスポンスに含める（次回以降は取得不可）

【DynamoDBのレコード設計（デュアルレコード）】
トークン1件につき2レコードを作成:
1. メインレコード: PK=USER#<userId>, SK=MCP_TOKEN#<tokenId>
2. 逆引きレコード: PK=MCP_TOKEN_HASH#<hashedToken>, SK=METADATA

認証時は PK=MCP_TOKEN_HASH#<hash(received_token)> で GetItem する。

【authenticateMcpRequest 関数】
- Authorization ヘッダーから "Bearer " プレフィックスを除いてトークンを取得
- SHA-256 ハッシュ化して DynamoDB で逆引き
- lastUsedAt の更新は await しない（レスポンス遅延防止）
- 戻り値: { userId, tokenId } | null

【認可】
各ツールハンドラー内で teamRepository.isMember(teamId, userId) を呼ぶ。
認可チェックはリソースの存在確認より前に実行すること。