Ionic 3集成SharePoint：用户头像下载与显示问题求助

Hey there, let's work through this user avatar issue in your Ionic 3 + SharePoint app step by step. I'll break down the problems you're facing, offer fixes, and share alternative methods to get the avatar working.

First, Let's Diagnose Your Current Approaches #

1. userphoto.aspx Returns Default Avatar #

The most likely culprit here is the site context in your URL. User photos in SharePoint are stored in the root site's User Photos library, not sub-sites like QA. Try switching to the root site's userphoto.aspx endpoint:

https://abc.sharepoint.com/_layouts/15/userphoto.aspx?size=M&accountname=admin@abc.onmicrosoft.com

Other checks to confirm:

• Ensure the accountname uses the user's full UPN (User Principal Name) exactly as it appears in SharePoint.
• Verify the user has actually uploaded an avatar to their SharePoint profile (default avatars show if no photo exists).
• Test different size parameters (S, L, XL) to rule out size-specific issues.

2. PictureURL Returns 401 Unauthorized #

Your request headers and configuration have a few potential issues causing the auth error:

• Unnecessary Content-Type header: GET requests don't require a Content-Type value. Remove this line:

  headers.append('Content-Type', 'image/jpeg');
  

• Use ResponseContentType enum instead of numeric value: Hardcoding responseType: 3 is error-prone. Import the Angular enum and use it explicitly:

  import { ResponseContentType } from '@angular/http';
  // ...
  let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
  

• Token permissions: Confirm your Bearer token has read access to the root site's User Photos library. You can test this by pasting the PictureURL into a browser while logged into SharePoint—if it loads, the token is missing the right scope.
• Alternative auth approach: Try appending the token directly to the URL as a query parameter (some SharePoint resources prefer this):

  https://abc.sharepoint.com/User Photos/Profile Pictures/admin_abc_onmicrosoft_com_MThumb.jpg?access_token=YOUR_TOKEN
  

Alternative Methods to Get User Avatars #

Method 1: Fetch via SharePoint REST API #

Use the User Profiles API to get the verified PictureUrl directly from the user's profile, avoiding manual URL construction:

getCurrentUserProfileAvatar() {
  const profileUrl = 'https://abc.sharepoint.com/sites/QA/_api/SP.UserProfiles.PeopleManager/GetMyProperties';
  const headers = new Headers({
    'Accept': 'application/json;odata=verbose',
    'Authorization': 'Bearer ' + localStorage.getItem("token")
  });
  const options = new RequestOptions({ headers: headers });

  this._http.get(profileUrl, options)
    .map(res => res.json())
    .subscribe(profileData => {
      const validPictureUrl = profileData.d.PictureUrl;
      this.downloadFile(validPictureUrl, 'user-avatar.jpg');
    }, error => {
      console.error('Failed to fetch profile:', error);
    });
}

This ensures you're using a SharePoint-endorsed URL for the avatar.

Method 2: Use Microsoft Graph API #

If your app can integrate with Microsoft Graph, this is the most reliable way to fetch user avatars (it works across all Microsoft 365 services):

getAvatarFromGraph() {
  const graphUrl = 'https://graph.microsoft.com/v1.0/me/photo/$value';
  const headers = new Headers({
    'Authorization': 'Bearer ' + localStorage.getItem("graph_token") // Use a Graph-specific token here
  });
  const options = new RequestOptions({ 
    headers: headers, 
    responseType: ResponseContentType.Blob 
  });

  this._http.get(graphUrl, options)
    .subscribe(blobData => {
      // Process the blob as you already do
      const reader = new FileReader();
      reader.readAsDataURL(blobData.blob());
      reader.onloadend = () => console.log('Avatar Base64:', reader.result);

      this.file.writeFile(this.file.externalRootDirectory, 'graph-avatar.jpg', blobData.blob(), { replace: true })
        .then(success => console.log('Avatar saved:', success))
        .catch(err => console.error('Save error:', err));
    }, error => {
      console.error('Graph API error:', error);
    });
}

Note: You'll need to request the User.Read Graph API permission and obtain a valid Graph token (separate from your SharePoint token).

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