Authenticating users in JavaScript apps with MSAL.js August 2021

patient while we work out a few issues looks like folks are coming in i really appreciate your patience and bearing with us this will be the summer 2021 version of authenticating users in javascript apps with mcel.js we did this about a year ago and it's the recording has been one of our most popular videos on our youtube channel so if you're watching uh this version you're watching the most up-to-date version of the recording and with that i'm going to go ahead and turn things over to our instructor sydney andrews well thanks matt for the warm introduction hey everyone um thank you again for your patience as we resolve technical issues in real time which um if you're on the deaf side you know exactly what that means and we were able to figure things out and get everything going so today it's going to be the first part of a four-part series into developing javascript applications with the microsoft identity platform really excited to share with you some of the really cool things we can do the microsoft identity platform i've done um a lot of talks and training about it from both the net developer side and javascript side so it's kind of cool to show a single platform that can be used from developers of all backgrounds so um we're starting a little late so i'm gonna just breeze through the introductory part um i'm sydney entrance i'm an azure mvp and a microsoft certified trainer um i will be providing you lots of demos and lots of content today if any time you want to pull that content online just go to github.com msusdev microsoft identity platform dev and i'm pretty sure mascot has already posted that link as an announcement in the q a so if you haven't seen that that's in the q a if you have questions um please post those questions in q a we will try to answer those in real time but we are all human we're going to miss a couple questions you're going to come up with questions after this session maybe you come up questions in the session i don't give you an answer that you feel like is deep enough or thorough enough msusdev microsoft.com once again that's msusdev microsoft.com that's our email feel free to wear it out send us all the questions you have um if we can't get you an answer we'll get you to the right person with an answer like so i'm going to brief the introduction because i really want to get into the content this is a four part series today we're going to talk about how we can authenticate users from a javascript application using the mso.js library after that we'll use the information to use the microsoft graph toolkit and that builds upon what mso.js does and gives us even more functionality features then we'll talk about how we can use the msi.js library to authenticate us to different services and azure so not just logging the user and seeing their profile information but connecting to various azure services using um azure ad for role-based access control and for the actual credentials to get data plane access um excuse me yeah tripped up over my words using our azure ad credentials for both data plane and control plane access to different data storage services and then finally we'll talk about the graph sdk for javascript if you really like some of the graph demos we showed there's a really nice library available for javascript for the graph sdk that just makes it even easier to work with it so everything from two sessions two through four is gonna build upon what we learned today so today we're really gonna double click and focus on what is the microsoft identity platform and we're gonna do one of my favorite and personally favorite things is manually authenticating to microsoft identity platform so using a tool like postman and just manually building these urls and authenticating and showing that here's the the medium button to how everything works then we'll introduce the msi.js library and fortunately since you have seen how to since you would have at that point seen how to manually authenticate the inside.js library be a little bit easier for us to explain because you'll have all the underlying concepts and then we'll just do a really simple demo at the end to tie everything together where we use the inside.js library to grab a token and then query the graph and you'll have enough information to go into sessions two through four fully armed to use these really great libraries and use these really great um processes and flows so let's talk about identity development and let's talk about the microsoft identity platform two goals today and i hold up three fingers at first two goals and not three uh first we're going to learn enough about the microsoft identity platform that we can do a manual authentication and i think this is really important that we actually authenticate to the platform at least once manually and learn all the meats and bones learn the fundamental concepts and learn how application registrations work all in the very manual very predictable environment we'll introduce the msi library that's just going to make a whole all of that a whole lot easier but we'll have enough information that if something goes wrong i have a typo maybe you use it and you see error code you don't really understand you'll know enough information from doing it manually that you'll be able to debug and work with the msi library um from a more knowledgeable perspective so before i introduce the microsoft identity platform i like to set context and my favorite way to set context is talking about identity as the control plane across everything you do so what do i mean there well with our modern businesses and the services you use we have many different applications where if it's built by organization it's built by a first party like microsoft or a third party running on one of the microsoft stacks these applications run the gamut of things whether they're devices that we use in a warehouse use on a sales floor whether they're knowledge applications that we use from our offices to track data store data manipulate data fill out forms and um archive data whether it's communicating with people even something as simple as email whether it's connecting to other employees um storing our organizational hierarchy or work we're connected to third party services like box.com salesforce things like that all of them have one thing in common that's identity see in a perfect world we would use our identity to connect everything we get an identity as part of our joining our corporate organization and then we use that identity for everything we need to access so that makes identity the control plane across everything as developers it's kind of easy for us to say oh i'm not worried about the security identity stuff but the more we learn about it the more development we do in that space the more we master it that means the more capabilities we can add to applications as we start to think about cloud native applications distributed applications and how we want to integrate them it becomes critical that we absolutely nail the identity story but i like to say that's a two-way street because azure active directory that's the premier service in azure to manage identity where we're connecting to the microsoft cloud we're very connected to devices whether bring your own devices when you're working from home on-premise devices on-premise applications or even third-party sas applications azure active directory that's that core between all of it and it allows us to have identities in an easily managed way and there was a story around authenticating with azure active directory for a long time now is the a dial library the azure active directory authentication library it's been around for a long time it has its own endpoints um you can federate identity from on-premise to azure and they use the ada library to have one login story across on-premise and cloud applications and it's one of those things where it technically worked but the barrier of entry was really high see a dial was very very thorough it was built for people who had a lot of background in security development so if i went and i googled or banged or used whatever your preferred search engine how to authenticate to azure ad and maybe i'm a javascript developer a python developer i would be sent to a sample application that's easily 300 500 lines of code and that's kind of rough because it causes a couple problems one is i have no idea what in this 300 500 line of code sample is relevant to authentication if something breaks i essentially have a house of cards and i don't know what component broke i'm not sure why and it's just really difficult to ingest and learn so sometimes and you know this has been my experience as a consultant sometimes organizations will just skip over identity or use some type of proxy or they try to just try to find a way around identity because it was just too difficult to add identity to existing applications so a dial worked but there was a need for something more so along comes the microsoft identity platform and the idea here was to take some of the great things about adele which is how darrow it is how deep it is and how it's ingrained to connect it to azure active directory and make it simpler to use make it work across all microsoft identities and create a single unified full stack including libraries sample codes documentation so that if i'm somebody who wants to do identity development for the first time in my career there's a happy path for me deciding i want to log in using azure ada accounts in my app to actually getting there and it's not such a um barrier of entry and don't worry about this link i'll show it and i'll put it in the q a in a second when we walk through it so the microsoft identity platform was introduced and it created a new endpoint so the old eight data point we refer to as the 1.0 endpoint and the new microsoft identity platform endpoint is referred to as the 2.0 endpoint now this great identity 2.0 endpoint it's a rest api so it has you know git or excuse me http api says get and post all stuff you can use from any type of http client it allows you access to your work or school accounts which is what we already expected using azure id but also other types of accounts for example personal accounts for microsoft accounts think about like live accounts xbox accounts and then social accounts so let's say you are having users who logged in using a social media identity they can use those accounts to connect to your application too so it gives you a single endpoint to connect to all these different types of identities and it gives you a single library the microsoft authentication library available in many popular programming languages to interact with that endpoint now here's the great thing about this the v1 a dialog point is still there if you write an application against it you're fine it's not not deprecated it's not going away but this gives you for especially for new applications applications you want to modernize this gives you a new endpoint with a lot of modern features so let's look at the documentation page for emsa and i always like to do this because people say hey where can i get the documentation i really like to walk you through how to get the documentation so the first place i'm going to go to is docs.com that's dlcs.com docs.com i'm going to put this as an announcement and our q a docs.com i just put that in q a now docs.com will take you to docs.microsoft.com nice little redirect uh which is microsoft's landing page for all documentation now you can get to on q a and ask people in technical community questions you can look at code samples you can go to microsoft learn do interactive hands-on labs you can even just explore the documentation itself we're going to do just that so for documentation we're going to select azure and somebody says hey is adobe slated be retired yes a dial is being retired i believe there's a migration story and i'm going to have to um put a little information around the migration store i don't think the retirement is going to break existing applications using adobe but i know for sure you're not recommended to use the ada library moving forward so somebody asked about adobe's retirement i'm gonna have to go double check that that was what i read the last time but uh my information could be absolutely out of date because i've been um using identity platform for so long that i haven't really been tracking it out like it used to all right so with the azure documentation page and from here i'm going to go to identity so that's identity and then i'm going to select azure active directory this is going to take me to the overview or landing page for all of azure active directories documentation so how to configure azure id how to create users how to register applications all the fun stuff with azure id but if you scroll down you'll see that there's different categories one of them is called microsoft identity platform and if you select about microsoft identity platform this will take you to the documentation page to introduce the identity platform so a lot of concepts i'm going to talk to you about today are own this documentation page and what i like to do for everyone is i like to put this as an announcement in the q a there we go so that you can go to this documentation page on your own speed when you oh when you feel like you want to review this again now just in case you're interested there's also a landing page for microsoft identity platform with lots of video learning sample codes sample applications um some explanations of different concepts that are not specific to microsoft but will be talked about quite a bit when you're using microsoft identity platform and um even information about microsoft graph now from here let's go back to our presentation and i want to talk about what we're going to do today and that's authenticating to microsoft um manually and somebody actually just pulled up the documentation page and um shared with the community i'm going to publish this to q a the active retirement information for adopt and i apologize for not being as up to speed on it as i should have been i'm going to make sure in future webinars that i share this information more accurately so i apologize for being a little bit incorrect but a doubt is slated to be retired in a little bit less than a year um the last time i looked into it i didn't know the retirement date so thank you so much for um the individual who shared that information all right so when we use the microsoft identity platform we're going to do a main authentication we need to understand some basic concepts the first concept is what is an azure active directory application well azure active directory requires requires us to tell it when we're going to use it to authenticate our applications and the way we do that is we can register applications with azure active directory and this gives us access to authentication workflows and gives us um access um to different tokens and the great thing about this is by registering these applications actually active directory you can manage them uh manage what type access is allowed manage what urls are allowed so for example if you plan to use your application on a specific website um and a very specific flow you can lock down the application registration so it only allows the things you wanted to um allow and if somehow your credentials are leaked obviously your refresh update credentials is necessary like your client secrets but it still just minimizes your attack surface the other advantage to managing application registrations is you could say certain applications have access to certain things so for example i could say application one has access to read all um whoever gives it consent has application to read their email where our application too has access to look at the list of microsoft teams they belong to so application registrations are really one of the core concepts you're going to see me go to registration page multiple times today now when you register application typically you include a redirect uri for the application you register and registering now the the beauty of that redirect your eyes allows you to send to send the user to login and have them redirected back to your application and you register that redirect uri ahead of time so that um your application will only send people to places you approve of that way you don't have a situation where you log in a user then they forward it to some other website you control all of that in your application registration now once you register application you'll have different credentials and um information that you can use to set up your authentication workflow and again we'll go into a little bit deeper later but there's also different types of applications you can register so for example you can register single-page javascript applications you can register more general server-side web applications you can register apis without interactive login experience you can register desktop or mobile applications you can even register server side jobs or um what i like to call unattended applications so let's register our first application in azure id so i got my browser open you notice i probably shouldn't have shown this i had the azure port open um i'm logged in i'm using a an account to my own azure ad directory so if i select azure active directory it's going to take me to my directory now from here i can add an application registration i'm going to select add app registration now if you're not the owner of your directory which this user i'm logged in as is not um you can actually go into role-based access control and give people and i don't want to show mine so i'm not going to show it off but you can give people access to be an application administrator or application developer and those two roles will allow somebody to register applications without having full control over your azure ad directory so let's give this application a name um or application registration name excuse me i'm gonna call this example this is my example registration what type of accounts do i support well i can support only accounts in my current directory so right now this is the director i'm in i can just support accounts to any organization as long as they're azure ad organization still organization native accounts so that's a multi-tenant um i'm going to select multi-tenant there's a couple others like for example i can support multi-tenant organizations and personal microsoft accounts i think like skype or xbox or i can just support personal microsoft accounts only but today i'm going to keep it simple um only azure ad accounts and they have to be native to azure id so not personal accounts um or what we call consumer accounts there's also a nice help me choose link if you're not familiar with these terms you want to read the documentation on now you don't have to select a reader right redirect your at this point but we're going to go ahead and do that this allows us to tell the application registration that when we authenticate where to send the user back to so we're going to do a manual authentication so just for fun i'm going to send the user back to localhost i'm going to create a mobile desktop application and i'm going to say http localhost that's where we're redirecting back to just super simple nothing complex here i'm going to hit register and it's creating my application registration for a whole bunch of credential style make sure to clean up the delete later now the beauty about this is i have some permissions already set up so if i go to api permissions here i'll see that by default this application registration has the permission to read a user's profile from microsoft graph i can always go and add additional permissions wherever they are to azure services into the microsoft graph um for example i might want to add application permission to i don't know um right read or write to your calendar somebody says hey this install stuff um does that support azure ad b2c yes absolutely on that documentation page i sent you to um azure ad b2c scenarios are called out very specifically because um again one unified library one unified workflow for all authentication against azure all right so we have our application registration everything looks good it's already have permission to read the user information if we go to authentication we can see that we have a mobile desktop application it has some built-in redirect urls we can select but i just put in logos to keep things simple and we support accounts in any organizational directory super simple super clean that's literally all i'm gonna do right now now let's actually talk about authenticating see there's many different ways we can authenticate we'll go into this much deeper in later sessions in this series but just you know off the bat i just want to talk about some of the most common examples so for example we can do an interactive um authentication flow so for example when we have a user they go to our website and we want them to log in we can either send them you know join a redirect or we can open a pop-up to login to azure ad that's the interactive component and then azure ad does the redirect back or send the information back that we're going to use to access the various services um we can use the integrated windows authentication so if we know we're on on domain join devices and we want to use windows um we can do that we can do a device code that one's pretty cool what that allows us to do is let's say we're in an unattended scenario we can actually have the device are not undetected but a headless or a scenario where we can't type or interact with a browser on the device we have the device to give us a code and use another device so maybe we're working on an iot board and it gives us a six digit code we use our phone in that six digit code to log in there's a couple other flows but those are the ones i want to really focus on because those are the ones we're gonna walk through um throughout this series so the flow we're gonna use today is interactive authentication flow so we're going to have an application we're going to do this manually first and then using a browser a second we're going to take this application we're going to go to azure id the user is going to log in azure id is going to send back based upon our scopes the information required to access the services we want to access and we're going to go directly to that services with that information that's required i'm being very vague here because uh we haven't quite introduced that concept yet now somebody asks hey you said something about redirect uri where does that fit in here well when we go and let me open up the pen here we go from our application to azure ad azure id needs to know where to go back so today for our manual flow we just put in localhost so when we go to the application to azure date we're going to tell rgd when you're done redirect to locos the first thing azure ad is going to do is double check that localhost is one of the allowed redirect you're asked for application registration you saw that whenever interested application i said yeah allow localhost so once it says okay localhost is allowed it's going to show the login page the user is going to log in and then it's going to redirect back to localhost then our application can take the information from there and go to the service of our choice there's a couple other flows we could do and i got a couple good questions um we're gonna come back to these questions a little bit later one of my favorite ones is the device code flow this allows us to take our application and say okay hmm we can't interact with this application but this application can show the user information so think about a maybe a console application running server side or maybe an iot board or maybe even a tv screen you've actually seen a device code flow if you use a modern um video streaming application says okay use your phone to log in with this code that's the device code flow so the application shows some code and the user uses another device we'll just say in a workstation they're using a desktop pc here and they're going to log into azure ad using that device once the login happens azure id is going to send that information back to the application and then application can access the service again there's other flows let's see just loads of point off but these are the ones i want to double down on because we're going to show these in demos so when we log in we actually have to send the user to a specific url and the really great thing here is that i don't know why my pen is not working today but that's okay is that you've probably seen this url before when you logged into the azure portal login.microsoftonline.com you probably see this url for many different things you logged in using your native organizational account the way this url works is that we have login.microsoft online.com we pass in some tenant identifier which we'll talk about more in a second and then we go to the oauth 2 endpoint v 2.0 for the microsoft identity platform remember a dials 1.0 microsoft identity platforms 2.0 now there's two relative urls one is the login that's the authorized url and if we need to acquire token to access a different service that's the token url so let's talk about that special tenant identifier now you get pass in the gui that identifies your tenant so for example my organization has unique for that tenant id or you could pass in three keywords organization says hey you can log into any organizational account from any organization as a team consumer says hey you can log into any consumer account any any generic consumer account any common says you can log into either or organizational account or consumers account so now that i've called it out a couple times when you log into portals you're going to notice it's going to say organizations consumers a comment or it might have to do it the cool thing about is if you do things like passing the group for your organization then when the user gets the login screens already branded to your experience because they know based upon the url that you're specifically logged into this organization you may have had the experience where you go to a login screen it's just very generic and then as soon as you type in your email the next login page looks way more specific and branded to your organization at that point in time they might be using the organization's keyword and we know you're going to some azure id organization but we don't know which one yet so it's really cool how you can use either a unique guit or keyword to influence the login workflow for the user so if we wanted to authorize with azure active directory you want to use oauth 2.0 here's how we do it we go to log in microsoft online dot com we pass in our unique attendant identifier oauth2 version 2.0 we'll go to the authorized endpoint that's that authorized relative url we pass in our client id that's the one of the things we got when we register our application we tell it what type of response we want i want a code that i can use to go get my token so i'll just set it to code today we need to tell it what redirect you're at where do you go after we log in so we'll specify redirect uri at that point in time we will set the scope so what permissions do we want we only have one permission set up so that was user.read and then we'll set a response mode we can either do form posts so we do a post back or a query where as a get request back it puts the code information in the query string instead of the body as in a forum post for fun we can also specify a state value this allows us to put some type of sanity check there that we can validate when we get our redirect back to make sure that um we're lining up the right login with the right response once we have that url we go to our browser and log in and then we look at the response and i have a couple slides and again matt and i we put the url up if you want to look through these slots but what i think because we started a little late i'm going to do something a little wacky i'm going to just go in and show you how this works manually and you know what this might work this might not but we're going to have some fun so we're going to go to a tool i like to use postman for this but you can use any tool you like i just like postman i'm going to create a new get request i'm going to say https login.microsoft online dot com slash now i can pass in the good for my tenant if i want to lock it down to just my tenant i can pass in common i can pass in organizations i can pass on lots of different things i'm gonna have some fun i'm going to pass into good for my attendant that's a tongue twister for me so my directory id i'm going to copy that to clipboard go in here pass that in i'm going to go to the off 2 version 2.0 that gives us the microsoft identity platform http endpoints and we're going to go to the relative authorized url now remember we need to pass in a couple things the first one was client id i'm going to go back to my application registration i'm going to copy that client id from here so just copy that go back to postman paste that in i'm going to get a couple more values and just check my notes make sure i don't forget anything uh the first one i want to paste in is response type or not paste i'm typing in i want to code after i log in now how do i want to get that code do i want to get a forum post or do i want to get a query i want you just give it in the query string now where did where should azure ad redirect to well we configured it for localhost so that's why i pass in for my redirect uri and then the final thing is scope um what permissions do i want well we're going to do just user.read and just for fun i'm going to pass in a state this webinar is awesome that's going to be my state value so i have everything pasted in and one of the cool things about postman is it'll build your long url for you so you don't have to memorize um the whole syntax and how to do that so i'm gonna just copy this nice long url i'll open a new browser tab and paste it in hit enter and there we go a couple things happened here because i paste um use my gui for my organization it skipped the generic microsoft login screen and went right to my organization's login screen and this is authorized endpoint i need to go ahead and log in so i'm going to just log in real quick this is my first time accessing this application it says hey user this application has requested permission to read your profile now this application is unverified what that means is um i haven't verified my publisher information i just created this application registration today just give me a heads up hey we don't know who this person is exactly permission so just you know um be aware that i i created this application registration so i'm not worried i'll hit a set and something really cool happens it redirects me back to localhost with a whole bunch of information on their query stream let's cut that and close that tab let's go into postman look at what we have so one of the cool things about postman is you can paste your url back into this git field and it will parse it for you so there's our state this webinar is awesome so that's how i validate that this response match the request i created earlier and one of the cool things here is it gave me a code this code proves that i'm authenticated and i can pass this code to our token endpoint in order for me to get a bearer token that i can use the um that you use the um excuse me that i can use the um [Music] get my token somebody asked if i could run through this with my incognito window um i use packs worthless login so one of the downsides is um i don't have my phone on live shows and i would need my phone to log in um there's a recording of this session on youtube already where i do exactly that i'll run through this logging experience using a different account an incognito window um and i'm sure matt has the link to that on on youtube but um the last time we did this session we did on youtube and we specifically um showed how to do it in the incognito window so definitely want to make sure you get to see that all right so now that we've done that we need to go get a token that we can use to access services so we're gonna go get a bear token the way we do that is we're gonna go to https login.microsoft online.com and instead of comment i'm gonna go ahead and reuse my good fit from here there we go passing my good from my organization oauth got to spell that correctly off to version 2.0 but instead of authorized this time we're going to go to the token endpoint instead of a get request we're going to do a post request going to select body and pass in some form data for this post request now cool thing about this post request is um a lot of the values that we need to fill out are the same so client id is going to be the id for application registration so go back to the azure portal grab my client id one more time paste that in code what code did i get previously well let's go into postman here's that really long code i guess i'm gonna select all and copy it and paste it in now from here i need to specify my redirect uri that's still gonna be localhost and i need to specify believe scope that's going to be user.read the only unique thing i need to specify in this form body is the grant type okay token endpoint what do i want well i want an authorization code that i can use as a bearer token to access various azure services so type in authorization authorization code and just for everyone's information um those links matt shared earlier that gives you that gets you to our github repo every single demo i'm showing you right now every single slide i'm showing you is live on our github repo so you can walk through it and see all the exact things i'm showing you live for line they hit send if i've got no typos my body but my response has a bearer token that has the ability to use to read my profile and there's my bearer token so really fun stuff so let's just go ahead and copy my bear token now where can i use that bearer token well one example we're going to use today is we're going to use the microsoft graph if you've never been to the graph explorer before it's aka dot ms slash g we'll go ahead and put that as an announcement in the q a aka dot mf ge and from here this is the graph explorer we can use it to explore the graph test queries out so the default query is built in is graph.microsoft.com version 1.0 slash me and that gets your profile information so i'm not logged in it's going to use a sample user so i'm just running a query and the sample user is just there so you can do some simple queries have some profile information but just in case i'm interested i can log in using my account so i hit sign into graph explorer i'm going to select my account it's going to say hey you need your graphic explorer permission to access your account sure hit a set and now i'm going to run the same query using my account you'll see sydney andrews and then my email so definitely able to use the graph to query some common um identities and the way we did this is we authenticated as you saw with that login pop-up we authenticated to azure so going back to postman we've already done authentication part we already have our bearer token so i should just be able to do a get request https graph.microsoft.com version 1.0 slash me and the only thing i need to do is create and i can create this manually automatically i create a bearer toker bearer token header i already have some values i'll paste in my new bearer token and if you want to create it manually you just use authorization header has the word bear a space let me there we go and then our bearer token that's that's how you would do it manually hit send and there you go there's my profile information so really cool stuff i'm able to jump in and get my profile information manually so we did a manual authentication we did we showed we went to the login page the user logged in if they haven't already they gave consent to the application that we use that login information that login code we got from azure id to go to the token endpoint to get a bearer token that gives us access to other services in azure so thinking that baritoke is almost like the gives us the keys to the rest of the azure kingdom since we only requested user.read is our scope we only have permission to read our profile information from the graph so we went to graph.microsoft.com issued a http get request using our bearer token remember our key to the kingdom and that allowed us to read the profile information and again since we started a little bit late um i want to take this and i want to run this directly into a example application so i said we was going to authenticate manually first and then we're going to do the same thing using code so i have visual studio code open and i have it open to uh empty folder now i'm going to go to i'm going to go to github.com so let me just find a space to do this github.com msusdev go to repositories and there's an example static js app i'm going to put this link in the q a for anybody who hasn't seen it and it's just a really really simple javascript application matter of fact let me just go ahead and clone this so copy the url i have windows terminal open in this folder so git clone paste in that url and clone it to the current folder by using dot hit enter i will go back to my application there's my really simple node application has a package.json file that has http servers a dev dependency has an index.html file that has um the css for bootstrap and just some bootstrap stuff there's index.js file that when we click the run button excuse me run code button it just logs running to the console nothing crazy here let's just test it out real quick so we'll type in npm start oh i forgot to run npm install i do this every time npn installed to install http server dependency uh-oh let's see got an error message just try that one more time npm install there we go i've never seen that happen before and then npm start all right let's start at our server so if i got everything right i should be able to control click and it's open the web application in my browser super simple web application i'm going to open up developer console hit run code and it'll just print running that's it that's all it does right now now i want to use the msal js library so i'm going to post a link in the q a chat for the ms.js library and i'm going to go there here we go just open this github go to microsoft authentication library for js and we'll see that this is the github repo for namesat.js library we can do all sorts of cool things learn about the library learn how to use it in node applications it has angular variant i believe it has a react variant all sorts of cool things so it's really cool to have that inside.js library and what we're going to do is i'm going to go ahead and implement it so before somebody says something just for simplicity's sake and to keep these these demos nice and concise just to teach us the basic concepts i'm going to start with the simpler to parse msi js 1.0 library but in demos that we do later on in this series we're going to use the inside.js 2.0 library so it's just um i'm just using an older version namestyle.js library because it makes it really simple for us to um see what's running in our code so that library is hosted on a microsoft cdn i'm going to just go ahead and paste that url in so this is the install.js library i'm not using the um flattened version or um i'm not using a minified version just using a really simple um easy to read or more fleshed out version i'm going to add this to my javascript application so i'm going to go to index.html going to add a script tag script type text javascript just gotta learn how to spell javascript today source equals a paste in that source and close my script tag that's all i need to do to this html file once i've done that i'm going to go ahead and write my code for inside.js library so the first thing we need to do is we need to call themselvejs library by doing new m sound and the intellisense not really that helpful because we are just doing um we're importing javascript found um in a separate html file if you're doing like an angular react application you use import um statements you'll have really good um intellisense here i'm just doing it very manually because i don't i don't want any demo magic when everybody see very clearly what i'm doing so msi.useragent application creates a new application that we can use to access um azured um using the microsoft identity platform we need to pass this configuration information so we'll do just that we'll say const config equals we'll create a little simple object it's going to have off property and that off property is going to have three properties i clear up my client id my authority my redirect uri now two of these you could probably guess my redirect uri is http http localhost and remember this web application is running locally it's running on port 8080 so localhost 8080. my client id is gonna be the same client id for my application registration so go back to my application registration copy my client id for maybe the umpteenth time and paste that in the only new one is authority luckily for us authority you've seen this before it's https login.microsoft online.com and then the name of our tenant now for simplicity's sake i'm going to just put organizations here this will allow me to use any azure ad account not just ones in my tenant now if i wanted to i could run this right now but i'm gonna run into a problem this is a web application and i only have registered excuse me i've only registered um my mobile desktop application so i need to create a new application registration so i'll go to authentication within my application i'll just keep it now new application registration i need to create a new platform and i only have the mobile desktop platform i apologize for twisting my words here i'm going to add a new platform called web i'm going to save my redirect url for this platform's http localhost 8080 and since this is a client-side application i'm allow it to issue tokens directly from the authorization endpoint so there's my localhost 8080 redirect uri for our web application and implicitly allows us to issue tokens directly from the authorization endpoint so let's finish up the rest of our code i'm gonna go in here we're going to put this in a variable called client so we use it later we're going to call client.loginpopup now loginpopup allows us to pass in a scope so we will just um let's say create a variable called options scopes user dot read so very similar to what we're doing with that query string just so you know a little bit different syntax um login pop-ups asynchronous so we'll a weight it you can also use promises and stuff here that's perfectly fine for it for me um let login response equals the results of a wait client login pop-up and it will console.dur login response so if i don't have any typos i should just be able to control f5 or run this immediately so let's go in to my application control f5 all right moment of truth run code it's going to be my login pop-up i'm going to log in as um notice it doesn't have my branding because it doesn't know what's in it i just put organization so it's any organization the log is my own account it's gonna say hey this application needs permission to read your profile sure set and it redirected me back to locos 88 so let's make sure i don't have a typo here run code i'm not 100 sure why my pop-up i've never seen this before my pop-up is just redirecting right here and let's see oh i know what's going on it's let's do localhost 8080 here my browser is smarter than me hit run code there we go it redirected me back uh for those who didn't realize what happened since my browser said when 127.0.0.1.8080 redirected back to locos 8080 my browser assumed that was a different url so it kept me in the pop-up super weird but um i didn't know that was the thing i've never seen that before but now since i said localhost 8080 i logged in everything looks good i hit object and there's my account information so we are cooking um i can use the library to go in and get a token so let's do that and got some questions i'm going to answer them as soon as i'm done with this demo i'm just moving a little bit faster than normal to make ups for some lost time so we're going to create a token response variable and we're going to call client.acquire token silent from that request we're passing the same options and we're going to console.der our token response this is going to look very similar to what we did when we did our main authentication so the first thing we did was we authenticated we had that first object was just the results of us authenticating through the pop-up that pop-up showed and hit hit itself very fast and then the second thing we did is go to the token endpoint to get our access token which is right here and we can use that token to access um different excuse me uh different azure services and we're gonna do exact same thing we did last time which is access to graph and we're gonna keep it really simple we're going to call fetch https graph.graph correctly graph.microsoft.com version 1.0 slash me i'm going to pass in remember i said we need some headers so i'm going to pass in headers my header is going to be authorization header that i showed you um from within postman it's a bearer token so bearer space and then we need to pass in our token so that's going to be a token response if we go back to our browser we'll notice toker response has a property called access token so we're going to paste that we're going to use that right here so token response dot access token and then um let's see i'm going to call this asynchronously so await let payload stored result in a variable called payload um payload has a json function and await that and store that in a variable called json so let json equals a secret is called a payload.json and i'm a console.json that's all i'm going to do so if i did everything correctly should just be able to control f5 run my code pop-up shows authorization token and then my call to the graph which shows my display name given name mail title principal names all sorts of useful information so i was able to use the inside.js library to completely and perfectly um do the same exact demo that i did manually now today that's where we're going to stop because moving on from here we're going to talk about how we can bring that inside.js library in um in more complicated ways how we can use it with the graph how we can use the graph toolkit and i saw lots of really good questions in the chat so i'm going to try and answer many of these as i can and of course if i don't have the answer i'm going to recommend you email us to msusdev at microsoft.com um somebody said hey you added client id and tenant id and node application um do we need to secure that in some way because if somebody has our client id antenna id um you know what are security issues so yeah if you want to secure it you can um [Music] the kicker is let's say somebody takes your client id and even your attendant id um if they don't have an account that can authenticate into that directory they really can't do much with it and let's say they do have an account authenticate to that directory you still have control of the azure ad application registration and what redirect your eyes are allowed so that's one of the important things about setting up your redirect uri so that other sites can't intercept requests and redirect people to the wrong place so yeah you can definitely um protect and secure your client at the intended id you don't have to um but you can definitely do that but if you're using credentials or client secrets i would absolutely without a doubt secure those because those will allow you to get around the whole login scenario so there are some um authentication flows um that are meant for maybe um the word eludes me right now but application scenarios where um there and um where they're done i can't think of the word but when you're not interacting with the applications done as a job or done in the background in those scenarios you might have a client secret store so there's no actual interactive login those scenarios securing that client secret secure those credentials of absolutely monumental importance somebody says hey the inside.js library is this just a universal oauth library or is it really specifically tuned to azure active directory i have not tried it many other oauth endpoints but from what i understand it's very specific to um azure active directory somebody says hey that library show is that the entire library so the javascript file showed you um [Music] that's if you're just using the browser side that's the library if you're like using a node import you can um there's azure m style browser and you'll see um there's different all flavors of it so npm let's see let's go to is it npm.org nope npm.js i can yeah npmjs.com go to azure inside browser you see this um there's the azure m cell browser library and if you go to azure install you see there's different um different versions of library and different additional libraries you can bring in so for example if you're i believe there's an angular react flavor there's extensions um there's lots of stuff here that's gonna um be really useful if you're using the m style library somebody says hey now if i'm doing application registration should i put all my redirect uris in one application registration or so i create different application registrations for dev test and prod um i'm actually this is a great question to send us to msus.microsoft.com so i'm not actually sure what the best practices there in in my experience i have actually used different applications registrations with dev test and pride um just because my when i'm doing dev i might have more or less application permissions that i want prod to have at this point in time here here's an example of what i mean let's say we're adding a new feature to our application to read your email right now the application only reads your profile information if i have application registration registration for dev i can register that api permission dev and nothing happens to prod if i use one application registration for dev and pride what will happen is as soon as i add permission for mail read write and something some type of code slips through or something happens where the user will be prompted to give that permission i may not be ready for them to get that permission yet now i know that's the kind of edge case but that's one of the reasons i use different application registrations send us that question msusdev.microsoft.com i'm not 100 sure the best practice is there but um that was a great question let's see there's a couple questions uh people coming in service principles um yes you can create a service principle um and you can um if you're doing a non-interactive scenario you can create um a client secretary login using a specific service principle um there's a there's a couple different ways to do this um somebody says hey emsa with custom scopes roles and permissions do you know how to do that yes we are going to go into that in one of the remaining three sessions um at the end of this series we're going to talk about inside with different scopes permissions specifically different scopes of permissions necessary for azure services we'll even talk about custom scopes and permissions that you can use if you want to build your own somebody says if we're using client id and client secret um we probably shouldn't be using inside.js um there are some scenarios where you're building jobs using um the node library and you might be using client secret but yes if you're using client secret i would not recommend um you passing your client secret information into a single page application running client side and you use this browser and i'm looking just to make sure uh again there's a couple questions i think i missed if you felt like i didn't answer your question just email us at msusdev microsoft.com um uh i'll tell you this we're glad you all hung in there through our technical issues we're gonna have a recording on youtube i'm sure you'll get the email as soon as this session is over uh we already have some recordings for past versions of this session on youtube one of the recordings goes even deeper then i went about today thank you so much for your time coming in hanging in us with us through these technical issues lots of great questions if you feel like i didn't answer your question um or maybe i don't have a good answer for your question like i think somebody's using um active directory federated um server um or a camera services or server um i don't have an answer for that but email us at msusdev microsoft.com we'll track somebody down who does have the answer for that um but thank you again for all your time and we hope to see you in sessions two through four we're going to take the information that we manually learned about today our first time authenticating against the inside library we're going to use it with the graph toolkit with various azure services and even the graph library itself so that we can do some really interesting and exciting scenarios in azure so thank you again for um coming today and matt um i'll let you take it from here awesome thanks so much we'll go ahead and just sign off and see everyone next week you

Channel: Microsoft DevRadio

Views: 1,971

Keywords:

Id: ofv4YRb-Jbk

Length: 57min 56sec (3476 seconds)

Published: Thu Aug 26 2021