.NET 8 Blazor eCommerce: Part 8 - Adding Access Token Authentication and Role Based Authorization 📱💻

hey guys welcome back again to net code H Channel  I believe um you're happy to see the next video   and I am also happy to have you here in this  video do you know what we're going to talk about   it is the same e-commerce app that you have been  building this is actually the eighth video and in   this video we are going to look at authentication  authorization and refresh token support so adding   this to theet a blaz assembly Ecommerce app and  this app I call it as online phone shop you and   I started this project together and we are on the  eighth section so I believe you've watched other   videos or other um sections that is from the part  one up to part seven if you haven't watched any of   them or you haven't watched all please check the  description and you're going to have the links   over there you can do any of the following  to support this channel you can subscribe   and also hit on the notification Bell so you can  receive update as soon as I upload a new content   or an update of this ecomment series you can also  like this video by clicking on the thumbs up icon   beneath this video when you do that it actually  helps and pushes this video for other people to   also see you can also buy me a hot Cafe and in  case you want to do that to support you can do   that from the link in the video description so  thank you in advance for selecting any of this   but you know what I'm going to love you much for  selecting all I cannot proceed this video without   telling those who do support me who who like my  videos who comment who buy me coffee that thank   you so much it is you that is why I'm able to make  video like this as usual I'm going to make this   video very simple and clear for to get the concept  in this you know what I do offer training session   for people who are interested in net Technologies  talking about net Technologies you'll be asking   yourself what are the components involved Blazer  that is a web assembly and bler server for web app   development learning of net Mar and Mar Blazer  hybrid for mobile application development and   now net web API for web services so if you're  interested in any of these I have my email link in   the video description you can hook me up through  it so what I would say here is um don't skip this   video stick around because it is something that  you're going to love it at the end of the day okay   so just sit back relax and now let's start coding  so this is so far what we have been doing from um   part one up to part seven we able to create our um  header we have our images our carel our featured   items and now when you go to the product we also  have a list of products and we have categories   also created and added to it as well so that's  a categories that we have in Here and Now within   the category we have a banner created which um  randomly picks the data and now display as soon as   the page refreshes or and an evocation of method  has been initialized now if I click on um any   of this we do not get data from the API because  retrieve it once and we we've cash it so we can   retrieve from the cash variable that we have we  don't need to be calling the API unless we do an   update or we do an addition of new product making  the performance uh um fast and now increasing it   as well so we can see from the get all we have  all product and currently this the product that we   have and if I click on the samung it just make a  sort and now um use only your display the Samsung   Apple to we have the same thing now as you can  see the banner keeps changing um popping up a   different iPhones that I really want to suggest  Accord with the price as well so can see if I   click on Samsung setup I have that is a the name  here keep changing and as you can see that is it   so it keep suggesting maybe you like to create  a separate table with a separate record for this   but here I just I'm just using the featured items  okay so maybe I know you are genius and you can do   a whole lot of stuffs can do some modification to  this so as for that one I leave it up to you and   I believe and I trust you that you can make it  okay so um that's what we we've done so far now   this time we're going to add um accounts you can  see from here since we using the bootstrap header   nav by here we have this and uh we're going to  add login and log out to this you're going to   authentication you're going to add authorization  going to add referesh to token support so that   as soon as your um token expired we can have  a mechanism that's a default way to get you a   new token without even your consent okay and this  going to happen between the computer to computer   communication so you know what the very first that  you're going to do here is to change or to include   um a loader a screen loader see what I'm talking  about if I try to refresh this application it will   say it's is going to load for to get connected  to API retri data the communication must happen   establish before dat will be retrieve and then  process it and then display now you you see   instead of just having the blank screen like this  we want to display some loader in there so the   the the user will know that okay there's a process  going on so I have to wait and that is it now when   you click on the home button to see what going to  happen you can see if I refresh this a connection   has be created established between the API and the  client and you can see all this must happen and   you want to even change as you can see with this  you want to the data is not available but you can   see we have this navigations and we don't want  to do that okay you want this to get popped up   as soon as the data is ready and I believe you  can do that isn't it so quickly let's use like   five minutes to finish this we don't want to waste  much time on this because we have a lot of things   to do today okay so we're going to run like a like  a rabbit okay so um just by the way now let's see   so I have this small one that I'm going to make  we go back to the index you know for BL assembly   we can change the the loading from the application  itself we go to the solution and from this client   section I'm talking about the client project you  go to the where is it let's go to ww root folder   and you see we have this index with this index we  have this default this what is loading SVG up to   this so we want to remove this and now paste in  what we have just a d of class cor rectangular   one up to five so we're going to have it in a in  a style right using the CSS okay so we have this   and the next thing to do here is going to have  a CSS um copy and you know what I'm going to   put the CSS in solution I go back to the CSS file  which we have this up CSS so maybe in here I'll go   down here and I'll try to add a custom CSS T to it  remember that this is a custom CSS St to the car   now in here let's have there's a custom style to  screen loader so with this contr KC let me comment this and now with this with this style CR goes  to m Washington so this it's just an interesting   one very simple one as well so I'm going to just  paste the CSS sty in here I'm not sure you're able   to type everything but you can just go through  them type them if else then check there is it   did I say if else okay so if else statement right  okay so if you know you can type all this then um   don't worry it will be the repo so you can just  go in there and and clone it and that's so you   don't know how to type everything but as you can  see we using this spinner rectangular one up to   five as you can see and using this key frame to  just set it in animation form okay so um that   is what we are having in here very simple one  you can see that is it now let's save this and   when try to read the application you to have some  simple um display that's going to be the loading   and we're going to scrap off that loading from  one up to 100 let's see so I'm going to run this   all right so you can see this is what I'm looking  at now this is what we have you can see this is   just a small loading and that's what we using to  load our our app you can see we do not have that   circular um SVG file that keeps starts from zero  up to 100 the default one now we are using this   to load application so you can see as soon as it  finishes loading we have the app being displayed   in here okay so that's a default um loader now  um this Ty we want to get this loaded so what   can we do so we can have um that loading have an  effect over this component or this component too   so what we can do is to create a component so  let's go in there and I create components and   you know what you go to solution Explorer now  can see from our Pages folder there is also one   folder known as other Pages let's open that and  let's create one additional component and that's   what we're going to use to handle the loading  aspect okay now in here I'm going to pass the   name as screen loading or loading page well you  can even put in your name there okay it doesn't   matter aside from that uh we want to create a  separate CSS class for this so once you have   the this page created see the loading page right  click on the same of other Pages folder let's   click on add new item this you're going to create  a CSS file so we pass here as St maybe you ask me   why can't we put it in the the app. CSS or will  that won't take in effect okay so let's see if   that one is going to take effect now with the  same component that we have created what we're   going to do here is let's specify the div that  we copied hope you remember this let me increase   the size so that's what we have now now if I run  this nothing going to happen now okay so the the   first the second thing the first thing the second  thing to do here is we're going to link this page   into our component so if you have been following  all the tutorials all the part that we have been   doing I mean you and I have been doing together  you know when we check our solution we we our   application such a way that we don't call the API  all the time anytime the page loads we don't call   the API we have a cash variable that we cash all  the data in there we call the API only when the   cash variable is empty it's now that is when the  application is starting or addition or updating   of a product has been occurred now in that we  we U registered an action okay this action get   invoked anytime an update has been occurred data  has been added or there's an event or there's an   another method called or there's an operation  set GS okay so when you check our app i product   service this our interface we have all this I can  see we have we've cashed all this in here so in   order to have the um loading page also get work  we want to also include this is visible so when   this is being invoked we can set this visible  to through true or false so we can um hide and   um and show this loading page okay so let's add it  here and now when you go back to okay it's ask me   to rebuild it but I'm not ready to build it so let  me close this up now let's go back to the solution   and now since we have updated the interface for  the product service it means when you go to the   client service and on top here you're going  to have this red line under and that's fine so   control period we going to include this interface  and that is what we have in here so you know we   want to remove this so we can um have it set and  get these are the accesses that we need so we can   set and now retrieve the value of this um property  that we have or we are creating we save that okay   so we have it how come we have it already Okay  so have five product service we have this uh   visible is visible we come here and now reset it  to so default it does not have any default value   for this okay now as soon as I click on get all  product so here since I click on get all product   first of all I want to set this visible to through  because here process is going to be okay so set   this through so you can have it loading as soon  as this product get um you have this list here   get the prod that you need and this invoked you  want to set this to first before this invoked so   that as soon as this invoked we can this value can  change and it can update the UI um simultaneously   so let's have this set to first that's for the  get up product now aside from that when you can   see that from this featured product two let's see  what we can do to do same we can just do same to   that because when um we want to get data from the  API set is visible and as soon as the has been   retrieved and I'm cash in there please set this to  force because as I speak the data will be having   the container will be having a list of records of  product in it so I'm set this to force invoke it   so we can display all the product in there that  is what we need now this is a this is a mother   method of get product you see it is calling from  an API we passing this parameter a strength so we   can retrieve based on the featured or not okay we  can do that we did that in the two subsequent you   do past is it two or three you can check any of  them I think I explain it in that video okay so   we have the sets and that is fine all that we  need to do is to go to our page and I'll try   to include or use this component so we go back  to this our Pages folder other not other Pages   this are product pages and I you see we have this  homepage that is wa this the product list homepage   links all these pages so we can um use them we can  control them in here the view so on top here we   can include maybe um product service. visible you  know this is a property that we created so if it   is visible we want to display this loading page  but in case it is not then I'm going to say if else so else then we want to show this okay so if it is visible we display this  that is when the product is getting data from   an API please display loading page and now when  the data is ready please the loading page should   set you up because an event which a product  list product action going to be invoked as   that invoked this page has been subscribed  to it and as can see it subscribed to the   stage change as soon as the product service or  product action is being invoked this page gets   rendered now when it is getting rendered the  value of this also get changed and we can hide   this peacefully without any issue this what  we are doing here so in our main page that a   product list page where we have our categories  as you can see from this categories we have a   banner we have a product list page we going to  have this loader to get loaded what the page or   what the page prepared itself getting connection  with an API communicating and um organizing data   to be displayed on the screen when you check  the front page too there is a session that we   can also implement the same that is when the app  app loads initially you can see we saw that we   we we saw two navigations images right you want  to hide them since the product to display are   not ready so in order to do that you know we're  going to do same so just quickly grab this grab   what we have in Here and Now quickly let's go  back to the front page and that is actually the   homepage when that app loads first that is where  it has to go so you can you have the front page   in here and now beneath the Disposable we going  to use the same thing and we can close this up here so when you check this let's see we  have um if it is visible display this but   in case it is not then we want to um hide  that so let's save this let me open this   he let me close that then let me open  this again okay so control KD let's see okay so I wanted to format to well all right  so now we have this let's try to load the up and   see what we have in case they couldn't work it  you have to add the CSS to it and we're going to   do the that if this couldn't use the CSS file in a  CSS code or the style in the app. CSS file so you   can see that the app is now loading and that is  a default one that is loading now let's wait to   see when it gets to the homepage you must also  have the same indicator and that's the loading   page to displayed while it gu connected an AP as  you can see from here it get connected an API so   we have the displayed but the featured product  here we did not include that so we have this page   same okay so we're going to also um edit this you  see this is ready so but we don't want to include   loading here loading here right we don't have two  loading symbols or two loading indicators in here   no we don't do that we want the user to know that  it is uniform it is one so we're going to use the   same method to apply to this component but instead  of using the loading page component we're going to   skip that it's going to be empty unless this page  is ready let's quickly have a look on that then   we can now jump up to our authentication system so  this can be found inside our project to go back to   the solution Explorer now in here you see we have  where is it do you see is a Fed product I get it   now in here we want to have something like this if  it is FC because you know it is visible is through   that is where you want to display the component  the loading page here if it is forse meaning the   page is already loaded and communication has been  established so that is where we want to um display   this so if it is false then display this so as a  speak when we run this let's see the final one so   we can say goodbye to this and we can move on to  what we're going to do so it is loading now let's   see so this is the default one that it loads you  can even shap this to the middle if you want to   do that okay as you can see this is hidden the  feature is hidden we have only one indicator and   this keeps loading until this section is ready  communication has been established on an API   data has been retrieved or received and I'll  try to process it and display to the UI that   is where it's going to set you off yeah can see  and we're going to also have a pop up with this   that's fine you see so we do not have any any any  any structure that get displayed where the page is   not available no we don't do that hide them when  the page is ready get them shown and that is what   it is doing yes so I believe you also achieved  the same thank you and well done now let's quickly   go to our authentication system because that is  what we want to focus in this video this is just   by the way it's a pass by message that I want to  deliver to you and I believe you love it you can   also Implement a whole lot of um loading screen if  you want to there are lot of loading screen online   that you can just go in there and search even with  bootstrap it has a lot of loading indicated that   you can also get them to use I have a video  done on loading screen too so I'll put on the   video description if you want to have a separate  varieties of loading screens you can um go there   and watch that video and you're going to have  access to them and the source code is available so   you can just go in there and grab them integrate  it and fine you can move on with Y okay so what   we're going to do here is an authentication and  I believe you know that here we're not going to   use DWT you want to use an asset token now the  asset token is going to be um a string that we   are going to issue this ring does not contain any  claim as soon as a request is being sent from the   client it add a token to the the header as now  gets to the API the API catch it's going to catch   the the header retrieve the the asset token from  the API and I run some queries on the that the   token and I'll check if it's valid the clients  has to keep them add the assess token to the   header anytime they're going to make a request to  a protected end point then aside from that it keep   the refresh token when the server returns a 401  as um an authorized meaning the token has expired   then the client has to resend the refresh token  so the Ser can use that refresh token check it   in the database and try to get a new refresh token  and an access token to the user it returns to the   client and the client has to keep them remove the  old header and I include the new header and I try   to make another request with this and this must  happen between the computer to computer the user   shouldn't have any idea the user doesn't open  the network tab to see what is happening there   no it is this is out of bank area so the user  can see what is that will see here is I click   on the get data and now I have my data that's  fine so let's start with this so in application   we also going to handle with rows as well so  definitely we must have some rows for ourself   and we are going to create two rows administrator  and our user so if you log in if you can buy item   in a shop you can add item to cut but as soon as  you want to buy you must log in and um for adding   of um categories for adding of product it is the  administrator who has to do that so two people in   the RO administrator and now the user but guess  what you can also customize it you can even add   multiple roles when you have the concept you can  extend it to um any any Ro that you want okay you   can be adding a lot so they just um manual way  of authentication we not using JWT you're not   using the default endpoint from the net 8 um and  API we are creating our own stuff okay so maybe   with a step you're going to understand what I'm  going to use in the assess token so first thing   is let's go back we have to create a model for  registration so let's close all this since we are   done with the loading now in solution you can see  we have this now I want to have a separation of   consent so if there's a mod that I will never put  them in the shed library because the client will   not need them it is limited to the server only  so definitely I have to put them in the server   section okay so can see from the server I have a  folder called Data any the data here I'm going to   add new item and this going to be a class and I'm  going to say user account with the user account   I'm going to have maybe four properties in this  and that is what going to handle user identity we   have some ID name email and password that is fine  so I hope you have the same thing the next thing   we're going to do here is we're going to assign  a user row so this user row that is what going   to handle what the user the user row um related to  the account so let's also create one in there and   it must happen the same data folder you can create  a separate folder and I'll add it okay you can do   that can um customize the way that you want now  user row now with this user row I'm going to have   three properties you know since I'm going to save  to database we must have an ID so this ID you has   user ID and AOW ID so this is like a um how is a  relationship that we establishing but this time I   don't want to use um the actual relationship you  want to use this this is just a lose one okay the   first one we can use a cascaded one um but here  we want to do our own stuff so I think this okay   we have an ID and this going to be for primary key  and we are not actually into this what we are into   much here it is a user ID and a row ID so user ID  one and a row ID one R ID one means administrator   these ID one is net code so if I want to gather  all the information I pick the row ID and I go to   the row date table and I can grab the row name  so we have not created the row yet and the row   name here I'm going to create it's going to be a  system road so system rows let's create one class   for that quickly we're going to have I think two  properties you can include the property you can   include more but for now we're going to have  system row this time we're going to have the   row ID and the row name the row ID here default  is going to be for the primary key and we have   just the row name this what we have okay now you  have right and row name so these are the models   that we need for the authentication solution and  you can see we have them in here the next thing   here is we need a token information because you're  going to be saving this is not a JWT so you know   JWT is a stateless it means that the server or  the the code the token must have everything that   it needs for the server to authenticate it to  identify it but this going to be a stateful so   yeah it means we have to catch in something so  we can be looping through checking up here and   then moving up and down to make some checks  before we can um give go ahead to the client   endpoint so we say token information and I simply  I say token info now this token info I'm going to   have five or six properties how many are they  they are six isn't it yeah there's an ID here   you know the I automatically is a primary key  so we don't count this okay it is not what we   want this is for the database section we have a  user ID so the specific user you want to cash in   the ID in here you want to have the asset token  that going to be issued to the user and also the   refresh token now the expired date for the the  asset token and also the created date normally   we not going to use the created date by guess  what we was we just want to bring it up so maybe   later on if you want to customize it based on  this you can um retrieve the DAT that the token   is being created or try to do some stuff with it  okay do some magic with it so you save it and we   are done with our token information so we have  these three um models that we have created now   the next thing to do here is know since you're  going to be using them in the database we have   to include them in the appdb contest. C yes um  class and that's the data contest class so click   Go Solution and then in here you have your updb  contest right so here we're going to add them down here and I'm just going to copy them so we need  four tables so we can see we have user accounts   system rows user rows and token info we added  four models and we have them set in here to   create a respect Ive database table with the  various column specifies the properties for   us okay we have the sets now the next that  we can do here is we can perform database   migration so we can so it can create a table for  us so let's close this we're going to build this   application first but this one I'm going to  do I want to change this session so updb up   Json and now here the demo shop DB so I'm  going to say say um this YouTube shop D so   you can create a new table for us okay let's  build this project first so right click build solution you can see that successful build as can  see two suceeded um so let's see now I'm going to   data migration I can just remove this because  we're going to be doing it again but guess what   the same databit that you use you can continue  with this okay here I want to just change it to   new one now with this I'm going to add migration  so type in add Das migration and I give it a name   asked whoa what is happening okay so add migration  now the name is going to be first so I'm going to   pass that first this going to build it but since  you build it already it's going to make it super   fast and let's wait for it after that you're  going to add database up database to put the   the the code here into an action back table for  us okay so let's see we have this and no store   typ for specify for decimal property price yeah  thank you we we want to move on so here you're   going to say update Dash Das database okay so I  believe you're doing the the same so now let's   um run this so we can generate or can create the  whole table for us see have system rows toing INF   for for table categories as a table we have um um  um user account as table and you see we have the   primary keys and it is each here has its primary  key as an ID so that is what we was talking about   okay so this is the what the database needs it's  not our business but you know we have to bring it   there for it can be used now we have where is  done so we have a folder the folder a database   created if I refresh this try to open or access my  SQL Server object Explorer which can be found in   the views Tab and you can find there if I open  my tax database and I have YouTube shop DB and   that is it currently I have tables five tables in  all I think so or less it is reloading the pages   so the table so we can just wait for a few seconds  and this will be done okay but we can wait because   we don't have time to wait so we can just move  on later on we come back to check and even that   is it so see 2 4 six so stable you know category  product system rows toen in for user count and a   user rows So within each table there's no single  item in it because you have not added anything yet   we'll do that soon okay trust me okay so let's  close this peacefully we can close all of these   cuz we are done using them we don't need them for  now so close them so we can have screen here empty   space to work on now when you click on solution  Explorer you can now go to the server and I can   see we have this repositories that is where  we have all our interfaces and our repository   implementations now within this you can create a  folder and put all the interfaces name and name   it as contract or interfaces or Etc but you know  I don't want to create a lot of folders uh so I   want to just put them in one folder so here let's  also add one interface and this interface is going   to be an interface here and I'm going to say I us  an account I user account that's an interface in   that I'm going to have let's say um do I need to  create let's have four methods in this okay but   first of all we're going to be using this let me  copy this let's create this model in here later   on I'm going to show you the reason why we are  creating this now this post refresh token will   be used by both the server and the API not the  server the API the server and the client so I   suggest you put them in here so where we have this  we can create a folder in the set project and I   name it as dto that's a data transfer object used  to transfer data from the server to the client   dtos so we can create this and let me add one um  class in here we're going to be adding two more   classes for login and and for user but here we  have post referesh token which has only a single   property so we can create that and we can specify  this to only a single property don't worry if you   don't understand this for now um don't worry I'll  get them explained to you make it as public that   is what we want now the next question is did we  even check if the classes that we injected or we   created have this public class or internal so we  can just quickly go back user rules it as public   token public system rules public and system that  that is fine okay so we have this and when we go   back to this interface we have going to have in  our four methods now the form meod one is going   to be login we're going to have registration  we're going to have um get user by token and   you're going to have um get refresh token I want  us to do all in one okay so we won't waste time   so you can see we have our register log and our  get user by token we have um refresh token now   service respon we have login respon but we not  having the login respon from this class solution   we have our responses in the shared folder click  on service responses and you see we have only this let's update it and I add more so here I'm  going to say is equal to now so I want to set a   default property for that now I can just make a  copy of this and with this I'm going to say not   service rather it's going to be what login  that's right so login response and now with   this login response I believe it must have some  property that we're going to be using so login um response we must have maybe a message you must  have token and Al refresh token so maybe what   I'm going to do here is I can just copy this and  replace the whole thing in here okay so maybe you   be asking yourself why did we not specify a  property like what we did in the where is it   in this token info and like this okay here we can  use this record and um it gives the access to do   this so it set a primary construct for it that  we can specify the the property or the values   automatically as soon as we create this instead  of um creating an instance and I'm passing in   the assigning the the the property here to it  value we can pass the value automatically and   it's going to the smart way okay bound to it okay  so um that's what we need to do now a very simple   one okay so there's no get or set ass def it  is there but it is hidden let's let me put it   in that way it is hidden you cannot see it for  now but it's still going to work so we have a   message we have a token we have our refresh token  you see we have all default they are set to you   now so default is set to now okay now let's go  back to I user account and we can now use this   but there's one guy here as user session what is  user session that's what we're going to use to   populate our data for token generation okay and  for also I'm getting user details so we have to   also create this user session to our project the  question is where I going to keep it is it from   the server from the API not the server the API the  server the client and on the shed Library which   one let's put it in the shared folder because  it's still going to be used by both so here we   have a d right click on the D let's click on add a  new class and now you're going to say user session   user session is going to have the claim that we  need so maybe you can can just name it as claims   or yeah so claims will be fine and user s also be  fine so here we're going to have three properties   name email and row so that's what you're going to  be sending to the client okay you want to send the   person's name Person email the person's row maybe  in case you want anything that you want to add   you can add one property to this and I'll assign  it in there okay when you go back and check our   user interface we see we have all these soft but  there's one guy here these two guys user d and now   the um login dtoo so that's what we're going to be  using to transport data from the client section if   client tries to register or login that's what we  need so in the dto let's right click click on add   a new model and you're going to say user dto you  must have the four property that we specify in the   user account and also you must add one property  to it and do you know that one property that   we're going to be adding let's see you want to  add confirm password so the user can confirm the   password so we're going to make it this as public  as you know and I believe you've done this already   and good job so here let's go to the next one and  we we need just an ID okay we need our name email   and our password now we have this confirm password  added to this so here you can see we have the data   specified data type. password we have the password  specified and you can see we have an email   specified attribute here and you have a required  attribute also specified on top and that is what   we need to handle so control period we can clear  and remove all unnecessary users to make this very   simple for us now we have this what else do you  think we're going to do guess what yes I heard you   say login D and that's right so let's go in there  and I create a login dto so we I click on the same   dto folder click on ADD and our new class and it's  going to be logging D and you know yeah how many   property do we need are you saying two yes it is  we need two two two properties and these are what   the email and password that's correct so we have  our public we have our email and password attached   to this control period we can remove a necessary  using course we don't need them and here control   period we can include the component model. data  annotations to set this attribute on top that's   fine so all these are required you cannot pass in  this model and I try to pass a null property in   it no it will never happen you're going to have an  error so we have this mod created now we navigate   back to the I user account see what happened yes  fine everything is working as expected and is in   intact if you don't understand the the the last  two properties or the last two interfaces do not   worry focus on the first and the second one the  second third and the fourth one here is going   to explain itself to you okay so relax let's  work on the first one and now the second one   okay so I'm going to remove this the space here  and we need to create our for this so it's going   to be user account repository let me just grab  this let's go to the solution and in here where   we have this repository let's right click take  note directly in the server add and this time is   going to be a class and I'm going to use account  repository so this is what you want to do it's a   class type so take note now after having this it  has inherit from the ey account repository isn't it so quickly we do that from here and it is  inheriting from this so this control period we   can Implement all the interfaces take note we  have these interfaces in there and that's what   we need to implement control period Control Plus  dot going to give you that now in C version of   12 it has introduced this I keep saying because  maybe this is the first time of you watching a   video from net code Hub and you might not no I'm  telling you today so that is all okay C version   12 has introduced primary constractor so all  the services that you need you want to make it   available in the whole body section put it in  the primary constractor so write Les code and   and an efficient use okay powerful performance  yeah efficient use and Powerful performance so   here we're going to be using our appdb contest so  pass in here as appdb contest this is a contest I   think so there's a contest class that I create  I'm going to say appdb contest oh now let me do   it again so yes and I need this so this control  period we need to add a name space to the section   in here and we have that control period k d it has  formatted okay so this is what we need so instead   of creating it and initializing the FI and do a  whole lot of quotes you can do this just on one   line or a piece of line okay half piece of line  and you you are way through okay so you want to   focus you do want to focus on get your fresh token  get us that token no you want to have first with   the registration if I click on the registration  what should happen let's save this first so first   you want to check if user has already registered  so I'm going to use this so do first or default   you want to check the email to lower and I will  compare um if user is already there this must be   an async if it is there that if user is not now  then return user already registered but of in   case user has not user is not there okay now then  this what you're going to do we going to be using   um updb content or save changes um numerous  times so you know in doing that we can cash   the we can create one method to handle that so we  can be calling remember that in programming or in   creating developing always remember to follow the  instruction or the rule of drawing do not repeat   yourself do not repeat yourself so if it is if if  there's a way out please try to find that way out   out and I'll have it one code which you can use  them often do not repeat yourself so we have this   and that's a comet so haveb content save changes  a syn and that's what this meod is going to do   anytime that you call this it's going to save the  changes okay so here we check if the user is not   null it us is already there but what if in case  the user is null then the next thing to do here is we want to prepare um user account here we  have user so you want to add this user account   you know this account here is a data table that  we have we want to create a section or a record   for this user so you know we going to add this  and on the password we want to encrypt it so   we using this package B encrypt do. netb encrypt  password we passing the the string password and   it's going to encrypt it so if you can use this  you have to install b en.net contr period let's   see if you're going to have access to and not  this one not this one so it means you have to   um you have to um include it ourself so quickly  let's go back to solution go back we can just   copy this B and.net and go to solution Explorer  right click on dependencies not dependenc your   dependencies to the server section and I click  on manage to get packages so let's make a search   out of it and that is a b.net so that is this  one so we need to install this package to the   server take note not the client so that is this  one by Chris and um that is stable version 4.0.3   so install this peacefully and we can now move on  with this apply and okay so it is done you go back   in there and now you see from the control period  we have to include a name space solve this and hopefully why is the main space I'm not  sure it is done right so let's quickly   check install okay it did not install let's find out so apply so do we need to return this  before this can saved who so through this   um now implemented exception through here okay  now try to get it install again okay so it's done   so in here you can see we have it set we can just  remove what we copied earlier on so here in order   to get in order to this is going to save the data  to database in order to get the the IDE of it you   have to append entity to it so we can retrieve  the ID they already Sav data the currently save   data okay append en to grab the ID in here after  grabbing the ID you know when we save any record   database you have to call in update updb content  save changes async and that's why we commited so   that's very simple thing that we are doing aside  from this we are going to check let's assign row   so let's check if there's admin already there in  application the first person to register is the   admin so we going to check if um we check system  row. name. equal to admin we want to check if   admin is there so when we check and admin is null  then this is what you really want to do you want   to create an admin and now add a current user to  an admin Ro so if admin is n then please do add   a new r as an admin get the entity as you know  I've explain this earlier on so you know save it   and now with the user R add the r ID and also the  user ID so we can we are creating a relationship   between them um save it in here and now um save it  okay but what if in case the person um admin rle   has been created it means that there's a there's  a first person registered now the second person   has to be assigned to a default created rule as  what user because you want to handle two rules now   you can add more than that in here or maybe later  on you can manage user and you can be adding more   deleting and updating user information in there  okay so else that's what we're going to do we want   to check if user is there if not then we create  it and I'll add the current user to it so we're   going to check we are making a check let me just  put this in a new line like that we are checking   if the user is already there okay if the person  we have this this rule ID to zero that's the rule   ID defaultly now we are checking if this user  created is null that's this one when the user   is not created then we are going to will add a  new rule as name we cash in the entity so we can   retrieve the ID then we assign this rule ID here  to this cash in um that's a user record added we   want to get it ID here so weend to this one and  aside from that we are now going to add the user   row to the user to the user row table by adding  or grabbing the the row ID and now the current   row which has been created or the user idid and  then the r ID as well so that's what we are doing   here now we are using this um um what is it turn  operator to check we checking that here default   row ID is zero you want to check if the you if  this user has been if this user row has been   created or not if it is the first time of being  created they're going to have this row ID set to   the current ID of this but in case it has created  already then it's going to skip this and when it   skip it going to have rle ID of zero so we are  checking if equal to zero it means that's a new   creation no that's the old that's created already  but in case it is not then is a new creation and   in such case you want to return the row ID we  said the is ID in here and I Rec commit it by   saving it so by doing so we going to have our two  RS created with anybody that tries to sign up with application so I believe you've gotten the idea  behind it right yes that's good now at the end we   want to return an account created that's going  to be a service response so after saving this   then do you return this because you know at the  end of this either an ad is going to be created   or a user going to be created then at the end we  want to return this so what we are having here   is administrator is going to be created once and  aside from that no one can have access to it again   so the first person who's going to register going  to be assigned to an administrator automatically   aside from that the subsequent on is going to be  assigned to a user row because that's what we are   checking first we see if there's um a section  or a field in that road system roads which has   a SE name of ID if it is there then we want to  skip it come to this but in case it is not there   then you want to create it so after creating  anytime the system checks it be available so no   creation anymore it's going to skipe it all right  so we have this set now what of the login quickly   let's do the login want us to try this account  first yes we can we can do that let's try that   and see oh we have not created our controller  so this going to run but we don't have access   to the controller yet because we haven't created  it so let's go to solution Explorer now you see   we have our controller folder let's expand it and  we're going to create One controller and the name   is going to be an account controller so right  click then add a new controller in here since   it is trying that's why we can see this it is  Blair so we have to stop this and let's wait   so we can stop it and move on with that so I've  closed it up and now let's quickly go there and   I'll try to create our controller in here so  that is it add a new controller and the name   here do you remember is an account controller but  maybe you can decide to name it any that you want   you can even put in your name make sure an API m  one and we see account controller let's click on   this now inste this account controller you know we  are still going to use the new way and that is a   primary Constructor so let's pass it in here and I  think we need to include our I user I user account   and that is the interface that we created let's  include it in here and the first method I going   to do here that's a registration so registration  you're going to have an endpoint as register so   that is it you have an this a route as register  and you know we are returning an action result of   service response which has a bling expression and  so we have it has a message property if I click on   this and I peep this you know pep definition let's  see what going to happen if I pick it you can see   we have this Serv response which contains a flag  and our a message right so that's going to return   to the user okay so um in case it is not you then  return this mod is not but you can customize it   and now return some meaningful message instead  of using this this just for a testing purpose   okay and I call this account service. register  so just going to create the person account and   going to assign a role to the person if an admin  or User it's going to do that so quickly let's   run this but we have to do the one thing after  this we have to create dependency injection in   this before we can run this so quickly program.cs  file and in here we can make a duplicate of this   like this and we going to say I use an account so  I user account and here is an account repository right so account your Petry or user  account repository yes now we are good to go so the app is running and this what I want us  to do I want us to we are not done with the UI so   we navigate to the swaga so we can have access  to the end point and I'll test the registration   and see if going to have access to the service  respond which is taxes account created so we   have this and our email is this our password  is right here this our password and everything   is working click on execute this and let's see  the response in here yeah that's fine you see we   have an account created and now this account here  default this user here is going to be assigned to   an administrator because that's the first person  to register now let's add user one to this now   let's try to also register this we're going to  have the same thing account created right so you   can register multiple um account in here but when  we check this from our object right click on this   system rows let's open view let's open Tok to  information okay so token information is empty   now because we have not created any token yet  click on view data for user account and a user   row right click and I click on view data now  let's go through and see so you can see from   here the user ID one rule ID it is what one user  row user ID two row ID two meaning one for admin   one for user check the account here and you can  see we have ID one that the user the first person   registered is assigned automatically as what  id one to rule ID one check system rowes ID   one is what admin so the first person created  assigned to admin the second one assigned to   what user user controller you see we have the ID  two here is for the user one in here when I check   the rows here ID user two from row two check the  rows Row one is admin row two is user if we want   us to add another one it's going to be assigned  to a user not admin so let's say user two click   on execute and now let's go back again refresh  it table and I'll check it out so if I form the   rows it's going to be the same because you have  two rows in here if I click on this account I'm   going to have three account in now for user two  check the rows I'm going to have um two repeated   twice can see so row id2 going to have this so  it means only one person has been as admin the   rest are going going to be assigned by what rows  not is it rows user row that is it it okay so we   have this working perfectly now let's go back to  the login and try to finish it quickly so we can   push the next video on how to consume this into  our Blazer um web assembly project and a whole lot   of stuff so quickly let's go back to this using  account and we're going to specify the login so   let me just comment this and now from this login I  can just close this save this so here we can check   if this is n we can return mod is empty and that  the same that we did for this response even here   we did not so we can include same so if this mod  is empty here we are returning a service response   so it is not a login response and we say false  mod is empty we can do same in here but since   we're going to use data anotations like data we  don't need to um um use this because definitely   this will not be null but well it's good that you  prepare yourself and keep it maybe in the next   future if something happens you know how to deal  with isn't it preparation is very important so   let's put it in there this must be an async that  is why we have this issue here so make this as an   async and this going to be saved yes so that is  it now if this is not now it t data what are you   going to do we want to check and find user so is  user in a database get from the user account first   or default is user found in there equal to the  you're going to use the email is a person there   if the person is not there return are not found  but in case the person is there then what is the   next thing to do we want to verify the password  that means here we are checking the email and   we have to also check the password we don't want  system to check only email and now send a person   in no we want to also verify the password and  we can we're going to use also the same b.net   and here we using this verify password and now  we need to specify this raw password and now you   need to specify the hash password we got the hash  password from making a query from database and   now we can complete or compare the hash password  in here and it's going to return through so we   are negating it and we are saying if it is false  return invalid is name of password if it is false   if password did not match return this it is not  advisable to return invalid password if is a third   person who's trying to um log into the account is  going to know that yes I have an working email so   now let me try the password again and again again  but as soon as you display invite password you be   confused which one so is the email correct or the  password is incorrect is the password correct or   the username is incorrect then weet confusion okay  so that's fine now we're doing that and here but   in case everything is working then we want to  generate tokens so here I created as one token   one method to handle the two tokens okay so see  we have an assess token we have a refresh token   it's the same method that we going to create now  where from this method we want to we have to add   or update this token but before that let's have  definition for this token so we want to create   this token down here and now with this token we  is going to accept so let me see it's going to   accept just a single line okay a single line we're  going to handle that using this um let me put it   down here okay I believe this is going to make it  simple for you to to read so we using this random   number generator and it is coming from um um um  that is if you check here it is coming from this   cryptography here security. cryptography and  and that's where it's coming from and you can   see we are converting this to B4 string we want  to get the number of B so here for assess token   the buy is going to be 256 and for our um refresh  token is going to be 64 BYT okay so we're going to   specify it anytime I want to create an instance  of this you want to get the value from this you   have to specify in the token bite that we need  okay so we save this peacefully and um we can   now check it out so no let's edit because you're  not done so this generate token here is going to   be a subsidiary of a giant one method and this  method that's the method that I'm going to put   on here so this method we going to say private is  in task and returning an access token as a string   and it's returning a refresh token as string so  it's returning two strings in here and I will say   generate tokens you can see generate tokens so  it's a plural form isn't it now here we create   an assess token by getting the generate tokens  and you know this method is calling what this   is a method we passing a number of B in here and  we need two5 saes for the asset token we need C4   for the refresh token then here we going to verify  token because I was thinking about I try to figure   out and see would there be an instance whereby  this token uh um could be um we could have same   token in one database because you know these  tokens are going to be kept saving there and   now one token for one user so what of in case this  token tries to get the same token maybe the next   sometime and now we have the same token generated  I I do not know whether it's it it uses time to   generate the token it uses the time milliseconds  and NCS and all this stuff if so then we can have   a separate different token all together but I  don't know so maybe later on I'll try to find   out that and and and in the next sub video or the  project maybe I have a better solution to this   but for now I'm trying to check after the token  has been generated I'm trying to check from the   database and I'm see if it is not there already  then you want to add it but in case it is there   then call that method again to get that token  regenerated and I'm just using this y Loop so you   see we have this method as verify token so this  verification token has to get access to database   make some magic and I'll check if um the data or  the token is not there and returns something in   there okay so what are returning we want to have  this simple method on top this also sitting on   top of this or should say beet so let me put it  here now when you check this you see so first of   default to come on the next line and this come on  next line too now when you check this you can see   that this a verified token is returning just a  bu Express that true or false here it accepting   refresh can be null and assess to can also be  null now the second we create a token object as   token info then we are checking if this is not now  refresh token is not now then it means ref toen is   what you want to check because one instance should  be created should be called or one property should   should have a value and that supposed to be  n okay so we say that if this is not equal to   n it means you want to check this refresh token  check through this token info and I'll check if   refresh token is there in case it is not if it is  not return true if it is not the return Force by   this we can simplify this so we can say return  token is n so if it's now it is true if it's   not now it is false it's going to return this to  the user okay and I believe okay so we have this   set the next to do here is we are checking if it  is not refresh toen is not um is empty meaning   assess token is not empty then we also going to  check so we're using else here so that R runs at   a time then we also get an uncheck assess token  is equal to this assess token return this is now   meaning you're going to return true in case this  is now but in case it is not then return false so   this is sitting on top of this get generate token  now token here is also going to use this verified   token to check it over there okay so we have this  verification token method created and aside from   that we also have our verification and and that's  a verify method in here this is a verify method   which going to verify this this is the generate  tokens going to generate the tokens and return   Calling this verification method to verify it and  I'll generate token here to pass in the number of   byes and I'll generate it so with the three lines  of code here we can able to generate our token   peacefully without conflicting or having the same  token generated in the database yes you don't do   that you know maybe you asking yourself why don't  you put everything in and one folder you say one   folder one method well it's it's good that you  create one definition of a method at a time so   here gener token will have one method verify have  one method and maybe check have one method Etc   right so you can put them can be calling them  all the time in one U um method so do not put   everything in one it makes reading very difficult  and it must also be clean and also um um be easy   to read as well so once we have this we have to  save the token okay so in order to save the token   too we have to check is the token already saved  is the user token or the user details have been   saved already maybe the usern name the old token  or the new token that has been added is it there   already or the person the first um um person  loging loging into the application so if so   then we want to check if the person has record  already update it if the person doesn't have any   record then save to the new one and that's what we  need to do in here so I'm going to call a method   and now this method is going to either save  it or update it I'll pass it down here add or   update the token info and I we I'm also calling  a method known as save token save to token info   table I passing the the ID of this the token  and the refresh token this is coming from the   token info if I peep this token info in here can I  have any um token info in instant in here okay so   I'm not having it now when you go to this explor  you go to the um data folder that's where we have   the token info you know we have ID user ID access  token and a refresh token expired date and created   date have the own default days so as soon as the  token is been created the it set an expired date   to one so that's one day aside from one day you  cannot have access to the the token again it has   expired and you cannot use this to make a query or  um do a whole lot of stuff inside this application   so now when we go back to this user account in  here we need to save this provide the user ID   which provide the access token now the refresh  token so we have all this specified but you need   to create this method so here save to token method  it's very simple and we have to also Define it in here so maybe I can put put it down here so  it can also sit on top of all now if you check   this we are making a check and it is accepting  these parameters as user ID access token and now   refresh token as the payload defined here now we  are getting from database from the token info and   now checking if the user ID it is there if user  ID is null it means the person is the new person   and then we can add a new one so you see we are  populating it user ID token to token refresh to   refresh and I will commit it remember we have  the commit method right but in case us is not   now then you know we are updating because as soon  as this get from database it has tracking on so we   can now get the ID and I have all the necessary  data or the the response that we have so we can   now update it in here and after that we need  to also comit it by saving it and we want to   update the date expired date to one so anytime  that we we save or we create a token the person   logs in and a token is being created we want to  increase or we want to add expired date of one   day to the Cur day that person created so if the  person created today then is going to add one day   meaning tomorrow the token must expired right so  if the person doesn't use it tomorrow if he tries   to use a token and that's aspir unless we call  a fresh token to generate a new token for that   user all right so now we have this peacefully  we are going to call this token this method   inside our controller so we need to create an  end point for that let me just close this so we   have these method created and that is what they  are working you know it's going to work trust me   it's going to work okay so because I've tested  it and is working so trust me this is going to   work let me just close all these empty spaces  in here and yes now let's go to the account controller okay so now in here we have to  have our login and it's the same thing as   this we can just make a copy of this this or  we can put what we have very simple one for the login so we can just have it here so  the route here is a login and you know   this returning this should return not a  service response rather it should be a   login response so for this login must be a  login response because that's what we are returning so this must be login response and  now you can see we have this login model and   I'm going to return the response in here and  I return okay with it in case it is null then   return model is null so we are checking and by  all means um the mechanism that youve put in   place this cannot be passed on to this method  where it has no value because we checking it   inside the controller and also checking it inside  theory in here you see we also checking it in here   the first line we also checking it so two checks  hi is the the SC is very tight you cannot pass in   mty model to the method okay so now let's run  this application again and I'll see our login section so we have our app ready and as I said  earlier on we are not working with the UI so we   need to go to the swaga to have access to the API  endpoint interface and that is where we are now   so we're going to log in remember that we have  registered already so as soon as you log in we   must have a token generation from random number  using the the number of base or session of 1256   for the token itself and 64 for the refresh token  now let's see and that's our assess token so try   to try this out and you know we have the same  thing the same thing and at this time around is   an administrator email so click on execute and  let's wait for the response good so can see we   have R flag is through now message here is loging  successful this our token and you see we have our   refresh token yes so that is it now in the next  video we going to talk about how do you consume   this inside the Blazer application so we can  append this token to the header and now we can   restate this uh we can restate our end point so we  cannot call an end point whereby you don't have a   token attached to you know there are some default  endpoint that we cannot protect it example a the   get product so get category because when the  appload it has to get a category to display the   UI whether you are loging you're not loging you  have to able to see this but only if you want to   add category that's administrator issue we have  to provide category you provide a token if you   want to make a payment you have to add um you  have to log you see so with these two occasion   it means authentication very important to that  so what we're going to do here is for all the   get method which is related to the product  display category display we're not going to   protect it by The Rest Post product should be by  the administrator and also um this post category   should be by administrator but when it get to the  add to cut if you want to retrieve cut items we   need your ID isn't it so it must you must have  that so um maybe it's very useful and it's going   to be useful to that as well now I'm going to  end here because you have almost about one one   one hour past and some few minutes so I don't  want to keep this one trying to make this short   and simple as well so so that you can watch all  the time okay and um I want to make it as stress   free too so I'm going to leave here and um maybe  in the next video that's going to be the part nine   I'm going to talk about consuming vase in an API  not in a laser assembly and calling all the STS   the magic STS in it to get the refresh token out  there the authorization and everything working as   expected okay so if you're okay with this please  then don't forget to like this video you can also   by me conf to support it and I'll be very very  happy to receive it and um yeah I'll enjoy it   thank you in advance for doing that I really  appreciate those people who have been doing   this I'm liking the video and do a whole lot  of stuff to support this keep on God bless you

Channel: Netcode-Hub

Views: 913

Keywords: EcommerceApp, BlazorWebAssembly, DotNET8, OnlineShopping, PhoneShop, WebDevelopment, ProgrammingTutorial, AspNetCore, WebAssemblyTutorial, TechLearning, CodingJourney, AppDevelopment, WebDesign, DotNETDevelopment, Ecommerce, Blazor, DotNET, OnlineShop, PhoneApp, WebDev, CodeTutorial, AspNet, TechLearn, Coding, AppDev, UIUX, FullStack, DotNETDev, CSharp, DevTools, Web API, client services, .net 8, .net 8 blazor project, ecommerce, online shop, category repository, optimize code, banner, featured, products, category

Id: fr6t7g8njYw

Length: 73min 9sec (4389 seconds)

Published: Wed Dec 20 2023