Why and How Use Azure Active Directory (AAD) with Blazor Web Assembly (WASM)

bonjour, hi welcome in this new episode of cloud  in five minutes i'm frank boucher and today i want   to talk about how and why you should use azure  active directory aad with blazer webassembly   it's often the case when we build web app we want  the user to be authenticated it's very useful and   then we know who we are talking to i show you in  a previous episode the link will be over there   episode 56 how to use social media so  twitter facebook google all the others   to get authenticated but then anybody can get in  your app and sometime we just want a selection   or some people to get in and that's why azure  active directory is very good for that first   you already have it if you have azure there's an  80 for you inside over there so it's kind of free   also azure active directory will give you the  permission to have roles and groups and all   those things so you could have permission very  granular that could help you to have a better   control inside your web app if you stay until the  end i will show you how to do it and i will also   provide a few links to get you started to learn  more but for today what i want to do is create a   webassembly a blazer webassembly and use azure  active directory for a login let's get started   so here we are in the azure portal so what i want  to do now is go inside my azure active directory   and create an application registration this  way my application will have an identity   and will be able to question my azure active  directory so to do that you just need to   go and search for active directory i have it  already in the bar so we'll click on it and now   what i'm looking for it's here it's  app registration so we'll click this   and it will create a new app registration so  it's the new button here i just give it a name   put something that makes sense for you at the end  you could have many different apps so try to be   creative but at the same time make something that  is meaningful then you have many different options   that are offered to you the one we are looking  today is here that one where we'll go for a single   tenant it's our own azure activity it could be  useful if you have multiple azure ad and you're   using synchronization or you want to invite  people from an azure another active directory   to use multi-tenant and of those one but for  today we'll keep it simple and use single tenant   the reds rec url it's important to put something  there so you're once you're registered you will   get back to your application since i will just  be running the app right now on-prem i won't   deploy in azure i will use here localhost 5001  because i know by default that's the port that   net will publish locally my application and  then have authentication and login callback   that url will change depending on where your  application is and what type of application   it is so you could put any valid url here and  that's it so for now i just need to register okay   one extra step we need to do is here go back in  the authentication and here we have the url we   just added or specify you can add other ones so if  you're deploying working locally and deploying it   in your dev environment dev environment you could  totally have multiple link here by the way so   here what you want to do is click here check that  access token and id tokens so it will help us when   we try to get more information don't forget to say  now just go back so now the important part here   is to grab some id identifier and keep that on  the side because we'll need it in the next step   so the two applications the two ids i need are  the client id this is this client registration   that i just create that's the id for it and the  tenant id that's your azure active directory   so this one will be probably the same for each  application inside that subscription and this one   the first one will change every time so copy paste  that somewhere we'll need it in the next step okay so now i want to create my net application  i could go in visual studio the big one the big   ide but let's play today with visual studio code  so i will create my application with the terminal   you know just for fun so i open my terminal and  i will paste the command and i will explain it   to you so here i have dot net new dot net new  blazer web web assembly that's because i want   to create a web assembly so webassembly  what it is if you didn't know yet it's   in c sharp but client-side without javascript  so pretty cool and then what i want to do here   is pass the authentification single org just like  we configure in earth azure active directory and   then i will specify my client id that we just got  and my tenant id here and then i specify the name   and the folder where i want to create  that application so i just need to do this it will take few seconds and then the  app will be done so i will just change   directory to go where my app was just  created so i'll go in cloud five minutes   webassembly whoops it was there voila and now  we'll open visual studio code so code with a dot   it open visualize your code in that specific  folder so here we are inside visual studio code   so what i want to do right now is show you  what was created for us so of course here i   have the default application and if i go in the  wwe route i could go here in the app settings and if i click i have here my azure active  directory information that was there for me   there's no problem having  that in a repository since   this is just an id it's not a user a password  everything is still in azure very secure   now let's try it locally so i will f5 just  to run locally with the debug mode here it is   we can see the top right corner i'm not  authenticated yet i can navigate through   the application so i could see the fetch  data go and counter the click me increment   the things and now let's get authenticated so i  will click the login link here enter my credential and now because it's the first time i'm trying  to authenticate it i need to give the permission   because i'm saying hey i want to give the  permission and depending on what you are   looking for the list of the permission here could  be different so just say yes i consent and accept   so now we can see i'm authenticated just  here and i can still access to all the pages   so now let's see what else can we do  so we'll close this shut down here   now let's say the page with the counter i would  like to have only people who are authenticated   to have access because maybe you have sections of  your web app that are public and others not that   much so what you can do now is go to that page so  i just go open the page and i will go to counter   and to get the authenticated the only thing i need  to do here is add the attribute authorize but if   i'm trying that i will get an error i need to add  a library so let's do that right now i will open   the terminal just like this let's clear the  screen so it's very clear what i'm hiding   and i want to do here the command  net new that net add package   and it's the microsoft asp.net core button  automatization library that i want to add run this and now i have all the information for me  i just need to add a reference of course   perfect so i can close that terminal and to add  the reference i just need here to go and specify   using microsoft asp.net core authorization and now  if i'm trying to run that i won't have any error   so let's try again and see the difference so  we'll press f5 again as you can see i'm not   logged in yet so let's go in fetch data so fetch  data work as expected now by clicking to counter   i should have automatically a request to  get authenticated so if i click counter   here click my authentication enter my password  and now i'm in perfect i could so that's   excellent now what if i'm using some time some  kind of role so maybe only administrator could   access to this page or something like that so even  if i'm authenticated i won't have access to some   area or maybe the menu will be different  how could we do that so let's log out first   log out this client excellent good idea close  the browser excellent now we'll stop this so let's say it's the counter page  is reserved for the administrator   so what i can do here is just add some policies  and here i'm adding administrator just like   that it could be way more complex and you  could also have different view depending if   the user is authenticated or not to have an  example of how we could quickly have their   friend view you could get inspiration if you  go into the shared folder there's the login   display and as we we're authenticated or not  we were seeing hello with the username or   logged in so here this is how you do it with  the authorized view where the authorized you   will see this message and with not authorize you  will see another message so that's how you could   have different part of the menu visible or not  but for now we'll keep it simple and i should   just not have enough permission now to be able to  see counter so let's try that one more time oops perfect so let's login right away okay so now i am logged in but and if i go  to fetch data it's still working of course   it doesn't require anything and now if i  go to counter i should have the page but   empty exactly saying you are not authorized to see  this resource voila it's all done we don't have   to manage the forget password and user creation  and all those things and make it secure you know   it's all done for us in azure active directory  and it's all accessible to the portal   i promise you links to get started and learn more  but before i do that if you appreciate this video   i would love you if you give it a thumbs  up and also if you leave a comment   to ask a question or just give some feedback it's  always very appreciated but now let's go for the   link so i have two links for you so the first one  is really documentation how to get started so the   link will appear in the screen and it's everything  that i share with you today in details with the   comment and all the settings for you the second  link i have for you it's a learn module so learn   microsoft learn it's a very very well it's  completely free documentation to learn and   get some certification this one specifically  talk about blazer webassembly webassembly was   just announced recently during microsoft ignite  event it's really fun you could do a tons of stuff   so have a look this module take only 45 minutes  so very fun to do i hope you like this video i   hope it was helpful don't forget subscribe and  share i will see you in the next one thank you still there super i would like to add i'm  streaming live coding on twitch so twitch.tv   slash f butcher rose and two times a week  so on wednesday and friday for two hours   i'm there building different  application open source   talking with you answering your question come  it's super fun twitch.tv futuros see you there bye

Channel: Frank Boucher

Views: 5,717

Rating: 4.93361 out of 5

Keywords: Why and How Use Azure Active Directory AAD with Blazor WASM, frank boucher, fboucheros, blazor wasm, microsoft azure, cloud 5 minutes, cloud computing, best practices, cloud advocate, microsoft azure tutorial for beginners, microsoft azure tutorial, microsoft azure training, blazor, blazor webassembly tutorial, azure active directory, blazor wasm authentication, visual studio code, software development, software development tutorial for beginners, Web application security

Id: Ap-9CovBbBM

Length: 13min 57sec (837 seconds)

Published: Thu Oct 15 2020

Reddit Comments

[u/go-veg4n]

Well made! Very clear

[u/denzien]

This is very relevant to something we've been discussing at work. I'm looking forward to some down time to watch.