Since SharePoint Framework version 1.6 it is possible to consume either the Microsoft Graph or any other third-party API secured with Microsoft Azure Active Directory. Here you can see how to consume the Microsoft Graph, while here you can see how to consume any other third-party API.

I will deeply cover the topic at the SharePoint Conference 2019 in Las Vegas in my upcoming session “Consuming the Microsoft Graph and 3rd party APIs with SPFx”.

Here, in this post, I’d like to cover a related topic, which is how to directly retrieve an OAuth 2.0 Access Token to consume a target API at the low level, simply using HTTP requests, rather than using the out of the box interface provided by SPFx.

In fact, whenever you consume the Microsoft Graph or any other third-party API within SPFx, under the cover the SharePoint Framework uses ADAL.js and a bunch of helper logic to retrieve an OAuth 2.0 Access Token and to consume the target API. The Access Token will be stored in the Session Storage of the browser, under a property with a key like:

adal.access.token.key[API Unique URI]

For example, and for the sake of clarity, for the Microsoft Graph the storage key will be:

adal.access.token.keyhttps://graph.microsoft.com

While for a custom third-party API with a Unique URI value of https://officedevpnp.onmicrosoft.com/spfx-lob-function the storage key will be:

adal.access.token.keyhttps://officedevpnp.onmicrosoft.com/spfx-lob-function

Now, imagine that you want to directly read the value of the Access Token, because you want to use it manually in a low-level REST request, which you can always do using either the httpClient object of the SPFx context, as you can see here, or using any other HTTP low level request like AJAX, jQuery, etc.

Of course, in order to access the Access Tokens, you can directly access the Session Storage variables by key. However, in the SharePoint Framework, there is a better way to do that, leveraging the AadTokenProvider type. In fact, the AadTokenProvider gives you smart and easy access to the Access Token for a specific target API through the getToken method. In SPFx, in order to get an instance of the AadTokenProvider type, you need to use the aadTokenProviderFactory property of the SPFx context, as you can see in the following code excerpt:

    this.aadTokenProvider = await this.context.aadTokenProviderFactory.getTokenProvider();

Once you have an instance of the AadTokenProvider type, you can invoke the getToken method providing the unique URI of the target service for which you want to get the Access Token. For example, if you want the Access Token for the Microsoft Graph the syntax is:

    this.aadTokenProvider.getToken(“https://graph.microsoft.com”);

On the other side, if you want to get the Access Token for another third-party API, like one with a unique URI value of https://officedevpnp.onmicrosoft.com/spfx-lob-function, the syntax is:

    this.aadTokenProvider.getToken(“https://officedevpnp.onmicrosoft.com/spfx-lob-function”);

The interesting part of the story is that the token provider will always give you a valid token if any, and you don’t need to take care of caching that value or to refresh the token if it is expired, because the internal infrastructure of the AadTokenProvider will take care of that for you.

Last but not least, bare in mind that whenever you consume the Microsoft Graph or any third-party API within SPFx, you will get a Delegated Access Token. As such you will act on behalf of the currently connected user and with permissions that will be the intersection between the app permissions (which in SPFx is the “SharePoint Online Client Extensibility Web Application Principal” or a custom registered app, in case you defined an isolated web part solution in SPFx) and the permissions of the currently connected user.

I will deep dive into these topics in my session at SPC19 … see you there!