.Net Core MVC Authentication & Role Based Authorization With Auth0

hey there everyone it's rindra here in this video we will learn how to authenticate our net core MVC application we also learn role base authorization in this video and we are going to use all Z4 authentication in this tutorial and let me give you a quick demo of the application so it is just a basic sp. net MVC application and here you can see that we have the sign up and login links if I click on the sign up link then you will be redirected to O zero authentication page and here you can sign up or you can also switch to the login and here we have this login page let's login with John azma.com now you can see that we have this profile section so here you can see just a basic info about user and that's login with admin credentials so so it is my admin account and if I log in with this now you can see that I have one extra link here admin page it's just a simple page for demonstration and I can also see the profile page so here it is the demonstration of role based authorization all you can achieve with all zero authentication system if you find this video helpful then please hit the like button make sure to subscribe this channel to get more videos like this so let's get it started without any delays so let's quickly create an application I'm using vs code you can also use visual studio so for that you have to install uh extension which is called C devkit extension and after installing it you can follow along easily so now here you can see in this Explorer tab you can see this uh button create net project and just click click on this button now you have to select application so I'm just going to search here MVC sp. net core web app MVC so now it will ask us a location where you want to install or sorry yeah where you want to create a project so I am going to create it here somewhere okay so after that it will ask us a name of application it will take a little bit while okay now here we'll enter the name let's name it o z demo or net o zero that's it now you will see here we have this Explorer which is a by default Explorer in vs code and we have solution explorer that is provided by C dekit extension and here you can see that we have this project so let's run this project and let's see what is here so before running it we have to do some configuration and so let's do that so here you can see this link create a launch. Json file click on this and click on the net 5 plus and net core tab you will see that we have generated our launch. Json file now you can easily run your application from here okay so you can see that it is our application so I'm going to close this guy I'm going to also close it and now let's go go here and you will see that we have various folders here and inside the views shared you will see that we have this layout folder and here we have defined our whole layout I guess yeah here that's it so here we will Define few more links so first link will be our login okay and another link will be log out and one link will be sign up we will Define our controllers later controllers and accents will be defined later oops I have done a terrible mistakes here it should not be like this it should be like this so this one will be sign up and this one will be uh login sign up log out and we'll create few more links one is let's just say my orders and one more thing let's say it is just uh admin page okay so we have all of these links and let's move the these three links to the bottom okay and let's see how it is looking so let's run our application again now you can see that we have lots of options here uh lots of tabs so let's close it for now and now let's talk about the O zero so open the browser and type here o zero and here you will see see that we have this website oz.com and here you can see the pricing of the ozero and we have a free tier for uh development purpose or just for the demo application so you can see it's pricing so let's click on this and let's see what is it free plan is offering so here it's free plan it's saying that get all zero for free with up to 7,000 active users and unlimited logins no credit card required so you can start it with free so for that you need to create an account here so just go there and create an account if you don't have one I already have one so I'm going to log in there now it is our dashboard of all zero so you can go here in the application section and click on the applications after that we are going to create a new application so just create on this one and let's name itnet O and let's select uh regular web application select this one regular web application click on Create and here we'll see that we have some options so we have these options so definitely we are going to select this one asp.net core let's click on this one and it will take a while and we are fine okay so our application has been created you can see here the credential SK uh where it is here it is uh domain it is client ID client secret etc etc so here in the quick start section you can see that we have a guide so we are going to follow along this guide because I honestly I do not remember any of these steps so here we have few things we have to do okay so first of all we need to figure out where is client secrets and keys yeah it's here okay that's good so I'm back to the visual studio code and first of all go here in the app setting Json file it should be somewhere here app setting. Json file and here we will Define this so it is uh just an uh Json object so it key is all zero and inside it we have two more properties when is domain and client ID so we will go here and oops uh here in this settings you will see that we have our domain so just copy this guy and paste it here and copy the client ID and paste it here it is our domain and it is our client ID now we need to install a package which is this one so next step is we are going to install this package open the visual studio code and let me kill this guy okay okay uh just a minute wait for a minute okay so first of all let's change the directory because we have project inside the net all zero so we are going to move inside the net of zero folder okay so now let's type here net add package and let's add this package so remove this line install package because it is only a eligible in the visual studio so if you are using the visual studio you need to write install package then the name of package in the vs code we will do it like this net ad package uh in the visual studio it is fine it will absolutely fine in the visual studio package manager console so let's add this guy okay so we are done here so let's move here and now since we have installed it so let's copy this line from here and open the program. CS file and copy this line above the controller with the views okay so where it is where should we find yeah here add controller with the views so we are going to paste this line here so it is giving an error so press control Dot and it will add this line here so basically what we are doing here we are just configuring this service inside this we have to pass these two properties options. domain and we are getting this information from our app setting. Json file you can see that o zero callon domain Au zero colon domain it means we are getting this value from domain which is inside the O zero and same thing we'll go here options do client ID and we will get this client ID from client ID which is inside the Au zero object so you can see client ID inside the O zero so we have configured this thing okay one more tick now use authentication use authorization which I think which must be present there program.cs file and here we have use authorization we do not have authentication so yeah we are going to add use authentication okay so it is a new line and it is also a new line which we have added okay now let's move ahead let's see what it is saying so it is saying that you have to create this controller account controller so yeah we are going to create a account controller so go here here and add a new controller here so add new file class oops class and let's name it account controller that's it and here in say controller okay anything else no so let's copy this method login method and let's paste it here okay press control Dot and click on this press control dot click on this okay so it has added these two lines here okay now it is our login method so usually we are calling the all zero API here so authentication properties equal to new login authentic integation properties Builder with redirect URI and written URL build uh etc etc so next step what we have to do uh okay let's do it later so uh let's copy the log out method also okay so log out method have this authorized attribute it means without authorization we cannot use it so it has added this uh I guess this one or this one is log out so also press control Dot and click on using microsoft. asp.net code do authentication do cookies okay so when we click on log out we will redirect it to the home/ index so we will move to the index method of the home controller okay so let's see what should we do now so now what we have to do we have to go here in the settings and here you will see allowed call back URLs so here will be our allowed URL so go here in the properties and La setting. Json and you will see this one 7170 it is our uh uh base URL so I'm going to register it here call back URLs and call back URLs and here you will see allowed login log out URLs so log out URL will be just like this but here in the allowed call back URLs we will write call back back okay and now uh just click on the save changes and now what we will do here we will open the layout. Cs HTML page and here we are going to update our login and log out links so or it will be login oh where it is yeah This One login controller will be account and so it will also be account and it will also be account and it will be login it is the name of accent method another one will be sign up which we will create later right now we do not have any method with name sign up we will create it later and another method will be log out which is defined inside the account controller login log out and sign up will be created later okay so right now you can see that we do not have any views so we do not need to create any views it will be managed by the ozero so you just have to write this code and this code which you will find easily here inside the quick start guide so even you do not need to remember the code okay yeah that's true no one remembers the code okay so now what we will do let's check this uh login functionality okay so we are in our application so here it is the login link so let's click on this link let's see what will happen so when we have clicked on the login link it has redirected here right now we do not have any account here so you can click on this sign up link and it will create uh account for you so just enter it and password just enter some email address and password and you will uh able to sign up here so right now I'm not going to do it because we are going to create another link which will be sign up right now it is not working so yeah we are going to work on that let's close this guy and how to create a sign up link is not provided here in the quick start so yeah you have to follow this tutorial for that just click here copy the login method and paste it here and let's name it sign up everything will be same we will just change our property so here we will just remove these comments and here we will write this line with parameter screen hint sign up so let's run this application again and let's see how it is going now here let's click on the sign up link and I hope it will work so let's wait uh yeah so let's register here and gmail.com it is not an actual email ID so you can put your actual email ID and after the sign up you will get a verification Link in your email ID so let's name it yeah let's enter some strong password okay so press on continue and why we are redirected here it was classing with my previous settings so that's why I was getting error here but if you're using it uh first time then there should not be any error so yeah we have been registered uh we have been signed up there and after loging you have to enter the credential so I actually have added credential before so let's do it again so here just again and oops okay now you can see I have successfully logged in and if I click on log out I will successfully logged out so you can go here in the application section and here in the cookies you can see that we have this o cookie okay fair enough let's close this guy and let's move here again so what I'm going to do here I'm going to apply some authentication here so what we will do from here I will write if user do identity Dot is authenticated then these links will be displayed otherwise these links will not be displayed uh okay login my orders admin page login sign up and log out and sign up and let's move this link here in the else condition if we are authenticated then these link will be Sol sold otherwise uh this sign up link will be displayed okay so what we have done here let me show you so here we have checked a condition if user do identity do is authenticated then this my order link this admin page page link this account uh login link and this log out link will be displayed and if user is not authenticated then this link will be displayed and I think it should also be here if user is not authenticated then login and sign up link will be displayed uh if user is authenticated then log out link will be displayed along with these two links okay so it is not going to work I have to run it again but yeah I am seeing an error somewhere what that can be if if does not exist in the current context okay so it should be small I and it should be fine now okay now it's fine so inside the if block these three links will be displayed login log out admin page and my orders and if user is not logged in then login and sign up page will be displayed and these two links will be always available so let's run this application again and let's see so right now we are in inside here so let's log in and after log in let's see what will happens let's log in with this email oops okay so now you can see we have my ERS and admin links are displayed with log out link if I click on log out then login and sign up link will be displayed if I click on sign up and we are able to sign up so let's do one more sign up uh let's see let's name it mik and Mike okay let's enter uh oops email is not valid okay and when you when you do sign up for the first time then it will ask this so yeah click on accept and you can see we are logged in also home privacy my orders admin page and log out right now the problem is we are able to log in without any email verification so for that we have to do one thing first of all we have to go here in our dashboard and here we will see this action tab this one we have this flows section in the flow section we have this login flow and here in the right corner you will see installed and custom we will click on custom and we will create a custom action and let's name it no login without email verification trigger will be login post login and run time is node 18 okay so now you can see we have this code so what I am going to do just I have some code here and here I'm going to copy this line and uh here inside this method uh function which is a node or JavaScript function export. onexecute post login asnc event and API I'm going to paste this line so here if event. user. email verified is not present here so in the start we have this exclanation exclamation sign it means that if user is not verified then api. redirect uh let me Zoom okay now we then api. redirect do send user to and here our domain https domain so we have registered our domain here so let's find it program.cs file oops not program.cs file it was app settings. Json file and here it is our domain so just copy this this domain and remove this line and paste it here https uh this domain then V2 log out then it will return to some URL and here we will paste the client ID which is also present here so just remove this client ID section and here we will paste our client ID now here you will see here we have to paste a URL so what we are going to do we are going to create uh new new link here so it will be sorry no link new accent method public as sync task uh email verification something like this and it will return uh view return View and here we will create its view so it's a controller and I guess I am doing something wrong so what it might be let me guess we are fine and oops okay uh it should be I action result okay now we are fine now we will create a view here so we will create a folder that folder will be account and inside the account folder where it is Oops why it is not created so let's create a new folder account okay okay and inside the account we will create a new custom file so let's name it email verification. cshtml will be that file and we will just copy this line from our privacy so where it is email verification. cshtml oops I have done something wrong here email verification. ch tml okay so here just name it email verification email verification view view data. Title and here just write please verify your email first okay so that's just a basic verification page and now we are are going to register this thing here so let's go here in the application section in the applications and I'm going to open it in a new tab and here we will go inside the settings so yeah of course we need to wait for it first so here I have this app net off zero and here in this setting uh we already have done we already entered some URL so I'm going to enter one more URL so it will say that we can use comma separated items so it will be the same and after that it will be account and just copy this name paste it here it will be your email verification okay and yeah so just copy this URL also okay now we will see encode URL online we'll encode our URL first so I'm going to paste it here I'm going to encode this URL yeah so here we have this URL which we have encoded and we will paste it here here allowed URL so return to this section and client ID equals to this this this okay so let's save it and let me explain it here first of all it will be https then column then double slash and here we will Define our domain / V2 / out so it is a URL of log out and it will be return to uh URL where you want to written in our case we want to return to the email verification so we will copy that link and we will encrypt that link and paste that link here client ID and here you will paste the client ID so that's it and let's see and after that click on the deploy it will be deployed and then let me minimize okay then go to the flow and here in the custom section you will see we have this thing just drag it and drop here then click on apply okay now let's see what will happen so let's close this thing after saving it okay let's close this let's run our application again okay so let's sign up again okay so now we will continue and make sure this email is right one because you are going to get a verification email since we are doing some testing so I am entering the wrong email addresses you will actually get a verification email so if you enter your actual email you will actually get a verification mail then you can verify it from there so let's click on continue and yeah here the view email verification is is not found oops so that's that's the problem right now I'm getting very unusual error view is absolutely present here but I don't know why it is not detecting uh is here account do account email verification. cshtml so I'm just going to copy these things actually I'm not going to copy anything so so let's delete delete this guy and let's delete this thing and let's do one thing here let's go to the home controller and copy the index page copy this file and I think I not able to copy this thing oops so let let's go here and let's see we can do it here or not I can go here here copy here we are able to copy it here and paste it here and let's change its name uh to our email verification let's change it to email verification okay and let's change it to email verification let's these let's delete these two lines and just type here H1 H1 H1 please verify email oh let's see and one more thing before it was like async task and this like this before it was like this and I have removed this as sync option because we do not need it here actually we are not going to do any async thing here so I have removed it it's just a simple plain plane method and here it's definition it's view please verify email okay so let's run the application again okay now we are good here so recently we have uh registered with John so that was John at gmail.com John and let me enter its password let's see what will happen here so it is saying that please verify and now if I will try to login with previous account and actually it was Prov through gmail.com what will happen and now you can see that I'm not able to log in my account so either I have to verify myself from the email account where I will get the verification link or I admin can also verify its user from the dashboard so we are going to go here user management users and here you will see that we have three users and I'm going to go here and here you can see uh email and which is pending click on edit set as has email verified and save it okay now let's go back let's register it as verified user also so oops Yeah Yeah I was in the right place so I'm going to go here and edit set as verified and one more last one is mic and edit set as verified save that's it you can see it is verified now so now let's go here again and let's register with any of the email so let's register it with John at a joh gmail.com jn1 2345 hash that was my password okay so accept and you can see that I have perfectly logged in now we have done these things I'm going to go in my previous page again where it was let's see application applications in the net o in the quickly start and I'm going to create one more action method so that will be our now we will copy this method and in the account controller we will paste this method it is also a authorized method profile and it is the profile so it is how we will get name email address and profile image so click control dot here that's it so right now what we will do we will just go here in the view section and I'm going to call copy this thing and paste it here just rename this guy and let's name is user profile okay so it is our user profile user profile that's it and actually it name is profile so let's change it to profile it was not a user profile okay now here in the model section we will create a new file which is user profile user profile. Cs and here we'll just write name space name space and the name of project net0 do models and here we will create this class user Pro profile it will have these properties email address name profile image and user ID so we need to create these four properties so just create these guys after this just close this guy and here we have this method which we have copied from uh all zero dashboard here you can see we are returning a view with this Anonymous object and now we do not need to return it as Anonymous we can also return it like this where user profile equals to this new and here you can write user profile now we can see name this email address and profile image okay and we can pass this user profile now we are here inside the user profile csml page and here we will write some HTML so it is a row and here we'll Define our column at the column we have one more row and here we'll Define our T title and here another the column call md2 and here we will Define our profile picture if we have any otherwise we will move ahead and here in the call md4 section we will Define a name and user ID and email address that's it so it is our user profile section so just open layout. cshtml page and here we will create another link so just copy this guy and paste it here okay and let's remove this my order section we are not going to create it uh I have removed my orders and instead of my order we will Define here profile and it will be account and profile file so let's see you can see we have this link profile if I click here user profile John gmail.com and that's it so it's just a basic image let's log out and let's see what we can do now first of all we have been log out if I try to access a profile what will happen what will happen then then it is redirect to login page so that's that's it so let's define one more uh CS HTML file here so just copy this guy and paste it here a profile copy actually let's delete this and let's copy the email verification so copy this thing and paste it here let's change it to access denied that's it and we are going to Define this method here in the account section and just copy this guy and let's change it to access and denied okay so let's run oops let let's see stop it we need to change this line here uh let's change it access is denied okay and let's name it class text danger okay now let's run it so this this is our access denied page and we will use it in the future so do not worry about it so let's close it for now let's close this guy for now and let's rink this guy okay now what if I want to give access uh I want to create access for some certain role Suppose there is some link that only admin can access so let's go here in the home section home controller and let's just say we have a link and name it admin page admin page okay and let's put a authorized attribute here okay and after putting authorized we are going to create this admin page view so we are going to go here inside the views home and here we will create we are not going to create we are just going to copy this privacy page and going to paste it here let's change it to what it was admin page admin page okay now let's press contrl p and let's search layout. cshtml page and here we had defined this admin page so let's change it to home and admin page okay now let's run this application again so I'm logged into to account and you can see that we have this link admin page so I want that this admin page is only accessible to the admin so how we will do that first of all we have to create a rule so go to here and go to user management rules and create a rule here let's name it uh let's name it admin and administrator descript okay now we have created a rule uh okay let's save this guy and permission we do not need to give any permission here the user so add user and let's say do we have any user let's make ravindra gmail.com to admin so it is our admin okay if we go here in the user section ravindra and you can see here also we have this rule section you can see that this one has a rule administrator and it is directly assigned okay so this one is administrator so only this user can see this link so how can do that so first of all let's close this thing and let's go here let's let's go here so I have some link here we also have to go into accents flows and we are going to create another login flow so be ready for it go to custom section and here in the custom section there is a plus sign uh build custom and add Ru to user something like this okay let's click on Create and here we have this section again and here we have this line so I'm just going to copy this line here and what this line will do api. id. token set custom token and it will set a rule here so you also need to copy this line and paste it here okay and yeah I will try to give you this file so that you can you can access it easily uh I think I will paste this thing in the description box okay so let's deploy this thing and after that click on this link back to the flow and again go here and add rule to the user so drop it here and click on apply and here in this section where it is this one yeah profile account admin page yeah this one admin page and here I will write if user Capital user and and user do identity dot is in user dot what it is user do is enroll let's say admin if it is a admin then this link will be visible otherwise this link will not be visible okay here we will simp simply write rules equals to admin okay so now let's run this guy again so I was logged out from my account because I need to logged out first then after logging out I'm going to log in again with this admin account let's click on continue and let's see what is happening here uh open ID message contains error access denied assigned rules is not defined error URI is null yeah then there must be an error so let's go here click on the add rule to the user click on here and now you can see that cannot find this name assigned rule so here you can see we haven't actually faced the rules so from event do authorization do rules we can find our rules so it's assigned rules and we will append these assigned rules here I hope we would not get any error now so let's see let's see what will happen so here we can see that now I'm logged in again I try to log in so let's log in here you can see I am able to access the admin page profile page admin page Log out so let's register sorry not register let's log in with another user let's log in with John now you can see that John is not able to access this link uh here is no admin page so if I try to access this directly what will happen home/ uh what it was admin page so then you can see access is denied that's why I have created this access denied page earlier so here we have defined our rule based authorization also yeah so that was pretty good and one more thing we can do here what if I want to retrieve the user ID and I want to save this into my database suppose I'm using SQL Server database or my SQL database for other operations and I want to save this user ID that is generated via OD zero system I want to save it into my system and I want to sync my ID that is generated by or zero system uh what I can do or we can do here is is we just have to save the ID generated by our zero into our database and how to retrieve that ID that's the big question so we have the claims by which we can retrieve the ID so here in this profile method you can you can just write this line user ID where user ID equals to user. claims do first or default and C Arrow function c.type equals to claim types. name identifier do value and in this line you will get the user ID generated by our zero system and you can check if this ID exist or not in your database so if this ID exists in your database then it's okay it means you are registered with you are registered and you have saved this ID in your database but W what if this ID does not exist in your database in that case you will check if user ID exist or not if it does not exist you will create a new entry in your database and you will save this user ID corresponding to that entry in that uh row you also can save some other information like like user email user nickname usern name something like this you can also save all these info on that row then with that row you can you can do any any kind of operations like you can perform some join operations suppose you want to suppose you are using uh Ecom application and you want that how many orders a customer have purchased so you can associate that user ID to order table so that's how you can link uh order ID and uh user ID so I hope you are getting the point what I'm trying to say that's the last point I want to explain in this video so that's it for now see you next time

Channel: Ravindra Devrani

Views: 3,942

Keywords:

Id: JxIhMgJKqqQ

Length: 64min 22sec (3862 seconds)

Published: Fri Oct 06 2023