Google authentication in asp.net core mvc

hey there everyone it's ravindra here back with another video in this video we are gonna see how we can use external authentication in asp.net core MVC and we are going to use Google authentication in this project before moving ahead I want to thank all the peoples who are supporting me in this journey if you like my content and want to support me make sure to like this video and feel free to leave a comment so only that must support I need from you guys so let's get started without any delay so we are going to create a new project here so select this one create a new project and we have to select asp.net core MVC so let's just type here SP dot net MVC and select this template click on next sorry not this select this template and click on next now let's rename this application and let's name it to Google Authentication demo or let's name it Google Earth demo that's fine and I'm going to change the directory here so let's click on next now you need to watch carefully and here we are going to select authentication type to individual account so do not forget to select this one individual accounts okay so after that click on create and it will create a project in Mean Time so our project has created now we need to do a few things here so what we can do here [Music] let's click on this thing or right click on this project so right click here on Google Earth demo and here click on ADD now we are going to do or we are going to select this new scaffolded item so click on this thing Tau click on this identity section in the left panel identity section and click on ADD okay now you are seeing this pop-up screen and we have to select this option override all files so select this option and here we need to select database context class so select this one this one is default application DB context so select this one and click on ADD button so right now this file is appearing in this screen we can close it now and we can go here inside the app setting.json file and here we are going to change this connection string so here inside the server name we have to put our server name so you can copy this name from here so just copy this name and remove this one okay so let's change the database name also so let's name is Google auth demo DB sorry where I was okay here Google hot demo DB trusted connection true multiple active result set true leave these options and add these options also sorry not this one just add this line here trust server certificate equals to true so that should be fine it is our connection string and we can see here this connection string which has name default connection has been called here so that's fine and we can close it now okay so now it's time to run migrations so go here in the tools section and here nougat package manager package manager console okay so here just type add migration and initial let's name it initial that should be fine and it will take a while okay now our initial file has been created initial migration file has been created and right now we do not have added any table here so that's why we are not seeing any table and all the default table created by identity will be saved when we run the update command here so let's add here update database and it will run a migration command sorry update database command and all the tables related to Identity will be saved to the database okay so you can see that we have saved our tables into the database and we can check it here sorry we can check it here and let's expand this thing and we can see that we have Google auth demo DB so here we have all the tables these are the tables created by identity so we can close it for now so right now let's search here Google apis and we can go here in this link and do not worry about links I will put down it in the description so do not worry about the link so here go to the Google apis Explorer sorry not here just go back here and select this one API Library and here we have to create a new project so that we can link external authentication to rsp.net core project and if we go here in this section API and services click on this in enabled API and services and here we have to create a new project so let's click on this create project and let's name it net core external auth or okay so here we have we are not going to select any organization and now we need to click on this create button that would be fine so click on create and it is going to create a project for us okay so here project has created let's close this thing and close this thing also now here we have the sections and we're going to go here in the oauth constant screen so click on this section oauth consent screen so right now let's select this one external we have two options here internet and external so we have to select this external one and click on create now we have we have to fill this form so here we will have this app name so let's name it okay what was the name of solution Google off demo so we can select this name also you can select different names so I'm gonna write this name Google Earth demo also it is not mandatory to put this name you can choose any name you like okay so here select the support emails and I'm going to select my email ID here and now we have to select this app logo it is not mandatory and all of these things are also not mandatory so here we have this mandatory section and we can add any email address here so I'm gonna I am going to write my email address here okay that's fine now let's click on Save and continue okay so we are getting some error here so I don't know why we are getting this error maybe with this name okay so let's change this name maybe it is the error so let's name it external SP net external hot demo and let's click here I guess we are fine now okay we are fine I guess it does not take names starts with Google so I have changed it maybe it was the error because I was using Google name Hindi name okay now here we have to select this thing so let's see what it is offering us so here we have scopes oh wait we do not need to worry about Scopes so here we have the section Scopes add or remove scopes your non-sensitive Scopes your sensitive Scopes your restricted Scopes okay that's fine now we have this X and Test user so if you want to add some test users it means you want you want that this app allows only few users so you can add those users here which are allowed to use this authentication application so if you want to do that you can do that but I am not doing I am not going to do it right now so let's move ahead and click on Save and continue so we have done everything here so we can back to the dashboard now now here we have to go to the credentials section and here we are going to create credentials so click on this create credential button and here what we are going to create API key or client ID service account so we are going to create we are going to select the second option oauth client ID so click on this option and here we have our application type so here our application type is web application so here we need to change the name so let's name it external asp.net external cloth demo and here we have this section authorized JavaScript Origins authorized redirect Uris so we have to select this option add URI and here we have to add a URI so let's run our project and we are going to copy the URL of our project so let's wait so it is the URL of our project so let's copy this thing and just paste it here and type Here sign in Google that's it so here we have this thing and let's click on this create button okay so it will take a while and okay so here our oauth client has created it is our client ID and it is client secret Okay so it is a sensitive information we should not share it with anyone I am doing it because of this video and I am going to delete this application after the recording has done so that's it okay so now what we have to do here we have to store this client ID and client secret so let's see how we can store it we can store it in the app setting.json but it is a sensitive information we should not store it in app setting.json file so we are going to store it in app secret but it is for only the development environment so when you do it in server use some kind of app Vault app Vault to store this information so here what we need to do here right now we need a command prompt so let's see where we can find View and here we should have terminal yeah here terminal okay so we need to change the directory here because our project is inside this directory so type here CD Google hot demo and now we are inside this directory so we can add this line here dotnet user secret set and it is the name of our key so here we are going to save the client ID and inside these double quotes we are going to paste this client ID so here we will paste this client ID and put this double quote here so this client ID will be stored or will be put inside these double quotes so click enter and that's it and here we are going to do the same thing so we're going to change this client ID to client Secret and we will do the same so we're gonna copy this client Secret and we're gonna paste it here and we're gonna put this double quote here so we have to put this client Secret inside the double quotes press enter now our user secrets and sorry now our client ID and client secrets are stored inside the user secret you can close the terminal now what we are going to do here we have to open this program dot CS file but before that we have to do one more thing I forgot about that so go here and open the package manager console and we have to add one package here we need to install that package so right here install package and install this package microsoft.spnet code.authentication.google click on enter and this package will be installed shortly it will not take that much time okay fine so right now if we run this project so let's see what is happening here before moving ahead so right now you can see that we have this default page so click here on this login section and here we have this login section and we do not have any external authentication here so we are going to add an external authentication when we add that option here so we can see ah login with Google button here in this section in the right panel so let's close this thing and move here so just going to type here where configuration equals to Builder Dot configuration okay and we need to add this line here so just change it to Builder dot services Builder dot Services dot add authentication add Google and here we have these options Google options dot client ID and this ID we have saved in a client secret we have seen earlier that we have added the client ID and client Secret inside the app secret so we can get those things with the help of configuration so we can get it like this okay now I guess we have done all the work okay so let's close the program.cs file and let's go here and let's make this privacy section so we cannot access this URL without any authorization so let's see of what will happen when we put the authorized attribute here so right now we are here in the default page of our application so if we click here on the Privacy so you can see that we are moving to the login screen so we are able to go to the home page but we are not able to go to the Privacy page so here you can see now we have this Google button you can customize it I will show you how you can do that but it's not that much important right now right now what is important is functionality so click on this button and here we can select this option okay okay now it is asking us few questions you have successfully authenticated with Google please enter an email out email email address for this site below and click the register button to finish the login in okay so we can register here again right now we do not have set up any email ID or we do not have any emails to confirm our email so it is a temporary solution in the live application these options this option does not exist so it's just a temporary hack so when we click on this link it will confirm our account but do not do this in the real applications okay so click on this and it is saying thanks for confirming okay now we can go into the login section again we can go here and we can see that I have successfully logged in and now I can travel I am able to see the Privacy page okay so let's log out and again you will see that I'm not able to access this privacy page so that's it that was pretty much simple and okay let me show you one thing where you can find that registration page so go here areas pages account and here we will find somewhere login.cs HTML page and here's the page you can customize it so here 's our login page you can customize it from here so if I write here login with this and let's see that is has changed or not so I guess I have to run this page again so let's run it again let's go to the login section again and you can see that login with Google so we have made this change here you can customize this whole page that's not the case and that's it if you find this video helpful let me know in the comment and make sure to like this video And subscribe this channel that's it for now see you next time

Channel: Ravindra Devrani

Views: 4,480

Keywords:

Id: gq1zNiKWCP4

Length: 23min 35sec (1415 seconds)

Published: Tue May 02 2023