Fetch An Access Token To Access Microsoft Graph API Using Msal.JS (Microsoft Security Authentication Library)

Introduction 

 

MSAL (Microsoft Security Authentication Library) is a client-side JavaScript library that helps developers fetch access token to access Microsoft APIs, Microsoft Graph, Third-party APIs (Google. Facebook) & User built custom APIs.

 

Its supports Mobile, Web, and Desktop Based Applications.

 

It works for both Microsoft Work Accounts and Personal accounts through V 2.0 Endpoint.

 

If you want to connect your web application to the graph, you need to set it up with App registration for your web App. Log in to your Azure Active Directory portal using your work or school account.

 

Navigate to the Azure portal using the following address: https://manage.windowsazure.com

 

After successfully logging in, click on Azure Active Directory.

 

 

Now click on App registration -> New app registration to register your web application

 

 

 

Provide the “Name” of your app and choose the supported account type. There are three options, you can connect using your office 365 account/Multi-tenant/Personal accounts.

 

I am going to connect using the single tenant option as the account type:

 

 

Finally, provide the redirect URL to validate Web/Mobile&Desktop Applications. In my case, am going to pick web for my SharePoint application.

 

 

Once you click register, you can get the unique client id/client secret for the app you registered. It requires configuring MSAL JS to validate and fetch the access token, then we are able to play with Microsoft Graph API.

 

 

Note

For mobile and desktop, you can use the following redirect URL suggested below on your Azure portal.

 

Now click on API Permissions. I can see the Graph API permission by default to read the current logged in user profile “User.Read”

 

 

Everything was fine from the configuration section. Let's download the MSAL JS library and implement it in the SharePoint application CEWP (Content Editor)/Script editor web part

 

Download MSAL JS from the below link:

 

FROM CDN -  https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.js

 

Create a object to store the configuration and storage option to store the access token in local storage or session storage.

var config = {
    auth: {
        clientId: "91ff15c6-0b25-4714-8600-1329a02e6d3a",
        authority: "https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com"
    },
    cache: {
        cacheLocation: "sessionStorage"
    }
};

authority

 

In the authority section, if you do not have tenant ID, please use the following URL: https://login.microsoftonline.com/common. If you have the tenant, provide the GUID of your tenant or yourdomain.microsoft.com

 

clientid

 

It’s mandatory that you have it already from your azure portal app registration.

 

cacheLocation

 

You can store your access token in localStorage or sessionStorage.

var graphConfig = {
    graphEndPoint: "https://graph.microsoft.com/v1.0/me"
};

Configure the Graph API Endpoint to read the current logged in a user profile

 

Also, you need to mention the permission scope, like below:

var requestPermissionScope = {
     scopes: ["user.read"]
};

You can add multiple permissions as follows, for example: ["user.read", "files.read"]

 

Initialize the MSAL configuration:

var myMSALObj = new Msal.UserAgentApplication(config);

Now create to function named “RetrieveAccessToken” to acquire the token based on permission scope.

 

acquireTokenSilent

 

It helps to fetch the token of the current logged in user silently. If the token expires, it sends a request and automatically refreshes the token.

function RetrieveAccessToken() {

    myMSALObj.acquireTokenSilent(requestPermissionScope).then(function (result) {
 if(result != undefined){
var headers = new Headers();
    var bearer = "Bearer " + result.accessToken;
    headers.append("Authorization", bearer);
    var options = {
         method: "GET",
         headers: headers
    };

 fetch(graphConfig.graphEndPoint, options)
        .then(function(response) {
             //do something with response
             var data  = response.json()
             data.then(function(userinfo){
                console.log("resp", userinfo)
             })

        });

    }).catch(function (error) {
         console.log(error);
   });
  }
}

Full Code

function RetrieveAccessToken() {

    myMSALObj.acquireTokenSilent(requestPermissionScope).then(function (result) {
 if(result != undefined){
var headers = new Headers();
    var bearer = "Bearer " + result.accessToken;
    headers.append("Authorization", bearer);
    var options = {
         method: "GET",
         headers: headers
    };

 fetch(graphConfig.graphEndPoint, options)
        .then(function(response) {
             //do something with response

             if(response.status == 200){
                var data  = response.json();
                data.then(function(userinfo){
                    var printResponse = JSON.stringify(userinfo)
                    //Print the JSON string
                     $("#userInfo").html(printResponse)
                })
             }
        });
  }
}

Now see the browser console. It returns the JSON object, as shown below:

 

 

In my upcoming articles, let see with permissions how to Integrate MSAL using SPFx webparts.