Asp.Net Core Web API - Role Based Authorization in Angular 7 with Identity Role

quick demo of this video tutorial in this video we will discuss how to implement role based authorization in asp.net Co and angular 7 using espied or net core identity we will discuss things like how to implement role based authorization in espied or net khob API using identity role we will use auth interceptor and augur to implement role based authorization in angular 7 and finally we will discuss how to create private routes in angular 7 such that we can restrict a specific route only for few roles I hope you will find this tutorial helpful for your upcoming projects so please watch till the end of this video tutorial before starting this video I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please please subscribe to this channel and click on the bell icon to get notification about my new videos most of the video LSN here also has a written blog post you can find the link in video description you can grab code from the as well quad sub youtube welcome to code affection in this video I will show you how to implement role based authorization or authentication in SP dotnet Cove API with angular 7 in previous two tutorials we have been discussing user registration and JWT user authentication login and logout in espied or net cove api and angular 7 as a continuation to those two videos here we have the role based authorization in asp.net web api with angular 7 if you have not watched that previous two tutorials I have given the link in video description please force that force and then continue with this video before getting into this topic I would like to thank for your paypal donations for my previous books in order to make more helpful and quality tutorials like this you can support me through PayPal donation I have given the donation link in force command and video description without further ado let get started so here we have the asp.net Web API project and here we have the angular 7 project from previous Jada to user authentication lesson both of these applications are running inside the browser here now we have to update these projects for role based authorization using SP dotnet core identity so first of all I want to show you how to add a role for a user using asp.net core identity for user registration we have already designed a form which was discussed in our first video so here we have the user registration or signup form so when we submit this form corresponding user details will be inserted into our SP donut Co identity tab along with that we have to assign a role for the particular user so first of all we have to have some roles for different types of use so inside this application for that here we have the database user dB inside that you can see view tab is related to SP door natkho identity inside this tab will SP metro's we can insert drawers for different types of user inside this application so let me add few crores inside these tablets or right-click on the tab well then edit top 200 rows so first of all we have admin ID will be 1 then name will be admin same can be copied into this normalized name column here after that we have to insert a new role for customer let me copy this and pasting inside this normalized column so here we have two roles inside this application admin and customer now let's look how we can assign any of the role for a particular user when we submit this user registration form here as per the first video when we submit this form it will invoke this may be bi method here inside this application use a controller post application user inside the method we will insert new user into the database now let's check how we can assign any of these two roles for a particular user for that different applications have different approach for example if you want to create an admin user so you will have a secure form to create a admin for the application and in case of yourself with customer role you will have some public or forum like this or you can handle all of these situations in a single form by adding a select control populating all the roles from the table here so when you select admin we will create an admin user and user select customer role corresponding user will have customer role since we have different approaches to create different types of user based on user role privilege I'm going to simplify the process for now inside this post Web API method here I'm going to set manually different roles for different user so inside this post Web API method parameter we have to pass role for that particular user so inside this a model class here I'm going to create a new property property which is of the type string and I will name this property as role in practical example you have to pass the value of this role from this form submission itself for that you might have a different form for different role or you can have a single drop down to select different roles from the application in order to simplify this process I just want to provide the role manually here so I will do this model dot roll is equal to customer in order to create the user we have called this function create as thing from this underscore user manager property after that we have to assign the role for newly created user for that we can do this first of all we have the avoid keyword then underscore you saw manager you can call this function add to roll a sinc function first of all we have to pass the object application you saw after that we have to pass the roll which is here model dot roll so this is what we can do to assign a particular role for a given user now in order to work this approach we have to add corresponding class implementation identity role into this application for that you can go to this startup clause here inside that we have already added few packages here along with this entity framework store we have to add identity role also so this is what we need to do add roles function can be called it is of the type identity role in order to reflect these new changes inside the running instance let's build this solution once again after successful built back to this angular application here let me insert a new user you saw one two three then password will be one two three four one two three four this user will have the role customer since we have assigned that manually here customer so in order to identify the user with role from username itself i will append the role here customer now let's submit the form so here we have successfully created the user you saw one two three customer let's check how it is inserted into the DB here first of all we have the SP net users table inside that we should have a record for newly created user so here we have been you so you saw one two three customer now in order to see the corresponding role assigned to this user we can check that here inside this table SP net user roles first of all we have the user ID so it should be similar to this one here it ends with one zero three e so here we have the corresponding same user ID and here we have the role ID as two so inside this has been a crosstab well we have given ID as two for this customer so that is what we can see here now let's create one more use of with role admin for that I will update this hard-coded role here instead of customer we have admin let's build this project again and back to this user registration form here I will create a new user you saw one two three corresponding role will be admin so I will append this string admin here then password will be one two three four one two three four submit the form so here we have created the user let's take that inside this table let me execute this select statement again so here we have the new you saw you saw one two three ID mean let me check corresponding role for that you use so here so here we have the corresponding ID and here we have the role ID as one which is for admin here so here we have created new user one for customer role and one for admin role now let's check how to implement role based authorization using asp.net core identity so it should start from JWT you saw authentication itself so here we have the corresponding may be bi method here login inside this angular application here here we have the corresponding login form here so when we submit this form login form it will post that us into this post Web API method here login for JWT user authentication now we have to update this web api method in order to assign corresponding role for that user into this user claims here so first of all here we have the if Clause this if Clause will be execute if there is a user with given credentials username and password inside that Furcifer we will check for roles assigned to this user so first of all we have to get the role assigned to the user for that I will create a new variable role and we can fetch corresponding user role like this a white keyword can be used here underscore user manager dot get roles a sync function can be called inside that we can pass this user object here you so now inside this variable we have the corresponding role for that particular user now we can set the corresponding role inside this user claims here so let me add one more claim here new claim function can be called as the first parameter we have to pass the role claim for that I'm going to define one more variable here identity options identity options inside that we have different or he still claims inside asp.net identity I will name this as options is equal to new identity options and here we can use corresponding registered claim for role so underscore options dot claims identity property can be accessed inside that we have this claim type roll into this we can pass the role that we have fetched here so we can do this role dot first or default function can be called here so here we have stored corresponding user role into roll clip now let's look how we can implement the actual role based authorization for that I'm going to add few get Web API methods inside this user profile controller here all of the new work matters will be of the type HTTP get in order to access this Web API method corresponding user should be authenticated so we can add this authorized attribute like we have done in previous video along with that in order to access this particular web api method corresponding our user should have the role admin so we can say this roles is equal to admin so inside this roles property we can set one or more roles who has the privilege to access this Web API method here if you have more than one role you can separate them with a comma in between them and we have to set the corresponding crowd here so route inside that we can set this for admin so function definition will be something like this public string I will name this work method as get for admin from this Web API method we just need to return a string it will be something like this where method for admin like this we have to create two more will be a method so let me copy this and paste it below that two times so in order to access the second web api method here corresponding user should have this role customer I will change this route here it will be something like this for customer corresponding Web API method will be something like this get for customer and from this Web API method we will return web method for customer and this last work method can be accessed for users who has any of these two roles customer or admin in this application we only have to admin and Kazama in your application you might have any number of rows so in that case if you want to restrict a web method for a few rows from the roles tab well you can do this so I will change the route here for admin or customer I will change this work method name here for admin or customer I will change this string also work method for admin or customer let me build this project in order to check the working of this application I'm going to use this application here postman so here we already have this post Web API mother requires to log in a particular user so here we have the corresponding URI I'm going to try both of the user that we have created one for customer and one for admin so first of all let me try the user for customer corresponding username is you so one two three customer then password will be one two three four send this request so here we have successfully authenticated inside this application and corresponding JWT token is here now let's try to access these web api method here so first of all let me try this web api method of the type get for admin so let me add one more time here it will be off the type get then corresponding URI will be something like this let me copy this and paste in here so we have to use this URI user profile 4/4 admin user profile for admin since we have authorized attribute here we have to pass corresponding JWT token along with this because so go to this tab here or the ization then we have to select this type bearer token and here we have to pass the corresponding token that we have received here let me copy this and paste that here send this request for not three forbidden that means authentication is successful but authorization is failed because we don't have the role admin in order to access this may be bi method we should have this role admin now let's try this Web API method here for customer for that let me duplicate this tab here instead of this URI here I will use for customer inside this authorization tab we should have the same token now let's try this request so here we have the response status 200 ok and here we have the response work method for customer so we can access this Web API method since we have this role customer for this particular user now let's try the last Web API method here but that let's duplicate this tab here corresponding URI will be something like this for admin or customer so let me copy this then back to the application here I will paste that here send this request so here we have the success response with status code 200 ok now let's prively same with admin user so corresponding user name will be user 1 2 3 ad me let's make this request so here we have the corresponding JWT token let me copy this and we just need to update that inside this authorization tab here so inside this tab we are going to make the blinkers into this Web API method here for admin so this should be successful since this you so have this role admin send this request so here we have the success response now let's try that inside this for customer request let's update this token send this request so this because is filled 4 nor 3 forbidden because we don't have the rolled customer now let's try the last Web API method let's update this token send this request so here we have the success response because in order to access this last Web API method we need either admin or customer role so here we have done with role based authorization inside asp.net Web API project now let's check how to implement role based authorization inside the angular of an application from previous tutorial project so here we have the same angular 7 project from previous tutorial in order to demonstrate the working of role based authorization in angular 7 application let me add one more component inside this application currently we have this application structure here I want to add one more admin panel component into this application so first of all let me update this application structure I will copy these two lines then I will paste that here instead of home component we have to create admin panel component corresponding component name will be admin - panel so here we have updated application structure in order to create the corresponding component we have to use this angular CLI command ng d4 generate c4 component and we have to create admin panel component in order to skip the creation of test file with extension spec tortillas we have to reset this flag spec and in order to skip the creation of component specifics charg'd we have to specify this flag double - yes now hit enter newly created component can be seen inside this SRC folder here admin panel inside this component HTML file we have this default paragraph admin panel works now this component is only for admin users if users without admin role try to access this component we have to redirect the user into some another component say you are not allowed to access this component for node 3 forbidden status okay so in order to show that specific message I'm going to create a separate component so let me update this application structure again let me copy these two lines from here then I will paste that below and I will name this component as forbidden so that we can show this component whenever whenever users without admin role try to access this admin panel corresponding component name will be forbidden let me copy this and pasting below that now we have to create the component for that we can reuse the command that we have executed here instead of admin panel component we have to create forbidden component forbidden hit enter so here we have the corresponding component fobian and corresponding HTML file is here instead of this default paragraph I want to show some message something like you don't have the permission to access this component I have prepared corresponding HTML for one of my previous videos so I will reuse that here let me get of this default paragraph from here and then I will paste that here so here we have the bootstrap card element inside that first of all we have the image for no three dot PNG we have to add this image into this assets folder here so corresponding image is in my desktop let me drag that into this folder here assets IMG folder below this image we have shown this or text for node 3 access denied and we have this paragraph saying you don't have the permission to access this resource now we have to configure routing for role based authorization for that here we have the routing module app routing module here we have to add two more routes for forbidden component and admin panel components so let me copy this and pasting below that two times this is for forbidden component so forbidden will be the corresponding path then corresponding component will be forbidden I want to make this route as public so I can remove this can activate array with odd God after that we have admin panel corresponding component will be admin panel in order to access this route we should be authenticated inside the application so I can keep this can activate array with auth God along with that in order to access this particular route the corresponding user should have the role admin so we have to specify that inside this crowd here for that I will add one more property here data inside that we can pause an object with a single property permitted roles inside that we can specify the corresponding drol admin Y now we have to verify whether a user has particular role which is required to access or consume current drought and we can do inside this odd guard can activate function here inside this function here we have the if Clause inside that we will check whether the current user is authenticated or not by checking corresponding token in local storage inside that we can't verify whether the current user has required permission drawers for that first of all I will declare a new variable let rolls and we have to store the required rules to access the current drought that we can retrieve like this next data inside this data property we will have the object that we have specified inside corresponding route okay from this array we have to retrieve this property permitted drawers let me copy this and piercing here and we have to cast this as array of strings now I will add one more if close to check by the current route demand any rules for that we can check this rolls property here if there is any role which is required to access the current route that we can handle inside this if close here now inside this if close we have to check whether current you saw has all of the rules required to access the particular route in order to check this condition I will define one more function inside this user service class here it will be roll match I have already prepared this function for one of my previous videos I will just paste that here so here we have the function roll match it has a single parameter allowed rolls which are the rows which is to be required to access the current drought okay and inside this function first of all we will reset this property is match as force and here we have the payload property inside this SP doorknob API project while authenticating a user we have stored that particular user role inside this claim here roll claim so this subject or this payload will be sent along with the JWT token into the client-side so in order to retrieve that particular role we can do this so inside this local storage token we have the full talk and JWT token and we will split that JWT token with period symbol so in total in a JWT token we will have three parts first of all we will have the header payload and signature so this will retain an array containing three elements and we have to retrieve the second element which is the payload for that we have used index one that payload will be encoded and we have to decode that for that we have used this window dot eighty OB function and in order to convert that into a JSON object we have called this pass function from JSON okay so inside this we have the payload so in order to retrieve the currently logged in user roles we can access this role property since we have stored that here like this role type it will be stored inside this role property in our JSON web token inside this for each loop we will iterate through the allowed drawers array inside that we will check whether the current user has the allowed roles if the user has particular role this function will return true otherwise it will return false so inside this odd god function we can add one more if closed inside this we have to call this function role match from user service class so first of all I have to inject that particular class here private service which is of the type you saw service and here we can do this this dot service dot roll match function can be called inside that we have to pass this array roles let me copy this and paste in here if it returns true then corresponding user has the required doors to access the current drought in that case we can return true from here inside the else part we have to handle forbidden status code for node 3 for that we just need to redirect the user into forbidden route so we can do this this dot router dot navigate function can be called inside then we have to provide the corresponding route forbidden finally we will return false now we have to do one more thing inside this auth interceptor inside this error callback function we have handled this status code for node 1 and authorized along with that we have to handle this status code for node 3 also so we can do this error dot status is equal to for node 3 in that case we just need to redirect the user into forbidden drought so let me copy this statement and pasting here instead of this route we have forbidden so here we have done with role based authorization finally we have to do one more thing inside this home component we should have to have one link for admin panel so that admin users can access that route for that along with this logout button here I will add one more link inside this unordered list here so here we have the hyperlink which can be used for admin users if any use of without admin role try to access this particular route we have to show this forbidden component HTML let's check if it works as expected for that first of all we have to save all of these modifications here then back to the application here so let me try to login with admin user so corresponding user name will be user 1-2-3 admin then password will be one two three four submit the form so here we have successfully assigned inside this application let me try to access this admin panel trout so here we can see the default text from that component then back to the home component let me log out from this application now let's try to log in with customer user so you saw one two three customer password will be one two three four submit the form now let's try to access this admin panel boom since current user does not have the role admin we are redirected into four billion component here we have the message for no three access denied you don't have the permission to access this resource so this is how rollbase authorization works in espied or not KO and angular 7 application so that's it guys in this video we have discussed how to implement rollbase authorization with asp.net KO identity we can download this project source code from the link given below in video description I would like to extend this application with more features if you have any suggestion you can comment that below in video description in order to make more helpful and quality tutorials like this you can support me through PayPal donations I have given the link in force comment and video description please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 62,526

Keywords: role based authorization in asp.net core web api, role based authorization in angular 7, asp.net identity roles and permissions, asp.net core 2.2 identity roles, implement role based authorization/ authentication in asp.net web api, add role to user in asp.net identity, asp.net identity role, role based authorization in asp.net core 2.2, jwt role based authorization, CodAffection, Asp.Net Identity Role Based Authorization with Angular 7, .Net Core Web API Authorisation with Angular 7

Id: MGCC2zTb0t4

Length: 34min 15sec (2055 seconds)

Published: Thu Apr 18 2019