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