Angular调用MS Graph API获取微软账户头像问题求助

1. 解决Cannot read property 'get' of undefined报错 #

这个报错是因为你的Graph服务中没有正确注入Angular的HttpClient，导致this.http为未定义状态。你需要在服务的构造函数中完成依赖注入：

// ms-graph.service.ts 顶部导入依赖
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import env from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class MsGraphService {
  // 构造函数中注入HttpClient，赋值给类属性http
  constructor(private http: HttpClient) { }
}

2. 修正Graph API头像获取端点 #

你之前调用的/me/photo接口返回的是头像元数据，要获取图片二进制流需要调用/me/photo/$value端点。

3. 修正头像获取逻辑 #

服务层代码（ms-graph.service.ts） #

// 新增获取头像Blob的方法
getProfilePhoto(): Observable<Blob> {
  return this.http.get(`${env.azure.endpoint.root}${env.azure.endpoint.profilePhoto}/$value`, {
    responseType: 'blob'
  });
}

注意：指定responseType: 'blob'后HttpClient会直接返回Blob对象，不需要额外做map转换。

组件层代码（profile.component.ts） #

需要引入DomSanitizer处理base64链接，避免Angular报不安全拦截错误：

import { Component } from '@angular/core';
import { MsGraphService } from '../services/ms-graph.service';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {
  imageToShow: SafeUrl | null = null;
  isImageLoading = false;

  constructor(
    private msg: MsGraphService,
    private sanitizer: DomSanitizer
  ) { }

  createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      // 处理base64链接安全校验
      this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(reader.result as string);
    }, false);
    if (image) {
      reader.readAsDataURL(image);
    }
  }

  get_profile_photo() {
    this.isImageLoading = true;
    this.msg.getProfilePhoto().subscribe({
      next: (data) => {
        this.createImageFromBlob(data);
        this.isImageLoading = false;
      },
      error: (err) => {
        this.isImageLoading = false;
        // 无头像/接口报错时兜底展示默认头像
        this.imageToShow = 'assets/default-avatar.png';
        console.error('获取头像失败', err);
      }
    });
  }
}

模板层代码（profile.component.html） #

<span *ngIf="isImageLoading">头像加载中...</span>
<img *ngIf="imageToShow" [src]="imageToShow" alt="个人头像">

4. 额外配置校验 #

确认Azure AD应用注册中已经添加了Microsoft Graph的User.Read委派权限，且已经完成权限同意，否则调用接口会返回403无权限错误。

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