dotNet Labs | Building the Client-Side with Blazor WebAssembly

hello good evening everyone welcome to ak academy it's amanusa here with you right now we are in the process of developing the client side of this nice project as you have seen until the previous video we have implemented the full api from the very scratch we have started from the bottom with nothing an empty project and we have implemented the full api and right now it's it is basically available online to use maybe i will going to share also the link again if you would like to have a look at the swagger ui or just in you and would like to follow only with the client side part of this course so so we are just going to have a look at as i've said right now we are going to start on the client side based on the ui or based on the api sorry that we have created in the previous eight videos so this is the link for api if you would like to have a look if you weren't follow with us from the beginning so i'm going to share the screen right now okay so here it is the api that we have implemented and as you can see here we have it's about multiple parts first one we have the authentication we have the comments we have the playlists we have the videos and the default one existing by the speedometer the template so for the first video on the client side we are going uh basically first to have a look at the microsoft fluent ui library implemented for the blazer and then we are going to talk about the authentication system client side how we are going to get started with like the login and implement like all the infrastructure that's ready to go ahead and start building the other pages so basically for now this is everything as a quick introduction we are going to get started now and so thanks for joining all of you and yeah really happy to see you here now if we go here before we get started and open the project here there is a very nice repository i don't know if any of you have a take a look at this before but this is an implementation for the microsoft fluent ui the react components into blazer the community here and the owner of this repository and all the contributors have done a very amazing job to make that ui available for blazer and very easy to use we can take a look at that and meanwhile we can have a look and open the microsoft fluent so let's ui to the official website okay great so this is basically the microsoft tool and ui official website the fluent ui or the fluent design language let's say it's basically the design language that microsoft follows and all its applications and operating system like the windows if you can't see that the windows this is called the fluent ui and for web microsoft has this you can see this while you are dealing with all the microsoft applications available on web like microsoft azure or microsoft office you can see the same design that looks uh fancy somehow so this is called the fluent ui for the web which is basically our building web apps and the idea is we are those libraries available for react.js but the community here translated that into a blazer and right now we have ability to build your eyes with a fluent ui with almost like somehow other components implemented and the others just like getting uh ready or on the way so if we look at the samples that are available here okay before we have uh okay brain that's uh that's so nice to hear about that yeah blazer actually is very great and it's going to allow you to build a lot of great stuff and business apps or like personal apps networks or other systems it's just a great and in this course we are going to take a look at that how we are going to do this from the very scratch either you are following on mac or on windows the process is going to be somehow the same uh it's you can you can follow if you'd like using the visual cd for mac so it's going to be i think it's a little bit better experience than visual studio code but still you can build full apps with vs code so this is the microsoft solution library available as you can see here we have a lot of nice components if you look at the if you are dealt with the azure before or microsoft outlook or whatever any other microsoft product you are going to see the same buttons and the same font and all those nice capabilities like available here we have the drop down and we have a huge variety of components that's basically very useful to all type of apps we have like this rating and we have slider text field date picker calendar so basically the guys did a very very good job implementing this and here for the lists we have amazing set of lists and we have many types like this one and we have the cards we have the comment bar we have all the stuff okay the link i'm going to put this link in the comments just press here so you can follow along and you can find the the the link for the github repository at the top of the page like here you can see view github repo of laser flowing ui okay so what else let's make a very quick look so this is the command bar yeah that you can see on the top of all the microsoft apps and in addition to this here we have the context menu it looks very nice and we can have a look at the navbar let's also support trees we have in addition to this this pivot table or tabs it looks very well and just like the one available in the windows 10 and we have this menu that the famous repon menu that available in microsoft office you can see that it's basically just a great and at the end here we have many nice things those are a set of messages and we have progress bars banners and this one is my favorite i like this component very much like when you click on this you have this tall tip here but it's somehow advanced so it's called call out and many other things available here you can take all your time to discover all of those so basically right now before we go to the authentication and this stuff let's uh go ahead and implement this and shall add this components in our project and then we can move back to the authentication which is the first part of the project and before we leave we have this nice one here so you can turn between light mode and dark mode very easily so just working very fine so to implement that we are going to follow the specification they have set in the url here for the installation and for how to implement that in a placer client side of project so let's get uh started step by step first i'm going to open video in studio hey and here let's go to our project okay so this is great right now we have all of this available you can clone this uh from the github github.com aksoftware98.net labs so you can have access to the full repository available here and we will forget right now about the server side all our concentration right now will become on this empty project basically it's still just fresh and new so the first step is to go to dependencies we will go to manage new packages and go to pros and here search for blazer fluent ui got all components the good thing about this implementation is they have each single component in a specific package or you can get the old component to basically get all of those together but in case just you need to use a specific part of the library you can do that by just searching for laser fluent ui and here you can see like you have access for the icons for the layers for the pop-ups or call out whatever as a separated components or you can search for all component i like this way very very much so if we click on this let's click on the install okay great so right now we have it installed we have okay i'm going to show the links of those here this is the installation page i think you have access for that and we have how to use it on the client side yeah please confirm if you have access for it right now okay so right now let's basically uh move to this page and start following the steps one by one to implement that in our project so the first one is to add the link tag to our index.html page and basically this one is for the styles and for the javascript related to this so to do that we are going to go to the solution www root let's go to index.html and here okay so this one is already available basically this introduced in the after release the dot net 5 with the blazer blazer of assembly with dot net 5 when you have dotnet labs that blazer which is the name of your project and those styles and this is basically for the isolated css files when you go ahead and you create you have styles for each component like you see there is a code behind file which is contained the css for the computer okay oh really really sorry for that uh sorry maybe i should okay okay oh i'm really sorry for that but i'm just sharing the the web window uh that's my mistake okay let's very make uh we didn't do that much here okay yeah thanks a lot for mentioning because i didn't notice that while the screen is here but i don't know what's happening with me so basically this is the project and as i have said you can find there you can clone this repository from github it's available github slash ak software 98 slash dotnet labs and all our job for the previous eight sessions were on the server side right now we are on the client side with the project called the dominate labs.laser so basically this project's still empty we didn't done anything and right now to get started right click on dependencies go to management packages and here search for blazer fluent ui and you have two choices either you can install them component by component this is just in case you need specific components like the text box the call out the model or whatever or if you need them all like in our case you can install a package called laser fluid ui got all components so basically you can find it here i have already installed it when i wasn't sharing my screen sorry for that so just click here click install if you are following on mac so you can just basically follow the following command dotnet add package laser fluent ui dot all components and so you will be able then to install this package so this is the first thing that we should do right now if we go back to how to use then in this page we are going to get started from the first step by copying this the js and this one let's go to the solution explorer www root and let's go to index.html so here you are going to paste that in this place so basically this is the js part and this is this style sheet that already exists because in the donatelabs.placer.styles this one introduced with the blazer assembly and dotnet 5 because in some components you have access right now for isolated css so if we go to pages or shared as you can see this is like nav menu is a component and here you have a code behind file called navinew.tracer.css and this is also just contained the css for only the component nav menu so this is a great feature introduced and to be able to leverage its capabilities you have to add this by default it's already exists but if you are migrating your app from blazer 3.1 with dot net core 3.1 so you have to add this link the reference is to be the the name of your project as you can see it here like donatelabs.placer then.styles.css and then let's add the js file okay this is the first step right now the next one we need to add link for this basically a css files okay i'm going just to take the script and put it at the end like that so what this one has is basically it contains all the styles uh for the microsoft fluent ui you can use them in your blazer project or in in if you are building any website like with php or or react whatever they are providing all the styles here and if you want to go deeply with those styles and what they provide you can from this link here you have access for all the stuff like the colors of microsoft here you have the cards that basically they are using you cannot add this in the azure devops or the azure those are the classes names for the css and you have a huge variety of icons available for you here look at that there is tons of icons for all your cases like user so you can find a lot of stuff and also layout in addition to the typography which is very important so yeah this cs css link is basically to access those styles from microsoft so right now we are done from this part let's go back to this page and we have right now to add the blazer fluent ui to register the service of laserfluent ui in the program.cs so let's go to program.cs and here we are going to type builder but services laser flow and ui okay let's add using to laser fluid ui okay that's great so right now we have added the service so let's follow the other steps now we should add the using to laserflow and ui in the import so in this case we have access for all this content from all other components so okay let's go ahead and do that using laser phone ui yes save great let's go back so right now regarding the themes we have to add be a few themes around the app.tracer this is going to be the top layer so let's go ahead and do that okay this okay so just surround all your app with this one and right now yeah of course i'm going to share all the links even for the api and for for all the stuff we have done here and in addition to all of that you can you will find all the changes on the github directly if you would like to just clone it and yeah for sure i'm going to put all the links on the in the description box so the last thing is to add to add the layer components requires layers so uh some components like the model and the call out like all the component that basically pops up on the screen from random space they need this so let's go ahead and just add that around router so basically here okay so i think right now we are just ready to go with this project so i'm going to close this click save and save okay that's great so right now let's basically go ahead and run this project to see if everything is just going fine we will put a button and then we will make sure that laserfluent ui is just working very well okay but here we got an error let's see what do we have okay web assembly rendering okay so i think this one will be related okay sometimes let me put this here sometimes this makes a difference let's go back to the documentation okay still okay that's great uh maybe the the the web page was cached so you can just after you implement all of that just make sure to refresh your page using ctrl f5 so in this case the cache of the web will be basically just refreshed and in this case everything will work just fine so let's right now put a button okay still getting in errors oh yeah this is this is not related to fluent ui this is because the fidget data component is secured and we are right now we are not logged in so just working very fine let's try to put a button to make sure then one hundred percent like it's just perfect so i'll go to this place and then i'll go to the pages index and for this one here i will add a view button okay let's go to this one click on the component so we have this button so let's try to cover this i'm going to paste it here okay we don't need all these functionalities we are just looking for see the button to make sure that it's just working fine okay great project again oh that's fantastic look at that we have a very perfect fluent ui button existing on our screen so it looks like everything is just working very fine and we got laser fluent ui to work perfectly on our project so starting from this point we can just build on top of those components that are available here and again very very thanks for everyone who worked on this because they are they've done a great job to implement that in addition to this they are providing it for us in a very very easy way to implement all the code is just here so right now we are done from this part i hope you enjoyed it if if there is any questions about this or or any parts of implementing this library you can ask it in the comments section before we go ahead and proceed to the next part which is setting up the http client and setting up the authentication part to build on top of all of that for their rest of the course because those are going to be the infrastructure of our client side project okay so now we should talk about the next part which is setting up the http client and the authentication for our system and to provide this in a very easy way to all other pages so they can build on top of that so uh let's go first into the swagger ui so the first endpoint and the most important one which is the login because this one will give us the access for uh within the system and especially for the admin so this one takes into the body the email and password just a very simple object as you can see here and it returns basically this response that contains the success the access token and the expiry date in this course we have we haven't talked about refresh token and this stuff so the expiry date is going to be very long range so we are just interested in the access token so if we open up postman okay great so if we go to history here and we should see okay here i have this which is basically a post request to that endpoint slash api slash authentication login and it's a post the body contains this which is the default admin we have in the system or the default user we have so when you click send okay so great we got uh 200 status code and this is the result we got the access token the xbox data 6 is true so the authentication system or how it's going to be built basically we are going first to set up the http client so in this case every time we send any requests it will go to the storage of the browser check if there is an access token and automatically attach it to the request and send it so you are not going to do this on every request you are going to send to the server by pitching the token set it in the header and send it we are going to use something called delegating handler so it's a very good concept you are going to learn about this in just a bit and then we are going to set a local authentication status provider so this one will basically manage the authentication of our system and this will be this access token will be stored in the storage of of the browser for this website so the authentication will start by first checking if there is an access token in the local storage if yes then instead of fetching the user data what you are going to do is as you know this claims has a set of claims or sorry this token has a set of claims if we cover this token as it is and we go to a microsoft website called jsonwithtokens.ms okay this is great right now if you try to press the content so look at that access token always consists of three parts this this one and this one and this is the one in the middle that basically contains the the payload of this access token which are the set of the claim that represent the user basically in the system so if you look at this this is after the token has been decoded so we can see all the stuff all the claims we have so we have the name identifier claim which is basically the user id and we have the given name we have the surname in addition to the email address and we have the role and we have those are basically related to the audience and issuer the expiry date where this is out of we are not going to deal with this what we need is basically those claims that represent the user so we are going to check in the local storage for the access token we are going to do the same for what this library just did or this website feature the claims put them in in the user in the authentication state and then in this case the placer app will know that okay right now you are you are authenticated there is a user other than that it will it should redirect the user back to the login page so let's get started first by setting up the http client and then we will create the login page so if we go to the program.cs and here by default microsoft initialized the blazer app with a default http client registration that has a base address for because this is an a laser app that's asp.net core hosted so the back end just the api serves this app so they are on the same domain so we don't need to to be worried about the course or other stuff and the url of the application is the same for the api so this is great what we are going to do is to create something called delegating handler to attach the token to this request whenever we do that so first i will create here a new class i will call this authorization message handler so what is basically authorization message handler or okay this one using system.net.http okay what is basically this one if you are familiar with an asp.net core you know that the the application is about set of middlewares and the http requests comes starting passing from the first middleware to the other and there is some middleware that basically returns the request back or make a response and return it back to the client microsoft created this concept and basically just working the same for the l for http request that you are sending from the client whenever you are sending the request this request could pass by a set of uh delegating handler so each of those can basically manipulate that request a little bit and then at the end they will going to send it to the server so why we do this we are going to do that for one time for every time we send the request this authorization handler will be responsible to fetch the access token from the local storage and send set it at the header of the http request instead of doing this ourselves every time if you have watched the planner app before that was a little complicated process by typing the access token pass it to the services and so on right now with message messages handler this becomes very easy so okay so is it this library let's install it that's great and let's go to the program.cs and here builder dot services but add blazer local storage like that so we are able to inject this and other services so this is great now the first step to create the handler is to inject the i local storage service create let's call it storage service and create the constructor and we'll put it here in the constructor service okay that's great now if we have a look at this there is a function uh exists in the parent class in the delegating handler called send async so basically this being called by when we send an http request so if you want to manipulate this request we can do that here this is the request and this is the function that basically send the request to that to the next message handler or to the to the server if there is no more message handler so what we want to do basically this one is going to be very simple just switch the access token from the storage and set it to the header just in case it was exists so we will make it async and here we will check if weight storage service dot contains key async we will check if there is a key called access token so great if there is a key then let's fetch it so i'll have access token equal the weight storage dot get right item as a string because it's a just basically a string value we will call it access token and request dot headers but authorization equals the new carrier and you repeat the value of the access token make this one wait for this function okay this is it so okay so basically this is our authorization handler it's pretty simple the only thing that it does is just basically fit the access token from the local storage and set it to the header of each request and that's it right now let's see how we are going to set up our http client to deal with this authorization message handler so the first thing we are going to get rid of this but first say services dot add http client we need to install a package for this and i think it's called system.net extensions i forget its name extensions.http okay yeah this is it so it's called microsoft.extensions.http okay this is great and right now so we can we will give it a name i will call it dotnet apps dot api this is http client for the dotnet labs dot just like this and then here client we can configure that and the only thing that we need to configure is to set the base address client dot base address equals to this one okay let me get rid of this okay that's fine now what you have to do is to attach that authorization message handler to this one so whenever we make a request for this it's going to basically as with that message handle so here there is another extension method called uh add http message handler so if we click on that here we can set its type which is authorization message handler so it's just like this so this is basically pretty easy and we still have two minor things to do first we need to register this as a service so let's do that by services go to add transient here and we'll say authorization message handler have to do this and the second one we have to initialize and http uh the http factory which is basically is going to going to create an instance for this whenever we call it so it's going to be like this dot add transient as well service provider service provider dot get service service called i http client factory so this service will be responsible to create an http http client instances okay this function right now returned an instance for this there is a function called the create client so here pass the name of the client for the http client basically it's called dotnet apps dot api so this is everything right now let's make a very quick recap for this in case uh there is something complicated so there is something called http client factory which is this one is just a service existing in dotnet that allows you to create instances of http client why we have this because sometimes your application basically calls multiple apis so each api with a specific authorization specific messages messages handler one to the other until it reaches to the server so on each one of those you can manipulate your http request the way you want and the only thing that we need to do for this one is just to set the the access token if there is access token in case that the user is logged in to set it in the header of the request and that's it then just complete sending the request so right now we have implemented the initializing the http client this part okay that's a great right now for the authentication part we have to do this basically we have right now to create something called local authentication state provider which is basically the the provider that's going to implement the authentication flow in our system which will be based on the access token that exists in the in the local storage so let's do that first i would go to this one click add and i will add a new class this class will be called local quantification data provider i'm calling it local because this authentication will be locally based on the local storage of the browser but maybe there is other type of authentication set provider like the one if you are dealing maybe facebook authentication gmail or whatever so it should inherit from authentication date provider okay it's called authenticate okay again i forgot its name okay let me check another project very quick because it has been from time to time to create those because in every project you just create this once so i usually just forget the names of such functions okay this is the local state oh yeah it's called authentication state provider but okay i think yeah yeah sorry for that we need to install another library which is microsoft spna core for components thought authorization yeah it's this one let's install it okay so here we go right now we have the microsoft asp.net core components dot this local state provider okay we have added the using and because this is an abstract class we need to implement it okay here we have this function that basically get the authentication state async how it's going to know that this user is logged in or not it's basically by returning an authentication state that has uh claims the principal object has a set of claims so this is the authentication now before we get started again we need to inject the local storage so let's copy this and let's just change its name at okay this is great so mark this one as async okay this is cool i will put it in a try catch just in case something happened and console.writeline p dot message and then return new authentication state of new claims the principle this means just an empty user so it looks like this user is not logged in because just to claim the principle without any claims inside so this means the user is not logged in and here again we'll do just the same thing it will check if there is a access token or no storage service dot contains key access token so if it's not containing this key so simply just do the same return an empty user which indicates the user is not logged in okay in case the token is exist what we are going to do first we are going to bring this token wait storage service dot get item and string async access token at and then what you'll do is basically now you remember when here we use this library to or this web tool to basically decode the sweep token and fit the claims now we are going to do the same on the client side to get all the claims inside that represents the user like the first name last name id email and role so to do this you have to create an object of type jwt equals the type called jwt security token handler okay you need to install this library called system.identitymodel.tokens.jwt let's install it okay great this is great now we have this handler sorry i'm going to call it handler and for this one this is the j7 tokens it will be equals to handler retreat awt or the 3 token and here we can pass the string so this one will basically give me the token as you can see if i type jwt dot uh what are the claims i oh sorry it should be read awt token okay great so now i have the access token as a jwt object as you can see jwt security token have access for the issuer the audience and the claims which is basically the most important part for me so the claims are just like this those are the id given name surname email address and role so what i have to do right now is to create an identity object the new claims identity this one takes the claim and the name of our authentication schema so the claims are readability.claims and the name of this game is basically we'll call it barrier so it's just like barrier token now we can create the user equals the new claims principle and we pass the identity for it so we have a user object with all the set of the claims and the authentication scan for this and what we can do at the end is just return new application state and we pass the user for it so this one returns a login user that has all the claims you will see how we'll have access to this from the ui in just a few minutes but meanwhile if there is any question about this i know like it's a little bit long and complicated but yeah this part is is very crucial and important and anyway you can you'll go ahead and set this only once in your in every project you do and the good thing about this is you can go ahead to the github repo and just switch this code whenever you you are starting a new project and put it in your site because somehow it's always the same if you are following the same authentication type every time but the good thing is just to understand what's going on here so this is the login process but we still have something very important in the authentication status provider there is always a very important method called notify authentication state changed so this one will notify like all the components about the changes of the of the authentication that's happening basically right now and we can we should call this function and return this state so i'm going to put it here as a specification or var state equals mu application state we pass the user but this one want to return a task of authentication state while this one is just so what you can do is say task.from result state and here what we do is just we return state so basically this is it this is everything about that now we have our authentications data provider just working very well so let's go ahead and try this let's go to program first and here i will inject or register the our authentication city provider dot add scoped for the alpha location state provider we need to import the namespace and the implementation for this is going to be our custom authentication state provider so just like that so this is basically going to check the authentication when you implement the login page right now there is other step we should do by going to the app.tracer and for the router view we are not going to use the router view anymore what we are going to use is authorize router view just like this so this authorizer preview basically handles the gives us the ability to reach for the authorized view or not authorized view components so we can use them in our app to make sure that uh if we want to show something for the users that only logged in or if you want to show other things for the user who are not logged in so in case the user is not logged in and trying to access some secure component we are going to show you don't have access to this is login so because the time is passed very fast so right now we're just going to test the authentication system it's just working fine and in the next session we will implement just the the request to the server like login and register they are going to be very easy and quick while this is set up this is the job that's going to take down so we have this right now the authorized router view and this is if not authorized we want to show this so put it like this and this is great now we will simulate the login process manually by ourself by pasting the access token in the local storage in case it it worked fine so this means uh it's working so when we just make the login request and store the access token in the local storage it will just work very fine so now i will go to imports and i will [Music] using microsoft.sbnecor authorization important now i'll go to pages and anyway the fetch data is basically making a request to the weather forecast api which is anyway it's just secured so the user shouldn't have access to this one if he's not logged in so let's add attribute authorize soft spin a core with authorization we can basically add this imports i hope you are still enjoying this after all like somehow this complicated stuff okay so right now if the user is not authenticated he won't be access to this component and if he's authenticated then as you can see here is trying to create a new instance of the http related to the authorization message handler and in this case you see we are not going to set the access token because this one will do this job for us so let's try right now to run the project and let's see how things will go so i'll add a breakpoint here and first i'm not logged in because the login requires an access token to be exists in the local storage so let's see first what's going to happen okay we get an error let's see what we have okay there is no registered service for of tab okay sorry for that because for this one to work basically this authorized attribute and this authorized stuff in the for what we have added we need here to add to register the services but add authorization core yes okay so great right now we have access to this but if we try to access the fetch data oh look at that we will get you don't have sorry we didn't write access so you don't have access to this page please login and as we have said uh don't worry about this we are going to fix all of that in the in the layout when you are designing the pages so you don't have access to this so basically the user has to be logged in to be able to do this stuff and as you have said the login is basically if we go to the developer tools and we go here to the application great and if we go to the local storage open up this one okay here so maybe we can add something manually here which is the access token i will add it access token and its value is going to be this access token okay great so right now i'm going to set some i will put a click point here and i will put another breakpoint in the authorization message handler so let's go ahead and go to this page and let's just refresh oh look at that right now we were able to access this very smoothly we didn't i don't know why the breakpoints didn't hurt but let's try to run the project again okay maybe there is something okay i need to have a look at the debugging but for now because the time is very limited let me make a very quick for what what happens and how this one basically worked in this way so first when we try to access this protected page the fidget data what what happening actually is it's going to this local authentication state and checks of okay there is an contains access token if there is an access token then okay i'm going to put this token fetch it from the local storage then pass it to a jwt security token handler function called raid jwt token basically this one will give out the token as a set of claims and issuer audience and all other stuff the same way we created that from the asp.net core and then we have created the user object which is set of claims and the name of the authentication scheme in addition to that then we have created the claims principle this is basically the real user object that has those identity and at the end we just return this state and we have notified other components or the full application about what happened so right now the user is logged in then when this component is opening basically on initialization as you can see right now this one is trying to make a call for the slash weather forecast and it's a protected let's try to do this by i will duplicate this one and make it get another forecast let's click send and as you can see i've got 401 because i need the access token if i go to the authorization barrier token just bring one this from here and click send so i will be able to get this so what happens here is as we have said this http client object is associated with an authorization message handler and the user is logged in so this means there is an access token in the local storage so when we click next or when the this is sending the request it goes to this one it tries to check there is an access token and yes there is an access token then fetch it and put it in the authorization property in the header of the request and basically continue sending your request you can have multiple messaging handlers but for in our scenario we need only this one so it's send a request and it returns with the data successfully so everything is just working very fine and we can show some data just before we end in this session so here i will have a authorized view so i'll type h2 welcome and add context which will give us access to the user property that claims or defined first let's use this function that returns the first claim for us that has a name i'm going to use claim types system security dot claims that claim types dot given name so this one will give me the first name of the login user let's try to run this again and meanwhile if there is any questions about all the stuff that we have done i know it's complicated but the code will be available on github so just take a look at this and you will understand it in addition to the video adding for any questions you can post them here or you can post those questions on twitter if you would like so if you go to fidget data then okay sorry we have printed the fully claim we need to print just the value but as you can see this is the claim and this is the name of the user so the authentication is just working very fine the microsoft blazer float ui just working very fine and the initializing the http clients with a very smooth uh pipeline to set the access token and all this stuff is also working very fine so right now we have all the infrastructure to complete uh building the project all the stuff are going to be very easy and the quick somehow and in addition to that very interesting so this we can say that this one is the hardest session in case if you are new for this stuff and you're you didn't get the point out of 100 of what we have done but again i'm also available to answer any of your questions so i hope you enjoyed this uh like me here while teaching this so thanks everyone for joining and yeah at the end if there is any questions please post them in the comments so we can have a look at them before we end the session okay we we got a question if we receive a token in the login phase why we need to another authorization part now um basically uh there's going to be no authorization part after you log in the talk after we after we implement the login page and get the access token it's going to be stored in the browser and just like what happened in this case when we set it manually so then we are going to go ahead and call this function get authentication state async which is basically in turn is what it's going to do to check if there is a token and then if yes and yes after we log in there's going to be a token if the logan's operation is succeeded then it will put this and notify other components about this so and this will happen basically just once and whenever you try to access any authorized stuff and in this case like this authorize is basically requires the user to be authenticated and to be authenticated this means there should be a user existing or an access token existing in the local storage of the browser so this process will do it only only once and for and in the login when you will implement the login ui what's going to happen it just basically will fit the token store this value in the local storage and just make a call for this function just to identify other other components and the full application that hey right now this user is authenticated so they refresh the state about that and then we proceed to the application normally and the user is logged in as long as this access token is still within the within the local storage so i hope you you get the point out of this or maybe if i misunderstood your question you can just put some further details about that the store part will be the same if we receive a token from active directory p2c okay basically uh this is why i recommend going to azure active directory and azure active directory p2c because all the stuff that we are doing here creating this local authentication city provider and making the storing process and all the stuff that we are doing manually basically in the using azure active directory or the microsoft msl right library for authentication it traps all the stuff for you behind the scenes so this is why when you limit azure active directory you go to azure you create the application and then you come here you just put the credentials in the app settings and then all is done because you have you have a function in the program.cs called the uh ad m cell authentication i think so that function is taking uh the responsibility for all the stuff that we have implemented here so this is why that's two lines authentication when you implement something like azure active directory or active directory p2c so basically behind the scene they are just doing the same yes and but yeah the way of switching the token is different from the one that we have and but yeah as i've said this is going to be just just the same but the stuff is existing behind the scenes i think i think msl is is open source so you can check github to to see what they are doing behind the scenes to implement their authentication mechanism but at the end they are inheriting from authentication state provider and they have they are doing just exactly the same thing by getting the token uh decoded it get the claims create user principle and all the stuff and notify this state changed but yeah the flexibility you get here is right now you are the owner of your users in a way or another so some people prefer this so i hope that answers the questions and yeah it's pleasure for helping so all of this will be available on github and i will uh collect all the links and the stuff that we mentioned in this session to put it in the description box thank you so much again for joining and watching this and i'll probably see you in the upcoming saturday to start implementing the ui and developing structuring the layout and start implementing the login and the register page so thank you so much for watching and see you after a few days

Channel: AK Academy

Views: 834

Rating: 4.9148936 out of 5

Keywords: Azure, Microsoft, Blazor WebAssembly, dotnetLabs, Fluent UI, UI Components, Videos Platofrm, Development from scratch, full project, Asp.Net Core, .NET 5, ASP.NET Core Identity, Swagger UI, Login, AuthenticationStateProvider, Delegating Handler, Authroization, Authentication, Layout, HTML, CSS, Single Page Applicaitn, Modern Web Development, Web, Web API, ASP.NET API, SQL Server, Entity Framework, YouTube, Software Development, React JS, Angular, Tutorials, from scratch, programming

Id: cUc26op4LhE

Length: 75min 58sec (4558 seconds)

Published: Wed Jan 20 2021