使用azure/msal-angular如何获取用户个人资料头像

你现有配置已经申请了user.read权限，只需要补全接口拦截规则、加几行业务代码就能拿到头像，步骤如下：

• 第一步：修正MSAL拦截器的受保护资源映射
  你当前配置的protectedResourceMap只覆盖了/me基础信息接口，头像接口不在自动附加token的范围内，需要把头像接口地址加进去，修改app.module.ts里的对应配置段：

protectedResourceMap: new Map([ 
  ['https://graph.microsoft.com/v1.0/me', ['user.read']],
  // 新增头像接口的匹配规则，复用已申请的user.read权限即可
  ['https://graph.microsoft.com/v1.0/me/photo/$value', ['user.read']]
])

• 第二步：在需要展示头像的组件里发起请求
  直接注入Angular原生的HttpClient即可，MSAL拦截器会自动给匹配到的微软Graph请求附加合法的访问令牌，不需要手动获取、拼接token。注意头像接口返回的是二进制图片流，请求时要指定响应类型为blob：

import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

userAvatar: SafeUrl;
// 配置默认头像兜底，避免用户未上传头像时页面报错
defaultAvatar = 'assets/default-avatar.png';

constructor(
  private http: HttpClient,
  private sanitizer: DomSanitizer
) {
  this.loadUserAvatar();
}

loadUserAvatar() {
  this.http.get('https://graph.microsoft.com/v1.0/me/photo/$value', {
    responseType: 'blob'
  }).subscribe({
    next: (photoBlob) => {
      // 把二进制流转成前端可直接渲染的本地地址
      const objectUrl = URL.createObjectURL(photoBlob);
      this.userAvatar = this.sanitizer.bypassSecurityTrustUrl(objectUrl);
    },
    error: () => {
      // 接口返回404说明用户未上传自定义头像，加载默认头像
      this.userAvatar = this.defaultAvatar;
    }
  })
}

• 第三步：模板里绑定渲染

<img [src]="userAvatar" alt="用户头像" width="48" height="48">

补充：如果需要获取指定尺寸的头像，可以把接口地址替换为https://graph.microsoft.com/v1.0/me/photos/{尺寸}/$value，官方支持的常用尺寸包括48x48、64x64、96x96、120x120，按需替换即可。

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