如何通过@sidebase/nuxt-auth的AzureADProvider获取用户App Roles

要解决无法获取用户App Roles的问题，你需要调整Nuxt Auth的配置，确保请求包含角色权限，并将角色信息从认证token传递到前端session中，具体步骤如下：

1. 修改认证Provider的Scope与回调配置 #

Azure AD的App Roles需要通过roles scope请求，同时要通过回调函数将角色信息从token同步到session。更新你的server/api/auth/[...].ts文件：

import AzureADProvider from "next-auth/providers/azure-ad";
import { NuxtAuthHandler } from "#auth";

const config = useRuntimeConfig();

export default NuxtAuthHandler({
  secret: config.nuxtSecret,
  providers: [
    AzureADProvider.default({
      clientId: config.clientId,
      clientSecret: config.clientSecret,
      tenantId: config.tenantId,
      authorization: {
        params: {
          // 添加roles到请求scope中
          scope: `offline_access openid profile email roles`,
        },
      },
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      // 首次登录时解析id_token提取roles
      if (account?.id_token) {
        const decodedIdToken = JSON.parse(atob(account.id_token.split('.')[1]));
        token.roles = decodedIdToken.roles || [];
      }
      return token;
    },
    async session({ session, token }) {
      // 将roles附加到session的user对象中
      if (session.user) {
        session.user.roles = token.roles || [];
      }
      return session;
    },
  },
});

2. 前端获取并展示角色 #

在pages/protected.vue中，直接从session数据中访问用户角色：

<template>
  <div>
    <div>I'm protected! Session data: {{ data }}</div>
    <div>用户分配的角色：{{ data?.user?.roles }}</div>
    <button class="rounded-xl shadow-xl p-2 m-2" @click="signOut()">
      sign out
    </button>
  </div>
</template>

<script setup lang="ts">
definePageMeta({ middleware: "auth" });

const { data, signOut } = useSession();
</script>

关键注意事项 #

• 确保Azure AD应用中已创建App Roles，且这些角色已分配给目标用户或安全组
• 检查Azure AD应用的Token configuration页面，确认roles声明已启用（默认自动包含，未显示可手动添加）
• 若id_token中未包含roles，可尝试从access_token解析，或确认Azure AD角色分配是否生效

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