asp .net core identity | Role based authorization in asp.net core mvc 7

hey there everyone it's ravindra here back with another video today we will learn how to secure our dotnet MVC app with asp.net core identity so let's look into Microsoft docs and let's see what identity is and asp.net core identity it is an API that supports UI logic functionality it means it allows you to use login registration change password and all the authentication authorization related entity sorry functionality and you do not have to write the code it is provided in the identity API you just have to use that API and if you want to custom that API you can also custom that customize that so so it's just an API that supports UI login functionality manage users password profile data roles claims tokens email confirmation Etc and you can also add some external logins like Facebook Google or Twitter login by using this API and you can find all the detailed information in Microsoft docs and if you want to learn it you can learn it from here about the Microsoft identity or asp.net Identity or whatever it is usb.net core identity oh so one more thing I have already created a tutorial on login with asp.net core and here I have used identity but it's not a scaffolded way I have created everything from the scratch and it has its own benefits and limitation so we are not going to talk about that I am just saying that if you find another video about login in asp.net MVC in this channel so you don't get confused with it so that was a custom or raw version of identity which is very limited there only we have login registration and role management and change password functionality so what we are going to use in this project in this project we are going to use identity with scaffolding so keep that scaffolding term in your mind so let's get started without any delay so let's open your Visual Studio click here and create a new project so type here model view controller and you will find this asp.net core web app model view controller so click on next and let's change its name to asp.net identity rule based tutorial and change the location if you want and I'm going to change it so click on next now look here carefully now what you have to do here you have to select this authentication type which is individual account keep this checked it is very useful feature configure for https click on next and our project will be created soon now our project has created now let's close this tab and open this app setting.json here we have a connection string and what I have to do here I am just going to copy the connection string that I have created inside my gist you can also find that so I'm gonna copy this from here to here and I'm just gonna paste it here okay so it is very simple and nice here is our instance of database here goes our database name so let's name it what is our project name ASP net identity rule base so let's name it ASP net identity just yd Whiting stands for YouTube okay so we are good so far now if we click on this data folder we already have our application DB context class here we don't have to do anything so let's open this tools and you get package manager package manager console now what we have to do here we just have to write this update database and it is saying something update database command not found and here is a spelling mistake so update data base okay so let's see so it has created a database for us so let's find it in our SQL Server so if I click here and refresh it I will find asp.net identity YT and it has created these much tables okay so let's run this application so here it is our nice and simple and very familiar UI so it is a very long name you can change it home privacy register and login so what if I click here in register let's try to register and let's do it like this John at the read gmail.com password capital j o h n at the rate one two three capital j o h n at the rate one two three click here on register now it is asking for confirmation and it basically done through the email accounts basically it is a demo application not a production one so we do not have to configure a email account here just click here to confirm our account thanks for confirming your email so let's see can we login so it was J O H and John at the gmail.com gohn at the rate one two three login so it is saying hello Zone Isn't it nice and simple and actually we haven't write any code till yet and we already have that much of functionality so if I click on this John at the red gmail.com so we have this section here and you can update these things from here like you can update your email profile from here you can change your password and here is your personal data so till now everything is very perfect but what if I want to add a some more extra field here I want to add a name here so what can I do now how can I find how can I find that where to add this field and if you look here this is identity slash account slash manage it is the page if we go here in our Visual Studio here inside this areas you can find that identity folder this identity folder but if you expand it and you will find you won't find any account folder here and if I log out from here and go here again in register you'll find identity slash account slash register and you don't find anything here except this U star.cs HTML page so you will see you might be wondering right now how I can find these pages from where these pages are coming now what we have to do first of all we want to add some extra Fields here for that what we have to do we have to do nothing very special just add a class here let's name it application use application user fine now what just inherit her identity user class press Ctrl Dot select this and it will add this line here using Microsoft asp.net core identity and now right here a string sorry p r o p string name okay let's add suppose I also want to add a profile picture let's keep this sign here it means these fields are nullable now if we look here it is a table and if we look the column of this tables here we have these columns username normalized email normalized email email confirm password hash security stamp concurrency phone number phone number confirmed two-factor enabled lockout lockout and lockout enable access field count we don't have these fields there so we have to add these Field in this table asp.net users let's see so we have added these two things here now what we have to do open this application DB context class and press right here angular brackets let's write here application user okay now what I want to do I want to add a product table here also so I'm just writing here product dot CS add attribute here table name of table category it is a mandatory field I will show you why I am doing it so prop and ID prop string name it will be a required field I am doing this so that we can also see how we can add extra tables in our database that what we have to do here right DB set sorry DB set name of the table product and I'm gonna write here products so if I write here products then it will generate a table with the name products so to prevent that thing I have written the table name here sorry it is products products not products product so to prevention for the name products we have to add this line here so that it will not generate the products table sorry so that it will generate a table with the name product not products that's why I have wrote this table what it is attribute here okay so we are good so far now what we have to do we have to open this program dot CS file and we have to change this thing and let's write it add identity just remove it we do not want required confirmed account true okay instead of add so right here application user comma identity rule and add these two lines here also okay where we have gone okay just keep them aligned that's fine please watch very carefully otherwise you will get so many errors and if you are a new user in asp.net field you will get little bit frustrated now where we can find some possible errors if we go here in the share section login First you here we have to change it with application user press Ctrl Dot use this copy this paste it here okay so do not forget to change it here inside this login parcel so here we can find this we will go again we will go here inside the views shared folder login fossil here just change this thing here it was identity user change it to application user okay now we are good so far so let's open it package manager console right here add migration and customized identity it's a message so it will take a while okay so if we look at this file what it is saying he is saying that we have added this column here and we have added these functionalities Let's see we have created this table also product so that was it we do not need this file right now if so let's update our database okay so we have updated the database so we will look here let's see it has added those fields or not so right click here and click on refresh so first of all it has added this table which is product and inside this spnet users let's see let's select thousand rows and it has added this these two Fields here name and profile picture which must be null right now name and profile picture okay so we are very good so far and let's close SQL server for now let's close this tab also now run our project so if we click here in register okay we are fine let's click here in this login field okay we are fine so let's do some updation or update or modification in this register page so now it is a big question where I will find those pages you won't find you have to add something for that these pages are not available right now you have to overwrite them and how we will overwrite them click here in areas that is good and identity right click here add new scaffolded item click here in this new scab folded item click here in this identity column so you do not have lots of option to select we have only one option here so add that now it will add some nuget packages first of all it need this package 4 Escape folding now it is downloading those things for us now you will see a window here we have these much of files which we have to add either you can select this this and whatever you want in your project you can select one by one or you can select all of them it is asking do you want to override all of them yes I want to override all of them now what we have to do here we have to select our DB context class which is application DB context click on ADD now it has completed and let's click here so here inside this Pages you can find all the pages so it is r register page okay and it is the code behind of that page fine so we have to do changes here and I want to add one feed here so where we can find them inside this class input model and let's add here two fields prop string name okay and prop string let's see profile picture and I have put this question mark in the wrong place it is it should be here okay so now what we can do we can actually we can and here we do not need this profile picture right now okay no one uploads his profile picture on the registration sorry my mistake and we just need here a name okay so where we can put it we can put it here copy this guy and paste it here so let's change it to name very nice copy it here and paste it here here and we do not need this autocomplete we do not need autocomplete anywhere so where it is let's find autocomplete and replace it from everywhere okay so where was we here name fine so we have name name and name okay now we have added this thing in our View so if we run this program let's see what will happen it is giving me some error and if we go to our program.cs what it has done it has done uh designated line here these are default identity so let's comment this guy and let's see do we get any error or not okay we are moving very slow and steady okay now we are fine if we click here in register section you will see here we have this name now what we have to do we have to move here inside this on post here on post async here you can add user Dot name equals to input dot name okay so let's try to add this user okay so click here on register let's name it Jack at the read gmail.com let's name it capital j a c k first letter was Capital then all are small letters at the rate one two three okay so let's register it so we are successfully logged in let's click here and let's see we do not have any information about his name so we have to add it for that we have to go here inside the account slash manage let's close this tab and find it so we can find it here inside this area's identity Pages account managed and we have to click here index.cs HTML and index.csstml.cs let's close these register tabs we do not need them now and what we have to do here first of all let's add a field let us add this field here copy it and paste let's and we have to add Ctrl F input model so let's go there and here add one thing prop ER string name prop yeah Okay so remove it let's run our project again and not again we have to change it here so here please enter your name nice let's change it to name fits to name and gets to name okay we are very good so far so click here okay click here in login again and let's login John Jack at the reads email address one two three click here and remember me I want it to be remembered by the browser okay well let's login click here now you can see name here and I do not have any name right now so let's name it Jack and let's name it Jack doe it is about the Ross John Doe okay so let's click on Save now let's see so now it is saying your profile has updated so if I click here and these changes are persisted it is my and I'm not getting any name here let me tell you why because I have to do something more for it and let's go here in the load async section and just close this tab sorry stop this project and name it name equals to let's name it username equals to username phone number equals to phone number user dot name we can find it from here okay so let's run this project let's see okay so if I click here hello Zach and it will it should load the name for me okay so here we are able to see this name very good so now what we have to do we have to add a profile picture for us Okay so for that we need to add some properties here in input model input model okay so go inside this class and add a field here profile picture hmm and image file and it will be I form file type very good we have to do one more thing here in the load async section or load whatever that was post testing where is our load async method here so we have to do the same we have to fetch our profile picture user dot profile picture okay so what we are going to do we are going to create a folder here inside this WWE root and here let's name that folder is uploads and here we are going to we are going to add our profile picture and the name of that profile picture will be saved into database so we will only save the name of profile picture into database and save the actual file here in this folder so that's the logic behind it first of all we need to do some changes here and that's why here if model model dot profile picture sorry model dot input dot profile picture if it is not null string dot is null or empty okay so if original then copy it here for let's close this div we will display image here so let's name it IMG SRC equals to uploads slash at the rate model dot input dot profile picture style equals to width 250 height 250 PX height 300 pixel okay foreign okay and let's go here inside this form section and it should be ENC type equals to multipart slash form data because we want to upload the file and we want to fetch that file for that we have to enable this feature so here what we are going to do we are going to just create this tip here fine now we need here input ESP 4 good but before that let's copy this guy here input Dot okay not this this label form label input Dot and just name this label for profile picture profile picture sp4 input Dot file image file okay that's it okay we are good so far now let's move here and here before okay so what we have to do here we have to copy this logic if input DOT phone number rather than this input dot name equals to user dot name then what we have to do we just have to write here user dot name equals to input dot name and user manager Dot update async user it should be a weight okay we are good now let's write here and before that let's add a folder here and let's name IT services so let's add it services and here I want to add a class okay let's name it file service now let's replace this code from this and I will provide the source code in the description box so do not worry about this code I also do not remember this I once created it and pasted it somewhere else now whenever I need that code I copy it from there okay now let's create this interface also so press Ctrl Dot and let's see press Ctrl Dot and it is not doing anything it's okay we will create it manually I file service so let's create hit here let's name it I file service okay it should be interface good and let's copy this guy and shrink it paste it here okay so copy this guy also till okay now we are good now we okay I have done a something wrong there actually I have this the same column here okay we are fine now so what we have to do here we have to open this program.cs and we have to resolve that dependency here for that what we need to do just click here anywhere in this section anywhere in this section you can write this Builder dot Services dot I had scoped okay I file service file service okay we are good we can close it also so let's move here in the top let's create private read only and name it I file or we can do it here so let's click here I file service file service okay so press Ctrl dot here create assign field file service okay so let's put our underscore here and here okay now we can we have injected our file service here now we can move here so here we will write code for image or image upload and I already have created a prototype of this project so I'm going to copy that code from here we are not going to waste the time so let's copy it here and it's not a too much code is very simple code we are hitting that first of all we are checking if this image file is null or not then we are saving this file from the file service and it will save for us and it will return a tuple to us so if we go here it is returning the Tuple end and string inside the end we are getting the status code and inside the string we are getting the error message or message so int and string we have two items first one is item one which is a code so we are getting we are checking that if result dot item one equals to 1 then we are fetching the old image so that we can delete it and we are storing this item 2 which is returning us the name of image in the user.profile picture then we are using this line which is identity code user manager dot update async which we have used here and now we are deleting the old image from the folder so that's the code okay so now let's see let's test this functionality so here we are little bit messing with the design that is okay that's not a problem so let's write here Jack Doe and let's try to save it till then move here and let's remove this margin floating and let's keep it mb2 or M2 from both it will create a margin from top and bottom so here it is saying that we have updated our profile so if we go there again so our changes are persisted now we will do the same with profile picture and before that let's click on this hot reload button it is applying the changes okay so we have changed a little bit here in the UI section and we are applying those changes now those changes are successfully displayed here profile picture and here choose file so let's choose this file and let's try to save it okay now it is looking pretty average not very good in the terms of Designing and we can do it later if we like it is just a demo project so do not worry about designing okay so if I click here again and I'm not updating anything and we are not seeing any changes here so let's update this profile picture with this let's try to save it and yeah we are looking very good till now we have added some Fields like name and this profile picture Okay so now what we have to do we have to do rule management let's log out from here and close this guy okay okay so let's see if you click here in this table spnet rules we don't have any rules yet so what we have to do we have to add these rules first and how can we add those rules so let's see first let's create a folder and name it constants constants okay and here what we are gonna do just add a class my constant uh something like that my constants dot CS and actually we are not going to use this class so what we are gonna do we are going to create a nm5 name it let's see rules yeah so we have our first rule admin and second one is user and you can add so much more I just want to add these two rules admin and user that's very simple now what are we gonna do we are going to seed these rules into database so let's create a class here and name eight DB Cedar public static class and it is gonna be our static class so if and we have to add this functionality here basically what it is doing here first of all actually let's start on this thing and let's name it where okay where and actually I have created a prototype project for this first then I have created this project now so I have this pre-written code there okay let's change it to what it was or nm's role what we have created where it is constant my constant rules okay so okay and I accidentally closed this file not this one sorry This One DB Cedar okay so click here Ctrl dot using SP node .net identity role based Concepts okay now we are good and what we are basically doing here we are creating a method that will create a rule and uh so not super admin a power user or admin user so here we are getting the instance of this user manager and role manager and here we are adding a rule which is admin and here we are adding uh rule user and here now we are creating a default record for admin because we do not want to give functionality to create admin from the user interface otherwise and even can be admin so this code should be hidden from the outside world okay so here what I am doing here I am creating the instance of this application user username this email this name this and okay so let's change it to admin let's change it to admin okay now here email confirmed equals to True phone number confirm equals to true fine which is fine and here user manager find by and here we are finding this user from the database with this method find by email async with the help of this email if we do not have any user of this username in the database then it will create a user for us with this name and it is a password so here it is the password for our application sorry of this user and we are assigning admin role to it so what I am going to do I am going to just copy this line okay we will do it in future why do it in Future Let's copy it right now and open open open open these areas identity pages account and let's find this register.cs okay so here in the on here inside this on post async method so what we have to do where we are creating the user and where we are creating the user let's see here here we are creating the user if we are succeeded on creating user then this user will be added with this rule and let's put underscore here user manager dot add rule async user Dot and we are fine we are absolutely fine okay so I guess we have completed this section for now so let's run this application okay so let's do one thing here let's open the SQL server or SQL Server let's run this command and here we are not getting any rules okay so let's see SP net users and let's find that okay so how can we get this rule until we haven't got this method yet for that let's open our program.cs file here and at the end of it we are going to call that method here so what we are doing here we are creating a scope for that if you do it outside this scope like this app Dot services then it is also acceptable but it will create it will give you an error so it will give you error that you can't do it from here you have to create a separate scope for it so then you have to do it like this at least in my scenario and if you have a better solution for this you can also write that okay so here we are calling this method now let's run this program our project so now let's check our database so let's run this and it has created to add to what it is two rows for us admin and user very good let's roll with this guy and let's run this one also so we have created a admin here so if we click here SP net user logins you won't find anything user claims and here you might not find anything it's been a true claims okay here it is also blank has been a user spnet user roles okay so here here inside this asp.net user rule it is the ID of user and it is the ID of rule so here we are saving that information okay so now we have admin user and a normal user okay so let's create the user and let's open these this table has been at users and let's read those two previous users so what I'm going to do here I am going to delete these two rows okay now we are fine and let's load this for now okay so let's run it again and before running it we will run it later now what should we do okay so let's authorize your controller so let's create a two controller here first one should be a product controller okay so here MVC controller empty let's name it product controller and let's name it product controller dot CS fine let's create let's name it get all fine and here let's create a views so what I'm gonna do here just add a folder and name it product okay and here so let's copy any view from here let's like let's copy this View and paste it here let's rename it to let's rename it to get all okay so here title and change the title to products let's name it all products okay so let's create another temp another controller here and let's copy this product controller that saves some time of hour and let's rename it to inventory okay so let's open this guy and change it to inventory inventory let's copy okay that's fine and let's copy here this view folder let's copy this folder and paste it here and change it to inventory in when Tory okay so if we press here Ctrl MZ then we can go here all inventory items okay so that's how our view is going to look like it is inventory controller and it is our product controller fine so let's open the shared folder let's go to this this View and share it and layout layout fine now what should we do we just have to copy these two links here one and two very good product it will be your inventory okay and here it will be get all and it will be the same get all it will be your products and it will be your inventory okay so let's run this okay not run this let's not run this right now let's close this guy this guy and we do not need this guy also not this guy also where are controllers and let's open those controllers we have created recently inventory and the product controller okay so let's run our project so here if we click here in product and inventory and we are able to see these things and what we want to do we want to protect these products and inventory only if we are logged in then we can go into product section and this inventory section so how can we do that for that what we have to do we just have to write here authorized okay and this inventory controller we want that on the admin can see that inventory so here what we will do we will Define roles equals to admin if you want to have if you want that multiple user can see this controller or access this controller you can add like this for multiple roles okay but we want to give the access only to the admin Okay so only admin can access inventory and you logged in user can see the product section okay that's it it is just a hypothetical solution situation do not relate it with real world projects Okay so now let's run this project okay so if we click here in products then we are here in login section here it means we cannot access it okay but we are able to see this link even without login so what we can do for it let's go there on the layout section now here which is inventory here it is inventory and it is product product so let's write a condition here if user dot identity and is authenticated it means if user is authenticated then he should be able to see this link but this link should be only available to the admin so user dot identity dot is enroll user dot is enroll admin okay so let's run this project again okay so we are here and we are not able to see these links okay so let's login but we do not have any user now we only have the admin so let's create this user John at gmail.com gohn 123 j o h and one two three click here on register okay now we have registered and logged in so what is happening here actually we have a terrible situation here and I accidentally created okay we are actually I have assigned admin role to it so where we can find babies areas register dot Cs and let's search admin and we have to change it to user user okay so let's run this guy again and let's try to remove but before we need to remove that entry the sign let's not remove that thing do not waste our time and less than this thing just okay so let's register with this user Jack click here in register and now we have login with Jack and Jack is not able to see that inventory link so if check tries to access the let's say inventory slash get all so here he will see access denied fine so let's let's log in with admin admin at the gmail.com and let's enter the password login now admin is able to see both links here products and here is our inventory so let's close this thing and that's it for now I hope you enjoyed the project now if you find this video helpful then please hit that like button if you haven't subscribed this Channel please you can subscribe it also so let's meet some other day with some new video on some new topic so see you later

Channel: Ravindra Devrani

Views: 20,372

Keywords: asp.net core identity, identity core, login in asp.net mvc, role based authorization in asp.net mvc

Id: xhCstGA9WVI

Length: 65min 6sec (3906 seconds)

Published: Sat Dec 31 2022