.NET 7 Blazor Web Assembly Authentication using Web API and ASP.NET Core Identity

[Music] thank you hello developers welcome back  to this channel in this video we are going to   talk about an interesting topic um that is most  confusing yeah it confused a lot of people but   we are going to discuss that in this video and  that topic is introduction to authentication word   client-side Blazer using web API and asp.net core  identity so I have a video done on authentication   with client-side and server side using  individual accounts so with individual   account it is an inbuilt mechanism that generates  and do everything for us all that you need is to   create a project and now with authentication  type we select an individual account and we   apply migration and we have everything but  what in case you want to go it step by step   so we can assign rows policies and Etc that  is where we need to do it yourself we need   to perform the manual one and that is what we are  going to actually perform here so this particle is   going to be a little bit long so I stay cool  with me once we move on and I'm gonna start   from scratch for you to know step by step of doing  that okay so this video is going to help you a lot   before that let's try to have an overview of  what the Json means maybe the next video I'm   going to cover authorization as well but for now  authentication is what you want to cover here   now when I talk about authentication the question  is what does it mean or what is Authentication   authentication is simply the process of  determining if someone is who he or she claims   to be [Music] one you have an application maybe  you like people to register before the condition   application in a normal sense when registering  an application what you need is your username and   password that is what you can use to log in after  registration the user might or have to log in   so you can see is it the same person who created  an account with us if yes then you can now check   the username and the password that is going to  pass in to the previous one that he used for the   registration now if they correspond then what do  you do you you assign them into your application   that is for your Authentication certain casing  me is providing a mechanism for users to register   and also login with the same credentials used into  your application now when the person is logged in   you could say he or she may have an extra features  when application is open to public there are some   features that are hidden from public as soon as  you log in as a user you may have those features   so this is done by the help of authentication that  is what we are going to talk about in this video   so there's going to be a practical base using the  web assembly project okay a webassembly app now to   do this we have to start with a visual studio and  the karen.net framework that I am using a 7.0 as I   record this video so and we just do 2022 and the  version of The NET Framework is 7.0 let's start   to create a project okay so the launch of visual  studio and now create a project to file new then   project now this project is going to be a web  assembly project so select webassembly project   click on next give it a name there's a location  where you want your project to be found and the   solution name now click on next and now this is  framework.net 7.0 you choose that and you go in   for the asu.net core hosted because it gives us  three projects the client project the API and   also a class Library as I said project so three  projects added together or combined together as   this esp.net core hosted now with authentication  type in the previous video to use the inbuilt one   you go for individual account but I have done  a video on that already so this time around   you're going to have choose none because  you're going to create ourselves and now   click on create so I have a project already and  I've created one already and that is a JWT demo if I run this project this one you can see  now this is the default one that you know   when you create a project you want to create an  application an app with the Blazer assembly you   have this when you run so when you're at this  stage that's the first stage Kudos you're done   now the next thing that you have to do is  quite simple let's see what you have to do   we have to install some packages and that's  what we're going to use for our application   so the question is what are some of the  packages that we want to or we have to install   you will see we have three projects joined  together client projects we have a API   you have a shared project that's a class  Library you're going to work first on the   API project then we go to the class library and  go to the client project okay so with the server   project so that's the API which is the server  we need to install some few packages to enable   us to work now let's go to the solution  Explorer here and on our server project   so there are several project click on dependencies  and now click right click and go to manage nuget   packages now with this naked packages we  need to install the foreign packages so we   need to install microsoft.asp.asp.net core  dot authentication.jwt better so let's see   I think I have installed them yeah already so  let's see so first before we need to install microsoft.aspnetcore.authentication.jwt better  so we need to install this over here now the next   thing that we have to do is we have to install  identity.ui so microsoft.asnet.com so install this   saw that now the next one is we need to  install Entity framework call and that   is the empty framework core over here so  let's install Microsoft dot ND framework   called tools okay dot SQL Server and with install  diagnostic.nt framework core okay so and the last   one if you're not having microsoft.es.net Core  Company component dot webassembly.server but   there is a default management security project  you have this installed already so these are   the ones that you have to install for now with  the rest with the Swatch buckle you can also   install this chargebacker for an API interface  so API UI installed it so asbacker.es.net core   when we get to the use I'll tell you what  you're going to use this for okay so install   swatchback.asnet core and microsoft.nt framework  code.tools microsoft.entifrimacco.sql server microsoft.snetcore.identity.ui and  microsoft.esnet for identity.ng   framework core microsoft.esnet core dot  diagnostic.ng framework core and Microsoft .as netcore.authentication.jwt there so these are the  packages that you need to install so you can just   grab them to the browse Tab and install them  when you are done close that is the next stage   now the next thing to do here  is to set our connection string   so can I see string is what did the type B is  going to use to connect to a database or to create   a database for us that is what the system is going  to use to create a database connection and we have   to do that in the app settings.json file solution  Explorer Now app settings.json file click on   that and now here that's you need to specify our  database connection okay so with this connection   I think I have one here so let's see if we can  actually use that so that is the connection so   we need to pass in a connection to that so here  so you have our connection strengths and you have   the name of our connection default connection a  local a database is DWT demo okay so I learned to   have this database here already so let's put  SQL Server object let me try to delete that I want to delete this database or what I can do  here is maybe I can decide to change the name of   this database but I want it to correspond  with the project name so let's see here   all right so I have this you can open  that and database do I have dwc demo   yeah this one here so let me delete  that close connections and close it all right so obviously we are now having we  have legitability DB so with this I'm going to   delete that I can see it  is it is gone it is no more   um here okay so once you have this that's the name  for the type is JWT demo that's a database name   all right and now you have trusted connection  is set to true and plus several certificate   we also set it through make sure you have  this comma to separate this from that so   you don't get any error in it it's good so if  you are done save it and now we are good to   go now the next step that you do here is to  set up an identity database and in order to   do that you have to create our application DB  contest now that application DB content this   is going to inherit from Identity DB contest  now in this identity DB contest has all the   mechanism that we need to create a database tables  so let's do that close this so listen Explorer now   we have to create a folder name as data so right  click and add a folder that's going to be data now this data let's create a class  that is application DB contest so class   and so application DB contest and just copy this nine here application DB contest  so I can just copy this from here paste it like this okay so now with  this the package that we installed   that is where it's coming from so  when you take off this let's see   and we need to copy this as well we're gonna  have errors here so Control Plus period as a   DOT we have to use anti-famil core okay and this  this is gone now with these two with DB contest   option Control Plus period we have to use the  cemented framework core and this is also gone   so we need to use these two packages that we  installed earlier on as a nuget package to   set up this DB contest so this DB contest here I  identity DB contest has all the columns all the   the the table that's going to use in a connection  so for now we are not specifying any databases   because we have a database tables defaultly set  in the identity baby contest let's save this okay so once you have this set the next  thing that we can actually do here is   to register the database Connection in  the program.cs file so let's go there   program.cs file that's another server project  and that's what you have to do first we have to   register the database connection and program.ts  file let's register the database connection so we   can do that by using this line of code to register  so register this so you see we are even we are   using builder.services.ad R DB contest you pass in  the application DB contest class we just created   and the passing use what SQL Server so this is  coming from Identity microsoft.as net core Dot   ask your server so that's the package  that you're using over here and now we   get the connection string from the the app  settings.json file that we created remember   that we created the connection known as default  connection so we read the connection over here   okay so once you're done we have to add result  identity user as well remember that we added   from the um that the application DB contest We  inherited from the identity a DB contest so we   have to also register that service over here and  to do that we can just use this to register that and build that.services okay so without its  services dots add default identity you pass   an identity user okay then here we use that  into framework stock so we can use this to   register that identity DB contest now once you  are done with this we are good to go what you   can do here is to perform a database migration so  let's save this close this then let's close this wow it's not closing so let's see all  right so it is gone so let's Click On   Tools now we get package manager and click on  package manager console now we need to perform   database migration now database migration  is going to be used or is going to run the   ID framework order to run the necessary queries  that it needs to generate um the migration file   and as soon as you perform after the type  base you're going to run that queries as an   SQL query and create database and the tables for  us so to do that you pass an add Dash migration   now the name of the migration is  let's say it's initial then Dash o so where do you want to store this migration  further so we give it a data that is   folder name as data we have that folder already  so and the name that you want to give it to that   migration is what migration so let's use on the  enter key now we wait for all the migration to   be done as you can see because I see that I'm  going to run that after that we have to update   the database so we update the database to run  that query file so you can see we have the   migration file generated and  you can see it is done so update database so it is going to run necessary  queries you need to create the tables or   to run the queries in the migration file so  that's the initial migration file so it also   has to build it and I run the query so we  wait for it to finish then we can move on foreign object or click on The View Tab  and now you see SQL Server object   here and SQL Server object now let's refresh this   and here let's open the database so we can see we  have uwc demo so open that open tables now we see   we have all the necessary data base table here  and this was introduced so this was created by   the ef4 and it took it from the identity contest  specify in Africa's delivery contest class okay   so once you're done with the next thing yes you  have to enable the authentication or we have to   register the authentication Service so to do that  let's close this click on solution Explorer now   and program.cs file we have to register and  create program here so this is the next line   let's register that and that's what you need to  use to register so register authentication Service   we use this raised authentication Service so we  are using the datability very default and we have   right date if you are set it through audience and  a lifetime so with this we're going to understand   this issue is a once and then audience the  receiver and the lifetime in the date today that   you want the authentication of the token to get  expired and this the secret key that we're going   to use so all these key features we are going to  certify them inside the app settings.json okay   so once you have this set okay so that is it's  once you have this set the next thing that you   can actually do here is we have to set up this  key so we can actually use them now remember that   as soon as you see a builder that configuration  we are going in for the app settings.json file   so let's set that this keys so in that that's the  acceptance this is what we need to set up in that   so let's compare this and in the upset  thing so let's close this and well let's   save this first solution Explorer my  app settings.json the next line here   let's paste it here now make sure you have a  comma separate the next from the already ones so   obviously we have the security key now there's a  random key must not be shared now this key here it   can be dynamic you can change it to any text that  you want buys you more than 16 characters okay   and this is the issue and this is the audience  so let's look at localhost that's a server and   the expired this is what one so when you create a  token expired day is one so when they pass it has   a spot you can increase this to 234 and you can  also add hours minute seconds milliseconds and   Etc you can add them over here okay so we  have this let's save this now after saving   the next thing that we can actually do here is we  have to enable authentication middleware pipeline   so how can we do that and this can be done  inside the application that the program.cs   file so here we have to enable them here and  how do you enable them you can just grab the   code and that is very simple thing there are two  lines of code app.use authentication and app.use   authorization so these are the middleware  pipeline that we need to enable them here okay so these are the two things that we  need to so this is the first authentication   must come first before authorization because  user must log in before you can assign row to   the user so we must have it in order as you  see here save this and now let's close that so yeah it is gone okay so what you have  to do here is you have to add a controller   to create an account so let's  create an account controller   because somebody wants to register it needs  a controller to be register so let's see   controller right click on controller add  new controller and on this controller is   going to select an API mt1 and the name is  going to be account controller so let's add account controller now with this account  controller what I think that you need to do   first so I have read account controller and the  first thing is you have to create a Constructor   and inject these services so I use that manager  service so let's create a controller here   not to create a Constructor I can  just click on this Control Plus   period and you can now go in for Generate  Constructor here okay so I have mine here   and I'll paste it here so you can see  we have user manager and you create   we inject it over here and we initialize it so you  can actually use this user manager henceforce okay   so now we have this set what we can do next  is let's see if I want to create an account   how am I going to do it that is the next thing  so it's going to be a push a push request and   now this post request there is a method which  we're going to use to create this account   as you can see from here post request and the name  is post okay unless you can make it that create account or you can use yeah sign up or create  account socket now we need to use a register   model this model is coming from the user so  think that we need to take from the user we   use this to hold that and we start in there we  create a variable for identity user then we pass   design name to email and email to email aside from  that we create the identity by getting the exact   password and getting user email and username  if it's successful we return this success is   equal to true but if it is not then restore the  errors here and return the errors through this   result okay so once you have this let's get going  and create that result so to do that we have to   create that in the shared folder I like the shared  folder so right click on the shared project add   let's add a new folder as models so here is  models and nowadays models let's go in there   and create that so we have to create register  model first so register model first the reason   why we are creating those models in the set we are  just shared means anything found between in that   between or within that shared project can be used  by the client side and the server side as well so   that's why we are passing it into the shed as  an investor one so this is a register model   so let's copy this register model and now in  here let's create a class in as add new class   and register model click on ADD and this I think  that we need to set it up for the user so let's   copy this and these are the properties that we  need over here now this is going to be public   okay so we need email okay we need password we  need confirm password now confirm password we   compare with the password and see if they  are equal so that's what we need is we use   this attribute to compare attribute now it is  a display name confirm password I need the data   type as password so while you're having this  errors control plus this Control Plus period   let's use component dot annotation so there's  component model.data annotations to have all   these attributes work now here if you want the  strength the the string length so you can pass   in just two or three characters now take note  maximum is 100 and minimum is six so it should   be 7 up to 99 or 100 and you have email so email  to this mechanism this attribute also check if   you have that assemble in it so these are the  requirements all these they are required so   we need to provide them before you can move on  with it okay so once you have this let's save   that and now you have to create a registration  result so you can find a registration results   over here so that is we have only two properties  in and that's what you're going to use   so right click on this list and class and the name  is registration results this resisting results we   need to pass in only these two properties that's  going to be an output to render if the process is   success or not so you have to Boolean successful  so you want to return true or false now you have   an error another string of iron number of errors  or list of Errors so characters we can pass in   the the test that you want to display to user  okay so we are done with this we can now close   this you can close this and now here Control Plus  period let's include the models and we are good   to go so this is solved now now let's test this  and see if this is working okay so we have the   registration and it is not working but before  we can actually test this what are the things   that you need to do you know we have to we want to  test an API so we can you have to use Postman or   um yeah Postman but since I'm not having  Postman here or we don't want to use that   you can also install the Swatch backup and you  can use the UI that's the Swagger UI to set uh   to post message to this and check at database  and see if what you provided has been stored   okay so now remember that we installed the  Swatch backward to the dependencies folder   now let's come here and I use that so  in order to use that let's close this   so let's see let's cover now click on program.cs  file now in here we can use builder.services   .services so that and and another Swagger gen  close it and now you have to use configure   the middleware pipeline and we can use that  right here so let's see so up dot use Swagger so use Swagger and the next  one is app.use Swagger UI   so that is it now let's save this and let's see  if application is going to refresh itself and   we test the API to see if account can be created  so let's click on this load it again that means   well let's wait for it to reload then we we see  if we can create the application or the account [Music]   all right so now since we haven't tackled  the client section yet we can we gonna you're   not going to see anything unless the one's  default one let's navigate to the Swagger so   we navigate to Swagger so slash Swagger now  let's wait for the Swagger to open now you   can see we have an account so let's click on this  and try it out so you have a default one as email   let's maintain this password as a user at one two  three so let's copy this confirm password okay so   if you decide to take off one less as you can see  now they are not equal so what now there here is   the password I can do not match and when decide to  make it more than so let's say we have this thread   and let's delete this let's delete this let's work  it should be the minimum is six and the maximum is   hundred see what happened the password must be at  least six and maximum that's what 100 so it means   you have to add user at one two three making it  six or seven so user at one two three you can now   go ahead and register so we see as soon as you get  it let's see what happens here you're gonna have   um success so successful equal to true and there's  no error let's check a database and see so and   database click on that now right click on the ASP  net users right click and then go to view data now let's see so we see what registered has not  been captured over here so it means registration   is what it success we are done with that let's  try tackle with the login so how do you log in   let's close this and let's close place as  well okay so let's add a login controller   so the same place where you have the controller  right click now let's add add new controller   and now this is an API empty and here log  in controller so it is plugin controller   now this login controller let's  see what we can actually set up in so login controller and the first  thing that we need to do is we   have to create a Constructor and inject  this services so you create a computer   over here and I will inject the eye  configuration and the sign images we inject them here and initialize them here  okay now we are good to go the next thing that   we can actually do here is this is the login so  when the data has been sent what should happen   from the user now this login mode is coming from  the user when the user pass or passes this data   what should happen here now this is the first  thing is we store it the password we check if   you correspond what you have already now if the  success we even not success return bad request and   this is the error so you send name and password  are invalid now if it is it is found then we we   just create a claims then we just pass in the  name as login.email okay and the lesson is to   create a key to get a key from the setup settings  that you JW to use security key aside from that   we get the credentials become vet this as an hmac  sha-256 as the encryption algorithm with the key   that you have we said the expiry date Maxi have  a reason this you can decide to use what and you   see we have a lot over here so in system.today.now  now like we see we have it's not a passing ad we   have days hours microseconds millisecond minute  month seconds you have year okay week and Etc but   if you have a reason day so add this then here  we convert to integer what we have over the DWT   expiry date that is one as we set it over there as  one then we generate a token from the issuer the   audience claims expired date and the credential  then return success and return the token being   generated for that specific user driver is simple  now let's save this but as you can see from here   we need this login model so let's copy this let's  go ahead in a shared project let's create a login   model so right click and last now it's going  to be login model and nowadays but login model   this is what we need so we have a login login  model we need let's use these two right here so we need this and that's a required  and email so here you can just specify   that supposed to be an email type if you check if   we have the address in okay and and that  is also let's set this also as data type beta type and we can set this as so data type Dot  and here is password okay so this password all   right now let's save the second two plus period  you can remove unnecessary event we have simple   one now once you have this um let's close this and  also create the login with response on the result   so as you can see from here we have this login  result let's copy this as well and a good solution   disable the right click let's add class and that's  the login result and this login results to we need   this let's copy this and in here we can now  paste them here so we need um successful   that's a brilliant type we have errors and we  have this token so it is going to be a public this public is save that okay now you can  also close this now in the controller let's   Control Plus period let's use what we have  they are ready so you have to let's see   now let's go back to the that's the login model  now it is antenna so let's set this to public   do it let's save that now we can now close it  now Control Plus period we can now use these   models and we have it done okay so let's save  this now we are done with the login Okay so   once you're done with the login when the next  thing to do here is we have to work at the   client side let's try the login and see so you  close this now in here let's see with a login so Less on application again and see what  we have now like that so in application   you can now click on this again  let's wait for the refresh to be done okay so login now let's click on  login and try this out username at   example.com and the password that  we use is user at one two three   so let's rest let's make it one two  execute it and let's see what we have now so we see username and password  are invalid and the token is now   successful is going to force so let's  pass the correct one three execute base now you can see we have our token we have the  error is now successful it's got it through so   I log into system is now working now we need  to configure the client side okay and that's   what you need to do now to have this system  work so our API is active and it is working   perfectly okay so in our client side the first  thing to do in a client side is to set up so   you can now close the server and I'll close  the shade because we are done with them now   you can now open the client project now let's  click on the app.reza we need to specify I need   to set up the authentication State provider  here so in that in the app settings app.reza   that's what we can do we have it right here  let's see if okay so we can now use this let's copy this and the old one  that we have we can now comment this   now here this is what you're using we're using  the cascading and this cascading works with   authentication State provider okay so it is  going to authenticate the design check so   when they put an application load the first time  they're going to check is authenticated or not   so that's the first thing to to go about  because they said this contains the route   the routing control class period so let's use  this over here and it is solved now so that's   using this or you can now you can cut this  over here go to the import.razer let's see   if we place it right here is it going to work  yes it is so you can see it's working now okay   maybe you can decide to write something to the  console if it is not indicated now let's see if   you can do that maybe this code is going to help  us to check if it is not indicated you can write   to the console then we can now check so we say if  it's authenticated then that's what you want to do   let's see okay so if you don't get it then  we say the username is on k105 if it is not   this is not indicated so save this and  now let's refresh our page so in here let's see so let's take out the Swagger  now let's do the application Let's uh   see so this loading [Music] Plus run  this again okay so another is loading my half Arrow here so right click  here let's go to inspect element so let's wait for the response okay so now we have an error here because it is  saying that there's no registered service okay so   when we are done we're gonna see if it is actually  working or not that is the the here that the the   or the statement that we specified here as soon as  we log in you're going to see a console written it   is authenticated if you're not you're going to see  this okay so let's move on with that at the end   you're going to see the output or the outcome of  that all right so the next thing that we have to   do is we have to create a custom authentication  State provider the linkages data provider is   provided by Microsoft before Lee is about in  case you want to arrive that it is possible   so that's going to create a custom one and the  name that you're going to use here it is known as custom authentication State provider meaning  we've customized that to our own way okay   so how I'm going to do that you first have  to create a folder and let's say you can   recreate a folder and name it as helper or  utility yeah anyway so right click on the   client project and new folder let's make that  utility so utility okay now this utility we   have to create a class for that and that's  what I'm going to use so instead of this I'm gonna use last couple of days and  here right click and let's create a class   and a class and this class  I'm going to name it as custom so custom authentication State provider  so let's create that now in this we have   to create a class as a Constructor and inject  some services so this is a Constructor that   you want to create and these are the  services that we need so we need this   so custom over here okay so now the first  thing that you have to also do is we have   to install Blazer the local storage okay so  with this let's go to solution Explorer and now and the dependencies within the client project  right click and then click on manage nuget package   now it isn't a get package let's click on  this I have installed these two already so   you have to install them yourself you can just  grab them to the browser and install them now   that is the blizzard locator storage this by  crescenting for provide access to look after it   in this application and we need to also install  microsoft.esnet core component.authorization   that's where we can get authentication State  Provider from so we need to install these two   packages over there when we are done you can now  close this good and now we are done with that okay   so let's see let's close that with the import to  Let's close it now in here what we can do here is   we have to inherit this from the authentication  State provider so let's inherit this over here okay so now we inject an HTTP client  in a local storage service then we   initialize them over here okay so the  next thing that you can actually do is also very simple let's get the authentication  state to provide that there's a method   in between this and casing State provider so  when you click on this right click and go to   go to definition now it has an increasing State  provider that's a get Authentication state async   so you want to override this method okay and let's  do that so let's close this and in the code this   is what we are doing so this method is going to  override that and get us the state of that user   is he registered is authenticated or not so even  indicated then we're going to pass in the token   but if it's not then we're going to return now as  an anonymous and that's what you have been getting   over here the identification type here and that  one will pass is the better and you pass it into   the default HTTP request header okay and this is a  token if it is authenticated but if it is not then   watch as obviously we have we're going to save  the token from the locals to it then we check   if it is now do this now then what you have to  do we return new one meaning nothing fun so that   uses Anonymous but in case it is found then we  plug the token as a bearer as a header from the   HTTP request status request okay so that's going  to be there better as authentication type we pass   in the token then we want to decrypt this token  so you pass it to this method and now the type   is DWT that is a Json web talking okay so when  we get the token stored in the local storage   let's see the next thing to do another  thing to do here is we have to check   let's copy this and here so my user as an  authenticated so that's going to check if   everything is all right I'm going to Mark a user  as authenticated and that is what we are using   over here they will notify the authentication  State aside from that when it just locks out   you can now imagine the user as log out and  you provide empty for the better and set the   authentication State as what as new that's  a claim to my claims Principle as new claims   identity so meaning there is no data there's  no data related to that specific user browsing   the app currently okay so um that is that now  the next thing this is a method that you need   to create so you're going to create a next  stage and the next one that we have to do is   the method to convert the token into the three  stages now this this method is a board from   Steve Sanderson okay so this  method actually digests the   the token into three sections and that is what  we're going to use to get the claims from that   token and we can just use that here so as you  can see past claims on DWT this is a little bit   of the token coming in then we split into weight  we decide to get the rows if it is only one row   we get it but if it is more than one then we  look through the rows and store them and so   that's why there's one room you start when you  buy you this more than two if the arrow starts   with this it means it is more than one they're  going to look through the rows and I'll store   them over here the claims dot add going to add  it today okay and now here is part basic forward   that pattern so the same thing you're going  to get that to check if it's equal to or if   not then you're going to pick any of this from  the token now this token is added all these keys   are added to the Token automatically as soon as  it gets created so in order to check whether the   token has one equals iot equals and there must  be a method and this method is used to check   that at the end of the day we're going to return  this from City from base64 strength converted to   base default spring then return it to this past  claims okay so when you call it over here you're   going to get it that indication state of that  person okay so this uh this code here at 1120   search for Steve Sanderson you can now see this  because it is actually it is visible and it's   common people use it all the time because  it's very helpful as well okay so that is   it for the login and once you're done with this  the next thing that we can actually do here is   we have to create a services to render  to render this visited provider and what   the user is going to pass in so let's save this  close this and unless so it's next let's create   a folder and that's going to be a service so  add new folder and let's name it at service   so with this service we need to create an  eye authentication that's an interface and   implementation class so service and   new item and interface the name is I  the I stand for interface we add that now the next thing that we can actually do is  let's see what we can do so we have to create   this method and that's what we're going to  use for login logout and create account so   this is public so you see we have tags now  remember that we created this register result   and this model is inside the set folder I know  that you're using the same thing over here so   that's why we say when you pass a model into  or in the set project you can use it in both   this side as a client side or the server side  okay so as you can see we have a register login   and log out okay so we can now save this  now let's go to let's go to implementation   class and now with implementation class it's  going to be the hot service so let's copy this   let's go to the service folder right click let's  add a class and now this class is going to be   odd service so this odd service should inherit  from the eye service so it's inherited from this so it's inherited from this one  now we have to create [Music]   you have to create a Constructor and pass and  neutralize these services so let's do that and   in here okay so we have we are creating a HTTP  client identification State provider and I look   at storage service we initialize them here as you  can see then the lesson that we can do is [Music]   when a person registers what do you want  to do when you called out Education Service   and I'm passing the model so as you can see  from here now register come in the model now   there is a the more that it is coming in  with restore as a result then record post   as async so API slash account and then what  the mode that we are selling is what that's   a registered model API and I can remember  the account is a controller that me just   created now we check if it is not because  if the sunset code is not going to true then   return error okay bye with it if it is true then  you want to say I can't create it successfully   okay now let's see with the login as well so when  the person tries to log in what do you want to do   so this method is going to help us with the  login so let's copy this and now with the login   that's what you are doing the login over here so  coming from the login model and we first realize   it then we post it to API login so login that is a  controller now the type is application suggestion   file now we serialize it and read the content over  here now when you read and it is Success then we   set the item to look after just odd token then  is there talking that you want to use but if it   is not then return the result okay because return  the output over here and we set the test the token   as the request header to the HTTP request header  so we set the typist Vera and this is the token   okay so with this authentication State provider  what we did was a custom so there's a custom provide as a Control Plus period let's  use the utility for that we just created   and that is exactly what we are doing here  now the last method that you need to do is   the log out so when the exact location log  out what you want to do you want to set the   location now so look after you move the item  name as autocan and let's copy this reset   to attend Anonymous then we set the header to now  so not going to be any header you set it to now so   instead of having the token as a header here when  the person logs in when the person logs out we set   the header to now alright now we are we are good  to go so we are almost done with authentication   um now what you have to do here is you have to  create our register component so let's close this   and in a code let's try to create a registration  component and now with this um actually I'll leave   this I'll leave this code at a GitHub link so  this could won't be available okay so if you   want to grab the content here it's going to be  available as well so let's see so listen as far   now in our pages right click let's add a new Razer  component and it's going to be register [Music]   so I register and this register can now just copy  this and now we paste it here okay so with this   registration first let's import this Control Plus  period let's import the services or we can now cut   this and now go to save this go to the import.reza  and let's place it there because so we can reuse   globally in all the sessions are the component  that you're going to be using so let's import   it here let's save this close that okay and you  have it here all right so as you can see from   here we have we are showing errors if there's  error displays over here and we create a div   class this is the Class Type now you create this  is a bootstrap okay this is the card card body and   Etc so please enter your details and we have edit  form the model is register model when everything   is successful we want to handle with this event  under registration when there is any error display   them over here and these are going for email  password and confirm password that is it and   you have the submit button nowadays register model  so yeah Control Plus period so let's let's include the models so we include models over here  and nowadays models too you can now cut this   and then go to the import so as I import yeah so you can go to the  import and now we can place them here too   okay so where you start you're good to go so you  create an object out of the arrays that the model   we show we set an error same result then there's  a list to hold the errors then here we called with   the away keyword recalled when the the method is  called we call the register service or method you   pass in this register model OKAY the results will  determine if successful retention login but if it   is not then we retain the results or we show the  output to the user that's very simple isn't it   so that's the registration okay now the next  thing that you want to do is let's see so in   we have to also create a login component and  that's what we're going to use for the login   so login components let's create a component as  login so pages right click and I'll go to add   raise that component and now  this is going to be login.razer so login dot Razer now with this login let's see  what you're gonna do here do I have login here   I think I have fixed yeah that is a  login so I just copy this and yeah   don't worry with the code I'm going to make it  available as well okay so don't worry now we're   using the odd service and navigation manager we  also check if there's errors if there's not we   write it's submitted you call this method we  display errors over here and raising email we   need email and password there's a submit button  okay so we have an object out of the login model   that they are passing in we show errors there's a  method when the method is called we call the list   login method to be successful return to the  home page if it is not return the error okay   now the last one here is you have to create the  logout so let's create the logout component so   the logout components let's see solution  Pages add result component and now here   we're going to collect as plug out so log  out now with this log out let's see this   log out control copy base and in here let's  paste this year so we need a hot Service as   well now when it is logger when this button is  clicked and the page initialize this thing you   want to call this odd service and log out then  return to the home page okay so this returns   to the home page when it is logged out go to the  home page you save that now let's close all this okay so once you have the log out we have to  create a login display and that is the the   component display on top either login or log out  and register as well so let's create a component   known as login display that is over here so I'm  gonna create a new component and let's add this   that is a add new result component  is going to be login display so login   display now with this login display you want to  use this as a login display so that's the oven   it is authorized you want to display the user's  name if it is and we display log out and we use   this logout method okay to call for this but when  it is not it is not authorized then we want to   display register and log in so Control Plus period  let's see what we have to use Ctrl class period let's see authorized View  Control Plus period on authorized let's see what we need to use over  here so we can just skip these errors okay so let's save this now let's close this and  then let's go back again login display Control   Plus all right so yeah they are gone so let's  save this and I can now close this okay so once   you have all this set the we have to update  the main layout component so let's update it   main layout another shared folder main layout and  now in here let's use login display component that   we created so login display maybe displayed over  here you save it you can now close that and the   last thing to do here is you have to register  the services that's the authentication State   Provider Services that we created as a customized  one we have to also create a dependency injection   between the iot service and the authentication  Service classes that you created and you have   to register the local storage as well so let's do  that and the program.cs file so from the Cs file   this is what we need to do and the app settings  program.ts file let's see what we have to do okay so let's see okay so let's add this first that's a local  storage and uh so in here let's add these   two so Services dot add Blazer local storage  you have to add that and add a tradition cost   remember remember that this program.cs file it is  from the client not the server okay the API now   you have to create a dependency injection so you  can create dependent injection using this against   the education State provider and this is not API  rather it's going to be a custom State provider   so that's what we need to control plus  period and you have to use utility folder   and now the next thing that we can do  here is you can also add the the last   one that is the hot service so let's  also create the dependency injection okay so all what you are trying to say here is  these are the dependents these are the main ones   these are the interfaces okay when this interface  are called that's the authenticity provider and   the eye art service when they are called you want  to create an instance of this classes and now   send them here when a method is covered in this  interface the definition is found in this so when   instance are created when a method is called it  can be found in the instance that's very simple   I believe this is clear so that's what we need to  do now let's save this and let's build application   and now we are good to go now so let's see so  it is reloading we wait once it gets Reloaded so there's error here now let's see  where these errors are coming from   so let's see okay so you have to take off one let's run it again [Music] okay so you can see that we are in the home  page now let's go to inspect element [Music]   so let's close all these steps now console  and I can see that when you check here this request an authentication new authenticated  user okay so it's music here it is not   authenticated as you can see so this requirements  were not met uh deny any multitasking requirements   okay so let's see let's try to login remember that  you've created an account already so let's login   now use this example not example we use that  one as a user so user and the password is user   at one two three now let's before we submit  that click on Flex data and now go to network   now there's a controller click on this controller  and now with the header let's see so you can   see the header you have for the cookies we're  gonna have random application the better token   so let's go to the login and now let's try  to login again so user at one two three   by passing one two unless what happens   so I'm passing one two so let's see if we're  gonna have any response okay see we have username   and password are not valid and you see there's no  cookie here again there's a cookie but there's no   token so when I click on this login we still have  the same book here but we have no no what token   and that is your post method and I decided to us  from the header okay let's pass in the correct   once let's add the three submit let's see what  we're gonna have here so we see you have hello you   have the username on top and we have to log out  now as soon as I click on that let's see so let's   fresh data and this header and you see we have  authorization we have this bar token on top here   right now let's go to application and now let's  click on local storage and location we have all   token that's the name that we use and it is a  token now this token must correspond it starts   with ey and end at HK let's see with what we have  at the header so Network header it ends with each   key and starts with ey so it's key so that is it  so it means our integration is working now let's   try to log out and see so if I log out let's go  to application now look after it you will see it   is gone it's deleted now if I click on fresh data  let's go to network forecast now you can see we   have only cookie bear talking it's off all right  so that is it for the authentication now um with   this we are done with authentication registration  and logging into application but next thing that's   going to talk about is going to be row based  authentication or rule-based authorization if   I want to when I'm here if I sign in as a normal  user what are the features I'm going to get if I   assign as administrator what are the features I'm  gonna get we're going to talk about that maybe in   the next video so I also leave the link uh through  a GitHub um another description so you can get all   the source code for this project and maybe if  you want to compare with yours or check some   things one or two things in it it's possible it's  going to be available as well can you just give   me a thumbs up and subscribe if you like what  I'm doing and if you have any question to you   don't forget you can just pass it back there and  we're going to try together to help you solve it   as well thank you so much for watching I'm gonna  catch you up in the next video [Music] thank you

Channel: Code-Academy

Views: 6,166

Keywords: blazor, customize bloazor loading, animation, spinner, customize spinner, asp.net core blazor, orm, object relational mapper, navigation lock, blazor component, navigation lock component, automapper. dto, profile, creatring auto mapper project, controller, api, employee controller, efcore relationships, onetoone, onetomany, manytomany, crud, sqlserver, crud operations, sqlite database, authentication, core identity, asp.net core identity, web api

Id: wvkhwYHMVj4

Length: 66min 50sec (4010 seconds)

Published: Wed Feb 22 2023