在SPFx Web部件中从Delve拉取用户头像的问题

问题根源 #

你当前使用的Delve头像接口属于非公开内部端点，它依赖用户已建立的Delve会话上下文才能返回有效内容，因此必须先打开Delve页面初始化会话后，头像才能正常加载。

推荐解决方案：使用Microsoft Graph获取用户头像 #

Microsoft Graph提供了官方支持的用户头像获取接口，无需依赖Delve会话，且完全适配SPFx环境，具体步骤如下：

1. 配置SPFx权限 #

在package-solution.json中添加Graph权限声明：

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "User.ReadBasic.All"
  }
]

部署解决方案后，需在SharePoint管理中心完成该权限的批准操作。

2. 在SPFx Web部件中调用Graph接口 #

使用SPFx内置的MSGraphClient调用头像接口，示例代码：

import { MSGraphClient } from '@microsoft/sp-http';

// 获取用户头像的Base64或Blob URL
async function getUserProfilePhoto(userId: string, size: '48x48' | '64x64' | '96x96' | '120x120'): Promise<string> {
  const client = await this.context.msGraphClientFactory.getClient();
  try {
    const response = await client.api(`/users/${userId}/photos/${size}/$value`).get();
    const blob = await response.blob();
    return URL.createObjectURL(blob);
  } catch (error) {
    // 处理用户无头像的情况，返回默认SVG头像
    return 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiI+PHJlY3Qgd2lkdGg9Ijk2IiBoZWlnaHQ9Ijk2IiBmaWxsPSJ3aGl0ZSIvPjxjaXJjbGUgY3g9IjQ4IiBjeT0iMzIiIHI9IjE2IiAvPjxjaXJjbGUgY3g9IjI2IiBjeT0iNjQiIHI9IjEwIiAvPjxjaXJjbGUgY3g9IjcwIiBjeT0iNjQiIHI9IjEwIiAvPjwvc3ZnPg==';
  }
}

3. 在组件中渲染头像 #

将获取到的头像URL绑定到<img>标签：

<img 
  src={await getUserProfilePhoto(user.id, '96x96')} 
  alt={user.displayName} 
  className="profile-avatar"
/>

替代方案：使用SharePoint用户信息列表头像 #

若无法申请Graph权限，可通过SharePoint内置的用户头像接口获取，格式如下：

/_layouts/15/userphoto.aspx?size=L&accountname={userPrincipalName}

该接口依赖SharePoint用户上下文，无需额外权限，但头像分辨率和更新时效性略逊于Graph接口。

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