如何在Next Auth v5（Next.js 14）中通过Azure AD显示用户职位头衔

1. 扩展Azure AD Provider的权限范围 #

Azure AD默认返回的用户属性有限，要获取职位（jobTitle）、部门等信息，需要在Auth配置中添加User.Read权限范围，同时调用Microsoft Graph API拉取完整用户资料。

修改你的options.tsx：

import { AzureAD } from "next-auth/providers"
import type { NextAuthOptions } from "next-auth"

export const authOptions: NextAuthOptions = {
  providers: [
    AzureAD({
      clientId: process.env.AZURE_AD_CLIENT_ID!,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET!,
      tenantId: process.env.AZURE_AD_TENANT_ID!,
      // 追加User.Read权限，用于调用Graph API获取用户详情
      authorization: {
        params: {
          scope: "openid profile email User.Read",
        },
      },
    }),
  ],
  // 通过JWT和Session回调传递额外属性
  callbacks: {
    async jwt({ token, account }) {
      // 首次登录时，用accessToken调用Graph API
      if (account?.access_token) {
        const graphResponse = await fetch(
          "https://graph.microsoft.com/v1.0/me",
          {
            headers: { Authorization: `Bearer ${account.access_token}` },
          }
        )
        const userDetails = await graphResponse.json()
        
        // 将需要的属性存入token
        token.jobTitle = userDetails.jobTitle
        token.department = userDetails.department
        token.officeLocation = userDetails.officeLocation
      }
      return token
    },
    async session({ session, token }) {
      // 将token中的属性同步到session，供前端使用
      if (session.user) {
        session.user.jobTitle = token.jobTitle as string
        session.user.department = token.department as string
      }
      return session
    },
  },
}

2. 在App组件中获取并展示属性 #

Next.js 14 App目录支持服务器组件和客户端组件两种方式获取Session：

服务器组件示例（page.tsx）

直接使用auth()函数在服务器端获取Session，无需额外包裹Provider：

import { auth } from "@/auth"

export default async function HomePage() {
  const session = await auth()

  if (!session?.user) {
    return <div>请先登录</div>
  }

  return (
    <div className="p-4">
      <h2>欢迎，{session.user.name}</h2>
      <p>邮箱：{session.user.email}</p>
      <p>职位：{session.user.jobTitle || "暂无信息"}</p>
      <p>部门：{session.user.department || "暂无信息"}</p>
    </div>
  )
}

客户端组件示例

如果需要在客户端交互组件中使用，用useSession钩子（记得加"use client"指令）：

"use client"

import { useSession } from "next-auth/react"

export default function UserProfileCard() {
  const { data: session } = useSession()

  if (!session?.user) return null

  return (
    <div className="card">
      <p>用户名：{session.user.name}</p>
      <p>职位：{session.user.jobTitle}</p>
    </div>
  )
}

3. 权限验证 #

确保你的Azure AD应用注册中已配置：

• 授予User.Read的委派权限
• 若为租户级应用，需管理员完成权限同意

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