SPFx web part to get data from Azure AD - Getting some values but not others

Question

I have an SPFx web part and I wish to display the users within a group. I am trying to get their Display Name and other data (Email) but I get null for their Display Name. I do get data for their ID (GUID). thanks P (also including some warnings I get)

protected async getGroupData(): Promise<string> {
    console.log('getGroupData...');

    //const { context } = this.props;
    const client: MSGraphClientV3 = await this.context.msGraphClientFactory.getClient("3");
    const theADUsers: any = await client.api(`/groups/${"group guid"}/members/microsoft.graph.user`)
      .header('ConsistencyLevel', 'eventual')
      //.search('displayName:P')
      .select('displayName,id,mail,surname')
      .orderby('displayName')
      .get();

    console.log(theADUsers);

    return ""
}

odata.context : "https://graph.microsoft.com/v1.0/$metadata#users(displayName,id,mail,surname)" value : Array(15) 0 : displayName : null id : "4d76a6e0-etc" mail : null surname : null

Warning - lint - src/webparts/v2Test/V2TestWebPart.ts(8,10): error @typescript-eslint/no-unused-vars: 'escape' is defined but never used. Warning - lint - src/webparts/v2Test/V2TestWebPart.ts(50,18): error @typescript-eslint/no-explicit-any: Unexpected any. Specify a different type. Warning - lint - src/webparts/v2Test/V2TestWebPart.ts(53,5): error prefer-const: 'stringToReturn' is never reassigned. Use 'const' instead. Warning - lint - src/webparts/v2Test/V2TestWebPart.ts(72,23): error @typescript-eslint/no-explicit-any: Unexpected any. Specify a different type.

Answer 1

You need to request the User.ReadBasic.All or User.Read.All permission to see the user profile properties.

Using the Graph Explorer, I first tried to get Group members with just Group.Read.All. This was the response:

I then added the User.ReadBasic.All permission and this was the response:

Finally I added the User.Read.All permission and I got back the full profile:

For SharePoint Framework, you need to make the permission requests in config/package-solution.json

You then need to bundle an package the solution and deploy it to the app catalog.

You then need to go to the API access page in the SharePoint Admin Center and approve the permission requests.

Once these steps are complete, you can use MSGraphClientV3 to make calls to the Microsoft Graph. Here's the render() method from asimple example.

import { MSGraphClientV3 } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

// ...

public render(): void {
  this.domElement.innerHTML = `
  <section class="${styles.helloGraph} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
    <div class="${styles.welcome}">
      <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
      <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
      <div>${this._environmentMessage}</div>
      <div>Web part property value: <strong>${escape(this.properties.description)}</strong></div>
    </div>
    <div>
      <h3>Group Members:</h3>
      <div id="membersContainer"></div>
    </div>
  </section>`;      

  this.context.msGraphClientFactory.getClient('3')
    .then((client: MSGraphClientV3): void => {
      client.api('groups/46b50021-065a-44d3-9a9b-f2fa08084a38/members')
      .get((error: any, response: any, rawResponse?: any) => {
        const members: MicrosoftGraph.User[] = response.value;
        const elem: Element = this.domElement.querySelector("#membersContainer");
        elem.innerHTML = members.map((member) => {
          return `<span>${member.displayName} (${member.mail})</span>`;
        }).join(`<br />`);
      });
    });
}