Angular & Microsoft Login Part 2: Using MSAL Interceptor to Call APIs with User Access Token

hello everyone and welcome in this video i'm talking about how to use microsoft access tokens on microsoft protected apis with the microsoft authentication library and angular i already made a video how to build microsoft login and look out in an angular application with the microsoft authentication library you might want to check out the link to that video here is a short summary of the steps i have registered a single page application in the azure active directory and used the client id as a client 84 angular application i have installed the microsoft authentication library or short msal and configured the msil service in the angular app with the login method of the msal service we can let the user authenticate at the microsoft identity platform and access basic user info such as account name here is a short demonstration on how the login where the popup looks like now it is time to use the access token of the user to call microsoft protected apis the msal library provides a http interceptor to insert the access token for specific apis and to ask the user for consent to access certain permissions for that let us take a look at the mscl github for an angular example so down here you see that an http interceptor is being configured there is a map of urls to an area of scopes the area of scopes specifies which permissions are required to access the api this url is the url to the microsoft graph api this api lets you access the user's office 365 data such as outlook emails or calendar entries we can use this api to learn the interceptor so with this map you specify for which api calls the interceptor requests a token and inserts the token into the authorization header also you see there is an interaction type this specifies how the user is being asked for his content either with the redirect or with the pop-up window asking for the user's content means asking the user for his permission to use the scope on the api so let's copy paste this into sector factor method and use it in our own angular application i would also change the interaction type to popup also i must add two entries to the providers area of the angular application as you can see here i have specified that i want to add an http interceptor by using the msl interceptor class here and here and also i have specified the provider for the msl interceptor configuration which is the copy pasted function of the github example now we have the minimum setup to start using the microsoft access tokens of the logged in user the msl interceptor will create and add access tokens for all calls of this url and also the interceptor will ask for the user constant with a pop-up window it is now time to call this api with an http client for that let me import the http client module this one so let's go to the component where we want to use the http client let's go here and here in the constructor let's inject the http client and it's of type http client i want to store the api response in this string variable and display it in the web page let me create a method to call the api let's go here and create a method called profile and for that i use the http client and i use a get method here i provide the url let me copy let me copy paste that i'm calling the microsoft graph api and then i subscribe and then i want to have the response and right here i assign the response to my variable api response it's equals and it will be a json response so let's say json stringify response and that's it as you can see i am not inserting any tokens the mscl http interceptor will do that work for me so let me add a button to call the api and and a label to display the result of the api let's go into the html template and let me just create a table and i want to render it only if i'm logged in and let me create a raw and here i am creating a button get profile and with the click events i call the call profile function and also i add a raw to display the result api response is api response variable so let us try calling the graph api with the logged in user i have also opened the developer tool to see what is going on so here i have the button to get the profile and i click on it and now you see the user constant window here the user is asked to give his permission for this application to access his profile data these permissions correspond to the specified scopes of the api url we have configured before so let me just click on yes and see the result so this is the api result as you can see it is interesting what the interceptor has done for us here you can see that that token has been requested at the microsoft identity platform let's take a look at the response and you see there is the access token the id token and the refresh token and only after that the graph api has been called to get the user profile and if you take a look at the request header you see that an authorization header has been placed it contains the bearer access token is this one here so the msal http interceptor did all the work for us so let us try to call another api i am browsing the graph api documentation and here we can see all the available calls for this api we did use this get call to get the user profile we can also get the email messages of the user with this api call so let us copy paste this url and for that i am creating another method i create a method too call the messages and i paste the url here and i want to add a button to call this api so let's go here and another table get mails call messages method and back at my web page let's try to call this new api url and as you can see the api called it fail let's take a look at that it says forbidden the interceptor did insert a axis token but the axis is still forbidden and the reason for that is because i need another permission for this api so here in the api documentation or the list messages your api you see that i need the i need one of these permissions the mail read permission so that means my application need to request this permission and so let's go back to the interceptor configuration we see this scope array and for that permission we need to add another scope so i am adding mail read so this scope array now means my application wants to read the user profile and it was to read the mails of the user and let's try that out and now i'm back in the web page and let's call the get mails api and as you can see i have i get another user content window and it's telling me the application wants to read my mails and so i the logged in user and ask for the permission and i say yes and as you can see now i get the response from the api and i can click on get profile and on get mails now you know the basic idea of scopes each api may require different permissions and you must provide them in the scope array to ask the user for his content we can also specify custom scopes for our custom apis and use the access tokens of the user for testing i have created a simple helloworld java service it has the hello url and the response with a json where it says hello world i also print out the authorization header for debugging purpose the custom api is responsible for validating the access token so in order to create a custom scope we are back in the azure active directory in the overview of our registrate application and down here we have the button expose an api and here you can add a scope so an application id is generated for you you can take it or change it i just keep it and here i can specify the details for the scope i can give it a name for example say hello and here i must provide the constant display name the constant for the admin i can say hello hello to say hello and also the constant text for the user that is when the user is asked for his permission this text will be displayed to him say hello and hello to say hello and i click on add scope and here i have the scope name i can just click here to copy it and we can use it in our annual application and here at the msl interceptor configuration we must add the url to our hello api and add the scope to the scope array and let me just do it like that i the array contains the hello scope this one and the url is localhost 8080 hello so with that the interceptor should ask the user for the content and create a token for this hello api and of course let me create a button to call this api at first in the component i create a new method say hello and change the url localhost hello and also in the html template create another button say hello say hello and that's it let's try it out so let's try to call this hello api at first let me login this user the password and now i have this button let me open the developer tool and now i'm calling the say hello api and as you can see i get another consonant window and now it says do you allow to say hello this is the text which i have typed in on creating this custom scope and of course i say yes and this is the api response and we can take a look at the api call here and as you see the interceptor did create a token and insert it in the authorization header and taking a look at the hello service logs so the authorization header did indeed arrive in this hello service and also let's try the other apis the profile and you see the interceptor is creating another token for the for the graph api and it's working quite good so now you have a basic idea on how to use the mscl interceptor to ask the user for content and to apply access tokens on api calls i hope you find this video useful goodbye and have a nice day

Channel: Genka

Views: 9,864

Keywords:

Id: xDkvoAV55F4

Length: 15min 55sec (955 seconds)

Published: Sat Mar 13 2021