Chapter 2 - Graph API user profile properties shown it in nice way

first create no javascript webpart

then install types of graph api

npm install @microsoft/microsoft-graph-types --save-dev

Open the  .ts file, import the below two things

import { Version } from '@microsoft/sp-core-library';

import {

  IPropertyPaneConfiguration,

  PropertyPaneTextField

} from '@microsoft/sp-property-pane';

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import { escape } from '@microsoft/sp-lodash-subset';

import styles from './GraphapiUserprofileWebPart.module.scss';

import * as strings from 'GraphapiUserprofileWebPartStrings';

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

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

export interface IGraphapiUserprofileWebPartProps {

  description: string;

}

export default class GraphapiUserprofileWebPart extends BaseClientSideWebPart<IGraphapiUserprofileWebPartProps> {

  public render(): void {

    this.context.msGraphClientFactory.getClient()

      .then((graphclient: MSGraphClient):void => {

        graphclient

          .api('/me')

          .get((error,user:MicrosoftGraph.User, rawResponse?:any)=>{

            this.domElement.innerHTML = `

            <div>

              <p class="${ styles.description }">Display Name: ${user.displayName}</p>

              <p class="${ styles.description }">givenName Name: ${user.givenName}</p>

              <p class="${ styles.description }">mail: ${user.mail}</p>

              <p class="${ styles.description }">surname Name: ${user.surname}</p>

              <p class="${ styles.description }">userPrincipalName Name: ${user.userPrincipalName}</p>

            </div>`;

          

          });

      });

  }

  protected get dataVersion(): Version {

    return Version.parse('1.0');

  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

    return {

      pages: [

        {

          header: {

            description: strings.PropertyPaneDescription

          },

          groups: [

            {

              groupName: strings.BasicGroupName,

              groupFields: [

                PropertyPaneTextField('description', {

                  label: strings.DescriptionFieldLabel

                })

              ]

            }

          ]

        }

      ]

    };

  }

}

Now upload the Sppkg file to app catalog.

Go to admin center:https://mercedessaga-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement

Click on advanced-> api access

If it is pending - click on it and approve it twice popup shows.

Click on Approve.

Note: This is one time job initially when we work with MS Graph API.

In package-solution.json

add permissions ReadBasic.All

This means we need to make sure provide permission to Graph API and our sharepoint site. So we add this permission line of code below in pakage-solution.json and a request will be shown in SharePoint admin center under API access.

package-solution.json

{

  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",

  "solution": {

    "name": "anonymous-api-demo-client-side-solution",

    "id": "4252d0d4-821b-4bf8-9afd-c32beae367d6",

    "version": "1.0.0.0",

    "includeClientSideAssets": true,

    "isDomainIsolated": false,

    "webApiPermissionRequests":[{

      "resource": "Microsoft Graph",

      "scope":"User.ReadBasic.All"

    }],

    "developer": {

      "name": "",

      "websiteUrl": "",

      "privacyUrl": "",

      "termsOfUseUrl": "",

      "mpnId": ""

    }

  },

  "paths": {

    "zippedPackage": "solution/anonymous-api-demo.sppkg"

  }

}

now build and package the solution and upload the sppkg file to appcatalog.

After deploy, Go to SP Admin center

Left navigation > Open API access

Now we can see category pending requests and approved requests.

Select and Approve it.