Authenticate users in JavaScript apps with MSAL.js

all right everyone welcome to the first session in our four part series on developing javascript applications with the microsoft identity platform today really excited to sit down virtually and talk to you all about how we can authenticate users in our javascript applications with the mso.js library first we're going to do some housekeeping before we really get too deep i'm sydney andrews i'm an azure mvp and a microsoft certified trainer we have on um q a i aisha who's going to um help answer any of your questions and if i mispronounced your name i apologize um as with all the other webinars we've ever done msusdev at microsoft.com is our alias if you want to access any questions that you feel like didn't get answered in the q and a today um if you got questions today you want to answer right now going to q a again we got experts in the q a they've already been answered some great questions we also have a github repo github.com msusdev is the organization and microsoft underscore identity platform dev is the repo and i think this link was already posted in the q a so if you just go over to the q a check it out you'll see the link the entire presentation i'm showing you today plus all of the demos are there now for you to go in play around with show to your colleagues and go and have fun so let's set the scene this is the first out of four sessions we're going to do about javascript in particular with microsoft identity platform today we're going to set the stage we're going to talk about how we can authenticate in our javascript applications specifically i'll show you a node application using that msa.js library we're going to go over the basics of authentication with the microsoft identity platform and we're going to implement it the next session we're going to go into the microsoft graph toolkit components after that we'll talk about authenticating azure within style.js and then the final session will be how we can use the graph sdk together with msi.js so if all that out the way really four things we're going to try and tackle today we're going to try to define and talk about what the microsoft identity platform is at a very high level and then i'm going to do was one of my favorite things to do is just to authenticate manually i feel like once you see somebody manually authenticate it it will reveal all mysteries answer all questions that make everyone um at a level set so that when we start using inside.js library it's not magic it's not a mystery how it works everybody really understands how it works underneath the hood and it helps us all out as we work with the platform that's really going to be the last two things we're going to use uh msl library to help us authenticate and then we're going to figure out that token that we get from the mci library what we can use it with so of all that being said i really want to start off by just going into the microsoft identity platform and so again two goals today we're going to manually authenticate we're going to use the browser and we're going to use the tool i like to use postman but you can use any http request tool to do this and then we're going to do the same exact thing for the microsoft authentication library so we're going to see me run through the same demos two different times but before we do any demos we really need to talk about what the microsoft identity platform is and so one of the things to help me really understand was to just look at this diagram which somebody showed to me i want to say two or three years ago um essentially everything we use in our organization is tied together with identity so if we sign into cloud applications like box.com salesforce we tie into um first party cloud applications like microsoft 365 azure if we're using applications in our offices if we're using applications remotely even logging into our individual devices or communicating with people in our company the one thing that ties everything together is identity so identity essentially becomes a control plane for our cloud experiences across the entire board and the idea here is is super interesting but we have one thing that ties everything together so if you want to integrate all of these different components if we want to take our own premises applications to bring an intelligence in the cloud or we want to take our communication applications that we use locally and tied together with really unique devices wherever devices we purchase from a company or devices we build ourselves the way we tile this together is really understanding how identity works so identity is really the core to integration so if you've ever done identity in microsoft's cloud before you probably already heard of azure active directory and azure active directory is really an identity service provided by microsoft that helps you tie in all these different components whether it's components from third-party clouds from the microsoft cloud devices you may use applications you may build applications you may adopt azure active directory becomes this control plane across all these different experiences across the cloud now this is interesting because in the past you could definitely write code against azure active directory we had the azure active directory authentication library or a dial and it worked that's um i know some people work really hard on it but always joke that um it was just very difficult it was one of those things that if you looked up a code sample on how to authenticate the azure active directory and i think sometimes if you still go your search engine of choice and look for a code sample you'll see that some of the sample code out there is just very difficult to parse you'd see a sample here how to quickly authenticate to azure active directory in javascript and it's 300 lines of code and i mean a dial worked but the the barrier to entry is just so high it was so difficult to get people to try it out for the first time to get organizations adopted or even more importantly even if you do adopt it it was hard to understand what was really going on hard to maintain it and so while it technically worked there was a need for something more so two things really happened one was the actual endpoints and the api they all standardized and we came up we came up with this thing with the microsoft identity platform which is essentially this one platform for all the identity development you want to do across all of microsoft and when we say all identities i'm going to get into this a little bit deeper later but more than just your organizational account and the great thing about the microsoft identity platform is that now there's just one api one specification one way to do things people could build really compelling libraries both engineers really awesome engineers and microsoft could build libraries that were really easy to use people outside of microsoft could build integrations and libraries and tools because again you have a unified api now and so the a dial library and then the api api endpoints it pointed to they still exist though we call that the um 1.0 endpoint it's still out there if you build an application on it it's still going to work everything is going to be fine but moving forward we have the microsoft identity platform which represents that 2.0 endpoint and that 2.0 endpoint is great because we can use that to connect to all different types of accounts whether they're accounts in azure active directory or accounts i like to use referred to as worker school accounts officially i think they're referred to as organizational accounts you have your personal or consumer accounts which is like the account you use for xbox or any type of outlook.com or live account or you have your social accounts so social media providers any other ohof certified identity provider that you're using with tools such as azure ad b2c all of these are exposed to a single endpoint so once you learn how to work with this 2.0 endpoint then that can cover pretty much the majority of your identity needs and on top of having a great endpoint now there's now the microsoft authentication library or m style which is a set of libraries across different programming languages and frameworks that already are set up to work with this endpoint in the simplest way possible using on code in a much more concise fashion we're talking hundreds of lines down to a couple of lines here so let's actually look at that documentation page because after this webinar is over you're probably going to want to dig in and say okay i'm really excited about um the microsoft identity platform where i go to learn more and my goal is to show you how to do that so i'm going to show my taskbar real quick or i might have to exit this presentation and i have a browser open and i'm going to go to docs.com or docs.com that's microsoft's documentation homepage now for docs.com i'm going to select azure and there's lots of stuff here for azure but the one i'm mostly interested in is identity and azure active directory this is going to take me to the landing page for all of azure active directory but if you're somebody who actually wants to learn about development i can jump to the landing page for the microsoft identity platform so hit see more here and this page is the landing page for microsoft identity platform so i'm going to make an announcement in the q a and just share this hyperlink with everyone you'll see it at the top of q a and i think matt already beat me to it ah darn but um it's in there twice now so it's twice as nice you're going to be able to jump in and look at that url and then the great thing about this page is this gives you just one place to sit um look through all the documentations for the platform that you prefer on the scenarios that are interesting to you every tutorial i'm going to walk or every demo i'm going to walk you through today is based on the tutorial from this page so as you look through the documentation you're going to say wow that looks extremely familiar and that's because that's by design i want you to be able to walk through these tutorials on this webpage and see that there's lots of really useful information there now going back to our presentation i'm gonna just jump right back in one of the first things i want to talk about is how we actually authenticate so the very core thing we need to do is set up an application in azure active directory so we register these applications ahead of time and this allows us to authenticate against azure active directory and then require tokens from azure active directory and those tokens because there's a trust relationship between um azure active directory and all the other applications we want to access those tokens are essentially the keys to the kingdom allow us to go to another application and grab the resources we need so usually when we register application we include what's called a redirect uri this is telling azure id that once we authenticate this is where we need you to send us with all the tokens and credentials we need now once we register we'll get client credentials or specifically a client id then we're going to need that to actually set up the authentication and you'll see today that we'll register two different types of applications but just more than just those two different types of applications there's lots of applications you can register in azure active directory you can build web apis you can build standard um client facing web applications you can build single page applications that do everything in javascript including the authentication and acquiring a token you can build desktop and mobile applications that handle everything in app you can even build server side applications where um excuse me we've built server-side applications where we want to set up credentials ahead of time so it can run in an unintended manner so let's actually look at how we can register an application azure ad so i'm gonna jump out of this presentation real quick and i'm gonna go right back to my browser and we're gonna go to portal.azure.com now from here we're going to jump into azure active directory and just for your just for your information i'm logged in using a fictional identity this is a fictional company i set up and i love using it for webinars now from this fictional company i'm going to just jump in and i'm going to go to app registrations i'm going to zoom in just a little bit more now i'm going to create a new registration and i'm going to call this example now this registration i'm going to set it up for some of the demos i'm doing later so there's a couple options i need to pick the first option is hey who can use this application or access this api if it's an api now if i leave it to the default option accounts in this organizational directory only that means only people in my organization the current um azure ad directory can access this application now if i want to allow any type of organizational account whether it's in my directory or in another directory i can select the multi-tenant option down here if i want to combine the ability to allow people to access it across multiple directories and across their personal microsoft accounts then i will select this last option today i'm just going to select the multi-tenant option the last option down here is the redirect uri now you don't have to set this up right now but i'm going to set it up just for fun so we're going to build uh well bill's the wrong term here we're going to authenticate manually first and so technically i'm doing a native authentication so instead of redirect uri and i'm going to say you know what keep it simple let's redirect localhost that's all i want to do now i don't have anything running at localhost i'm going to just double check you always say that and you find out something's running yep i don't have anything running at localhost so we should be good to go i'm gonna hit register and now i have an application registration there's my client id right there i'm gonna copy that to the clipboard and now i can use this um to go ahead and um set up things so let's actually jump back to the presentation let me walk you through what we're gonna try and do manually so before we get started authenticating manually we really need to understand um how we authenticate and the process we use to actually authenticate is called authentication flow now this is a long table don't expect you to read it all memorize it all again this is why i gave you the link to the presentation at the beginning um but essentially our authentication flows are the the methods that we do use to authenticate so for instance authorization code allows our application actually securely obtain the token this is usually used with client-side applications we have a device code authentication flow um implicit we can use integrated windows identities we can use a username password flow and i like to walk you through two examples to really nail this point down so first we have our interactive authentication flow and this is the one you've probably seen a hundred times we have an application and we need to log in so the application sends the user to some website posted around by azure active directory the user logs in azure active directory sends them back to the redirect uri which is usually on the same application there's some exceptions there and then once they get back we use the token that we received on that redirect whether it's part of a forum post or a part of a query stream parameter and we go to whatever service we want to go to and today just to keep things simple we're just going to go to the microsoft graph now there's other flows and i always like to keep some simple examples going um one of the example flows that you'll see is the device code flow and this one's fun because essentially just imagine you had an iot device um i've actually had to implement this on an application i run on my raspberry pi and now with this iot device we can't necessarily go to the browser especially if it's a headless device or a device without a graphical ui so in a device code flow the device goes get a unique code then the user uses some other workstation maybe a computer laptop or even mobile device nearby and they go to the azure active directory website maybe even put in a url manually they put in the code they got from the device they authenticate and then azure active directory will return the token to the device directly and the device can use that token to move forward to whatever api you want to access so a really good example this is i don't know if anybody remember the early days of the azure cli where it say hey here's your device code you need to go to microsoft.com device login and once you go to microsoft.com device login you put in your device code and then you authenticate that way this is the same exact flow so when we actually decide to log in well we have one url to rule them all and that's our base url for logins and queries or requests excuse me so login.microsoftonlive.com is where we're going to go and then we need to provide a tenant id go to the olaf 2 relative path and in the version 2.0 ie the microsoft identity platforms 2.0 endpoint now there are specific actions we can take like for instance if we want to log in we'll go to the authorized relative url or if we want to just get a token we'll go to the token relative url now there's a couple parts of this one to walk through before we actually do this on the first part is the actual tenants so when you create an azure active directory directory you get a unique tenant id that's really just for your organization that's a good and you can provide that as part of this url now if you do that when you go to login it will automatically assume whoever's trying to log in as part of your organization or even show within the login portal the theme and branding for your azure active directory uh tenant now what if you weren't sure if the person's part of your team organization well there's a couple of um i like to call them aliases that allow you to reference other things so for example if we use organizations then it will take them to a special login page only for organizational accounts so think about your work or school accounts this is useful if it's you don't know if it's going to be somebody from your organization or maybe one of the partner organizations you work with another endpoint is the consumer's endpoint this is a special endpoint that's just for somebody with a microsoft account so think about if you're building something to interact with xbox or any type of the microsoft account features you would go to the consumer's endpoint or excuse me consumer's tenant and then the other alias comment is just for any type of account whether it's organizational or consumer account so how do we authorize well we go to that authorized endpoint that we talked about earlier at login.microsoft online.com and we get the correct query string parameters there's lots of parameters here that we have to provide and i'm going to go over them in a second in another slide we then log in using our browser and then we look at the response from the server it's going to give us a response wherever we choose to get that response on a query stream or as part of a forum post so let's actually look at those parameters there's five parameters that we need to provide and there's a sixth one if we decide to provide it the first one is the client id that's that unique identifier that i showed you when we registered the aed application then there's a response type what are we asking for back here the answer is usually code then we need to tell it to redirect uri where to go after authentication it's going to check to make sure that that redirect uri is one of the approved ones you set up when you registered the application after that we have the response mode do we when it redirects back to the website in the redirect uri do we want it to send the code on the query string or do we want it to actually do a form post of the code after that we specify the scope what permissions are we requesting from the apis that we're accessing so today we're going to keep it simple we're going to use the microsoft graph so we'll use really simple permissions for error but if you're using other third-party applications other azure services or even your own custom applications the scope is really up to you it's whatever you want it to be finally there's a state now the state is really interesting because you don't have to use it but if you do use it you it's a way for you to check that the response is echoing the correct state back to you so again it's optional but if you do use it it should echo it back to you so authorization requests for example i'm going to open my pin real quick would have our tenant so here we want organizational accounts we're going to authorize endpoint we're providing a client id response type of code a redirect uri which is url encoded what type of response we will we want so here we see a query string our scope we just want to read the user profile so user.read is good and then some state data now our response will redirect to whatever our redirect uri so we set http localhost so that's where it redirects it gives us a good for the code and then it echoes our state back now once we're done with that we just take take the same data and go to the token endpoint but this time we're doing a post request instead of a get we used we put that client id in the body we put a redirect uri on the body and our scope in the body so those ones we already know the code is what we just got from an authorized endpoint and then the only unique one is grant type here we say we want to uh o off a bearer token authorization code so something we can put in a baritoka header and that's exactly what it's going to give us back it's going to give us a json object with that bearer token and we can take that bearer token to the service of our choice so same parameters we're talking about here um i apologize this should say form um body properties but um get a typo right and then it will return a response now i'm skipping past this i actually want to show you this mainly i think it would be way more interesting to look at how this actually works out so i'm gonna jump out of um powerpoint and what i'm gonna do is i have my application registration here so i have my client id and so for fun i'm gonna open up postman now why am i opening up postman right now postman has this really cool tool that helps you build out a url so i can open up postman and build a get request to https login.microsoft online.com i'm going to zoom in just a little bit i'm looking at the num view and it's not zoomed in quite enough um i'm just going to go to the organization's endpoint and go off to version 2.0 and i want to authorize now from here let's zoom out just a little bit from here i can actually use this little pane to build up my request so my client id i already have that i'm going to paste it in i'll redirect uri http localhost um my scope is going to be user.read my response type i want to code back and how do i want that code well i want it in the query string so i'll just use query now because i use postman here it actually built the url out for me so i'll copy that go to my browser still trying to load locals go to paste it and hit enter now i'm already logged in but just for fun see if i can um just gonna log out real quick just so you can see what the login experience looks like am i locked out all right looks like i'm locked out perfect someone go in or i didn't log out that's all right i have a really cool tool i can use here and for those who don't don't know this and edge you can actually browse as a guest it's not quite incognito mode it just allows you to use a different identity so it's pretty great if you're playing around with azure ad and identity platform because it allows me to just open up as many windows as i want with different identities just going to paste in that url this time and now i get to sign in so i'm going to put in my um email hit next and now it's identified the company i'm a part of so it shows my login page for that company i'm going to put in my password and now because this is my first time using this application you all saw me spin up this application brand new um i need to give this application permissions to do the things i asked for in a scope so in a scope i export permission to do user.read so read my user profile so here it is sign you in and read your profile and make maintain access this data given access to now since i'm a administrator for my directory i could consent on behalf of the entire organization or i can just go ahead and um just consent for myself and it's even warning me that this is an application it's not published by right because i was published by somebody else and there's all my information there i'm gonna hit accept and it's gonna redirect me to locos now fortunately for us i don't have anything running at localhost but you notice i have this long query string so i'm going to copy this and jump back into postman now we can use postman both ways i can paste this url into the get and it found two query strings one is code and one is session state so i didn't provide a state so um it didn't echo a state back but i did ask for a code and it sure enough gave me a code so i'm gonna copy this code it's gonna become really interesting later now remember we go to an authorized endpoint for the user to authorize but if we need a token we have to go to the token endpoint so i'm going to go back to postman and i'm going to build a post request so https login microsoft online.com organizations o off to v 2.0 and this time go to token instead of authorized now my information needs to be in the body of this request and i actually like to submit it as form data so i'm going to go in and put in my code and paste that code that i just copied i'm going to go grab my client id id that i used earlier my redirect uri i don't need to copy paste that i remember that that's http localhost my scope is user.read and then remember we only had one property that we had to remember for this is grant type and i want an authorization code i can use an oauth on veritoken header so if i did everything right i hit send and there we go i have a bearer token now let's copy this bear token so i want to go somewhere with this um in the interest of being fast about this i'm going to go to aka dot ms slash ge that's the url to the microsoft graph explorer aka.mslsg and i just put that in the chat now if i want to get my profile information i can hit get my profile and i'll pull profile information i'm not logged in so it pulls it for a fictional user but if i sign into the graph explorer it will actually pull my profile information so i know to get to that i need to go to graph.microsoft.com v 1.0 slash me so just like we did earlier https graph.microsoft.com v 1.0 slash me now for my authorization i'm going to do a bearer token and i did one earlier here's my new bear token hit send and it successfully went to the graph api pulled my profile information using that bearer token so that my intention here was to walk through this entire process mainly so when we get to using namesad.js library later there's no mystery of what's going on underneath the hood so this you can actually build an application and do all this manually if you like a really good example of this is i've done this multiple times with other oauth applications using like iot devices or smart home devices i built all sorts of integrations with really cool stuff because i can't i understood the flow and that's really the key reason why i showed you how to do this mainly now going from there this wouldn't be a great webinar if i didn't show you how to make your life easier and that's where the microsoft authentication library comes in so the microsoft authentication library is a set of sdks for your favorite programming languages that allows you to access um these apis using these tokens that we just talked about whether they're your apis um the the microsoft provider apis third-party apis or even something like the microsoft graph now i have a hyperlink at the top i should have copied this i'll i'm try put this in a chat real quick i have on powerpoint opening another window to make my life a little bit easier there we go um this hyperlink i just sent you will give you a much deeper overview of the msi library if you want to really get into it but today we're going to use specifically msi.js now inside.js is um a great versions libraries ideal for javascript applications um you can use it in browser you can use it with vanilla javascript applications like you're building a node server side application you can even use it in um front-end frameworks like angular and they even have special npm packages for different platforms if you want to use in those platforms but they also have the core azure msl library for pretty much majority of use cases now when we use that msi library there's a couple things we need to know the first thing we need to do is we need to build a user agent application now this really is what helps us configure how we're going to sign in our users whether we want to redirect them to a website or we want to do a pop-up window it's our point of configuration for the entire application so what we're using again server side applications for single page web apps that um user agent application is gonna be key to this now how do we create one well we use the mso.user agent application that's how we create a new instance and then here i'm storing in a variable called client now i could build upon this for example i can configure right here within the um user agent application instance so if i want to set up authorization i just create an auth object and within i have three properties my client id my authority the authority is going to look very familiar that's pretty much the url we use logging.microsoftonline.com and then you put your tenant information there and then i'll redirect your ass so that configuration looks pretty similar we can even um set up cash so if we wanted to store it in session or store it locally we can cash people's authentication information in case we wanted to do silent authentication or some other mechanisms later once we configured that user agent application we simply build a request now there's different ways we can build a request but for the purposes of the day we just need to put our scopes in so um we're going to use user.read and that will keep things um pretty simple so once we have our client set up and we've configured it with a request we can log in interactively um the way we do that client.loginpopup we pass in that request object and it's going to pop up a window and log in now if you're already logged in that pop-up window is gonna not really show anything but um if you haven't logged in before that's where the user will log in you see a lot of applications use these pop-up windows if we wanted to get a token then we just call acquire token silently because at this point we don't need to log in again we just want to take the information that we already got from authentication and acquire the token and you're going to find especially on single page web applications that that's the common workflow you're going to use uh where you essentially start off by logging interactively and then you jump into acquiring the token so let's actually jump in and take a crack at this so i'm going to close out of powerpoint one more time and we're going to close minimize um postman we don't really need that for this demo but what i have set up for you is i have a folder node dev and in here i have a really simple uh node.js application i've already uh npm installed excuse me we already did npm install we've already um got our node modules down we run an http server in http server we're hosting a really simple bootstrap application with just a single button called run code that's all it does i'll click run and then here's our code that we actually run so nothing super complicated here i'm going to just run npm start the we're going to localhost 8080 and here's our application i'm always nervous with demo code but here we go so i'm going to jump in hit run code and prints ready nothing fancy here yet now we're going to really start spice this up so we're going to go in and go to portal.azure.com and we're going to go to azure active directory and from azure active directory we're going to go to our app registration and we are we have our example app registration we created earlier awesome we're going to go to the authentication section now here we can configure platforms and stuff like that since this is a web application we've only set up the mobile desktop platform we need to set up a web platform that's not too bad i'll hit add a platform i'm going to select web and that needs to redirect your app luckily for me localhost 8080 is a pretty good redirect uri now i can also set up implicit grants so this is required if our web application is going to get the access token itself and that's actually where we're going to set up we're going to assume this is a single page our spy app so we're going to set up implicit grant basically given my application permission to go and grab its own authorization uh excuse me go grab its own token everything's set up so i'm going to go back into my code and i'm going to start building this out so the very first thing i'm going to do is i'm going to go to my index.html file i'm going to add a reference to the the version msl.js script we're going to use i'm going to put this in a chat as an announcement but i'm just going to pull it from cdn so just show you where that looks like this is the install.js script i'm going to pull from the cdn and i i purposely didn't use a minified version just case you ever want to just go look at it so i'm gonna do up here in a header script type text javascript of course paste in that url and then close my script tag i don't know why that's capital s it's because the first one is capital s there we go all right now i'm going to go to index.js and i'm going to just start building out this code so just like we saw and the slides i'm going to create a constant call a config i'm going to create a off property in here first i'm going to set up my client id go back to the portal and go back to overview and grab my client id paste that in the next thing i'm going to set up is authority now that's https login.micros dot microsoft slash common notice i'm using comment this time instead of organizations it's still going to work i just wanted to try a different one for my redirect uri i'm going to set up to http localhost 8080 and since i set it up in my application registration it should work i'm gonna put a semicolon here next to do is gonna set up my user agent application so create a variable called client new msl dot user user agent application pass it in that config i'm going to set up another variable called request and here i'm going to set up our property scopes it's going to be array of scopes today we're just using user.read so nothing too fancy then i'm going to set up the login so on client.login popup just like we saw in a slot pass it in my request now i want to wait this and i want to put the response in a variable called login response and we're going to print that out login response remember if i'm trying to type through this code a little slower but if you ever want to look at the code just go look at that github repo we gave you at the top of the hour and in there you actually see all the code i'm walking through right now so from here i think i saved everything yep i'm gonna control f5 as long as i didn't break anything and with my luck sometimes i do break stuff it should load back up make sure server's still running that sorry i'll bounce the server there we go don't know what happened there all right i'm going to run my code now since i've already logged in you didn't see it but actually a pop-up window showed up on my other um screens but it logged me in and got everything we need for me to go grab the toe i'll grab the token from the token point but i actually want to see that because otherwise this just looks like magic i don't understand how it works so i'm gonna do a couple fun things uh the first thing i'll do is i'm gonna add a different scope mail.readwrite is one of the graph um api scopes that allows you to actually manipulate uh your mail in exchange online now i haven't given this application permission to use mail.rewrite before so it should complain when the pop-up window comes up so uh control five write my code and there's my pop-up window it says hey i need permission to read and write access to your amount sure you have my permission and there we go it does the login now i i'm going to go back to user.read because that's what we're going to demo today but i could i could have fun with this i'm going to take this localhost 8080 close this browser window and open up a new guest window where i haven't logged in yet go in f12 run my code and here since i haven't logged in yet i will have to log in and since i already given permission it's returned my response back now we can build on this so go back to visual studio code and i have the login response but just like when we did manual login we need to go to the authorized endpoint to get the token well luckily for us i can just go let token response equals await client dot acquire token silent passing in my request same request so consoleder token response now since i've already logged in here it doesn't need me to pop up another pop-up or login again this will be a solid acquisition when you're building out a longer application usually your first login will be interactive and any logins after that will use the silent flow so control five hopefully i didn't break anything fingers toes cross there we go i'm gonna hit run code it popped up my window really fast there's the information i got from log in but this time i also called acquire token silent and got information from there you notice i now have access token and i can use that as a bare token header to go in and have fun now going back to aka dot ms slash ge that's the graph explorer i'm going to go back and sign in again we went to the 1.0 me endpoint before but i could actually switch to the beta version because it actually gives me a lot more information notice a much bigger json file here this is exactly what i want to play with so graph.microsoft.com beta me is what we're going to try to connect to in order to do this we need to use that token we get so how do we do that well we're going to call fetch i'm going to go to that url and i need to set up my header because otherwise i don't i won't be authenticated correctly so i'll say headers bill authorization header and it's just simple string concatenation so bear a token capital b space then i'm going to take this token response and when i looked at the browser window it had a property called access token so access token is what we're going to use here make sure my syntax all looks good okay perfect now i want to wait this fetch call and i want to put it in a variable called payload now now i have the payload i'm going to just turn it to json so let json equals await payload dot json and i'm gonna print that out console.json save it go back control f5 run my code again make sure i did everything correctly i'm trying to make sure there's no typos here all right trot one more time kind of code just double checking everything make sure i didn't make any uh glaring mistakes let's just check the recall invalid authentication token is the error message i'm getting just to be just to be absolutely sure i'm going to copy and paste oh there we go i don't know if anybody in chat caught this uh headers not heads or whatever that was saying this this is why we do live demos all right now we're gonna write the code one more time and there's my uh profile information i can use this to get other stuff from the graph so for example um if i wanted to get uh some of my mail i can do that it looks like it's graph.microsoft.com v1.0 me slash messages i'm gonna pop that in but since mail requires different permissions i need to change my scope so it looks like here for this one it says i need to have either mail.read mail.readwrite or mail.readbasic i'm going to keep this as simple as possible so i'll use mail.readbasic and i just have to remember that um these aren't really case sensitive so i'm going to control f5 run my code again my pop-up window says hey read user basic mail yeah sure let's do it hit us up there we go there is my object there is my email messages i can see stuff like is it red reply to sender i can look at the body of it um here's the html content within the body of lots of stuff i can do here so this is part one again of our four part series we're really going to go into how to use javascript with the microsoft identity platform in the next three parts of the series we're going to talk about how to use this authorization token that we got here and go to other apis for instance if we want to go to azure storage or we want to go to azure cognitive services as opposed to the microsoft graph in another session we're going to talk about the microsoft graph toolkit which actually encapsulates all this for you so you can just drop in really useful web components that do handle authentication and logging for you into existing applications where if you want to put them in your own spa applications or maybe integrate them into office 365 custom apps you build and then we also have another session in the series where we're going to go into the graph sdk which wraps up all of this instead of you having to learn where all the urls are it's a really useful api and sd excuse me a really useful sdk library that makes it easy for you to query the graph and query different components on a graph really looking forward to seeing all those sessions and what i'm gonna do is i always like to hang out five or ten minutes after we're done and just start answering some questions from the chat on q a as always if i miss your question or you feel like i didn't do a good job of answering your question or you just have another question you thought of since um we've had this session msusdev microsoft.com i'm gonna put that in the chat and we also lots of announcements we put in the channel but essentially we um we're going to be doing our next sessions in mixer so come see us live um it's gonna be nice and fun since it's in the mixer i'm terrified i'm gonna have a demo bug nice alive but as you saw we can recover we'll we'll have fun building this out and learning together but again msusdev.microsoft.com if you've got questions about the technical content somehow you missed the mixer links or you you're trying to figure out what the sessions are feel free to reach out to us um i'm seeing some really good questions coming up the q and a so we're gonna let's just jump in um answer what i can q a and if you don't have any questions or anything like that thank you for attending i'll see you in the next one so just pause for a little while to review some of these q a questions all right um a couple good questions in here um well lots of good questions in here i'm gonna try to get everything i can but it's a ton of questions so i may miss your question again uh blame it on my uh i cited my internet connection all right so um somebody said hey um msl a now you know what's the difference between them um you know how does that relate to eastwood net core identity uh we have a really good product team member who's actually on this call uh she might be able to answer that question a little bit better for my um understanding it's using something else different and i apologize um this is super weird i'm a dot net developer i've worked with net for years i've also worked with javascript for years i've never used aspen on that identity before um oauth has always been simple enough that i've either used a third party or off um platform and library or just implemented the redirects myself um it's simple enough in um asp.net to just redirect you to a website and then read the query string when you come back so i've i've always manually implemented it and that's mostly because i don't really use any framework in on some of those platforms so it's been under identity brought and a lot of extra stuff that i didn't want to add to my applications so but that's definitely a question is worthy of send it to us at msusdev at microsoft.com we can maybe connect you with somebody who can give you a better answer for that somebody says hey uh this workflow you just showed does it work with live accounts yes it does so today i just showed you the organization standpoint but if we wanted to set it up and use uh application whether it's when we build ourselves a third-party application that's using live accounts we can totally set up using either the consumers um tenant or some other configuration and people can log in with their microsoft labs accounts instead of with their organizational accounts somebody says can we request multiple scopes in a single request yes you can um you can definitely request more than one scope i'm ju that's why it's an array i set it up with just a single scope just because it's a little simpler when we go into our session on how to connect to azure you're going to see me start to use more than one scope or you're going to see me use the default scope for some services um and we'll talk much deeper about scopes because it will come really important we start dealing with stuff that's not on a graph it doesn't have that simplified scope name somebody says hey we have multi-factor authentication is that going to mess with inside.js well it's interesting because authentication especially like mfa and some of the other things you may configure azure active directory that's all handled on the azure active directory side so that's kind of one of the reasons why we're sending people to aed to login because we all the configuration um whatever we set up there is enforced there we don't have to change our application if our organization changes their identity policies it's a good separation of concerns to have somebody says hey um you showed authentication but what if we wanted to do authorization like we wanted to check and see if they're part of azure ad group if you look at the microsoft graph you're actually going to notice a lot of this stuff that used to be on the azure ad graph is part of the microsoft graph now so if you want to do something as simple as checking somebody's azure id group you can still keep your authentication authorization separate they can authenticate definitely use all the steps i showed you but instead of going to the microsoft graph endpoints i showed you you can go to graph endpoints that include metadata about your groups and other information like that and then use that to perform authorization in your application so the graph explorer uh for those who are familiar with it um it's a really useful tool for you to learn how to work with the microsoft graph when we have our session only graph sdk and the graph itself we're going to go much deeper into it uh somebody said hey what's an example if you want to use form post instead of query it's only come up for me votes before and that's where we were redirecting to an application that already had another identity system set up so they've already written all the um parsing code for the form so we we just use foreign posts instead of query um i'm pretty sure maybe somebody else on this calls had it happened before but i've i've never had like a for a greenfield or new application i've never had to use foreign post over query azure b2c what's the differences how do we change the code or is a very much similar approach there's a lot of stuff that's very similar if we're using azure ad b2c uh as well as things if you're interested in seeing a session or webinar about that send us an email at msusdev at microsoft.com that's one of those this is such a edge case i don't know i don't know if people really want to hear about that but if people are the um if people want to hear about it send us email um flood our inbox help us uh help us plan for more sessions all right are there scenarios where msl doesn't cover we need to use at um a dial um right now just most of the solutions will work at everything we're so far along the maturity train that i haven't had a situation in the last year or so where i've had to have somebody use a dial instead of himself um because most of the stuff that we used before is covered in the graph now and then the identity endpoint it's just olaf too so uh it's not like there's new features in oauth2 standard coming out um it's it's pretty much solid it's pretty set so um any new application we're building we're building an m south we we don't even eight is not even on the table as an option unless we're importing some legacy code we're looking at it and even then you probably noticed from my diagram i showed um you can use m style to go to that 1.0 endpoint if you want um let's say you have to but if you absolutely have to you want to you could do it redirect versus pop-up pros cons 100 a function of your application and what you want to do your solution if you're doing a single page application maybe you don't want them to leave your single page application maybe you want to have a pop-up to authenticate if you're doing a more of a traditional server side application redirect can make more sense in the scenarios that's usually how i see it but i know and i understand people on the internet see it completely different all right implications of doing this in javascript versus code behind there's definitely some things you want to think about um especially with like distributing your client id you want to protect those type of credentials um with code behind obviously it's a little bit easier for you to protect your credentials um it's there's a if you go to microsoft identity platform documentation it's actually an article that talks about with single page applications how you can um keep your credentials secret somebody says hey does the redirect preserve forum post data or do we need to save the forum post this date it didn't redirect to login.microsoft.com um in my experience i've had to actually just save the forum state and then redirect i don't know if that's changed recently if i'm wrong about that so i could jump in and correct me but um in the past i've actually had this i'll save it okay somebody says hey we want to impersonate a user but um we don't really want to hard code their password can we do that if you look at the microsoft identity platform documentation there's a page on the different authentication flows there's actually uh on behalf of flow and um there's all unattended flows look at those documentation pages it's going to actually talk about the scenario you're describing especially in unintended scenarios or service scenarios where you really don't want to hardcore password i saw a couple more questions around.net i highly encourage if you have a docner question come on down to our sessions in july where we're going to be talking about we're going to walk through the same thing but in.net instead of javascript so we i see a lot of really good.net questions come on down uh we'll be here we're really excited to hear from everybody uh we're gonna wrap things up today but again you've all been a great audience really glad to really share this information with you i really look forward to see you all on our mixer farewell tour for identity development thank you all again

Channel: Microsoft DevRadio

Views: 20,460

Rating: 4.9376945 out of 5

Keywords:

Id: P3vkerr1nW8

Length: 58min 36sec (3516 seconds)

Published: Thu Aug 06 2020