Deep dive on using MSAL.js to integrate Angular single-page applications with Azure AD – August 2022

[Music] thank you everyone for joining the call we had a very popular call last month run by our speakers here kalyan salman and togan thanks a lot folks for that uh interesting call we had a lot of folks joining that call and in fact we've got good number of uh youtube views as well and there's a lot of talking buzz about how the call went uh we have a similar topic this month as well uh the only change being it's going to be um an angular framework and again run by dogan salman and kalyan the quick pointers as usual this call gets recorded so let's try to be friendly on the call please feel free to ask in your questions we would love to know your experiences we have the calls recorded and posted at that link which is ak dot ms m365 pnp slash videos and then we have a survey that will be shared on the chat window uh it's it's it's really important for us to know your experience of the call because that helps us plan the call as well as uh speakers get to know what was the experience and feedback on the call it's a quick three-minute question survey feel free to put in your questions for the content that we're presenting and as always we have interesting calls lined up every month that's the third thursday every month tune in to this live event and enjoy the call over to you collab thank you hey uh welcome back for today's session uh my name is kalyan krishna i'm a product manager in the microsoft identity division i am here with uh developers in my team erdogan and salman we are going to basically have walkthrough of how to integrate your angular javascript applications with microsoft's identity platform as your active directory or microsoft intra whichever name that you are familiar with today it's a continuation of the call we had last month which was essentially covered the javascript react applications this time we want to cover the angular side of things so without further ado i will basically hand it over to the one in my team who would uh introduce himself and then uh uh inshallah salman and then we can get forward go on sounds good yeah thank you very much kylian hey everyone i'm dawan i'm a developer with the identity developer guidance team and i'll mainly work with javascript applications to integrate them with the microsoft identity platform hello everyone my name is salvan i'm also a developer in the identity guidance team and looking forward to present for you guys all right so um let me start with briefly uh covering what we are going to discuss today for those of you attended the last month's call on react this is going to be pretty similar but we will focus on angular instead first we will start with have an overview of amstel gs and how amstel angular fit into this then we will look into using msul angular in an angular single page application and i will refer it as amsa angular but it's actually the version two of our package our first target will be to enable single sign-on and then we will attempt to get an access token for microsoft graph then cellman will talk us about what is continuous access evaluation and how you can handle those in your applications and then we will finish the session with deploying our application to azure static web apps at the end of the slide there will be some next steps and references we will share with the deck so you can take a look at those later on as well all right so very briefly what is microsoft authentication library for javascript it's essentially a family of packages family of libraries uh targeting various kind of javascript applications and enables them to acquire access tokens and id tokens for the microsoft identity platform it has two main branches you have msl node on one side which you can use with your applications running on server as well as applications running on your on user's desktop and other kind of devices and then you have your msl browser for any javascript application running in the browser it has two wrapper packages on top of it last month we covered themselves react and this month we're going to focus on m cell angular and how to use that in an angular application so like m cell browser amsoil angular acquires tokens using the authorization code grant with proof key for code exchange flow the pixi is a mechanism that prevents authorization called replay attacks so it's a more secure than the previously used implicit flow and then um angular supports angular applications nine uh version nine and later we have some uh limited support for server side rendering via angular universal and it has the same public api with m sub browser so if you have used it before you have access to the same api same methods but what it does is that it adds components services and observables on top to make your development experience uh more easy so how to use your amsoil angular in your applications um your happy paths would be to you register your app on azure id you download a code sample from our code samples and then you start coding so today what i'm going to do similar to the last time is that this is going to be mostly a live coding session i have a sample project here in my own repository and you can go ahead and work this repo i would just recommend forking as opposed to cloning and i will do the same and yeah we're going to start and step by step we're going to add authentication to this application uh as always um let's cover some prerequisites uh you'll need to have node.js version 14 or later on your system you're also going to need an azure subscription especially for the deploying our apps to static web apps and then you're going to need a github account if you like to use github to deploy your apps okay so i'll take a break from the slides here and i'll show you what i have cyclone this project it's a very simple angular application let me go ahead and write start this i've generated this project using angular cli i have some i have an app module here standard with some components that i declare i have a i have two components a home page and a profile page i have a profile route to display the profile page and my home page routes and i have a service here that at the moment just display some uh brings a return some dummy data but eventually we will replace this with an actual call to microsoft graph so now my application started let me take a look at artworks localhost there we go so pretty simple i have a navigation bar i've used material ui angular material for this let's also keep our console open i have a login and logout button i have a text to identify the signed in user of course we are not signed in at the moment and then i have a profile page to display some dummy data right now i'm using some dummy data but i will eventually replace it so let's go ahead and step by step add authentication to this guy so i'll terminate this and i'll begin by importing our dependencies that'll be msl browser and i'm sell angular and while this is happening let's go to our app module and here i'm going to instantiate my msul application object and there are multiple ways of doing this you could for instance use the m cell module the static method to instantiate it uh you could perhaps want to fetch some configuration data from some other server some other location and then instantiate msul what i'm going to use is that i'm going to use the factory provider approach so here i will pass my constant amcell instance and then i'll use the factory method to instantiate this guy so i'll go ahead and create a very simple method here this will return a msot instance and what we are going to do we are going to instantiate this class now this class expects some configuration i'll pass my configuration object here at the very least you'll need to have a client id and where do we get that of course we will get this by registering an application on the microsoft identity platform so i'll go to my portal and then i click the azure active directory service if you don't have it here just use the search bar to look for it i'll go ahead i'll select the app registrations blade and then i'm going to register a new app i will call this amazon angulardemo and here i can select what kind of users i want to sign into my application you have multiple options here you can you want to go and perhaps go with a multi-tenant application or you may want to sign in a personal microsoft account i'm going to choose single tenant i want to sign in the users in my own tenants and then i need to select a redirect uri it has to be a single page application so i'll go ahead and register my base url and now application is registered i can see my client id application id here and i have my tenant id here as of interest we have the authentication blade here where you specify your redirect your eyes let's add another one so it's very important that every uri uri that you're going to use in your application that amsoil is going to use in your application has to be registered here so if you have a sign out uri that also has to be specified here and then i'll go to api permissions and i have a permission here for calling microsoft graph the profile endpoint and that is the permission that i'm going to need to acquire an access token for okay so i'll go back to my app i'll copy this client id and i'll do this and i'm getting an address here why because we didn't import this so let's go ahead and do that uh let me take a moment here and discuss what kind of configuration options we have so this object the oauth will define your sign-in experience so it's the most important part of configuring msl and let me briefly go to slides here so as i said client id will be the id of the application register on azure id and then importantly you have the authority parameter this controls what kind of users that you can sign in into your application so if you're developing a line of business application and you want to sign in the users in your own tenants that will contain your tenant id and then you should specify a redirect uri this is the uri that your application will receive the authorization code from azure id and then you have some more options we will get to that later on but for now these three should suffice so i'll go back to my app i'll specify the authority parameters i want to use common if i use common that'll be a multi-tenant app and i don't want this i'll go back to my app registration and i'll copy my tenant id and then i'll have a redirect uri here you can specify the whole uri or you can just specify a path which is going to be better actually because later on we're going to deploy this application and then i don't want to come back and change this with the deployed application uh origin so let me just use the alt route that we specified okay so yeah this is now creating an amsoil instance and providing it to our angular application now what do i need well i want to assign a behavior to this login button so i'll go ahead and do that now let's first start our application and my login button is here so i'll go here and i'll add a click behavior now i need to define this function so i'll go to my app components and there i have of course so let's create this function and here i need to have access to the msl instance that we just created here so how do i get access to that you need to tell your angular application that you're going to use amsoil service once you do that you can go back to your components use dependency injection check this service i'll do this there we go now i can access this guy instance and so let me first show pop-up so you have two options here for designing experience you could open a pop-up and assign the user in there or you could direct the user to the azure id sign-in endpoint so i'll show this pop-up first and then i'm going to show you redirect because that requires a bit more setup save this this should compile nicely now okay so i'll go back to my app and it should just work so this is how popup works now it's trying to sign me into this account i can go ahead and accept and i can see here the permissions that i will consent once i click accept so i'll do that and now i'm signed in of course there's nothing on my ui there's no indication and will come to fix to that but i know i'm signed in because i can see that amsol has oops yeah there it is i can see that amsol has stored the result from my sign-in operation now what are these these are your tokens and some other relevant information and we'll come to discuss that in more detail but let's first take a moment to show the redirect flow so if i want to use redirect the setup is a bit more requires a bit more preparation as always any kind of login or acquire token method i can pass a request parameter request object and you have many options there i want users to sign in to user reads this is the scope that i need to access a microsoft graph profile endpoints now if i want to use redirect there's a few more things i want to do first of all what did we say we said our redirect uri is the out route so first i need to declare that route and then end the component to handle the response in that routes so what azure id is does it's going to send you the authorization code to this path and there we need to grab that code and handle it and msl angular actually does that for us so we only have to pass this component here this is a dedicated redirect handler and also we need to go back to our app module and bootstrap this component let's go ahead and import this and this component targets a selector named aprididec on the page so i need to add this guy somewhere on my html and i'm going to do this here in my index.html so i'll go ahead and add the selector here okay now i'll go back to my page i'll close this page and i want to sign in again this time using the redirect flow as always let's keep our console open i click login and then i'm signed in because i already had an active session with azure id and now i want to step back here and well i want to fix this ui because there's nothing that uh there's nothing that indicates on the ui that we are signed in so let's fix that so how can you do this i'll go to my components and i have already this variable here which will eventually show the signed in user's id or username and i'm going to add another flag and i want to set this flag to true when the user is signed in so let's create a method here and how should i do this well if someone is signed in if there's a signed in account in the cache i should be able to get it from amsoil there we go this is the method that i could use to get the active account but there needs to be an active account set in the first place which we didn't yet but we will do well in that case if there's no active account but there are some accounts in the i cache say get all accounts and i can check if this is greater than zero well in that case go ahead and make the active account the first account in this array this will get you all the accounts in the cache but they may not be active you have to actually explicitly mark them as active and then i'm going to use the msl service to set this as active account okay after this i can update this flag thank you co-pilots and i can use the username from this account now where should this function run or when it should run more appropriately so whenever you're checking accounts in amsoil or whenever you're using a login or acquire token apis you'll have to make sure that amsoil is not doing anything in that moment and the way we can do this is that we can subscribe to the msu broadcast events and they will tell us if there is any other action that amsoil is currently performing or not so to do that i'll use dependency injection to import the sky there we go and now that i do this i also need to declare this as a provider so i'll go to my app module and let's import this and i'll go back to my component and now i can use this guy so i want to do this when our component first mounts whenever our component renders we want to check the current interaction status and to do that i need a lifecycle method so i'm going to use ngon init i'm also going to tell angular i'm using it and then i can access this broadcast events i'll have the in progress observable there that tells me what's going on at any moment i'll go ahead and filter out the status which will be interaction status or type interaction status from amsoil and i want to make sure that this only runs when there are no other interactions at the moment and i also need to import this guy so go ahead and this is coming from up thank you and once that happens i can subscribe and run this code all right and now let's go ahead to our html and use these flags i'll copy this first i'll use the ngif directive and show this button when the user is not signed in and show this button when the user is signed in and same for this guy so now we can conditionally render these elements and i'll go back to my app and see what's happened there okay there we go so our ui is updated we don't see the login button anymore we have the identifying the currently signed in usage and so far so good let's also add logouts just for completing this i just need a another method here all right there's msl service instance logout i'll just do data camera again and then i'll go ahead my app component to add this guy i'll let a click event here there we go why did you get rid of my ngf and log out all right so one thing here is that i didn't like the way of setting active account like this you may need more complex logic here i'm just getting the first account from the currently signed in accounts and setting this as active but the better way to do this is actually subscribing to msu events the better way to do this is actually setting the active account when the user first signs in so amsoil allows you to subscribe to various kinds of events the uh msu fires these events when they occur and then you can take actions to handle them or to update ui or to make an api call or whatever you want and i want to use this login success event i want to subscribe to this and set my active account when this fires so go back to my app and i'll go here so this broadcast service will allow me to access that guy and this is going to be msl subject observable and there i want to filter out event the login success event okay but not like this i need to import the event type in and then i'll have the login success here then i'll go ahead and subscribe to this guy i'll have the same payload here so when this event fires we know that the user signed in and there will be some results there will be a response from azure id so let's get that response let's store it in a variable and i'll get the payloads from this and let me typecast this as authentication results okay now i can actually set an active account properly there we go now there's one thing very important when you're subscribing to events you'll have to make sure to unsubscribe them when your components unmounts and the way to do this is essentially you're going to need a another life cycle event so i'll just go ahead and do this so this is important especially for the performance of your application so i'll define another lifecycle method here and i'm going to use another observable let's call this unsubscribe and this will be a new subject i'll select words for now and i'll go here and emit an event let's say undefined so nothing goes right all right and then i can use this guy to with uh together with the take until operator and that will make sure that i unsubscribe to these events when my components are mounts oops okay i think this works now let's go to our application and see what's happening there so i'm going to log out all right now let's go ahead and log in and let's look into diego i'll need to consent because it's the first time diego signs in and there we go so we had our active user here our ui is correctly uh showing the elements we wanted to show and at this stage i'll take you back step back and discuss the single sign-on so most of you are interested in how to have the most easiest sign-on sign-in experience for your users and you want this to be as simple as possible for them so you probably don't want them to enter their credentials again if they are already signed in and how is how does single sign-on works is that well when your user has an active session with azure id uh say they signed into one application that has that is integrated with azure id and then they come back to your android application and they try to sign in there since they have an active session with azure id they would sign in without entering their credentials again now if there are multiple active sessions with azure id you'll see some kind of prompts that will tell the user to pick an account because azure ad cannot know which account you want to sign in and there are ways to bypass that for instance you can pass in a login hint to msul and that will allow himself to pick the right account and sign your user directly in without seeing a prompt so i'll take a step back and just show you how this works so i have my application and my users signed in here now if i go back to this tab my user is not signed in in this tab and we can make this work out of the box very simple and i'll come to that later on but since i already have an active session here if i click the login button i should just sign in there we go so you just saw a brief flickering and transition and then we immediately saw the ui updated now you can actually avoid that flickering amstel offers you a method called sso silent which you have to pass a login hint or a session id to that method and that will ensure that there will be no interaction when your user is using sso however this method will not work if you are using a browser that blocks third-party cookies why well what happens when you sign into azure id is that azure 80 places a session cookie in your browser and that cookie is associated with the domain of azure id and that'll be login.microsoftonline.com but that domain is different than the domain of your application and so that cookie is considered a third-party cookie and more and more browsers safari at first and now google in incognito chrome in incognito mode is blocking these kind of cookies and more and more browser vendors will follow that so you probably don't want to rely on sso silent too much i'll take a break here and just check with you if you have any questions so far so we have a few questions one of them starting with um the first question is from indonesia who is like uh this question is if we define variables in our environment file i think our samples basically have a configuration file that is separate friend that's where we would put your reply urls and client ids and uh other than that definitely that's possible question is that the next one is again in the chat is uh do we need to pass the login hit as a query parameter or in the form of a header uh so okay so how can you pass this let's say i'm going to switch to another branch or well maybe not well talk about it because we are sure sure the way you can pass this is um where's our login method there it is so this is one of the parameters you can pass here now if you're asking the question where am i gonna get this guy well this is really up to you your application for instance might have let's say you have a company portal and you have a link to your angular application here you can redirect to this application with some query parameter and a user id here and then in your application you can grab this and then pass it to amsoil that way mzel would know which account that it needs to sign in the user into so that's one possible way thank you uh the next question is from which is uh can the pop-up or redirect work inside an iframe ah okay yeah so this is the tricky aspect most of the time the iframe is possible authentication iframe is possible um but you'll have to have an additional configuration for amsoil i would recommend checking out our iframe documentation and let me show you where it is and that should have answered most of your questions into the chat window please uh the next question is what information is present in the session cookie that is placed by azure id into the browser it's a server-side cookie it's uh it contains proprietary encrypted information that azure id uses to essentially assert certain everything from whether a user should be signed on using single sign-on to things like uh that are related to identity protection risk analysis uh and uh and things of that nature we do not publish information on how this cookie works uh whether it will have a certain behavior associated with it depending upon where the user is and how they are interacting with azurity today uh because unfortunately that information helps the the bad actors more than it actually helped the developers uh and that's that's the best answer i have for this the next question we have is how does this change in a b2c context uh json do you want to explain uh that question a little bit more for us another just the question was along the lines of if you're using azure adb to c as opposed to uh directly azure ad what other what other configuration needs to happen so do you want to cover that sure the most important aspect if you're assigning it with b2c is going to be authority parameter this will contain your tenant domain b2c tenant domain followed by your uh your the policy that you are using to sign in your users uh we have very many b2c samples um please go ahead and take a look at them we'll share the links at the end but essentially it boils down to your authority parameter and that will control which tenant you're signing into whether in azure 80 or in b2c and this will look slightly different if you're using b2c as your identity provider uh do we have a link to a b2c sample for angular that you can sure in the chat of course of course um let's go for this is it possible to start amazon redirect from sign in and redirect back to a different url so the question here is that azure ad when you are at azure id and you want azure to redirect to a certain url obviously that's one of the parameters that you provide how you manage it is up to you but just remember this that azure ad will not redirect you to any url that is not registered or provided in the redirect uri section of the app registration so if you want to redirect the user after signing to a certain url or if you want it to be very dynamic or if there is a you want to save the state of where the user was before the sign-in happen those are things that you have to basically code for yourself does that answer your question an additional uh we can add on this is that msul will not allow you to if you start your authentication from one domain and you try to end up on another domain amsoil will not allow that does that answer your question i suppose you can we can continue uh chatting about it uh next question is from muralitharan can we embed msulgs to build power platform component framework controls uh we don't have an answer to this really is uh mostly because you know we are a platform and we have an authentication library how does it use get used by various other products within microsoft and from others out there isn't necessarily in our control uh we would suggest you look into their documentation on on the other we suggest you look into the power platform team's documentation on how they suggest you use amsoil in their development framework okay so we are good now and uh let's move to discussing the id token in a little bit more detail don't you want to go ahead sure sure uh so what is the significance of authentication the the event of signing in is that you receive well there's a station cookie that azure places on your app but you shouldn't rely on it in any way but the the most significant outcome is that you obtain an uh an id token and that id token is the proof that your user signed in appropriately now for instance i can see my id token here in msl cache here and if i this is the this is the encoded base64 encoded json web token and if i want to encrypt this this is my test tenant so i will do this uh but you shouldn't share this string anywhere else and then you can decode this guy and see the payload in that token so i want to discuss these claims in a bit more detail so i'll go back to my slides so what do you have here well first of all you have your audience claim and this signifies which application this token was issued for and that is going to be your client application in this case it's going to be our the client id we used in our demo app then you have your issuer that tells you for which tenant this token was issued you'll have your if you if the user belongs to some security groups they will appear here in the groups claim uh you'll have the name of the user you'll have a unique immutable identifier of the user in a tenant if the user belongs to some roles you'll have that in the claim you'll see the user's tenant id which tenant this user belongs to and you'll have any azure id rules if they are assigned to the user and you can use this information to customize your ui in any way but you shouldn't use an id token to access a web api that is what an access token is for any particular questions about id tokens we have some questions around caching but it's better if you go and cover that slide itself it could help sure sure okay so i want to take back here and discuss more about caching i show you this cache that amsoil is keeping but what are these things and is it secure so and what are the possible options for caching that you can use so caching is configured in the public client application instance we have here under the cache field you can specify the cache location so for instance so far we've been using session storage but you can choose another thing you can choose if you want to store the authentication state not the tokens but the authentication state whether you are signed in or not in a cookie and this could help with some browsers that are having issues with the redirect flow and in general caching is for storing the artifacts that azure id returns to your application as i said default is session storage but you have the local storage and also the memory storage options the trade-off here is that well you make a trade-off between more secure and better user experience so memory storage would be the most secure one because essentially amsoil does not cache items anywhere else but the memory and at the other end of the spectrum you have the local storage which gives you the best user experience because now your application uh now the instances of your application running on different tabs will have access to the same cache so if you're signed in in one tab and if you go to another tab open the application on another tab you'll see your app signed in immediately without doing anything because they are sharing now the same cache location these local storage and session storage are considered secure as long as your applications do not have vulnerabilities against cross-site scripting and you should check out the os cheat sheet for that to make sure that your applications don't have such vulnerabilities and on top of that there are other mechanisms from azure id to make sure that your uh tokens cannot be used by a malicious actor so for instance your tokens issued to single payload applications are usually for one hour access tokens and 24 hour for refreshing id tokens amstel has some extra mechanisms to prevent token replay attacks so proof of possession is one such mechanism it binds your token to your browser cryptographically and it cannot be used outside of that browser and then we have continuous access evaluations that allows resources web apis to invalidate an access token at any moment in time and this is what we are going to discuss salman will talk about in later so i'll continue with this and then i want to talk about uh what kind of artifacts are in the cache well we already discussed that we have id tokens and access tokens are in the cache on top of that we have refresh tokens we have account objects that amsoil creates then we have some temporary data like request method errors the current interaction status and etc and then we have some entries for telemetry so if you want more details on this feel free to take into our documentation there will be more information about caching there uh finally i want to talk about logging so amsoil allows you to log whatever it's doing at any moment at various levels of details and these logs are useful for understanding what's going on and debugging if anything goes wrong with your application and likewise you configure this in the public client application instance so i can have a system here with logger options here oops and i can have a logger callback you can customize this callback as as you like i'm just going to console or message and then you can specify a log level let's say select variables and now if i go back to my application i will see that msul is logging what's going on and this is very useful for debugging if something goes wrong with your application uh any particular question about this okay let's go to the microsoft graph part of it and then i'll share the questions in the chat okay sure okay so let's continue um so far we discussed em cell service and oops and amstel broadcast service now let's discuss the amsoil guards remember we have a route in our application profile routes that doesn't require authentication at this moment i can just sign out and review this route and you don't want this you want to protect your routes and allow only the authenticated user to see that child and it's very easy to do with angular m sub angular all i have to do is that i need to activate the msulguard component in the route that i want to protect if you like you can add this to your home page as well so that means as soon as the user hits your application they will have to sign in but importantly do not add this to your redirect uri because this will just break it and i then i go to my app module and declare this is the provider oops and let's also import this guy now i need to configure the guards and you have many possible configuration options i'll use a factory method as well to configure this guy let's call this amsoil guards config factory i'll create a very simple method here this will return a guard configuration and then return okay so what do i need to return well let's take a look at the guard configuration here i can specify an interaction type if the user is not signed in and the msl guard kicks in i can specify what kind of interaction i want the guard to use so i'll go ahead and i'm going to choose the direct here as well i like your dialect let's import this and then optionally you can pass in an authentication request so for instance you can specify here what scopes the user should consent to if they hit the m cell guards you can specify more options here take a look at those and how you can use that in your application and once i have this factory emitted oops there's one thing i'm missing here okay so now this should just work let's try it out i'll go to my app i'm not signed in i'll go to profile and the guard kicks in and i'll sign in to diego all right so i think we covered all things related to authentication itself now let's actually acquire an access token and call microsoft graph and get rid of this dummy data here so if you're familiar with amsoil browsers before you can just go ahead in your components and use msul directly to acquire a token but amsoil angular mixed is easier for you it has a interceptor component class that allows you to intercept the outgoing calls and attach an access token if you specify that it's requiring that so the way i do this i'll go into my providers here again first i'll tell angular that i'm using http interceptors and then i'm going to use the class m cell interceptor let's import this and there could be multiple of those so i'll just say multi-true and i also need to configure this so i'll pass in my configuration similarly i'll use the factory methods here nope interceptor factory let's now forget this and create our factory method here interceptor configuration okay so now this guy should return let's see what it should return an interaction type similarly so this time i want to use pop-up and then it should have a protected resources map okay i'll go ahead and create something like that and i'll talk about more and what this is thank you let me actually get the full type here okay and let's import this so this map allows you to associate a end point for instance the microsoft graph profile endpoint with a certain scope and amstel understands that to access this endpoint i need an access token with this scope or permission and i'll go ahead and do this first let me pass this guy here and then the way to do this is oh okay right here yeah so basically i'm telling that whenever you are accessing this endpoint get us get an access token with the scope and i can pass in more parameters here i can customize it a bit further for instance i can specify the http method that the interceptor should intercept and there are a couple more configuration options uh that you can find in our documentation okay so now that i have this the interceptor is configured i'll go to my service and use dependency injection to get a handle on the um oh the http client sorry we need the http client for the calls and once i do that i can get rid of this guy oops okay well that's not the endpoints and let's replace this with the graph endpoint there we go and this should just work okay i'll go back to my app nope there we go it's it's here the we already updated this data from the user's profile on microsoft all graph so we're doing so we are a little short on time here so we will quickly switch to continuous access evaluation uh please uh if you have any questions about how microsoft graph is used please go ahead and use the chat window so sal if you want to get started sure i'll give control to sell here hello everyone one of the features that we'd like to introduce to you today is continuous access evaluation ce c allows microsoft graph to evoke an active session and respond to security events like account replication account displacement or user location change or user risk increase we encourage admins to enable c in their tenants because microsoft graph will reject your access token and send back a claim challenge developers must understand how to handle claim challenge sent by microsoft graph which leads me to my next item how to handle claim challenges as you can see in the graph the client sends the refresh token to azure to receive an access token for the graph api when a security event is triggered agile will notify the resource provider in this case microsoft graph the next time that the client tries to access the graph api the access token will be rejected when the graph api rejects the access token it will send a response with a status 401 from this response authenticated header we'll extract the encoded claim this claim is called claim challenge we'll decode this claim and pass it to pass it to msl acquired token api to reauthenticate the user and acquire a new access token so let's go to the steps of enabling a cae in your application the first step that we need to do is to configure and cell app to declare it as capable of handling claim challenge then we will grab the authenticated header from the 401 response after that we'll process the header and pass the claims to the m cell as a request parameter now we can dive into the code a little bit unfortunately we can't test ca live because it takes around 10 to 15 minutes to trigger just a moment okay let's snatch our changes and close the sky and i'm going to switch to another branch all right so the first thing that we need to see is the auth configuration file all right there we go as you can see in the install configuration object we set the client capabilities to cp1 that lets the resource owner know that the client is capable of handling clean challenge so you need to add this in your configuration and then we'll go to the profile components this is the same request that dugan did like few minutes ago when calling graph api and only difference here we instantiate graph services let's go to the graph services class as you can see here when we send a request to graph a me endpoint if there is an error with the status 401 we check the header if it's include the authenticated header if it does we will handle the claim challenge what do we mean by handling claim challenge we're just gonna extract the cl that claim challenge from the header and then store it in the session storage storing the claim challenge is optional it's up to you guys how do you want to handle it where do you want to save it and how do you want to do it in your ui after storing the clean challenge we'll pass the claim challenge to the acquired token interaction which is at this point at the data redirect it will re-authenticate the user and give him a fresh new token we also want to look at the interceptor because it's an important step there next time like the user like wants to acquire a new token we'll check the storage if it includes the claim if they claim it exists we'll add it to the acquired token uh and we receive the right access token with the required claims to access the graph api the benefits of doing this is like at any certain point in time graph can reject your access token and ask the user to basically get a new fresh new token and re-authenticate i will give the control back to dugan he can he will walk you through how to deploy the application that we just built we will skip the deployment steps i would suggest we go through the tutorial to to understand that because they're kind of out of time we'll take any remaining questions if you have them and uh i did provide a link to a code that we have ready for you to to essentially handle cae so yeah if you [Music] guys want to basically have any remaining questions so let's go through those and we can we can then close this session uh we will publish the powerpoint slide on the yammer community channel uh question what's interesting identity platform blog as well as a youtube video so if you see the current slide right now you can just go to those m365 pnp videos which will have the link as well as follows on those channels 365 dev and azure 80 to get these updates and one quick request would be to fill in the survey because we will need your responses if you think these are great sessions you would love such sessions please go ahead and given a survey response this will really help us you know having the right kind of call setup for you and any other feedback that you have feel free to put it in the survey okay we have a question from jared is ca supported in other sdks in other msr sdks yes all msl sdks have uh add claims or add additional claims or request additional frames the names kind of change between them but you're looking for essentially a method that would be in the respective amazon documentation around how to request additional claims from aad which is what uh how how you handle ca events okay uh if i listen if you missed any questions uh please do not hesitate to copy paste it again in the chat window uh so we have our next call coming up on september 15. it's going to be unclaimed so uh feel free to tune into the same calendar invite or the link that you have and you know we would love to host you there as well and uh take up your questions or any other information that you need on claims and here is our calendar invite for folks who don't have it feel free to download that and you know join in every third thursday of the month and kalyan has shared the tutorial for you folks thank you guys yes so everything that we have covered including the steps that we couldn't cover like deployment is is laid out in the angular series uh tutorial that we have available uh please go through that and if you have any questions you can use the issues tab to reach back to us we'll be happy to answer your questions uh and uh thank you very much for joining the call today uh we really enjoyed your presence here thanks a lot kalyan thanks to god and thanks salman talk to you all thanks sandisk have a great day everyone thank you thank you everyone [Music]

Channel: Microsoft 365 & Power Platform Community

Views: 17,377

Keywords: PnP, Dev, community, open-source, Microsoft, Microsoft Identity Platform, Azure Active Directory

Id: EJey9KP1dZA

Length: 58min 54sec (3534 seconds)

Published: Sat Aug 27 2022