feat: Prism OIDC 登录链路

M1 完整实现，仅配置值待 Prism 侧提供。

- 授权码 + PKCE，state/nonce 存 KV 且一次性消费
- ID token 本地 RS256 验签：硬编码只接受 RS256，拒绝 alg=none
- JWKS 按 kid 缓存，未命中时强制刷新一次以适配密钥轮换
- 会话 KV key 用 SHA-256(token)，省掉一个需要保管的 secret
- 身份组静默复查：会话超 15 分钟用 refresh token 拉新 ID token 重新映射
  role_key，降级到 guest 时立即踢掉全部会话
- 非 NSUK 团队成员允许登录但 role 为 guest，前端引导去邀请注册页
- Prism 未配置时登录入口优雅降级，不报 500

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: Lokins577

app/components/AppHeader.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { user, configured, roleLabel, login, logout } = useAuth()
+
 const nav = [
   { label: '首页', to: '/' },
   { label: '创意工坊', to: '/workshop' },
@@ -11,9 +13,7 @@ const isActive = (to: string) => (to === '/' ? route.path === '/' : route.path.s
 </script>
 
 <template>
-  <header
-    class="sticky top-0 z-50 border-b border-(--ui-border) bg-(--ui-bg)/80 backdrop-blur"
-  >
+  <header class="sticky top-0 z-50 border-b border-(--ui-border) bg-(--ui-bg)/80 backdrop-blur">
     <div class="mx-auto flex h-14 max-w-5xl items-center gap-6 px-6">
       <NuxtLink to="/" class="font-semibold tracking-tight">NSUK</NuxtLink>
 
@@ -29,9 +29,19 @@ const isActive = (to: string) => (to === '/' ? route.path === '/' : route.path.s
         </NuxtLink>
       </nav>
 
-      <div class="ml-auto">
-        <!-- TODO(D组): 接入 Prism 登录态后替换为用户菜单 -->
-        <UButton to="/account" size="sm" variant="soft">账号</UButton>
+      <div class="ml-auto flex items-center gap-3">
+        <template v-if="user">
+          <NuxtLink to="/account" class="flex items-center gap-2 text-sm">
+            <span>{{ user.displayName }}</span>
+            <UBadge v-if="user.level > 0" size="sm" variant="subtle">{{ roleLabel }}</UBadge>
+          </NuxtLink>
+          <UButton size="sm" variant="ghost" @click="logout">登出</UButton>
+        </template>
+
+        <UButton v-else-if="configured" size="sm" variant="soft" @click="login()">登录</UButton>
+
+        <!-- Prism 未配置时不显示可点的登录按钮，避免点了什么也不发生 -->
+        <span v-else class="text-sm text-(--ui-text-dimmed)">登录未配置</span>
       </div>
     </div>
   </header>

app/composables/useAuth.ts

@@ -0,0 +1,60 @@
+interface SessionUser {
+  sub: string
+  username: string
+  displayName: string
+  roleKey: string
+  level: number
+  permissions: string[]
+}
+
+interface MeResponse {
+  ok: boolean
+  user: SessionUser | null
+  /** Prism 尚未配置时为 false，登录入口应降级而不是报错 */
+  configured: boolean
+  /** 团队邀请链接注册页，用于引导非成员 */
+  joinUrl: string
+}
+
+const ROLE_LABEL: Record<string, string> = {
+  guest: '游客',
+  sponsor: '赞助者',
+  staff: '客服',
+  developer: '开发者',
+  admin: '管理员',
+}
+
+export function useAuth() {
+  const state = useState<MeResponse | null>('auth:me', () => null)
+
+  async function load() {
+    const data = await $fetch<MeResponse>('/api/auth/me').catch(() => null)
+    state.value = data
+    return data
+  }
+
+  const user = computed(() => state.value?.user ?? null)
+  const configured = computed(() => state.value?.configured ?? false)
+  const joinUrl = computed(() => state.value?.joinUrl ?? '')
+  const level = computed(() => user.value?.level ?? 0)
+  const roleLabel = computed(() => ROLE_LABEL[user.value?.roleKey ?? 'guest'] ?? '游客')
+
+  /** 登录后是否还需要走 NSUK 团队注册。level 0 即尚未拿到任何身份组 */
+  const needsJoin = computed(() => !!user.value && level.value === 0)
+
+  function login(redirect?: string) {
+    const target = redirect ?? useRoute().fullPath
+    return navigateTo(`/api/auth/login?redirect=${encodeURIComponent(target)}`, {
+      external: true,
+    })
+  }
+
+  async function logout() {
+    await $fetch('/api/auth/logout', { method: 'POST' }).catch(() => null)
+    state.value = null
+    await navigateTo('/')
+    reloadNuxtApp()
+  }
+
+  return { state, user, configured, joinUrl, level, roleLabel, needsJoin, load, login, logout }
+}

app/layouts/default.vue

@@ -1,3 +1,13 @@
+<script setup lang="ts">
+const { state, load } = useAuth()
+
+// SSR 期间取一次登录态，客户端复用，避免每个页面各查一遍
+if (!state.value) {
+  const { data } = await useAsyncData('auth:me', () => load())
+  if (data.value) state.value = data.value
+}
+</script>
+
 <template>
   <div class="flex min-h-screen flex-col">
     <AppHeader />

app/pages/account.vue

@@ -1,18 +1,85 @@
 <script setup lang="ts">
 useHead({ title: '账号 · NSUK' })
+
+const { user, configured, joinUrl, needsJoin, roleLabel, login } = useAuth()
+const route = useRoute()
+
+/** 回调失败时会带 ?error= 回来 */
+const loginError = computed(() => {
+  const e = route.query.error
+  return typeof e === 'string' ? e : ''
+})
+
+const ERROR_TEXT: Record<string, string> = {
+  invalid_state: '登录状态已过期，请重新登录。',
+  missing_code: '授权未完成。',
+  login_failed: '登录失败，请稍后重试。',
+  access_denied: '你取消了授权。',
+}
 </script>
 
 <template>
   <div class="mx-auto max-w-3xl px-6 py-12">
     <h1 class="text-2xl font-bold">账号</h1>
-    <p class="mt-2 text-sm text-(--ui-text-muted)">
-      本站账号由 Prism 提供，模组令牌与设备绑定也在这里管理。
-    </p>
-
-    <div
-      class="mt-8 rounded-(--ui-radius) border border-dashed border-(--ui-border) p-8 text-sm text-(--ui-text-dimmed)"
-    >
-      登录链路开发中（M1，等待 Prism 侧适配完成）。
-    </div>
+
+    <UAlert
+      v-if="loginError"
+      class="mt-6"
+      color="error"
+      variant="subtle"
+      :description="ERROR_TEXT[loginError] ?? `登录失败：${loginError}`"
+    />
+
+    <!-- 未登录 -->
+    <template v-if="!user">
+      <p class="mt-2 text-sm text-(--ui-text-muted)">
+        本站账号由 Prism 提供，模组令牌与设备绑定也在这里管理。
+      </p>
+      <UButton v-if="configured" class="mt-6" @click="login('/account')">使用 Prism 登录</UButton>
+      <div
+        v-else
+        class="mt-6 rounded-(--ui-radius) border border-dashed border-(--ui-border) p-8 text-sm text-(--ui-text-dimmed)"
+      >
+        登录尚未配置（等待 Prism 侧提供应用凭据）。
+      </div>
+    </template>
+
+    <!-- 已登录 -->
+    <template v-else>
+      <div class="mt-6 flex items-center gap-3">
+        <span class="text-lg">{{ user.displayName }}</span>
+        <UBadge variant="subtle">{{ roleLabel }}</UBadge>
+      </div>
+      <p class="mt-1 text-sm text-(--ui-text-dimmed)">@{{ user.username }}</p>
+
+      <!--
+        已登录但没有任何身份组：说明还没通过 NSUK 通道加入团队。
+        引导去邀请链接注册页，带 continue 回跳。
+      -->
+      <UAlert
+        v-if="needsJoin"
+        class="mt-6"
+        color="warning"
+        variant="subtle"
+        title="尚未加入 NSUK"
+        description="你的 Prism 账号还不属于 NSUK 团队，暂时只能浏览公开内容。"
+      >
+        <template #actions>
+          <UButton v-if="joinUrl" :to="joinUrl" external size="sm">前往加入</UButton>
+        </template>
+      </UAlert>
+
+      <section class="mt-10">
+        <h2 class="text-lg font-semibold">模组授权</h2>
+        <p class="mt-1 text-sm text-(--ui-text-muted)">
+          赞助者及以上可生成令牌，填入模组后即可使用。一个账号同时只能绑定一台设备。
+        </p>
+        <div
+          class="mt-4 rounded-(--ui-radius) border border-dashed border-(--ui-border) p-8 text-sm text-(--ui-text-dimmed)"
+        >
+          开发中（M4）。
+        </div>
+      </section>
+    </template>
   </div>
 </template>

nuxt.config.ts

@@ -18,38 +18,12 @@ export default defineNuxtConfig({
     preset: 'cloudflare_module',
   },
 
-  // 服务端配置由 wrangler 的 [vars] / secret 注入，此处只声明形状与默认值。
-  // 命名对应环境变量 NUXT_PRISM_ISSUER、NUXT_PUBLIC_SITE_URL 等。
+  // 服务端配置全部由 Hono 直接从 Worker env 读取（见 server/hono/lib/config.ts），
+  // 不走 runtimeConfig —— 后者依赖 unctx 异步上下文，在 Hono handler 里取不稳定。
+  // 这里只保留前端需要的公开值。
   runtimeConfig: {
-    // ─── Prism OIDC（D 组，待 Prism 侧适配完成后填充）───
-    prism: {
-      issuer: '',
-      clientId: '',
-      clientSecret: '',
-      // NSUK 团队 ID，用于读取 groups_in_team_<id> claim
-      teamId: '',
-      // 团队邀请链接注册入口
-      joinUrl: '',
-    },
-
-    // ─── 模组授权（F 组）───
-    mod: {
-      // License 签名私钥（PKCS#8 PEM），wrangler secret put NUXT_MOD_LICENSE_PRIVATE_KEY
-      licensePrivateKey: '',
-      // License 有效期（小时）。内测 24，正式 168
-      licenseTtlHours: 24,
-      // 设备换绑冷却（小时）
-      rebindCooldownHours: 24,
-    },
-
-    // ─── Prism webhook 接收 ───
-    webhook: {
-      // 自定义 header 中的共享密钥（Prism 的 audit webhook 无 HMAC 签名）
-      secret: '',
-    },
-
     public: {
-      siteUrl: 'https://nsuk.example',
+      siteUrl: '',
     },
   },
 

server/hono/app.ts

@@ -13,9 +13,9 @@ const app = new Hono<AppBindings>().basePath('/api')
 function maskSecrets(input: unknown, env: Env | undefined): string {
   let out = String(input ?? '')
   const keys: (keyof Env)[] = [
-    'NUXT_PRISM_CLIENT_SECRET',
-    'NUXT_MOD_LICENSE_PRIVATE_KEY',
-    'NUXT_WEBHOOK_SECRET',
+    'PRISM_CLIENT_SECRET',
+    'MOD_LICENSE_PRIVATE_KEY',
+    'WEBHOOK_SECRET',
   ]
   for (const k of keys) {
     const v = env?.[k]

server/hono/lib/config.ts

@@ -0,0 +1,56 @@
+// 配置读取。
+//
+// Hono 直接从 Worker 的 env 读，不走 Nitro 的 runtimeConfig —— 后者依赖
+// unctx 的异步上下文，在 Hono handler 里取不稳定，而 env 本来就是每个
+// 请求都带着的。变量与 secret 都在 wrangler.toml 里声明。
+import type { Env } from '../types'
+
+export interface PrismConfig {
+  issuer: string
+  clientId: string
+  clientSecret: string
+  teamId: string
+  joinUrl: string
+}
+
+export class ConfigError extends Error {
+  constructor(key: string) {
+    super(`缺少配置：${key}`)
+    this.name = 'ConfigError'
+  }
+}
+
+function required(env: Env, key: keyof Env): string {
+  const v = env[key]
+  if (typeof v !== 'string' || v === '') throw new ConfigError(String(key))
+  return v
+}
+
+export function prismConfig(env: Env): PrismConfig {
+  return {
+    issuer: required(env, 'PRISM_ISSUER').replace(/\/+$/, ''),
+    clientId: required(env, 'PRISM_CLIENT_ID'),
+    clientSecret: required(env, 'PRISM_CLIENT_SECRET'),
+    teamId: required(env, 'PRISM_TEAM_ID'),
+    joinUrl: env.PRISM_JOIN_URL ?? '',
+  }
+}
+
+/** 配置是否齐备。用于在未接入 Prism 时让登录入口优雅降级而不是 500 */
+export function isPrismConfigured(env: Env): boolean {
+  try {
+    prismConfig(env)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export function siteUrl(env: Env): string {
+  return (env.SITE_URL || 'http://localhost:3000').replace(/\/+$/, '')
+}
+
+/** cookie 是否加 Secure。本地 http 开发时必须关掉，否则浏览器不会存 */
+export function cookieSecure(env: Env): boolean {
+  return siteUrl(env).startsWith('https://')
+}

server/hono/lib/crypto.ts

@@ -0,0 +1,61 @@
+// 基础密码学工具。全部基于 WebCrypto，Workers 原生支持，无第三方依赖。
+
+const encoder = new TextEncoder()
+const decoder = new TextDecoder()
+
+export function base64UrlEncode(bytes: ArrayBuffer | Uint8Array): string {
+  const arr = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes)
+  let binary = ''
+  for (const b of arr) binary += String.fromCharCode(b)
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+// 显式基于 ArrayBuffer 构造：WebCrypto 的 BufferSource 不接受
+// Uint8Array<ArrayBufferLike>（可能是 SharedArrayBuffer）。
+export function base64UrlDecode(input: string): Uint8Array<ArrayBuffer> {
+  const padded = input.replace(/-/g, '+').replace(/_/g, '/')
+  const binary = atob(padded + '='.repeat((4 - (padded.length % 4)) % 4))
+  const out = new Uint8Array(new ArrayBuffer(binary.length))
+  for (let i = 0; i < binary.length; i++) out[i] = binary.charCodeAt(i)
+  return out
+}
+
+/** 同上，供需要传给 WebCrypto 的文本使用 */
+export function encodeUtf8(input: string): Uint8Array<ArrayBuffer> {
+  const src = encoder.encode(input)
+  const out = new Uint8Array(new ArrayBuffer(src.length))
+  out.set(src)
+  return out
+}
+
+export function base64UrlDecodeText(input: string): string {
+  return decoder.decode(base64UrlDecode(input))
+}
+
+/** 密码学随机串，用于 state / nonce / code_verifier / 会话令牌 */
+export function randomToken(bytes = 32): string {
+  const buf = new Uint8Array(bytes)
+  crypto.getRandomValues(buf)
+  return base64UrlEncode(buf)
+}
+
+export async function sha256(input: string): Promise<ArrayBuffer> {
+  return crypto.subtle.digest('SHA-256', encoder.encode(input))
+}
+
+export async function sha256Base64Url(input: string): Promise<string> {
+  return base64UrlEncode(await sha256(input))
+}
+
+/**
+ * 常数时间比较。用于 webhook 共享密钥等场景 ——
+ * 普通的 === 会在第一个不同字节处返回，泄露前缀信息。
+ */
+export function timingSafeEqual(a: string, b: string): boolean {
+  const ab = encoder.encode(a)
+  const bb = encoder.encode(b)
+  if (ab.length !== bb.length) return false
+  let diff = 0
+  for (let i = 0; i < ab.length; i++) diff |= ab[i]! ^ bb[i]!
+  return diff === 0
+}