how to build user management in Blazor Wasm & .NET Core Web API

let's get start Demo First of authentication and authorization Series in Blazer web application plus net corei right here you can see uh user management system we have just Implement over here in this uh series and user can you know easily update delete and all also assign that roles as well right so suppose see we have a roles uh we have that user informations all that user list and here if you want to use our uh edit so they can user easily to edit and as well as if you want to delete the user so user also can delete so let's get start to demo how it's know working in this flow right so first what I will do simply I will just create a new user and I'll show you like how U easily we can assign the roles and delete that user right so log out that user first and that go to that registered right now see once you log out your application does not have any you know uh that navigations and all which we can user see right first they have to registered so what I will do I will just create a new user of the.net uh at the gmail.com and here just I specify some password over here so let me add some password so I just add it once you add it now see once I add it so if you trying to log in this same user so let me try to you log in the same user I'll show you what will be happen so this is that my user and once I log in that that user so they will not able to see that you know user management system because they does not have any roles and all right so they have just you know normal uh you know system normal navigations over here which they allow only just Anonymous user right so like that only just login. net user so now what I will do I will just assign some admin uh admin access for that so that that user can able to see that information on all over here right so what I will do simply let me log out this guy and login with that admin user because admin user only access to allow know insert update delete or that manipulation of that user management system so what I will do let me logged in with that admin user so now once you logged in now see the user will able to see user list and add roles right so once you go to that user list now that new user they are able to see over here this is that new user which does not have any roles right so what I will do as admin user I will assign some know roles on that particular user so let me add it once you add it now see you're able to see that all the informations along with their roles right so this is a uh roles of this uh existing in our system so I if I want to add some roles of that guy so like that of if we just click and then assign the roles but here see if you want want to add the multiple roles so what you have to do simply hold on that you know control key and then press that roles then you are able to select that multiple selection as well so like that you can just assign that roles now I am able to assign that all the rules right and then also we have to add some you know phone numbers because this is a validation neither it will give that validation because this is a important uh uh it is a mandatory field so that's why I add it once I up update now see once I update you able to see the net user has that whatever role I have assigned and then also edit that numbers and go to one more time let me remove that one you uh roles over here for example I just want to remove that person to uh Finance roles right so let me remove that Finance roles and update now see again whatever you know you are up to update so automatically they will taken care okay whatever the new things and all things they will taken care and whatever current roles they you are just assigning so that will be added over here so like that you can just edit right and then user also able to delete this guy so if you click the delete now see user automatically delete but yeah there's a multiple things you can do that before delete like okay some popup popup model and all they have to just you know confirmation dialog box we have to prevent to delete okay first let let me show that uh you know model and then if they okay you know confirm then user can delete so that that also functionality we have achieve in our some of the session so you can takeen care and then edit over that but I'm not going to that one but yeah this is a simple way actually we can manage our user management system so that we have to implement in this session so before start to implementation I especially recommend uh if you first time visit my channel go to my channel right and before start this uh no session you have to go through my that all all this session which is I covered net you know authentication and authorization with bler and API so this is my first session we are we actually Implement that API with using identity and then we have to adding that roles and manage the roles in our API as well then we have to create a user registration uh forms and we have to add the new user and also then we have to implement that cookies authentications and then uh we have to uh finally implement the log out session like how we can log out and then also we have to add you know uh some mechanism that add roles like how we can get the roles add roles in the systems so those session you have to just first look uh check out because I'll just continue after this session like whatever the last session we have to cover in this authentication series we'll be continue with this session uh right and also actually we see we have to cover in know token based authen authentication and authorization as well so please watch those kind of authentication series and session before proceeding this one and uh if you you know find it is a difficult to find that know one by one session so I also created in know one playlist right see this is my playlist over here so you can check out this authentication or authorization playlist uh which we have all the session one by one you can just cover first and then go to this session so now uh we have to we have to start to implementation so I will take the same example which I already uh add it in our GitHub link so you can take it from that right and I will just open this uh solution now go to that solution right and here that solution we have that API this is my API project and this is my um Blazer web assembly uh web applications project right so what I have to do first first actually I have to just create you know um a user uh user API which will cover like okay user can retrieve the all the users and user can retrieve that by the email ID right and also user can able to delete and user can able to update right so those service we have to create it first on our API section so first I will do to just create actually first that user service create a new service over here so click that uh here and go to that select the Ino interface using that uh I user service interface and here we have to declare some uh Services right whatever we have to trying to do over here so first what I will do I'll just create one signature for will which will be return uh all that user list of the user right so that will be return and obviously we have to convert our dto because we have not directly send whatever our entity right so that's why we have to just create this model like user model so go to that here model folder create a new model and create that model and here what would be the our uh model property over here whatever that user information we want to retrieve so that information we can addit along with this is a user information but we want to return that along uh user with this their roles whatever roles they are exist that current user so this are those are property we have to mention over here right and additionally you can add it but yeah you can just manipulate as per your requirement so this is done for that user model now go back to your a user interface right and here let me bring back that name space and that good to go now uh just declare the all the signature what we have to trying to implement in this API so I will just Implement again uh get user by that their email ID right this is another one and then also we will try to create another service to update that user based on this email ID along with that whatever respective the model So based on this we will trying to update and also we will delete using that email ID because email ID is a unique right so that's why I'm taking that email ID So based on this email ID I will I am able to delete as well this four service actually we have to trying to implement in our API right so let me go to the implementation concrete implementation go to that Services again create that concrete class so create a class and here what I'm trying to do I just create a new uh user service concrete class and simply injected that I user service and Implement that method so these are the default implementation they provide by the visual studio so what I will do I will start from this guy right so let me cut it from here I take it on the top right so that we can start implementation uh in this process so now first I'll just require you know uh that service like identity user manager service so what I how we can get it create a Constructor and we can just simply injected that uh over here so what would be the name of that user manager uh service this is that user manager service which will coming from that sp. net code identity uh server and then I will use that identity identity user right and then you can just make it a variable and just create a uh create and assign that field inside the Constructor so that we are good to go to use right so now we are good to go to use that user manager which will return all that user informations right so first let me create a model which we are trying to return in this user uh get all the users so create that model now we have to return that list of that user model which we have to create it right so like that and then second things we have to just get it from that uh user manager as a user information right so that user manager. users. tool list right so we can just convert it to a tool list and then we have to store as a variable for example you users right so once I get the user now we have that all that list of that identity user right which is a identity user but here you are seeing like we have trying to convert to over this user model so what I'm trying to do over here we have to require some conversion so in this conversion either you can use some you know Advan conversion like for example Auto maper and all but uh I will not doing that because I many many session I actually covered in my previous session so you can take a reference and you can add it but yeah here just I will keep it a simple I just simply use the 4 Loop and in this 4ish Loop what I will do I will simply uh just iterate to that users list and edit to our model right let me create a model first right okay so see this is just simple model I just created a new model and assign whatever that our informations right so get it from that user uh it to one by one and assigned over here along with their roles right so where I can get the roles we don't have a roles inside that user identity user so for additionals uh roles if you require that particular user so what I can do I need to again call another service which is uh where let me create a uh variables over here where and here where user rle rules right and then here I will use await and use that user manager dot get roles async method right so this is get roles async method and this is expecting see this is expecting uh identity user so where I will get that identity user see this user list has a identity user so I'll just iterating one by one so those things I will just add it over here and get it that users user role whatever that current user like see this is our current user right so based on this current user I getting that roles and that roles I just simply assign to over here to convert to two list and make it to as a inumerable list of the rules right like that and simply and the last things once I added this user model I will add in this list this list right so what I will do simply response response. add the user so one by one I'll just addit the user and convert to our dto and then finally I simply return to the response so like that we can easily Implement that get all the users right so like that uh this is a good for that get user now moving forward to our next implementation which is actually get user by the email ID right so again simply for here I just remove this guy and get it that now uh that user so how we can get it the user by the email ID there is a inbu function that is called find by email uh Asing and which is expected actually email ID right so that we can get it and also if I using a wa so definitely we required a sync right and then async using a sync a wa so you can get that user identity user and here again same things whatever we do for that you know list of user again we are iterating that roles right that particular user so that things also we have to get it again get the user right and then let me get it the user again so make sure like okay if it is not null and all that also you can check it but yeah I will not check over here there so that is fine for me for as the demo demo perspective so they are let me get that you know get the roles Again by the user so I also getting the user along with that roles right so now we have to just manipulate that user and roles in our this models right uh sorry actually see this is a by mistakely wrong method we are trying to implement right see this is I'm trying to implement in the delete by the email ID right so that is a wrong so what I will do simply just cut it from here and go to this guy so this is that method actually we trying to implement which will return uh get user by the email ID right so what I will do simply those implementation be require and then further what I can do simply I have to just convert to dto right so let me conversion over here let me create a know user model and just again just passing that user uh information assigned to over here along with that roles right and just using that async also so once you the as syncs and then finally you have to return that user model right so now like that we can Implement get y user by their email ID right so this is done now moving forward to uh the delete one right so delete one also is very very simple which we can just simply we have to trying to delete right so what I can do first first again I have to just find the user using that uh email ID right so this is the way actually we can find the user manager we have that find method and then we can get that user and in this user we have that for example I'll show you user manager dot we have that delete async method right so in this delete a sync method see the expecting uh identity user so where I can get that identity user I can get the identity user from that uh above and then we pass it that here and then simply we can store as a result here and just use that await and then we can return whatever that result status right so return that result result result do succeed right so there is a property also buan property if it is succeed on fail they will actually um tell us like okay it is failed or success So based on this actually we can simply uh creating our delete method as well so that is also done delete also done now the last one is the update one this is actually comp Lex one so that we have to trying to update because see in update not simple update if you see the demo over here I'll just open again so if you just click that edit now see this is simply uh we can get that information and we can update but uh the complex part is the user assignation right because see suppose you there's a multiple scenario uh we have to need to handle over here like user if it is first time so then we can just you know simply select and then assign and adding over here but suppose again user comes and just remove this guy right suppose remove this guy and just selected this guy so that actually we have to think okay so which one we have to delete we have to delete this guy but additionally they have to adding this this guy and we have already existing this guy right so this kind of things actually we have to implement in this update section so that is that's why it is actually complex so don't worry about that we will take care and we'll actually try to uh make it simple so let's get start over here that update one so first what I need to do I simply get that know user identity right so why that actually we have to create again that know using that user manager find that email uh async method and here they will return back to our identity user so now we have the identity user and here first I will check if it is identity user if it is you know null so simply return return back over here right we are not going to further now if it is not null so then what I'm trying to do simply we have to trying to update uh whatever data the user are passing over here so user just passing that username email ID and phone number we will we just trying to you know assign in this identity user right whatever the new data we just updated over here identity user and now what I have to do I have to just simply update so how how we can update using this guy right we have that method update method so use that identity user manager dot here that update async method in this update async method see simply they tells okay we record that identity user so we are our identity user this is our identity which this updated data so I have to pass over there and that's it like that we have to update the user but there's the complex part is still pending that is uh uh that is actually that assign the roles and delete roles and right like that right so let me add it over here now see once I update that user right user got updated but that whatever actually we have to assign some roles as well right suppose user sent two roles three roles and again comes and then again remove some roles and adding new roles right so those things actually we have to manage so once you update uh that user now we have to trying to implement that complex part so first let me check okay if it is update success on fail based on this right so like that so what is that update response if it is success or fail so we can check it right okay we have missed something over here we have to use that know a wait because it is asynchronized Method we have to use so I have to use that AIT so now see the they have the property of success right so if it is Success then what I'm trying to do over here I have to just U getting that you know roles again we have to trying to whatever that current roles that particular user right so but that we have to trying to get it over here first so let me get that so like that okay again user manager has that you know get roles async method which will pass that identity user if that identity user pass we will get that okay this user have how many roles current roles like that for example in this user has the two roles like admin and HR right so that we have trying to get over here so what I need to do next now once I get this you know current role we have to you know uh we have to check okay so whatever that current roles have that you know user roles right whatever that user roles suppose user send then some roles right suppose user send two roles so those roles and which is that new roles and which is the existing roles right so that we have to trying to do over here using this you know we have to getting that roles which we have to trying to delete actually so for this what I'm trying to do see this is my current rules and then accept be using that accept method which is providing that know here and then we have to pass that rules and here uh whatever you know our current current user assign roles they sending and whatever that know existing roles of that user we just you know trying to use that accept method and getting that this roles actually we have to trying to remove suppose for example we have a current roles like admin and user right and then user actually send like this user model right so for example this user actually send over here like user user rule is sending uh like whatever we have like we have a admin and user right current have admin and user but they they adding passing over admin admin and then HR right so now see let me copy this guy over here and paste it over here for that understanding now see user role they they send to update right for this admin and HR but previously we have that particular user admin and user right so that means admin is a common right so that that is fine we don't need to takeen care as of now but yeah I will do something for this as well and but see this HR and user right so HR also this is a existing user which is does not sending again but yeah that new sending that user that need to adding over here and this admin this admin we don't need to takeen care over there right so that admin we have to just we have to remove that admin right so that's why whatever they newly added we can simply add it over here so like this is actually that's why I told you it is a little bit complex but don't worry about that see based on this I just using so first I will get that what uh what no roles we have to try to remove so this this is the way actually we can get okay whatever roles we trying to remove which is that common uh roles we have already so that we have to try to remove so we find okay this is that common roles like admin and admin that we have to try to remove so this is I will get that remove over here and then when I get that things so then again we have a method over here like underscore user manager remove from from remove from see there is one method right so remove from Rules as sync remove from roles as sync so this method I will use and here what I will do I'll just they actually require that what that identity user you want to try to remove so this is my identity user which I have already this is my identity user and then what roles you want to remove that particular identity user right so that roles we have to get it from here here so that I have to pass it and then when I pass they will remove as a remove list right so let me store as a remove list and make it a wait right so like this way actually we first we have to try to remove so this is a remove right first I have to remove and then we have to assign that roles whatever that new roles right so again just let me check if it is that response it is Success right so if it is Success then again we have to I know uh we have to get some unique rules again right so how we can get that unique rules again simply again what about that user right so suppose example this user user has the roles and then whatever current roles we have right so for example again see user has a that admin and HR right and current role has a our as a admin and user right so what I can do this time uh this time again I will you accept I will use that you know that rever vice reverse uh reverse logic like for example admin role uh whatever roles accept that now current role so I will get that okay so what is that know Common roles right so unique roles we have to find so like that we can get that unique roles as well like see now see I this time I use that user roles right so this user roles uh accept uh this guy that whatever current roles so it will return back that unique roles what is our unique roles so that we have to try to get right so if I trying to get that roles right and then what I trying to do over here I have to just add that roles unique roles so only unique roles we have to trying to add over here like so that uh you know we can avoiding that you know complexity so let me add add that for example this guy right so again I will use that uh role service so I already created you know one role service in my previous session so you have to takeen care that guy so if you go to that role service this guy so in this Ro service add user roles right so I already created this function right so this function what we trying to do over here I'll show you uh go to that Ro service and here add [Music] roles add user roles now see this guy right add user roles we are just actually whatever Bas on the user uh email and their roles we are just first trying to get okay what is that user based on that user email we trying to get and then we actually trying to check okay whatever user sending the roles that also should be exist in our current system right so that's why we have to trying to use that existing roles method which already we have to implement here we trying to find okay whatever role manager right so this is a role manager which is coming from here like see this role manager coming from the role manager right which is provide also in identity server so this role manager actually will check okay whatever roles like suppose user sent admin HR on uh Etc uh right so that also exist or not if it is not exist so that it should be not adding this list right and if it is exist so that will be adding over here so that makes sure uh you know avoiding that you know uh uh unnecessary you know know fake data right so that's why we have to trying to use this way so this is way actually we first we have to check okay existing roles is exist or not if it is exist so whatever existing roles and whatever the sending roles they should be common right so for example existing roles uh we have checked we found three but we have sending a uh at the user that is four so that means one rle they are trying to uh assign that is not present in our system so in this case we have not trying to adding right so that's why you put this condition and this Condition Nothing we have to do whatever just rules we just pass using that identity user and that roles right so they just assign that particular user so like that we have to trying to this this service so go back to your uh user service here right so let me bring injected that service so what is my service it is IR roll service and just create a new variable over here create and assign that IR roll service and simply we have to use this IR roll service over here add roles and passing this in informations and we are good to go to get that result so now we are getting the result and whatever the result it is just true false so simply what I'm trying to do simply return that rules right and that's it now finally if it is anything is wrong in this process I will simply return return false to add to end right like that we have to trying to implement right it is little complex over here but yeah you have to taken care uh if you go through this code definitely you will get that understand right because see let me clarify one more time actually I know it is complex because once I uh Implement definitely I I spend many times to over here so what I'm trying to achieve over here see whatever current roles we have right suppose we have again so let me explain again so con rol we have a admin and user right and user want to update like again next time they come okay and they want to update okay admin and HR right so in this case what happening over here see let me zoom in for you right so what happening this time now see this previously we have that admin and user but user send again admin and HR that means whatever user they actually remove right so that means user should be removed first over here that existing rle so that's why I what I'm trying to do I just compare this in a current role except you know I using that accept method that accept method will be you know you know exclude all that you know U that guy right whatever they sending they will return uh uh they will actually exclude and then return back to the result so what will they return back to the result over here they will return back to result only over here that user because user is not there right because user is here but user is not in this current role so that means it will return that user and then user should be removed because user they actually removing because previously it was user but they actually remove that user and then adding new roles so that's why what I'm trying to do this user I'm trying to delete this this user right so first I'm delete that user and then again what I'm trying to do here again I'm checking over here so whatever that current like suppose a gun comes over here user sending over here that user role again admin and HR right suppose same you admin and HR this sending but here whatever that current Ro current rooll is our this guy now I have current rooll only this guy right so current roll would be admin and user for example let me add here and let me specify over here current user so this is a current user so current user admin right admin and user so and also we have actually removed this guy right because user already we have removed over here so we don't have a user so let me remove this guy now we have only admin and what I'm trying to do over here we actually again excluding excluding whatever roles already we have that current user that we are trying to excluding over here so what is that current current role we have admin right so we have to try to remove that admin from this current roles right so let what we have the final result over here final result would be over here HR so only we have to assign this HR to that particular user right so like this way actually we trying to implement this update and assign to that user roles right so now I think it is much clear so what I will do now it's complete let me collapse all the method and now we are good to go to implement our endpoint now go back to your know project and here go to that uh controllers let me create already we have create actually the last time we have created that user controller right so go to that user controller and here I will just try to implement all the end point so let me add one by one so first of all uh I have to just inject that user service over here let me injected user service I user service actually I user service and just injected and assign and here now see user service we have to inject it over here now uh we have to just you know change this method because we have to return return this get method previously just fake uh we have return the fake content but yeah we have to try to implement now is a as a real real user management system for the real enement system so what I will do simply I just adding first that authorized section in this endpoint so that only access for that admin user can access for this endpoint right and and then uh in here what I'm trying to do I just get uh that guy right user service in this user service let me add be store as a user list right and here I will use that user service dot get all users and we can get that result all the all the user result over here and simply using that uh wait and this AIT uh a so definitely you have to use the async and using the task and Rapid by that I action result to the task and then finally this should be return over here so let me return over here like that so whatever result I have simply I have to return over here so like that we have to trying to implement and we don't need to do anything else for this Endo right so this is way actually we can Implement our endpoint of that cat user uh list now we have to implement uh all that other endpoints for example get by user and all so let me quickly create those endpoint as well so let me create that endpoint for example admin and then we have to just decorate as HTTP get but we this time passing that as a route parameter as a email ID right and then what I can do simply I to just create a method uh that you know public sync an action result Again by email ID and here again I have to call that service right so this is my user service which have that method get by email ID and simply return to that whatever return we have that service so we have to return the result so like that we can implement this endpoint as well get by user by that email ID now moving for to another one that is uh uh update right so again let me create that one right see uh again we have to set that authorized as a admin role and pass it that now as a parameter as a email ID and body body parameter would be you know our model right so let me create a method for that so this is that method and here simply I just using as a route par meter as a email ID and that from body I'm expecting that user model which will return all that you know user informations right so like that and simply I call that service and update method over here like that update user and here and then simply we have to check like okay if it is success or fail because this is update one right so if it is success or fail based on this actually we can just put uh that return type that's it right so now we have to finally uh we have to implement that delete me delete uh expose method end point and again we have to set the decorate authorize and HTTP delete method and here we have to create a method for example this guy and then again delete method expecting that email ID which is ex uh getting from that route and then be using that service delete method I use that user service as a delete method and we have to Simply decorate our return return type like if it is Success so uh then no contain and it is not success that mean better request so this is done now let me build it and run it there's a one issue I'll show you that is important actually so once I run now see it is running but I'm getting one issue right see okay so this is another issue but yeah uh because because already we have run our the demo session so what I will do simply stop that run one more time now once you run so now see all that end points we have just created newly for that user they actually over here exposing over here right so let me just try out execute so once you execute I'm getting that 401 this is expected because I'm not using uh I'm not actually logged in so first I will try to log in so let me logged in with this cookies authentications right so let me add a username and password so this is my admin user so let me add this guy and my password so this is my username and password execute now once I execute I logged in right as a cookies authentication and once I try to execute so definitely I'm getting this error so why this I'm I'm getting this error see it is actually be using I user service which is not actually registered so that is important so let me close everything go back to your program. CS file in your API project right and go to that program. CS file here because we newly new service actually we have to introduce right so that's why I just have to registered over here add scope and then using that I user service and there implementation that's it sometime actually we are miss that things so that's why actually I not resolved I'll show you like this kind of issue you can face right so now try to log in again one more time and let's see in actions so again let me try to log in this guy as a cookies authentication uh use that uh our admin user and my password execute Oh by mistakely adding wrong password so this is my correct password now see it is logged in and now go to your endpoint get user and try to get so now I am returning back whatever the data right see this is my user and their roles this is my second user and their roles and this is my third user this is my third user and their roles right so like this this is my which I'm trying to log in right so this is my current logged in user so this have a two roles or others ones we have a one rules only right so like that uh we can use it and also just check that all that endpoints also it's working fine or not like get get uh get by email ID also just trying to get that information for example passing that email ID over here and execute now I'm getting that result right so it is fine also now go to this Sky uh put right so let me try to update something passing that email ID and then pass the informations so what I'm trying to to update over here for example see I have that know this information right uh username is this guy so let me change it to username is something something like that right so let me add like username as a super admin and email ID is something uh admin1 2 3 and also let me remove the extra code and phone number for example 1 2 3 4 5 6 7 8 9 10 and then roles would be whatever we have current R we have that admin role right so what I'm trying to do I will remove that admin role and what is that current role we have we have that HR also right so let me add remove that admin and add that HR right so let me add the HR that means admin role uh that should be removed first and then HR Ro should be add right so let me execute so once you execute now I'm getting the 204 and let me get to that result and see in uh what happened now see yeah uh that is perfect fine because email ID got changed because I have update right so what would be the new email ID that is just execute over here see this is my new email ID and also is expecting whatever we're trying to update that already updated with this new roles right so and also if I want to delete this guy so let me try to delete as well so let me add this guy but this time we have to add one to three because we updated also so execute now we are got the update now once I trying to get this guy again so now I'm getting there is a value cannot be null so that null things we have to trying to handle but yeah that is fine but yeah when I try to get all so I am able to see only two result because the third one also got deleted right so like that actually we can Implement our user API which will can insert update delete and all that card operations right user management system so now we will implement this API in our Blazer application so now moving back to our application go to that Blazer web application here I have to implement um that things right so first go to that component go to that account here I can just add that user uh list either here or either you know pages right whatever Place uh and up to you you can just add it so uh in our case so it is related to account things right so I will just add it over here so uh yeah before adding the component what I will do I have to adding some service right because that service actually interact this component so go to that service section if you go to here already we have service section right so here we have to just Implement our service and that service actually interact with our component so go to first know I account manager which I already Crea all that Services right the roles register login log out everything so here have to just expose uh the method which we trying to uh Implement right so that we have to do over here so first service would be our you know users right so get users so let me add that users and also we have to we have to create models right so let me create a new models for that uh in our Blazer application so go to that model folder create a new model create over here create a model and in this model whatever the property you want expose so those property you can just expose over here so I'll just expose the same property like whatever API is returning right so those are things actually we'll just keep it same but yeah as per the requirement we can keep it as a different right so let me go back to over here now I have that uh method so let me Implement that first so go to that custom authentication State provider here and Implement that method so all the method will Implement one by one and also uh Implement that component so respective component so here uh this is that go to down and also just collapse all the method and here the our concrete implementation right so what I will do I will just Implement over here so why first of all what I need to do I have to just use that you know HTTP client which already I just injected in this service and we can good to go to use so I'll just uh use the trash block first because if any error and all we can capture and log and all so let me get it that sttp client get method like see sttp client as a get method using that a sync method so what I will do I have to use that know that uh what do you call uh uh a a sync method and then passing our you know API name so where is my API name our API name is already we have defined right so uh in our API API SL user so they will return all that information of that API right and then finally I have to just you know get that you know informations whatever ever that AP know HTTP client actually return so they will return return as a content and we'll read as a string and then we have to disiz that one so let me desize and get it that as a uh deriz as a object right so this is a deriz op method so we can simply deriz in our user list right and then finally have to returned if it is true if it is Success true so simply return that user list right if it is fil so what I will do simply passing as a uh null that means we have some issue right and also remove that exception and using that exception and L so this is a not a complete implementation but yeah you can just keep it but yeah for that learning perspective that is fine like how we can easily Implement right so like that we can get users right so now we are good to go to use this this user list uh in our component so go back to your you know uh solution you know web application solution go to here that component an account folder here I'll just create a new component that is called uh something users or user list or user management system or whatever things actually you want so that you can just call it over here so let me add for example users right user list so let me create that and first of all f i just adding as a route router over here right so based on this actually route I can get this component and then I have to just injected that service so that I can use that service right so what is my service account management system right so let me use that account management and we are we are injected properly you know using this variable and we are good to go to use this service and before using this right so first what I can do I have to actually create uh some HTML right so in this HTML uh actually if I show the demo there I using some grid right so there is a one most popular grid actually be using as a Blazer that is a quick grid so that I will use for that using this quick grid if you new this quick grid so I'm specially recommend go to my channel definitely uh there is a session actually I have created so how we can Implement know card operation in quick Gren bler you can just use it and check out that one first so what I can do simply I have to use that package for using that quick grid so what would be that package name the package name would be is our B uh Microsoft uh Microsoft uh quick grd right so let me bring back that component uh this package so see this is that package page name microsoft.net component quick grid using this package I will Implement that quick grid because they are have a many many you know features over there and also it is a MIT license so you can use uh as a free of cost so that is done in installation is done now moving back to your component here I will use that quick crit right so let me bring back that design first because I'm not going to design over here but yeah I'll explain uh what is that actually so let me get back to the get back the HTML so see this is I'm using the quick grid and in this quick grid we have the options like item and in this item we have to specify our collections so as of now we don't have a collection don't worry I'll just create a collection and these are that columns actually columns property this is one username column property and then email and then this is that know one template actually I just create it for that roles right whatever roles we can assign over here and then one another things over here is a phone number and then one last component and last column is that actions where I just mention our buttons right so like that actually we have to implement it is actually complaining because this component required that you know this guy uh reference you know name space so let me bring back that name space so once you bring back the name space now see is perfectly fine now let me Implement right that component so first I'll just adding know uh one iable list over here and also we have to bring back that uh model uh name space so now we have to get that user list so whatever user list I have I have to assigning over here because they expecting actually iable so that's why I have to make it that iable list and then what I need to do I have to uh call what uh life cycle hook method in this component overload and on initialize method on initialize method here I'll just call one users right so all get the user I have to call so how we can call it simply I just injected this service right so this service actually return uh users and this Service Act dot get all get users right so this is get users all users will be return over here and make it it to a wait uh because I using uh it is a as synchronized method so using AIT right so now we have a user and what I will do simply I have to just convert it to as squable right so how we can do that this is very simple so simply as uh converting and assigning to this user uh this iable right so simply users dot make it to list a numeral list and then using that as a quable right this is as quable and then make it end over here so like that we can get and over here and simply we can remove this guy we don't require any return and all so like that you can simply get that result and assign to over here and this result actually we can assign over here and we can uh using that other things over here right so let me quickly go through some complex part over here see this is a template actually what I'm trying to do simply whatever our roles right which we have roles in this here so that I am using the iteration and then bind in the UL and I li right and then also here uh one two things actually we have to implement that edit and delete method as well so quickly let me create that edit and delete method because neither it will complaining me right so let me create that method uh without implementation but yeah let me just create that method right so this is edit method as of now we don't have anything right so that's why uh we have to create over here like that okay so now this two method we have to create now we are good to go to run this component right so that's why I just created this two uh method so so this is done now what I will do Simply Save it and now try to run and this application and see in actions our list is returning or not right so first right click on that solution because see this is us uh we have to run this both application right so web API and this one right both together so what I can do right click on that and start configuration start up multiple over here start and then start apply and okay and then start so now both API and uh our both application will be run together and see in actions so now first we have to try to login so try me login that our admin user so this is my admin user let me logged in and once I log in now I'm able to log in but yeah I have to adding one navigation for that user list as of now we don't have but what I can do simply I can just add that users directly and get that component now see I'm good to go to get that result right because as of now we have two list of that user so that's why I'm getting this two list but yeah we have to make it feel better for this component as well but yeah that we'll do in a in a now later but yeah as a of now we just first I will just Implement all that you know functionality and also if you see this is a quick GD actually the nice feature is short shortable right so I'm not doing anything but yeah see automatically short functionality is over there right so that's actually many feature we have in a quick grid so please go through my that quick grid session you will get more idea of that so now see quick grid has been completed means that list get all list is completed but now we have to implement these two things right edit and delete so let me uh Implement that edit one so go back to your close that application close the application go back to your uh Blazer application again now go to again that custom authentication uh service this is a implementation right so again we have to implement another service so before implementation we have to go to declare our service over here I Management Service so let me add this guy first so what is my another service my another Services get by get by user right so get by uh get by user by the email right so that we have to implement so go back to again uh here the custom authentication Service let me implement this method as well so go to down now we have to implement this service so how we can implement it is again very very simple like that we have to using the sttp client and Implement that so I'm not going to details again so simply I'll just explaining right so copy this guy and just P it over here and explaining over here let me add first let me add that as synchronize right so now see using the HTTP L get um get a sync method passing that our endpoint URL and just adding that know router parameter right and then again getting the response and deriz and return back to single user model that's it right so like that we can just uh get it over here so now this is one service actually we require two service forg by email ID right and then update one right so we can just using together right so that's why I'm not going to again to implement that so what I can do go to again account management system here let me Implement another one that is called uh update one right because we require together so that's why I will create like that see user update method which will expecting this and this model right and then actually while once I click the edit so this API you know this service will call get that information and bind this model right edit model and then once I update you know submit that form so this API will call and you know this service will call Api in uh interact and they'll update so that's why I just continue with two uh together now save it now go back to custom provider and let me Implement uh both so let me implement the method and here now see uh update method right so again it's very very simple there is a no complex thing it is simply service to call our API right so let me create a TR cach block first and here ex and remove that throw and all right and here I have to just know create uh One content right so let me create a Content here slightly different to update call actually patch call actually we have to try to different way to using estp line so first I'll just create as a Content over here right and then content simply whatever user model as we have to just know serialize over here and then using that you know uh encoding type right and also that whatever content type so we have to mention over here and then we have to uh call that put method uh of that here like sttp beut method and make it it is a synchronized way so I'll use it as sync and then itut method expecting your a API URL along with this content so what is my content this is my body actually body content so that I have to pass it over here and make it get that response and that response actually we can specify okay it is true or false right so make this actually we can create our update method as well quickly and simply return false right so now see it is how easy we can create that right so user update also has been complete now we are good to go to implement that that model uh that component right so go to that account one go to here and create a new component and here what I can do I just create a name for example edit or whatever name you want so I'll just make it the component name is edit update user so make it edit update user component and make it that guy as a router first page route so make it that guy a page route as a edit user and then pass it that whatever parameter we required right so that parameter we can specify and then again we have to inject uh that uh service so that I can use that service so this is my service and that inject in that Service and bring back that name space and uh we are good right so now we can start our implementation so uh first what I will do I will just you know grab one edit form right because this is a form look like as a form right so first I'll just create a form so let me created form over here so here and just grab that code of that form right see I just using edit form right and here I using that one model which will try to bind and also on validation submission method we create a method which will just once I click submit so this method will call and we can further updation API will call uh API service will call and further we'll do uh our things right so here simply it's a common logic over the data validation and annotations of this edit form and then whatever you know forms you your parameter your controller you require you can just mention like I just I just use my username and that email phone number right and then user roles right so that user roles also the multi selection user roles and then finally submit submit button and then close that edit one and then also it is uh just using make sure like okay if whatever model is not null so that it's trying to loading but if it is not null so then it's trying to bind and our result like like that actually simply we have trying to do so now we have to quickly remove that all the uh uh error so first I will just use as a parameter why I'm taking this parameter because in the route parameter I'm passing this parameter as a string so that's why I have to using this as a parameter and I decorate and then I use that parameter this is one things now second things I just have to create and one model which I'm to trying to use over here so this is my model and bring back that name space so like I just using that user model right and this user model we trying to bind in this form so this user model we have to just create a property and then another things we have to trying to do over here the selected roles right see whatever roles we have if it is selected so they we have to bind it over here so that's way actually we can create this selected roles like that right as a as a property so that I can bind I can add in whatever roles it's just selected so we can bind it over here so I can use that binding over here now we have to create our life cycle hook over here let me create override override and then uh on initialize on initialize and then here we have to actually call that our service right uh get this service so get user by the email ID and then we have to populate this model right so simply again let me uh assign this user model right over here like that like call okay it is a sync method so we can use it a sync so like that see we can just get that user bying email ID and then we can assign over here and whatever on initialized component we assign they will try to bind over here in this form right this is an idea and also it is returning so let me remove this guy we don't requir and uh here the next thing is whatever roles right so whatever roles so that roles also we can over selected over here if it is selected roles right so how we can get that current rules as well so in this uh see in this uh return type if you go to that model it is also returning that rules is whatever that current roles so that roles also we have to select actually assign this roles so let me quickly assign this roles as well over here so like that whatever user model right we are getting that uh data they have a roles property and then we just simply assign that roles so that once I populate this forms so whatever that current roles right of that particular user that should be selected so that's why actually we using this property and assign this value and then whatever that you know system roles like I in our system they have know 10 roles 15 roles like user HR finance and you know administrator and sols so that roles also trying to bind in this model right so that uh once I edit form so whatever current in our system rol so that should be po it and then whatever selected role they will select it the two things actually the all roles and then selected roles these two things concept of multi selection over here so how we can get it the rules it is very simple again I can use that you know the service and get roles and we can get that all the roles whatever we have a systems right and then we can just update it whatever user model as a roles right so that we can just update it over here as a roles right so now we can just updated this roles right first we can get that roles and assign the selected roles and then again that roles whatever user roles we have that uh right so that we have to update it whatever that system roles so these things actually we have to do over here and then we are good right so this is good enough and let me okay yeah this method actually we have to create it so let me quickly create this method me because we will Implement over here that method as well so let me quickly create and also yeah so let's me finish this together also like see this is binding concept is completed like once I user will click edit functionality so user will bind the data this is a binding concept complete but now once binding so user can change whatever things they want to change once I change the user can click and update they should be update so that update also we have simply nothing we have to do simply I just call that API right so let me call that API how we can call let me call it that await right and await act this is my Service Act and then we can get uh our user update method and in user update method we have to just pass our email ID so uh what is our email ID where I can get our email ID I can get from this parameter right this parameter I can get it and where is our model our model is also is the user model like this is my user model so we can pass it to our user model like that simply right so now I just have to decorate over here and because it is true false right so let me check it is true false so if it is true so then we have to navigate actually uh to our uh list page so for the list page navigation actually we have to use that navigation manager as well so go to the top inject your navigation manager again over here uh let me inject in the navigation manager and simply go to down and here I can call that navigation do navigation 2 that method and pass it to where actually you have to Route so I just want to Route over here and one more thing actually we have to do see this is simply complete if it is Success right if it is fail so we have to keep it over here with this changes right so there's a something additionally we have to do over here first uh before sending that user model right so this user model we have sending whatever that current role we have that assigning right so we have the current role all that roles right so that we have to modify with this selected roles what about the selected roles right so that we have to just update it selected roles uh updated over here right so that first modification we have to do and then once I completed if it is fail so again what I can do if it is fail so whatever the selected roles we have to actually remove this is remove and update whatever that all the roles right so that two things actually you have to modify so I'll show you uh in example don't worry so let me run this application but before run now let me add a navigation menu for this user list so go to that layout go to that navigation menu and here let me add that authorized section see this is a admin Ro authorized section and here uh let me add over here uh my users right and this is a user list or user management right so user list so that is done now we are good to go and let me run this application now it is logged in with kkp because already we have logged in right so we have not logged out so it is keep it in our cookie so that's why it's logged in so that is fine but once you logged in now see I'm able to see this uh um uh this component right so once I click now see I'm able to see but here once I click uh this guy uh admin right so once I add it nothing is happening right so why it's not happening let me quickly go through and check what happening so now see there's a no click event right because once I just created this event but we have not Implement right so we have to implement something over here so go back to your application go to your user components right and here if you see see that we have nothing on edit and delete right so let me Implement that edit one so quickly in this edit simply I have to use that navigation manager because we have to navigate that page right that this page edit and update so quickly uh let me add that navigation manager again this is a functionality actually provide in Blazer uh Blazer so use that navigation manager and here we just simply pass it to here whatever the navigations so this is my navigations navigation manager navigate to this is my component name and then this is actually this view model returning that current Uh current row of that uh user right and then user has a email so we are passing as a email right and this is actually that ID parameter which we have in here this guy right so like that actually we have addit and if I save so once I save and close and run this application so now it's it's running now it's running and go to that user list if I click that admin now see it is populated perfectly right and this is all that populating and this is whatever the current role is uh user have that already selected as well right so what I will do simply I'll just control and then select that uh HR right and also control that select that finance and remove that admin right so if I remove move that admin and it is save it update right so once I update now see it is updated whatever that current role which previously was admin and now it was finance and HR right so it is perfectly fine and go back to again so if you go back to again so whatever current role as of now it have that financi and HR that is selected and if I want to update something 1 2 3 4 5 6 7 8 9 10 and updated so that also will will be updated so like that actually you can just update edit right and that is fine now the last thing is spending the delete one right as of now see delete nothing happening so delete let me quickly delete functionality also do over here let me close and go back to your uh that service first you have to go to the service anything things you have to achieve first you have to go to service because it is a API call so API will interact in this service right so let me go to that I account manager here and here I'll just delete uh service we have to implement first so what is my delete service look like so simply I'll just call that uh declaration over here that delete also return return type is Boolean and using that user email right and uh go to that implementation go to that custom authentication State provider service and go to implement quickly and go back to here and then here we have to just Implement our things it's also it's very very simple there is a no nothing because it's simply to call our that uh API right so I have to using that uh a sync method and here see STP line. delete method and pass it our API URL and passing with this our user ID right email ID and then it will return okay it is Success on fail based on the success on fail it will just returning back and that's it so now this is a very simple service of delete one and now go to that implementation so go to your users components and here uh once user click on delete method right so this delete method so here I have to call this service and delete that one right so let me quickly implement that so where is our X service this is my X service so X service dot uh Delete right so this is a delete and then what expectation expectation is a user email so where I can get that user email I can that get the user email from that P dot whatever P right model is a p so P do email ID this is my email ID and that's it right so here we have to just rrap it for that condition okay if it is Success so that is done if it is Success so we have to reload actually our our uh list right so whatever list actually we have to reload as well so that's why we have to just call again that get user service inside that over here but yeah we have to use actually this a synchronized method so I have to use a wait and now if it is see it is success if it is Success our call is Success so let me call again that get users and then binding the list and then simply you have to use that state change method so that whatever current state they will change right and they will update whatever the current data right so like that we can just simply use the delete method but yeah this delete method is very very actually um important so if you're trying to delete so don't do the blindly delete directly delete right so before delete make sure you just use that you know confirmation dialog box to delete that so I just prepare or just creating a many session so you can just check out my old session and definitely will get that uh how we can Implement so you can just Implement over here but yeah like that we can do that and I guess almost we have covered everything so let me run and see so our API is is running uh and also our application web application also running and if I click that user so if I trying to delete okay which one I'm trying to delete U don't delete the existing one so okay so what I will do let me create a new uh let me register a new uh applic uh new user so create a new user for example net user and add the password once you registered so did is not match so let me quickly fix that and once I registered now it's registered so let me register one more user over here for example a super admin right so let me add this one also quickly so that we can show you in a demo uh how it's working so now it's also working now go to login use that login use user admin user so this is my admin user so it is logged in so go to that user list right see this two user has been created so this two user is over here but there is no rules and no no phone number right so what I will do simply I first I will go to that uh super admin and here I just selected see if it is not no rules so it will not select it so I will just add as the admin and HR and then added that phone number and updated now see it is perfectly updated if I want to delete so I can delete also see it is delete quickly and also let me addit this net user also let me add some number let me add this two things or the three three things right so now see it is perfectly working but yeah uh there's some you know quick grid know style it's not good right as of now but yeah I'll show you uh some style so that uh it's looks good right so what I can do go to that here it's a simple things I'll just create a new uh component let me stop that so functionality wise everything is completed but yeah for that style perspective of the quick grid I'll just create something over here so what I can do simply I'll just go to that style csss use that style and just make it name is whatever our component it is a users Dot razor. CSS file make it same name right once you make it same name so it will going to inside this component and go to that component here I add some style so that it looks feel better right so let me close that save it and here I just make it see this is a grid style and this is a deep you know T th style and then it is a TR and this is a t body right so I make make it like that this style you can take it from here and let me run it and see it's feel better or not right so go to that here it's logged in user logged in now see now it looks better right so like that actually uh also see it is ascending descending also it's working fine right so there's a many many things actually we have learn right user list and all and also if I want to one more thing actually before closing so see if I add it so now see it is a three roles only right so what I can do if I go to that add roles suppose I have three roles let me add one more roles for example administrator right and once I add and submit now see administrator is also there once you go back and add it now see whatever that new roles they will populate it automatically over here so like that actually this is a complete user management system you can use it in your application so for closing what I will do simply I just push this uh uh repository in my GitHub link so you can take it on uh for your learning perspective so right uh add these things B API so yeah uh this is that name right user management system blazer with web API right and then I make it the public and create push so now you can get this repository as well so that's all for this session thank you have a nice day and don't forget to like subscribe and share for more motivation

Channel: DotNet Real world example

Views: 322

Keywords: blazor wasm, .net core web api, user management, authentication, authorization, crud operations, web development, tutorial, programming, coding

Id: P9wDIOddUFg

Length: 85min 27sec (5127 seconds)

Published: Tue Apr 23 2024