Angular 5 - Role Based Authorization with Web API

quick demo of this video tutorial in this tutorial we will discuss how to implement role-based authorization in angular 5 and web api using asp.net identity so inside this project we have discussed how to implement role based authorization in angular file and web api project and then we have discussed how to create a role based menu along with that we have discussed how to implement role based routing in angular 5 projects so I hope you will find this tutorial helpful for your upcoming projects so please watch till the end of this video tutorial what's up YouTube welcome to dotnet mob in this video I will show you how to implement role based authorization in Anguilla file with the babyís this is a continuation to the previous two tutorials in the first video we have discussed how to implement user registration in angular 5 with the babyís in part two we have discussed how to implement login and logout in angular 5 with BPI using talk and based authentication and now in this tutorial we will discuss how to do role based authorization in angular 5 so here we have the final output from previous two tutorials in the first video we have created a user registration form to add new users into Web API project and in the second video we have created a login form using talk and based authentication if you have not watched previous two tutorials please force that force and then continue with this video tutorial now let's deal with role based authorization so here we have the Web API project from previous tutorial first of all I will implement role based authorization inside this Web API project and then we will update the angularfire project first of all I want to update this user registration form I want to add a provision for assigning roles for new users inside this form for that we will display all the available roles as a check box list so here we have the database user DB for Web API project I have truncated test status from previous tutorials first of all we want to add roles inside this role tab for now I will manually enter all rows from in studio right click on it then edit top 200 rows first role ID will be one then gold name will be admin then second role will be although and finally we have Reda so here we have inserted three roles admin author and reader inside this project I am going to create a Web API method which will return all these Scrolls so first of all let me create a controller role controller right click on this controllers folder then add controller select web api to controller empty click on add name of the controller will be role controller click on add so here we have the Web API method get roles first of all let me add the required using statement this may be a matter is of the type HTTP GET and here we have there out API for slash get or growls first of all we have created two variables of the type roles two and role manager we have the role manager object door drawers will return all the rows from this application and here we have selected ID and name column from this role table with that list we can show all the roles inside this user registration form as a checkbox list as we have discussed in user registration tutorial when we submit this form form data will be posted to this Web API method register after adding role check box this we will have an additional string array containing selected rows for the particular user so we have to update this Web API method accordingly first of all I will add a new property inside this account model class here it will be of the type string array and I will name this property as roles now we need to add all the roles inside this array for the new user from this Web API method after creating the user here for that we can do this manager dot add two rolls first parameter will be the ID of newly-created you saw that we can get from this user object so we can do this user dot ID and then we have to pass the array containing selected rules so here it is model dot rolls so this line will add new records inside this user roll table here inside this user ID column we will take the idea of user from this user table and inside this roll ID column we will save the corresponding roll ID here so if you have three rolls inside this rolls array here it will insert three records for three rolls so this user roll table will map these two tablets user and roll so from this table we can find rules associated with a user before implementing role based authorization I want to update this angularfire user registration form to display a checkbox list for rolls and upon this form submission you want to add selected rolls for the current user after that we will implement role based authorization in both of these projects we have designed this user registration form inside the signup component here okay so first of all inside this component ng on it lifecycle hook I want to retrieve all the roles from this Web API method get roles sorry here we need to add allow anonymous attribute because in order to access this Web API method we don't need to be authenticated and let me run this application without debug mode for then you can use the shortcut ctrl f5 so here we have the web api project and here we have the angle of Phi project now we need to call this baby bi-metal get roles from this component sign up component type script file in order to consume this way will be I'm at the first therefore I am going to add a new function inside service class here you can see we use a service class inside this shared folder now let me add the function here so here we have the function get all rows you don't need to be authenticated in order to consume this may be bi method get' rows so that is why we have created an HTTP had the object with no auth as true in order to call this maybe bi method here we have called this get function from HTTP client here we have the URI for this ABI method inside this old URL property we have saved base address for the web api method after that we have appended this route API forward slash get all roles this request will return an absorber so inside this component type screen file we can subscribe to that absorber so first of all we can call the function this dot user service we have already injected user service class inside this component in previous tutorials then call the function get or rose and we need to subscribe to that return absorber here inside the function we need an arrow function with a single parameter data it's of the type any inside this that available we have all the roles from this Web API method inside that we have two columns ID and name from role tab in addition to these two properties I'm going to add one more property selected to display checkbox list inside this form for that we can do this I will I trade through this list using for each function for each element we will add this selected property as false to store this list I am going to add one more property here rolls it will be an array this dot rolls is equal to data now using these lease property rows we want to show a checkbox list test about the submit button for that open corresponding HTML file sign up component HTML and I will add one more do here so it will be something like this for surfer we have this ng-if directive that means we will show this to you only after fetching these roles list here okay inside that we have an unordered list using this list item we will iterate through this roles list on each iteration current item will be saved inside this item variable here we have the checkbox input type is checkbox in this material a CSS framework we have to add non-repeating ID for each of these checkbox so that is why we have added an ID property here and then here we have given value property that will be item dot ID that means roll ID and here we have the property checked based on the selected property we will decide whether we want to check or uncheck the checkbox you know that we have the label for this for attribute we have given same value as that of corresponding checkbox ID here now let me save all of these modifications and back to the application here so here we have the three rows from our Web API project admin author and reader inside this form we can uncheck or check these checkboxes but in background we have to manually switch selected property for that I will add change even for these checkboxes here we have wired up the event to this function update selector rolls into that function we have passed corresponding item index that we have declared here now we need to define this function inside the corresponding typescript file sign up component here so it will be something like this we have the function update selected rules here we have the parameter index and here we have updated the item from Ross lives with given index and here we have switched the property selected from its current value if it is false it will be updated with true if it is true it will be updated with force during the form reset function we will call this function reset form inside that we have to reset this property rolls also for that I will add these two lines here first of all we will check whether we have retrieved this roles from our server we will set selected property as false for all the items inside this list now during this form submission even we have to pass an additional string array containing selected role names in part 1 we have wired of this form submit event into this function on submit so let's update this function for selected roles first therefore I will declare a variable to store selected rows name for that we will do this we have this X variable inside that we store the selected role name here we have filtered all rows which is selected and here we have returned selected roles name now we need to pass this array into this user service function register user we call this a baby I'm a third register in order to save the new user so let me pass this array here X now we need to update this function register user so here we have the function register user here we need to add an additional parameter roles it's of the type string array now we need to pass this inside this body here I will add a new property here Rose is equal to roles parameters here you can see a red squiggly line because this user class does not have a property rules so better I can remove this user class from here and then this body will be an anonymous object now let me save all of these modifications and back to the application here let me add a new user as I told you I have truncated all the data from previous two tutorials so this user table is empty Bruno one two three then we have password one two three then email will be Bruno at gmail.com then first name will be Bruno then second name will be Nash Bruno Nash then I will select two rows for this user admin and author so click on submit so here we have the success notification user registration is successful now let me check this database here and we execute this select statement again so here we have the new record for Bruno Nash we have added two rows for this user admin and although it should be added inside this user role table here so here we have added two rows for the user here we have the user ID that you can see here it ends with 0 D so here we have the ID and here we have the role corresponding to the selected roles admin and other so far we have discussed how to assign roles to a user in angular 5 using web api and asp.net identity now back to web api project now let's implement role based authorization we have to do code base authorization on both ends server side and client side if client side JavaScript is compromised with hacking we have to prevent the unauthorized request in server side so we have to do authorization on both ends as part of that we have to save roles associated with a user when he authenticate into this Pepe I project we will either negate a use from this login form here as part of that we will make a token request into this Web API project as we have discussed in previous tutorial part two during user authentication we will call this function from application or provider class grant resource on our credentials here we have added climbs to the logged in user along with that we have to add roles assigned to that particular user inside drol claim for that we can do this first of all here we have retrieved all the roles assigned to that particular user inside this for each dupe we have added all those roles inside this roll claim to implement role based authorization in angular 5 we have to return roles assigned to this you saw as part of this token request response in order to return the additional user roles details we can do this first server we will create an object of authentication properties for that let me add this using statement here so here we have added the roles assigned to this user and finally we have created an object of authentication ticket inside that we have passed object of this clym's identity along with that we have added this additional data for roles and we have to pass this talk and inside this context dot validated function in order to return these additional roles details we have to overwrite one more function here so here it is token endpoint inside that we have added few codes to return these datas properly now it's time to test hole based authorization inside this Web API project for that I am going to add three more Web API method inside this account controller here so here it is here we have three Web API method 4 so for we have HTTP GET and in order to access this we have to have role admin and here we have the corresponding route and here we have the I met there for admin role and it will return a string for admin role and here we have the second Web API method in order to access this verb a bi method we need also role here we have the corresponding route and here we have the Web API method for all the role it will just return a string for all the role and here we have the final Web API method in order to consume this way baby I must say we need either other role or reader role and here we have the Web API method for other or reader it will just return this string so all of these three methods are of the type HTTP GET now let's check how this role based authorization works before that we need to add one more user from this angular 5 project we have already added a user Bruno Nash with username Bruno and password 1 2 3 and we have assigned two roles admin and author for the user now let me add one more user username will be Fiona 1 2 3 and here we have the password 1 2 3 first name will be Fiona second name will be green Fiona green and I will assign read or role for this user now click on submit so here we have successfully created the news of your negly now let me check the database here so here we have the new user a code for Fiona green and here we have added one road record for the new user now in order to test role based authorization using these three additional Web API method I will use postman extension from Google Chrome so first of all we want to authenticate a user using his username and password so here we have the base URL for this Web API project let me copy this and paste in here so first of all we want to make a token because it will be of the type post now open this body tab then data format will be X www form URL encode here we need to provide the user name and password username will be Bruno 1 2 3 then we have password password will be 1 2 3 and finally we need to add one extra parameter here grant underscore type is equal to password now click on send so here we have successfully authenticated into this Web API project now let me try to consume one of this way baby I method here so here we have the base URL let me copy this and I'm going to make one more get request and we need to copy this route from here API forward slash for admin role and inside this address we want to pass this access token as authorization authorization is equal to first of all you want to add the prefix be error then let me copy this access token from here and pushing here click on send so here we have the response from Web API method for admin draw first of T to Web API method can be consumed because this Bruno Nash user has two roles admin and also now let me try the same with Fiona gleam the code so first of all you want to authenticate the user serve name will be Fiona one two three and password will be one two three click on send now let me copy this access token from here and pasting inside this authorization now click on send so here we can successfully consume this third web api method since we have the reader role this user fiona green has only one role which is rid of so let me try to consume remaining to web api mat so here you can see the response message authorization has been denied for this request and here we have the status code for not one now let me try the same with first baby P I'm at third so here we have the same response message authorization has been denied for this request and here we have the status code for not one here we have a problem with status code here you can see the status code has for not one for not one means we are not authenticated to access the web api method actually we have already authenticated into this Web API project so for this request it should return for not three forbidden status code in order to fix this issue with status code we have to override authorized attribute in our Web API project so back to the visual studio I'm going to add one more class file here and and class I will name this file as authorized attribute click on add now we need to inherit this class from authorized attribute class inside the function we can override the function handle and authorized request so here it is here we have override handle an authorized request and force therefore we will check whether we are authenticated inside this project using username and password with token request if we are not authenticated with token request it will return a for not one request otherwise it will return for not three forbidden status code now let me build this project and back to this postman application here now let me try to make this request again click on send so here we have the updated status code for not three forbidden so here we have done with baby I project we have implemented role based authorization inside this Web API project now let's implement the same in angularfire application also in order to implement or base authorization inside this angularfire project we need to get the roles assigned to the user as part of token request response for that we have already updated this function grant to source credential inside application or provider class so here we have returned roles as an array and you can see inside this postman request here we have made the token request before and here we have their response along with this access token so here we have the role property inside that we have an array of roles assigned to the particular user inside this Web API project we have made the token request inside the signing component here so here it is here we have the own submit function this function is wired up into this login form submit event so inside this user service function user authentication we have made a token request here okay as part of this request response we will get these responses from the we can get this phone into that token request response we have subscribed here and here we have the arrow function inside that you can see we have already saved access token inside the local storage user token along with that I want to save the roles so I will do this I will say role array inside user roles in local storage now I am going to log in inside this project using Bruno national code so we have the username as Bruno 1 2 3 and here we have the password as 1 2 3 click on login so here we have successfully authenticated inside this project as part of the token request we have saved roles assigned to the Bruno you saw inside this local storage user roles now I am going to show you how you can make a token based menu inside this application for that I am going to add a new component inside this project so let me open one more terminal here in order to add a new component you can use this angular CLI command ng g48 and c4 component then component name will be admin panel so this component must be restricted to admin users so let me create the component here inside this component HTML file I will keep this default HTML admin panel box now let's add route for this component for that I will open routes tortillas here and I will add a new path here path is admin panel and here we have the component admin panel component now let's add the required import statement here for that whole control then press period now click on this imported man here and here we have the can activate as auth card in order to access this component we must be authenticated into this project now let me add a new item inside this menu along with this logout for that open home component HTML file here so here it is inside that I will add a new item for this admin panel like this so here we have an ally element and inside that we have an anchor tag and here we have the admin panel path now let me save all of these modifications and back to the application here so here we have the newly added menu item admin panel now let's convert this menu into a role base menu because users without admin role should not see this item here for that first of all I am going to add a new function inside the user service class here function will be like this role mask and here we have a single parameter allowed roles so this function will return a boolean value basically inside this function here we have a parameter allowed rules inside that we have to pass roles required to access some functionality from this angular 5 project and inside this local storage user Rose we have saved roles assigned to this particular user and we will compare or intersect with these two rows if there is any matching row we will return true otherwise we will return false so first of all we have the variable East match it is initialized with false and inside this user roles variable we have saved roles assigned to the particular user by converting that decent string back to JSON object and here we have the for each loop we will I trade through the roles passed through this parameter and we will check if that role is inside this user roles variable if there is any match it will return true otherwise we will return false now we can make use of this function in order to show and hide this menu item here for that let me open home component HTML file here and Here I am going to add ng-if directive in order to hide this item from the menu here we have called the roll match function inside that we have provided the required role in order to see this menu item so we need admin role in order to see this admin panel inside the home menu now let me save this and back to the application here so here you can see the admin panel because this Bruno gnash user has admin dot now let me try the same with Fiona green user click on logout then username will be Fiona 1-2-3 password will be one two three okay you can't see the admin panel link in menu so here we have successfully implemented role based menu in angular 5 project even though if you try with admin panel path here we can access the component that we have hidden from this menu here for that we have to implement role based routing inside this angular 5 application in order to implement role based routing you can update your odd guard before that open your drought door tea is fine along with this cloud for admin panel we have to pass the required role here we have passed required role inside this data property as an object inside that we have this roles with an array containing required role admin now let me open this odd god class here we have to update this class in order to implement role based authorization if we are authenticated then we need to check whether we are allowed to access the component or path using roles assigned to the particular user for there let me update this if statement here okay so here it is first of all we have to import user service class here so here it is private user service it's of the type you saw service class first therefore we bestow required roles for this part from this data property as we have given rows here we need to store that inside this roles variable and then we will check if there is any required roles we have to match that role with current user roles so that is what we have done if it is true then we will allow the user to access this component or path otherwise we will navigate the user into this forbidden path inside that will be sure you are not authenticated to access this resource from this project for this forbidden path we have to create a new component after that we will return false in order to prevent the user from accessing this component we have to create one more component so let me create the component in order to create the component you can do this mg/g for generate C for component then component name will be forbidden hit enter for this new component I will add a new part inside this routes config here so here we have the path forbidden here we have the component forbidden component for that we have to add the required import statement and here we have the can activate array with odd god class now let me design the component HTML file forbidden component HTML now let me copy paste the HTML code that I have prepared for this component so here it is inside this HTML here we have an IMG control to show an image in order to work this image we have to add this four node three PNG image inside IMG inside assets folder so first of all let me add the IMG folder inside the assets folder here I click the new folder I will name this folder as IMG now here we have the image for node 3 dot PNG now let me drag and drop inside this IMG folder here now let me save all of these modifications and back to the application here now let me try the admin panel part admin panel so here we have redirected to forbidden component HTML because of the wall based routing inside the angular 5 application because this user does not have the admin role now let me try the same with Bruno - record click on logout username will be Bruno 1 2 3 then password will be 1 2 3 click on login if I click on this admin panel so here we are inside the admin panel because this user has the admin role so here we have discussed how to do role based routing and then we have discussed how to show and hide items from menu based on role assigned to the user now for the integrity of this role based authorization we have already implemented that role based authorization in web api project suppose if some requests from this Web API project return 4 nor 3 forbidden status code because of the roles assigned to the user in that case we have to check whether we have a 4 nor 3 forbidden response from a baby I project for that you can update HTTP interceptor file here or interceptor along with this for not one status code we will check for not three status code also if there is any for not 3 status code we will return the user to the forbidden component now let me show you one more thing if you want to do some operation based on the roles assigned to the user you can do this suppose if you want to do some operation if the user has the author role in that case you can do the operation inside this if statement here so that's it guys in this tutorial we have discussed how to implement role based authorization in angular 5 along with that we have implemented role based authorization in web api project also and we have discussed how to implement role based authorization in routing as part of that we have discussed how to create a road base menu in angular 5 if you found this video helpful please thumbs up this video and for more awesome videos like this please be subscribed to this channel dotnet mob you can download this project source code from the link given below in 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: 55,336

Rating: 4.860465 out of 5

Keywords: Angular 5 Role Based Authorization, Role Based Authorization with Web API, Role Based Authorization in Angular 5 With Web API and Asp.Net Identity, Role Based Menu in Angular 5, Role Based Routing in Angular 5, Angular 5 Tutorial, Web API Tutorial, Role-Based Authorization, Angular Router Authorization, CodAffection

Id: Ks5ADKqPrBQ

Length: 36min 45sec (2205 seconds)

Published: Mon Mar 19 2018