Session - 22 : TIMS - Authentication using ASP.NET Core MVC

hi everyone welcome to another session so basically in this session we are going to learn how we can implement the authentication and authorization into your net core MVC project okay so let me just open our sample application so here we are having this front end application in this application basically uh we have created One login page upon the successful login I wanted redirect I wanted to redirect to the dashboard page and also we wanted to keep who who is logged in what is the role for that user and whether that user has an access to the dashboard page or not or manage courses page or not all these things we can achieve by using the authentication and authorization technique provided by Microsoft so let's uh start the development now you can see I have just run that project where we are having this uh basic login form if I login here click on the login then we are making one API call and once we got the response we are showing the login successfully now whenever I will log to my application it should sign in to the authentication technique and it should register the role and also uh once it register that their role it should be able to verify the permission of that user give me a minute okay so if I click on the login button basically in our application it will go to the account controller inside the account controller we are having this login action method and here we wanted to implement authentication okay login successfully so here we wanted to do these many things too authentication too redirect to Dash board page these two things we need to implement here okay this is our post action method and this action method used to get call on clicking off the login button from the browser so if you click on this login button then basically it will call the Post action method from the account controller that is your this one okay and here basically we need to implement the authentication so in order to use the authentication we need to conf configure that first okay so how to configure authentication with our application first of all you will have to go to your startup.cs class okay now I think as we are using net core 7 we do not have the startup.cs class so instead of that startup.cs class you can use program. CS file only okay so in this file we need to add the authentication for our application so in order to add the authentication first of all okay you will have to install one nouet package so that nouet package is this one okay so let's go here right click and then go to the manage net packages here go to the browse and search for this package microsoft. asp.net core authentication cookies okay this is provided by Microsoft okay 126 million downloads it means it is very important package and you definitely require this for your web application so click here and click on the install button okay once you install that then uh you will have to add the authentication in the startup.cs file as we do not have the startup.cs file we can just use uh program.cs file okay go to the program.cs file and this one here you need to add one uh this is for add use we wanted to add right so for that add code we can add here like this so Builder doservices Okay Builder doservices add authentication so this is the middleware provided by that package which we just installed okay so in this middleware basically it will help us to enable authentication with our application there are two things what is authentication what is authorization authentication means it will verify the credentials login name and password if it is true then it will sign in or login in in your application that is authentication if it is not correct it will throw you the invalid credential uh invalid credential uh error message but once you verify your credential it will add the identity of current user into the memory or session we can say and then it will allow you to login once you log in you can use that memory information or session information in order to identify who is logged in which user is logg in what is the role of that user what is the first name and last name of that user what is the email objetives all these things you will get from that identity so that's why we requir to add this middle we okay so this add cookie add authentication your cookie name should be your application name so my application name is talent to track okay and this is the login path why we required to add this path because if let's say somehow someone does not have an access to any of the method then that user should be get redirect to the login page okay let's say uh I have One banking application and I do not have an access to uh the change balance page Okay add balance remove balance submit uh all these things that page has this functionality and I do not have an access I'm trying to access that page it will redirect me to the login page if you want to access this page login with the correct credentials correct rooll then only you can access that page so that's why I wanted to provide the login put okay so this is how we can just add the authentication middleware with your application once you add the authentication middleware you have to use that middleware so like this here we can add the authentication and at the end here we can use the authentication okay app. use authentication like this now you are good to go for using signin method for implementing this authentication too item okay how to implement that so first of all in order to implement this what you will need to do uh we have just configured the authentication uh we have we we haven't configured the authorization as of now we will do that later now if I go to my login controller there I need to add some claims okay so let me add some code here okay so this too item will be this one now I will explain this code see who is loging that users information I require okay so this login AP is returning me one response okay in that response what are all things I will get I will need to check that first okay so I will get uh whether it is success or not and whether it is error message it is only returning true okay so basically if I login this log API should return me the additional information about currently logged in user like what is their first name what is your last name role all these things this login API should return but currently it is not returning okay so we need to change this API first login API we need to change okay so this login API is available inside talent to track API project so let's go to that project talent to track API stop this running mode go to the login controller account controller okay here and click on the account controller find the login API this is your login API so login API response should have one more return type here that is user details okay user this user object we will return When login credentials are correct okay how to return that so I will add verify login details method is there inside that we what we are doing we are basically by using the account repository we are getting the login details DB user right so DP user we are getting from the database okay so what is this DP user is it is login details and in the login detail we are having username password is blocked and there is one user object as well okay this is a foreign key and I want this user details to so basically I want to return this user information User information has first name last name email contact number and their role basically I wanted to return this user as a part of response so how I can do that I will enter username and password I will get uh user is equal to null then inv valid credential user is not equal to null then in response here I will there is a user field we have just added right this one here I will just add DB user do user okay there is user field available it can be null so that's why this exclamation mark okay so this user we will return as a part of user field okay and this user field should be starting capital u and it can also null so that's why question mark okay and this user need to make it as a capital and just build this project that's it this API project right click rebuild now we have modified the login API in order to return the loged in user information we require that information for session object okay session means whenever I will log in I will require what is the role of the currently logged in user what is uh the name of the currently loog user what is the email of that user all these things I require now in order to reflect that newly added property we need to refresh the reference of our this Swagger client right so in the Swagger client if you see we are only having two Fields as of now in the login request this is login request okay and I want login response so response is available here this one this one is login response in the login response I only has two Fields success and error message on top of it I also require the user information so that I need to refresh this uh reference so go to the connected services and refresh it okay right click manage connected Services there is one Swagger client we have added go here click on the refresh and yes once you do that let let me check updating service reference from this fail to download metadata from okay so this is not working we need to run the this API project first and then only it will start working okay I have just run the API project and now if I go to the printed application close this and here if I click on the refresh button it will get refresh okay it got refreshed now you can see click on the save button you can see if I go to the login response you will get the user property as well got it so this user property came from the database it has these many things it has its ID created date updated date created by updated by first name last name email contact number roles everything is now available so this information we require for authentication purpose so what we can do we can do like this response. success and response. user is not equal to null okay if it is is not null then add some claims okay what kind of claims claims means what claims means additional information about the current user I want to add currently logged in users username okay so username is not available here username is available here so we can just use that like this okay I want to add user ID as well so that user ID is available inside response user do id id is this and this is integer and I guess it is looking for string okay so if that is the case we can make it as a two string it will remove this error got it now in the for Lo it is trying to add the role into the claim but we are having only one role per customer per user right right so we can just add it here like this and you can just remove this for Loop not required that's it so new claim let's do one thing let's keep it like this only remove the for Loop because we only have one role per user okay so claims do add role and we are having role inside the user property so we can add role like this got it so role should be also string let's make it string got it that's it so this is how we can just add add name user ID and role okay let's to like this it will also work let's remove this that's it now we have added some additional information about currently logged in user into the claims why it is crying it is expected yeah I think we forgot to close this here now identity we are having so there is a new identity these claims we will add into the identity and here authentication scheme okay it is our cookie based authentication and now there is a principal object menu to create on the basis of identity and by using this principle we can actually log to your identity provider okay so we have logged in like this by using signing a sync authentication scheme and this principle principal generated from the identity identity generated from the claims in this I also wanted to add first name and last name as well so let me check if I can add my custom value here full name yes we can add so we can add full name like this dollar then curly braces user do first name space curly Braes user. last name okay so this is how we can also add the custom claim so that way we can access this value in order to display the full name of currently logged in user inside the dashboard okay we don't require session of that this time because we will use it from the claims so basically we have logged into our system if it is success we're checking user object is not null if it is not null we are trying to log in into the identity provider so whatever lines I have selected here this is nothing but it will just try to log into the identity provider okay once you sign in you can redirect to the to the dashboard sorry admin controller and dashboard B that's it now let's try it okay let's try it so this to do is also completed that's it this is your authentication not authorization okay so if I go to the admin there is a dashboard page once I log in successfully then it should redirect me to the to the dashboard page along with the currently logged in users information I just adding the breakpoint here click on theate uh run this project okay so there is some error too many errors let's see why those are ER Swagger client H server side error K by ID a sync let me rebuild H okay because of these errors in the Swagger client okay get by ID there is a ID a sync let me check in the API project go to the courses model we have added this action create get all this is throwing the error okay get by ID this is throwing get byid is throwing the error then this okay I think it does not allows or want us to add the ID like this so you can just get the ID from query string so I'm just going to remove this one okay now H deploy applying code changes changes applied go here in the frontend project and now right click on connected Services manage connected services and here you can refresh yes so once you refresh it will refresh the code of this Swagger c. CS file and you can see there is no error now okay so this is how we can just remove find the root cause of the error and resolve them now if you right click and rebuild it will restore the packages rebuild it and then you can run it smoothly yeah rebuild succeeded now you can run this project can you see the browser window no okay so I can do one thing let's run it here okay I hope uh this is visible now okay now uh you can see if I try to log in add username and password click on the login so it will basically call the Post action method from the account controller in the front end project and from that project it will try to call Api login API from the okay it is returning the error message one or more error ERS could not deize the response body stream as login response okay let me check uh what happened in the API project go here you can add the breakpoint now let's call that API again refresh continue and then this is API project let's see what is the error we are going inside go here verify the credentials from the database we got the record okay and in this record we are having all the information but user is null this should not be null actually that's the problem okay so we need to make sure we are returning user correctly from the database so when we are making the database query inside this function okay by using the linku so DB context. TBL login details where we are doing this here we can do do include and here you can just add pointer P do user okay so this way it will allow you to bind allow you to join one more table we are having login details table we are having users table so it will join user table from the login details if you add virtual keyword here okay and if you add include function while querying to the database so it will basically join those two tables will return the data from the both the tables now rerun the application okay uh in the front end application let's run it and fire the login command again so admin 1 2 3 login so it will again go to the login API now let's see if it is returning uh user information from the database or not now see if I go to the DB object you can see user is there user information is there email ID first name last name all the information we got from the database so we got to know how we can join two tables by using the link Q or Lambda expression for that you will have to use include function okay by using this include function you can join two tables okay but make sure when ever you are using in function that property should have the virtual keyword then only you can able to join two tables using the link l expression now return this response to the front end front end we got Success Through see we got success true and then inside the success true we are checking whether user is not null obviously it is not null because we are having the eer information here so this we will add into the CL claims okay okay we successfully added into the claims we are having the claims areay having four values okay first name admin admin last name all these things now inside okay let let me check what is there in the name what is there in the identifier all these things so we are having four first is name name has admin value is admin okay username is admin then name identifier has id id is two role has okay role is underscore 1 let me check what is there inside the role so okay this is wrong okay it should have admin 1 two 3 all these things let me check into the API project what is there inside the role so if you go to the user object and then role we're having admin sub admin trainer student so not sure why this enum not get reflected into the front end project here let me stop for time being I'm just replacing these values with this okay later we will address it now I got the role in them properly let's run this application again enam is for giving the appropriate name for numbers what is two two means sub admin what is three three mean trainer what is one one means admin so we can give the proper name to your numbers okay now go to the browser window run your fun end application hit the API 1 2 3 click click on login once you click on login it will go to the API project continue it will go to the front end project okay you can see this is your front end project now here in the front end project if I de I have added the claims then in the role I should have admin or one something still not there user Ro has underscore okay I'll figure it out give me a minute so let's continue principal and this signin method provided by Microsoft will basically do the authentication okay it will just sign in to the application and now we are redirecting to the dashboard page let's continue if I continue you can see in the browser I am at the dashboard page and click on the save button got it so this is how we can Implement authentication with your applic application okay I wanted to change first name and last name here okay so how we can do that so basically we have log to the system and dashboard page is now visible I wanted to change the Lo first name and lost name who is whoever is login that name should be visible here so how we can do that so basically in the uh CSH HTML file we need to read that information okay so let me read the information from the uh identity provider so what we can do so if I go to the front end project there is a dashboard page we have created go to the dashboard page where it is inside the admin controller dashboard right click go to the view okay here here we have added welcome first name last name instead of this first name last name I wanted to read it from the identity okay so let's do that we can just add first of all we can determine the first name last name so first name we can determine from from user find first value okay and here we can provide the key what key we had given full name right something find First and here we can provide the key so this key should be match with this key in the account controller we have added the full name something right this is key so full name should not have space so this key should be match with that and then you will get the full name and this full name we can just basically print here welcome add theate this one that's it okay and also we can do the same thing into the layout page as well if I go to the layout page here shared layout here also if you recall we have added first name first name instead of that I wanted to print this pool name okay now stop to rebuild remove all the break points because we know it is working fine delete all break points yes so it will not hit the breako in the front end project as well go to delete all break points click on yes okay so it will basically uh directly run the application without any Interruption okay so this is your browser now go back log out or login page here let's say I have added admin 1 2 3 click on the login page so if you click on the login button you can see here we are showing admin admin full name colon admin admin full name colon admin admin okay there is a problem it is also showing full name which is not correct this key we don't want okay we want value only so let me check find first and then value is not there ah we can do like this okay value is a property and it can be null so question mark you need to add so same same thing copy go to the dashboard add here and then hot deploy once you do the hot deploy it will just remove this full name from here as well as here you can see welcome admin admin and here also admin admin now you will see uh so why this is admin admin here why it is not first name and last name the reason is our admin user in the database is not having uh any specific name we have just added first name admin last name admin if you change it into the database it will work you can see if I go to the API project uh view then server Explorer here expand your server data connection click on refresh add connection let's say SQL Server continue server name is let me check the connection string first okay so you can check the connection string in data project Dow project okay sorry in the app setting. file we are having this connection string or I can open it in ssms as well let me open that okay so if you see this database SS SMS uh SQL Server management Studio here we are having our database in this uh if you see here we're having user table if I right click go to the edit mode I will add first name let's say what sagur ptil okay let's say so this name should be reflected into the dashboard page now now let's try again so if I rerun the project let's wait refresh there should be a log out button as well right we haven't implement the log out functionality so let's do that first so without log out we cannot directly go to the login we can do that but this is not the right way we should have a log out functionality as well so let me add admin credentials login once you login it will go to the dashboard and it will also print Sagar patil here you can see Sagar patil so this is basically Dynamic content it is coming from the database and we are also maintaining the session for the currently locked in user it is very important and this is how we can just Implement authentication to your application okay now uh in the next session we will learn how to do the crude operation to the courses but before that we also need to learn how to implement authorization so this Sagar patil if does not have the access to manage courses menu then he should be able to go to the login page automatically so that authorization part is remaining okay we have just learned the authentication but before signing off this session I think we should complete this logout functionality as well so how we can implement the log out functionality it is very straightforward go to your account controller add one more action method okay so this is login we can add log out or sign out okay so in the sign out action method sign out okay sign out action method you you will need to add one one line okay only one line so that line is basically will sign out from your your application okay if you see this line HTTP contest. signin okay so that way it will sign in and you want to sign out so you will need to add this line that's it HTTP context sign out and your scheme name scheme name is already available okay so this way we can just sign in and sign out with your application once you sign out you should be able to redirect to the login page so that's why we need to add this line as well I wanted you to redirect on accounts SL login page that's it now if you run oh one more thing this sign out action you will have to call from the sign out menu bar sign out button log out button how to call it just add add theate URL doaction and then sign out from account controller this is how we can call any action method from the UI if you click on this button it will call this action from the account controller if you go to the account controller it will give a call to this once your call come here it will sign out from your application and then it will redirect to the login page okay this is the right way to do the sign out from your application okay let's test it okay now let me show you the sign out functionality as well okay this is your dashboard so you can see in the dashboard Sagar patil has been logged in now I have added one breakpoint into the sign out action method here I want to see how it will work and then if I click here click on the log button you can see this breakpoint got triggered and then it will first of all sign out from your application and then it will go to the login page and you can see login page has been open in the browser now if you manually go to the dashboard page here dashboard where it is located in the admin dashboard then it is opening that page but Sagar pel now name is not there here also not there now as you know dashboard page should not be accessible without login right because I haven't loging into my account how this dashboard page is visible to me for that purpose we need to implement authorization if user does not login don't display any of the page so that is authorization and we will see that into the next session I will pause here okay thank you everyone

Channel: Code With Bapu

Views: 215

Keywords: programming, c programming language, c# (programming language), c programming, what is c sharp programming language, programming project ideas, c# programming, c language, c programming projects, c sharp, java programming language, c sharp tutorial, top programming language 2022, best programming language, how to learn programming, programming project, introduction to c# programming language, how to learn c# programming language, uses of c# programming language

Id: 0ggjvnwPLqs

Length: 42min 52sec (2572 seconds)

Published: Sat Oct 28 2023