Consume .NET 8 JWT Authentication With Roles Authorization With Identity Manager in Blazor Wasm 🔒🚀

hi everyone welcome back to net code H Channel  I am Frederick and I'm happy to meet you today   in this video we're going to talk about  how to consume net8 web API and that is   a JWT authentication with identity manager in web  assembly that is a Blazer web assembly I've made a   video talking about how to create this custom JWT  authentication and net8 web API and I going to be   the part two of it and this going to consume this  API in the web assembly so this is what we did in   the previous video we created an account and now  when you log in we have to add the authorization   or the API key to the header before this can grant  you the access to view any of the weather forecast   here we also added R so admin only can see this  and our user only can see this as well for now   if I decide to um run this or check this out I'm  going to have 401 minut unauthorized but unless I   log in or if I decide to log in it's going to  work I believe you've watched the first video   If you haven't please check the description and it  will be available okay so quickly let's go through   the Practical aspect now with the login we have  to provide our credentials so user at one two 3   so this is our credentials let's log in here now  this image related to an admin in the previous   video we saw um how to when you're registering  we added this as an administrator so this has we   have a token over here and the row is an admin as  well has been added so we can just grab this then   we have to authorize this using the bearer then  let's Pac in and authorize this after doing this   we can now go ahead and run this execute this  and you're going to have access to the response   in here you can see that's added um this to the  header authorization and that's a beer it is a   token that we just provided but if you decide  to check the client one this is going to be   the user it tell you 43 that is forbidden because  the row here it is not a user row it is rather an   admin so this time around you're going to look  at here we using a swager to test our app out   we're going to use Blazer assembly to consume this  API and you're going to be using the same weather   forecast to display the results in here so admin  will have 10 weather forecast as a list whereas   the user also have five as indicated earlier  on so quickly let's jump right into this but   before we go into the Practical aspect thank you  so much for taking time to watch video from net   code hop Channel and also um stick around to the  end of this because you're going to love this as   well click on the notification icon so you never  miss out any of our upcoming content I know by   all means you subscribed to this channel if you  haven't done so then do it now if you also enjoy   this video please um give this video a thumbs up  as well I offer training session for those who   are interested in net Technologies talking about  blazer with blazer assembly and a blazer server.   net Mar and Mar Blazer hybrid I have an email  at the video description so you can hook me up   through that mail also at the end of this I have  to I just put this code or this source code to get   up so check the video description and you have a  link to your clone so you can um look at it and   I'll review it any time all right so I'm going to  close this up now this what what we did I don't   have time to go through all this but actually  this is a controller we have authoriz attribute   protected we created an account controller and  that is this one and this gives us the access to   register and our login so you can have access to  our token now when you go to this repository that   we created we using um user manager because  you're identity manager here so we use this   to check our database tables to find out the  user info and also to assign row okay and I   reg generate our own token from this side and I  return it to the user this all simple thing that   we did now let's quickly so I'm going to close all  this and close all this now I'm going to add a web   assembly project to this so we created an web API  and also we have a sh class Library let's add a   we assembly project to this so add new project  and we're going to choose Blazer we assembly so   Blazer we assembly that is this one and here  I'm going to type in Blazer web assembly app so the version here must be  net8 as you know let's click on create so while this is being created and  added what we need to do here is we need to   install component or authorization package so  we can have access to this um authentication   State provider authorized view component  and Etc all right so let's do that from   the web assembly right click on dependencies  and I'll managing to get packages click on   that and now under the search options maybe  you can restore this under the search option   here let's click on the browse Tab and now  let's have component. authorization I have it already so that is this one microsoft. as net.   component. authorization so make sure  you install it in the latest version of 8.0 now once this is done we also need to  install um Blazer local story so we can um   push the code that is a token to local  to keep it so let's have Blazer local storage and that is this one so let's install this two all right so it is done and  set let's close this let's go to   the program. ts5 and register this B  local storage so we can do that from   down here and we're going to say  builder. Services add Blazer Lo storage yeah so better services. add Blazer  loc storage so we have to add this and also   we need to add builder. services do add  authorization call so we can have access   to our authentication well okay so now we  have this we need to create our custom or   state so let's create a folder in this  let's name it as authentication so this   authentication now with this authentication  let's create a custom authentication state   so this is going to be a class I'm going  to say this is custom authentication State provider so this custom one is going to inherit  from this authentication State provider   now while this is done you go to the same  program. CS file and now let's register   this in here so the services. add scope and  on this we going to say authentication State provider then we need to specify a custom oate  provider then so this what we need to do let's   save it we have an error here because you have not  inherited from this oate provider so you can just   copy this we go to our custom and in here let's  inherit from this save that and control period we   can implement the abstract class in here and now  when you check here we see that issue is solved   now okay so we have this get authentication State  and that is first we're going to do we're going   to have a look at get it check at local stage  and see if there's any token in there then try   to decrypt it and now use it but in case you do  not have any then tell the person that you're   not authenticated so first of all we have to  create an instance of a claim principal which   which contains an uh empty us identity okay so we  can return anytime there's an error or we did not   find any um token in the local storage all right  so let me clear this so in here L by the use of   this primary Constructor we can inject our local s  here and now this primary Constructor is available   in I keep saying C vers 12 and it it inject this  to the page because if the if this is going to be   used available in the whole body then we can put  it in the primary Constructor here because going   to make it accessible everywhere within this um  class body all right so now we have this let's   create an empty um this claim principal which has  now identity so we have this as an M now the first   to do here is we are going to get it from the  local storage now let's see so as soon the page   loads let's cover this with try catch block so  I'm going to copy this from here and this what   we're going to do first so let's this going to  be an async now what we do here first is we're   going to check look storage and now get this  key as token in case we do not find okay that   is when this string here it is empty now wi space  you want to return this authentication State as   Anonymous meaning there's nothing in there user  is not registered user is anonymous okay so it's   going to return but in case there something there  then we want to get claims from that token so   this token we want to get the claims from it and  now from that claims we going to pass the claims   in here you see that you have these claims we set  claims by passing in these claims okay to this set   claim method and aside from that as soon as we get  the claims as you can see we are storing it here   and now we can retire authentication State this  claim is going to contain the claim that you set   during the API registration that's when creating  the API and registering the API you know that we   set a claim as a user ID username email and Al the  user rle so these are the RADS that you're going   to return or keep in the local storage and the  same road that's we are extrating and I'll set it   to the authentication state so you can broadcast  this anywhere in the application to check if the   is authenticated or not and also to get a row  from that identity of a specific user okay now   we have this here this is just an um an abstract  or it's a static class that you created to handle   this aspect so let's create this in here and  this going to be let's copy this we're going to   create that inside um our shared project and maybe  here we have a dto maybe you can create a folder here so let's add a new folder  and I let's make this as maybe   a generic that's what has come to my mind so generics maybe I can add model so generic  model well so in here let's um create this   class and this is going to be a static class so  generic and now here we're going to have public static okay so this means that the instance of  this class going be created once and going to be   stored and I'll be using it all over so let's have  the first method and if reach the custom aate we   need to get claims from this so we have a method  known as a get claims from token and also we   also have the same method as set claim set claim  principle isn't it so let's get these two methods   so let's go to this generic and now in here we  have a method here as this a public static so is   return a claim principal and now we return user  session remember this session is the model that   we created if I peep this it has the properties  that we need ID name email and our row so we   created that in the first video and now we are rur  so when you call this method you must pass in this   model so this instance of this which contains the  various properties for values for this so we see   weing this an ID name email and on the row and at  the type here we give it a name as JW so that JWT   right so we have this let's go to custom so here  control period we can inject this in here so let's   add a reference to this and this going to be well  okay so the set claims is set now now this get   claim from token so we need to provide the token  to this we're going to return the token we're   going to decp the Token in here and now return  the claims here right so let's have a look at that go back to the generics and now we have  another method to get claim from token you're   going to get this so provide it WT token and as  soon as you provide this we're going to uh read   a token from we're going to uh read the claims  from that token so we have to readt token and   now we have to extract the various um rows from  this not the rows the various claims so we have   an ID name email and a row and I create an  instance of this user session and I specify   this and return so here we need to install this  identity token packet so let's get it done so if   I even click on this control period I'm going  to see that install this system. modwt tokens   JWT right so use the find the latest version  and now install so this is going to install   this package so as soon as you call this it is  returning an object of this and this also return   a claim principal okay so this is set now so as  soon as we get the data we have to get claims   to get all the claims then we set it in here and  return the claim principal to this authentication   State okay now in case you have any issue then  we going to S it with a TR catch block which   going to return Anonymous when there's any issue  here okay now we have so this is getting the the   token from the local St now how can we set it so  let's create another method to set the token to   local storage and this can be going to be used  by both um log out and our log in so this what   we are doing update authentication State we are  returning or we accepting the token this is a GT   token as soon as you log in we're going to call  this method and I'll return this token now when   we get this token from here we create a claim  principal that's an instance here we check if   this Str coming as a token here it is now a white  space it me user want to log out that's what we   are doing so we're going to use a discard to  hold this Anonymous and here we are going to   say that we want to remove this token from the  local storage so here I can just copy this and   I'll say this claim principal is equal to Let's  C this disc card and I use this instead equal   to Anonymous and we remove from the token so we  remove the token from the local storage okay so   in case or if this is null it means the user has  logged out then remove it and now if I remove it   notify the oate to get refreshed and now the  current um value for this claim principal is   going to be and much that is empty or now and it's  going to return the person as unregistered okay or   as unauthenticated all right and in case it is  not now to this what we are doing we are getting   get the claim from the token then you want to set  the claims to this and now after that you want to   set the token here as a string to the local  storage so that anytime that this is called   we can retrieve the token from local storage and I  utilize it in here so this is our simple um custom   upate provider that we are doing now the next  to do here is once we have finished registering   this we have to implement this in the login system  okay so let's save this and let's create our login component so we go to the same web  assembly and now in the pages folder   maybe you can create another component add razor  component and now this is going to be login page so with this login page you know we're  going to have um user user email and also the   user password so we can create a simple  form to handle that okay so I have this   simple form and that's what I want us to  use it for so let me clear this I want to   use on to grab only the authentication the  login section okay so we have a form here   and you know we have to create our login  user instance so here where we have our code let's have control KD now this going  to be loging dto so we need to use it from   the shared class so we have this and here  we are implementing the feature that is   known as show or hide password but for now we  don't want to specify this let's remove this yes so we don't want to show this yes okay so that's what we have here you know when  you check this we have to maintain or create an   instance or a method to why this thing up we  have our login it's a card that we are using   and you know when you check here you see we have  an email address so it's a input we accepting an   email address and now here we accepting  the password right so input we have have   this password in here okay and the next thing  that we are doing here is we have this submit   button okay and you know it's an edit form so we  have to create this so Len task let's specify it here all right so this all we have  and let's give it a page route so this is login and now let's run  this and see the output that we have all right so we have an API launch  we did not set this as a so let's let's   do that let's close this you must set  as a local startup project so we have   our this one here we assembly  set this as a startup project so let's run this so let's navigate to  the login component that we created okay so there is the component that we  created you see we have this email and we have our   password here all right so we can just copy this  very long right so let's modify it a little bit so   we can move on with it so we go back to our page  in here and you know this an edit form so we can   just cut this from here and let's use the class  we can use this as row or let's you have container   for this you're going to have our class and this  row then you're going to have our day for class   and this is column md6 will be okay let's space  in this and that is all so we have our div class   column md6 and we have our div form inside this  div class okay and I think this would update it   in the nice form H reload is not working here so  unless reload it maybe yeah so you can see we have   it login email and password very simple one right  so this what we want to do okay so once we have   this we're going to Now log in now so to log in we  have to inject our custom orate and our navigation   um manager so let's go back to application on top  here let's inject our custom or state and that is   a first we have to inject authentication State  provider control period we have to include the   package that we installed now when it come here  when we try to log in this what you want to do   maybe we can inject inject um something like we  can display the token right so let's inject this   IGS one time so maybe you can put it on top here  so we can display the content out to the user okay   so we have this iigs one time create an instance  of this as GS and now done here so if handle login   is clicked this is what you want to do you know  this is coming in here we using the Tuple to   extract or get the the content out we have an  account service and now this is login account   but we have not created any service yet right so  before we come here we have to create our service   let's do that quickly so we can create a folder in  this now let's have this named as account services   or client services or any name at all that you  feel the suitable so let's have our services now   we have um interface a general interface already  so what you need to do here is to create our class   implementation class and I name it as account  service so this account service is going to   inherit from the I user account so this has two  methods uh that you can implement it this one and   now in here we need to inject HTTP client okay  HTTP client in here and also we have to create   an instance here like this all right so we have  this the let to do here is let's we're going to   make a call so this this login So within the login  let's first have our method in this so we create a   response out of this and you know we using this  HTTP client so here must be an async I believe   you know that now you can just formalize this well  and now we using this base URL so where from this   base URL we need to create That Base URL on top  here and maybe what I'm thinking here is after   creating this we have to since um this project  this assembly is find a different port and now   the API run different port we have to add C right  so they can communicate well all right for now now   let's have an API in here and this is going to  be maybe you can remove this and now here will   be this account okay so that is it for this so now  we have this we have our B specified and we going   to convert this into a string format so we're  going to serialize this and now uh specify the   string content before we can post as an Asing to  an API okay so within our generic class that you   created we can also add another one to serialize  and aize content so this is going to serialize   it you know we are serializing this objects we  passing the T object in here and this a generic   one and this is specify a Json option so what is  a Json option we want to also create an instance   in as a Json option so we can be using in the  calization and now this realization I've made   a video on how to communicate from to client  in the realization form all right so there's   a new Improvement and maybe we are using some of  the Improvement here so maybe you can check the   video I'll put in the description and it will help  you understand it better okay but for now we have   adjacent options and now within this options we  have this allow trading Commerce we set through   and now here on map handling we set Al to skipe  in case the return return type has in a specific   property that we are not mapping you want to skip  it instead of giving us an error you want to skip   it the type of the naming case that you want to  use is a camel case meaning it has to start from   lower case the next um word must be upper case so  that's the first character must be in upper case   all right so that's what weing a c case in here  and now let's have our distalization so let's   also distalize a string content into an object  so we can do that with this line so we specify   the string content and now you have to specify  the object that you want to or the mod that you   want to visualize is to and now we passing options  so we can visualize it in here okay we have this   generate string content to and we did not add  that to quickly let's add the string content to it so the same generics now let's add it to  the last down here and I we passing the seriz   object in the string form and I Rec convert into  using a utfa to this application type SL Json so   it's going to return as a string content and  that what we are doing or we need so when they   come here you see it is now solved now so it's  like a post we pass to the base URL then we have   that's a rout as login we pass in our generate  content or generate string content by getting   the content and now here from this content it  needs a serialized object so we also seriz this   object in here before we pass it to this rest  stram content and we can now send now we check   if the response here it is not success then return  this but in case it is then want to read response   as a string visualize it into this login response  and at this login respon going to handle or going   to get us the the token and the message isn't  it okay so when you go back to login page let's   save this we can now inject this service as it is  account service you can inject it on top here as inject so I user account okay so I user account then you can have  an account service and this account service is   what we are using In Here Also in a custom All  State you need to include the reference or the   name space in here so we are we are extracting  using the tup so flag token and the message we   get from the user passing this model and now  this is just a custom message that you want   to display to the user when you have a token  then we are want to call the allate provider   a method known as a update authentication state  so we can pass in the token so when you pass in   the token it's going to DEC the token get the  claims and I'll assign to the claim principal   and I return or reload the page as user has now  logged in okay so that's what we are doing so   you see we using a force reload if this works  then we're going to reload the Page by force   which is going to re the component again and  I get the user authenticated okay so once we   have this let's save it the next thing to do  here is we have to surround the this page let's   go to the layouts that is the app. Razer with  this compony known as cascaden so cascaden or   state so we can remove all this and I include  as a name space so control period can include   this so you have to surround it with this let's  cut this can paste it here okay so control KD   we format it and now when we have this route  view we're going to use authorize route View   and now let's close it like this so we can  specify this in here so this must be in the found this should come here in between like  this and now in here you can specify if it   is authorizing what do you want to do so  authorizing maybe you can specify this as   H2 so please wait okay that is when it is  authorizing let's save that now let's see   what we have and yeah so I believe this  must come out from this it should be out   of this authorized um Rod view yeah so it  should be like this and we can specify this   authorized r view with this authorizing  in here okay so this all that we need   to do we can or we have to register this  service too so builder. services do add scope add scope then I user accounts and  specify this as account service we create   a DI that dependency injection so control KD  we can now save that okay what's what's left   again let's try to check it up and now let's  log in and see if we going to have access to   the Token but before that we going to have  an issue because you have not implemented the   cost yet so let's do it quickly so let's let's  check the URL for this the API so quickly go to   solution now from the property session inside  the identity API you're going to have access to line settings and you know that in line  settings we have this https so that is a the   URL let's grab this and let's go to the program.cs  file for the client web assembly now here instead   of using this bu host environment. Base address  we are not going to use that we're going to clear this and we're going to use what we copied  so paste in this okay so this what we need   to use in here okay now let's go to the API  to you go to the program. Cs file for the API   and now where we have this midle pipeline  let's also configure this so here app.use   swaga app swaga UI so let's also use app.use  so we can specify cost in here and we need a policy so with this let's close this we're  going to use so policy dot with origin and   that is this one okay so with this origin what  are we specifying now if you check let's say for you have to get the the URL for this  Blazer web assembly okay so maybe you can   run this so we can have access to the URL of  that blaz assembly okay so you see with the   Local H 7254 this is what we need we can  just close this and now in here we need   to specify this so the first one is going to  be HTTP and the second one here can run on https okay all right so aside from  this with then let's allow any method so with header and now with  this header we can specify this header names so this header names comes from let's see head names is come from this dot content  type so content type okay can now close this   so the base URL is going to be what we specified  and now when to check our account service you know   we have API here as API account let's try this and  see so we're going to run this first and now once   you have this run we going to also run the API so  right click on the API and now let's go to the bag   so debug this start without debugging so we can  have the two um projects run at the same time all   right so you can see we have the identity manager  API running we have an also web assembly running   now let's navigate to the login aspect here now  let's try to log in and see what we're going to   have now okay so right click on this let's go to  inspect element then in the network tab let's try   to fill this with the credential that we use that  is user at example.com and now it is user at one   2 three that is a password if I click on log let's  see what is happening a call is being made and you   can see that you have retrieved our the token so  this is a token that we have and can see this is   a message as login completed so as soon as you do  that let's see what going to happen it's going to   refresh this page and you can see that's refresh  this page now when we check our local storage now   going to have our token in there so we have a  token in here okay so now you at indicated but   we are not seeing anything here so quickly let's  do that you're going to use let's go to this main   layout and this can be found in the client section  so you can see from the layout you have it folder   open this main layout and now where we have this  let's replace it with this so we can have access   to the username if authenticator if you're are  not going to have access to this um guest all   right now in the homepage two maybe we can specify  something um to log out okay so maybe we going to have so let's have some display we go to the  Home Solution now in the home page the page   loads this is the home and now with this we  can just clear everything here and we are   just having our authorized view control period  we need to include this we have this login so   so you can if you're not authorized you can see  login right so all this you can clear this from here and now we can here we are just displaying  an authorized view admin can see this and now   here only admin and our users can also see this  as well now we have a button this an admin can   click on this button so here we can see if you  authorize you must be in a the RO of admin if   you're authorized must be the RO of user or  admin okay and that's what we are doing aside   from that we have this claim type so we want  to get the user claim the specific user claim   want to display to the user that is when you  authorized contest. claims. first or default   the type here is equal to the row as a claim type  and you might see if you admin you might see that   if you're also user you must also see that okay  and the last one here is Implement is the login   and log out right and now let's see so when  you go to this account section this is a main   layout maybe if you're not authorized we have  welcome guest right and we can Implement button here so this button let's have a  class so BTN BTN primary that is   when you're not authorized and  here we're going to say sign up   we can make a copy of this and this is  going to be login okay so when this is clicked and now we can say login can  copy the same and then this is going   to be for sign up now now let's copy  sa and now welcome you can also have logout so log out and now you're going to have  this log out method so this must be let's a danger   all right let's implement this if I click on this  log out at the code session here I want to have   this method wired up as a log out so we need to  use this custom upate provider and the name space   coming from this and we say we pass in now to this  method so you can know this here if it is not that   is passing in it means you want to remove the  token from the data local storage but if actual   token then you want to get the claims and set so  rep passing that mean you want to log out we need   to use navigation manager and also we need to use  authentication State provider so let's put them   let's inject them on top here and that is here so  allate provider let's include the names space as   well so we have log out um implemented now let's  have a look with this sign up if I click on sign   up although we have not implemented this yet  we have this method and let's see so this also login and as for this we've done  this so we're going to say nav   manager do navigates you then  in here you see you have this login okay so here after you log out  maybe you want to go to login that's   what we want to do all right so we have this set let's save this and let's re this  application and see what we're going to have now yeah so as soon as I log in you see since  we have the data in the local storage I can see   um the name here so you see this is a row as  admin admin can click this and admin or user   can also click this now see I have this if I  click on log out you can see now you are not   authenticated you can see it is now out it has  reload this page again but I'm not sure it's   supposed to reload this page um you have signed  out welcome gu we have sign out and I'll log in   so maybe we do not need to um false reload this  maybe return to this and that'll be all okay so   now let's log in and I'm going to pass in user  at so the first one was the admin now user one   at example.com now user at one 2 3 now here this  is going to be a user not an admin so if I try   log in here we have it logged in and lo completed  now let's see so it gets the app reload and you   can see here the row here it is what user and I  can see admin or user can click this the first   one is missing because the row here it is not an  administrator it is what a user so we see that   we can Tagle between a component display using  the row in the aate let's have a look with the   the registration so we need to also create one  for the registration so quickly let's navigate   to our page and now in this login I just grab  this column MDC container because I can't type   this anymore let's go to solution let's create one  component and I'll name it as let's stop this okay   now let's create this and I'll name it as register  page so component and this is register page so in here our page this then let me close this up  because you know they are open we have one   more yes so inside this col md6 we can specify a  div class of card so there's going to be a card   here and now in here we're going to paste in  this it's nothing um much here it is just an   input we have this full name we have email we  have a password we have confirm password okay   now if you check this I have just an input here  to show password the login out I remove it but   for now I'm not going to remove it here just  a method that we're going to call to show or   hide the the the password viewing and you know  if I click on this I'm going to change this   show confirm to true so if you check here show  confirm password if it is true then change it   to a test if it is false change it to a password  it's a type so we are Tarling between the type   here that's an input element now that's what we  are doing um let me just add the code session to   stop this red lines in here so control KD okay  so what we're going to do here first is maybe   we can create create these two properties here  as show password I show confirm password okay   then we can have two method here to check or to  Tagle between this password so show password if   it is Click then if here is through show to for  if it is for to through that's what it's doing   right so that's it is not equal to so that all  the time opposite of the current one so that's   what we doing now the next one is the handle save  so if I click on that what am I going to do if I   click on register I want to call this so here let  me put it down here so this is a user dto and you   have to include it in here and you can see that  we it is coming as a response of T flagging on   the message so we have to include this um account  service without typing you can just come here and   I grab this go to the account register page and  now let's P it on top we need to specify route   two so at pit then this is register I believe you  know that here you need to use the reference we   have to also inject this IGS run time so inject  IGS run time and I will say it is GS problem solved so once you have this create an account we  can just have a response and know it is since we   have this set is an API and now we have this a  register so accountregister because you know we   have our Base address here and now this must be  an async so we have an API accountregister and   we generate um string content by serializing our  object user object then we push it we read the   response and we want to return it in here and I  when you go to the register page register page   you see we are so we are displaying the output  or the the respond from the API to the user we   did not use edit form I think so yeah there's  no edit form have you seen that so let's grab   this quick and here where we have this card  um let's specify the edit form so this model   is equal to this user and unvalid submit  you want to call this you're going to say enhance okay so now we have to sound it okay so  we have this I believe it is well now okay so register and now let's wait for a response to  be made okay so you can see we have an account   created and now let's Okay so we can save it let's  log in so let's provide the same Nets at gmail.com   now the password here it is user at1 123 let's  try to log in we have a a Tok here click on okay   like completed and now the app rendered and going  to have ourself authenticated so you see arow is   user and you can see we have this log out now if  I click on this weather forecast nothing happens   you we have an issue here so let's handle that  okay so we go back again now this time around   we going to this weather forecast but before  that we have to create our own service to handle that so in the weather forast page you go  back to solution and first of all when we   check this wether forecast controller you know  we we have this row as admin and we have this   user over here so depend on the the row you  can have access to any of these so let's first   tackle with the admin that is a user first okay  okay so we have to special the route as user to   when we log in and from this side you know this  account service is going to handle that and we   are injecting this HTTP client in here so after  logging in here this what we are doing we need   to if it works everything is working here then  we have to add the header that's API key to the   header of an HTP client so we can be using for  other cost right which is protected so instead   of returning you're going to say that but is a  response or let say this is a result is equal to   this let's cach it and I'm going to say HTTP do  default header request dot you're going to have   authorization is equal to new then here we can  specify the scheme and now this is going to be the and now the value and that's going to be  the results dot token so we we have token in here okay so this is a token so just this one  out of code we able to add it in here then   let's return results so return this result  so the next do here is we need to create an   interface face now the first one that we created  is in the shared project so if I minimize this up   the API here and I can see from this that we have  this contract as an i user account this interface   is being used by the server and now the client  so you want to add a local one so let's add a   class and this class going to be an interface and  maybe it this expected to a weather so I'm going   to say I weather okay CS is an interface type  and I with this we have it as public can clear   this up and now this we're going to say it's a  task of weather forecast so do you have weather forecast and that is so this is get weather forecast okay so let's make this as an array  all right but we're not having this class into   the model so let's quickly check but we have  this inside this weather forecast this API I   believe so we have this weather forecast let's  move this weather forecast into the dto okay   now here it is you can copy this name space we  go to the weather forecast here and now let's   replace the name space yes now once you're done  we have to go to the server and I remove this   weather forecast okay you have to remove it and  when you go to this weather forecast controller   defin we're going to have an issue here so this  weather forecast we need to use from the library   we can be using using share. dto and now with  that you're going to have access to this WEA   forecast and this weather forecast that's fine  now when we go back to a service that we are   creating as the account service or the IAA  interface here we need to use this from the   shared project and after doing this we have to  create an premutation class for this so let's   go to the account service from the class Library  no from that that's from the client you know this   is the client section to open it then you know we  have this account service so we want to inherit it   as well so inherit this from ieather and now  this we can implement the interface and that   is this interface so we can just cut this and  P it here so we have the base URL here and on   this Bas URL here it is not only account but when  you check this WEA forecast it is we also have we   forecast C so this when it come here we are not  going to implement That Base URL we can just grab this like this and now in here and this we're  going to read a response so if response here it   is not suceeded then maybe we can return this  so here know it's a weather forecast so we can   return null inide of this okay you can return now  all then you're going to visualize it by this see   this a list an array so we can be using this so  what we're going to do here is let's update the   generic you know here we are distalizing a  single object so here we want to add a list   of object to it so we add an ey list of T disiz  Jon string and I see this is the T we pass in the   Jon string here and I weize into a list right  so with this we can now call this method so I   believe we can be using this method we go back to  this account service then in here after reading   from the response you know we have to visualize  it in the list form and I return it so you're   returning an array so once you've done this what  we need to do here let's go to program.cs file   in the client section so web assembly this  one go to program and now we have to also   register the same thing so instead of I weather  you're going to say in of I user account say I weather and we can now go to this  weather forecast inject I weather   from two period you can include this name  space then we're going to say this weather service so with this WEA service let's grab this  and now say for cast is equal to you don't need   this anymore so Weather Service and here must be  an aait take note so a wait then Weather Service   dot then going have get weather forecast okay so  let's clear this one because we don't need this   and I think it's sa to control period you have  to use this shed forecast and that's all now   let's save this let's rebuild this application  and now let's see okay so the app is now ready   and if I click on counter you can see we have  been authenticated already so I click on this   and let's go to inspect element let's click  on the network Tab and I hit on this weather   forecast so we see a call is being made and I  when you check this we see we have the token   added to the header and as you can see we have  it added over here now we can retrieve based on   the user okay so when you check this when you  log in and I try to get the same thing let's   see so if I log in here with this user so is at  example I know this is for admin so user at one   2 3 this is admin now I want to access the same um  weather forecast and it won't be available let's see so you can see the ru here is an admin and  if if I try to access this I'm ass s forbidden   that is 403 so if I click on this you will see it  is 43 that is forbidden although we authenticated   but we are not allowed with that specific  row unless we change the route to the admin   so we can have access to the admin controller all  right so that is it for this video we've seen how   to consume the GWT authentication in Blazer web  assembly project by adding to the local storage   retrieving it as soon as you log in and I'll set  the token to the header so we can make a call with   it to your protected endpoint that is it for this  video thank you so much for watching this if you   haven't watched the first one please I'll put  the whole video uh the one and two and the page   description so please check the description you're  going to see the previous one and on this current   project as well thank you take care of yourself  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 3,563

Keywords: .NET 8, Web API, Custom JWT, Authentication, Authorization, Identity Manager, Secure APIs, Programming Tutorial, AspNet Core, API Security, Software Development, Backend Development, Identity Authentication, DotNet, Development, WebAPI, JWT, IdentityManager, SecureAPIs, AspNetCore, Programming, Tutorial, Security, Coding, .NET Development, blazor, webassembly, .net blazor, .net blazor webassembly

Id: P0XqYbUmSDU

Length: 58min 21sec (3501 seconds)

Published: Sat Dec 09 2023