使用Next-Auth从Azure AD获取头像、名和姓的问题

问题现象 #

对接Azure AD后，返回的用户信息如下，无法获取头像字段，同时无法直接从现有字段中正确提取用户的名和姓：

{
  ver: '2.0',
  iss: 'https://login.microsoftonline.com/xxxxxxxx-0000-xxxx-xxxx-xxxxxxxxxx/v2.0',
  sub: 'xxxxxxxxxxxxxxx',
  aud: 'xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
  exp: 0000000000,
  iat: 0000000000,
  nbf: 0000000000,
  name: 'Dibyendu Saha',
  preferred_username: 'dibyendusaha@live.com',
  oid: '00000000-0000-0000-000-0000000000000',
  email: 'dibyendusaha@live.com',
  tid: 'xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',
  aio: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}

当前配置代码 #

AzureADProvider({
  clientId: process.env.AZURE_AD_CLIENT_ID as string,
  clientSecret: process.env.AZURE_AD_CLIENT_SECRET as string,
  profile: (profile: AzureADProfile) => {
    console.log(profile);
    return {
      id: profile.sub,
      name: profile.name,
      email: profile.email,
      image: profile.picture,
      firstName: profile.name,
      lastName: profile.name
    };
  },
}),

官方文档说明 #

Azure AD 返回的头像为ArrayBuffer格式而非图片URL，因此提供商将其转换为Base64编码的图片字符串返回。默认图片尺寸为48x48，避免会话存储为JWT时出现空间不足问题。

解决方案 #

1. 修复头像获取问题 #

默认情况下，Azure AD的ID Token不包含头像信息，需通过Microsoft Graph API获取，步骤如下：

• 添加权限范围：在AzureADProvider配置中加入scope，包含User.Read权限（用于读取用户头像）
• 在profile函数中，利用accessToken调用Graph API获取头像并转换为Base64格式

修改后的配置示例：

AzureADProvider({
  clientId: process.env.AZURE_AD_CLIENT_ID as string,
  clientSecret: process.env.AZURE_AD_CLIENT_SECRET as string,
  // 添加所需权限范围
  scope: 'openid email profile User.Read',
  async profile(profile: AzureADProfile, tokens) {
    let image = null;
    try {
      // 调用Graph API获取用户头像
      const response = await fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
        headers: { Authorization: `Bearer ${tokens.accessToken}` }
      });
      if (response.ok) {
        const buffer = await response.arrayBuffer();
        // 转换为Base64编码的图片字符串
        const base64 = Buffer.from(buffer).toString('base64');
        image = `data:image/jpeg;base64,${base64}`;
      }
    } catch (err) {
      console.error('获取头像失败:', err);
    }

    return {
      id: profile.sub,
      name: profile.name,
      email: profile.email,
      image: image,
      firstName: profile.given_name,
      lastName: profile.family_name
    };
  },
}),

2. 正确提取名和姓 #

要让Azure AD返回名（given_name）和姓（family_name）字段：

• 确保scope中包含profile（已在上述配置中覆盖）
• 在Azure AD应用的令牌配置中，勾选返回given_name和family_name声明

完成配置后，即可在profile函数中直接提取这两个字段，无需从name字段分割。

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