How To Use SharePoint REST API V2 In SharePoint Framework SPFx

Overview

 
In this blog we will use REST API V2 in SharePoint Framework SPFx to fetch data. We will not use isolated webparts in SPFx but will use MSAL.js 2.0
 
For more detail on MSAL.js 2.0 please follow the link below
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser
 
Step 1 - Create an Azure AD Application
 
To provide access and to fetch the bearer token we need  to create an Azure AD Application with required API permission. To create Azure AD application use the below steps,
  • Navigate to https://portal.azure.com 
  • Select Azure Active Directory
  • Navigate to App registration
  • Click on New registration
How To Use SharePoint REST API V2 In SharePoint Framework SPFx
  • Enter the appropriate application name 
  • Add the redirection URL and in the dropdown; instead of web select Single-page-application (SPA)
How To Use SharePoint REST API V2 In SharePoint Framework SPFx
  • Add API Permission for SharePoint API V2 and Grant Admin Consent
  • Copy the client Id which got created which will be used.
How To Use SharePoint REST API V2 In SharePoint Framework SPFx
 
Step 2
 
Create an SPFx Solution 
 
Step 3 - Add MSAL.js 2.0 to Solution
 
To add reference to the solution use the below command which is available from npm
  1. npm i @azure/msal-browser  
To use it in the  solution let us add the reference in the webpart file.
  1. import * as msal from "@azure/msal-browser";  
Add the below constant variables , replace <clientid> with the client id generated above after registering Azure AD application and replace <redirecturi> with the redirect Uri where we want to use the solution (in the below code we have used the workbench).
  1. const msalConfig = {  
  2.   auth: {  
  3.     clientId: '<clientId>',  
  4.     redirectUri: 'https://testinglala.sharepoint.com/_layouts/15/workbench.aspx'  
  5.   }  
  6. };

  7. const msalInstance = new msal.PublicClientApplication(msalConfig);  
Now let us use different scopes which we want to get the current user to login.
 
For the complete code follow this link 
  1. let silentRequest = {  
  2.     scopes: ["https://testinglala.sharepoint.com/TermStore.Read.All""https://testinglala.sharepoint.com/TermStore.ReadWrite.All"],  
  3.     loginHint: this.props.webpartContext.pageContext.user.email  
  4.   };  
  5. msalInstance.ssoSilent(this.silentRequest).then((response) => {  
  6.     msalInstance.acquireTokenSilent(silentRequest).then((val) => {  
  7.         let headers = new Headers();  
  8.         let bearer = "Bearer " + val.accessToken;  
  9.         headers.append("Authorization", bearer);  
  10.         let options = {  
  11.             method: "GET",  
  12.             headers: headers  
  13.         };  
  14.         fetch("https://testinglala.sharepoint.com/_api/v2.1/termStore/groups", options)  
  15.             .then(resp => {  
  16.                 resp.json().then((groups) => {  
  17.                     console.log(groups);  
  18.                 }).catch((errorint) => {  
  19.                     console.log(errorint);  
  20.                 });  
  21.             });  
  22.     }).catch((errorinternal) => {  
  23.         console.log(errorinternal);  
  24.     });  
  25. }).catch((error) => {  
  26.     console.log(error);  
  27. });  
Outcome
 
How To Use SharePoint REST API V2 In SharePoint Framework SPFx