Login and Registration - ASP.Net Core WEB API and JQuery AJAX

hello everyone this is Manoj welcome back to my YouTube channel in today's video I'll show you how we can use login and registration functionality in asp.net core using Ajax calls all right so in this video we'll try to create the same window as you can see on your screen so this is a login form and if you click on sign up so it will open a pop-up for registration let me quickly do it a registration let's say A1 so user created successfully and if I try again the same user with the same email so it will says user already exists and let's close this and if I try to log in with the same user so we redirect to a welcome page all right so the same functionality we will try to create using asp.net core so first of all let's open a visual studio window for this video I'm using visual studio 2022 you can use any version of your visual studio with support.net core so click on create a new project thank you so for this I am going to create isp.net core web app if you want you can search this from here but I have already created so it is giving me a direct link so click on it and next here you can give a name so login to this station [Music] dot net core app next create so it will create a new project so wait for a moment let me close the existing one so this is our brand new.net core project so this is the default page let's open the selection Explorer so this is the default file and folder structure of a.net core project we have a default MBC controller and models we have error view model and we have home shared layout everything all right so let's quickly create a model click on ADD class and give it a name users and in this we will create some properties so the first property is so you can use a shorthand just type prop and then hit tab okay then you can give a data type and then the property name so first name will be username and let's quickly copy I'll use only three so first one for username second one for email and last one is for password save again right click on this model folder add class and now create a model for response and in this model we'll have two properties one is for status code and another one is for status message save so we are done with our models now right click on your controller add new controller so click on API API empty click on ADD and give it a name register controller click on ADD so this is our API controller so here we will create our apis so first of all save it now we need to create a I configuration just to get our connection string so private read-only IE configuration and now we need to create a Constructor of this controller so there is a shorthand just type c t o r and hit tab so it will create a Constructor of this controller you can see the class so we need to pass the same class object here make sure you create the different parameter so now underscore configuration is equal to configuration so we are done with our Constructor part save now we need to create our apis before that go to your models click on ADD class let's create one more class for Dell which is for data access layer this class will you know communicate with the database and before that let's open our app.settings so app dot settings basically is a place where we can create our connection string all right so here we will give our connection strings and inside this we will create our connection string object so first of all it will take a name so give it a name let's say dbcs means database connection string and now we need to provide the details so the first property will be server and the server will be our SQL server name so open your SQL Server connect database engine copy your server name and paste it here so we are done with the server now another property is database so let's quickly create a database so create database test core app F5 database has been created let's use the same so now we are in the same database here as you can see this is selected here so let's copy the database name paste so our database property is also okay now we need to give initial sorry integrated security true why I gave this the reason is if you open SQL and click on connect see we are connected with our Windows authentication so no need to provide username and password so we can directly use Integrated Security so it will directly connect to our SQL Server I mean local SQL Server all right so coming back to app dot settings so we are done let's close this just copy this name no come here in the date dial so first we see we are going to create two apis one for registration one for login so first let's create a dialog method for registration so so public response registration and this class will take object of our users class and a SQL connection SQL connection for this we need to install a package so just hover on it it will show you some intelligence click on this and go to the last option install package and find and install latest version so it will install our SQL package so our package has been installed as you can see the class is now highlighted and now response is equal to new response and now SQL command is equal to new SQL command so here we will use stored procedure so for this we will create a stored procedure called SP register and the connection object and CMD Dot command type is equal to SQL command type dot stored procedure and CMD Dot parameters Dot add with value first the parameter name so first parameter would be user name and value will come from users dot username let's quickly copy and paste three times and change the properties so for email users dot email sorry email and for this password also change the SQL parameter password and now we need to open connection dot open and int I is equal to CMD dot execute non-query execute non-query and connection Dot close now if I greater than 0 means are record it's saved in the database then response dot status message is equal to wait for that we will use our SQL message I'll show you how status code is equal to 200. so for that we will use output parameter means whatever uh message we are getting we will get it from the database only we will not use any static message so CMD Dot parameters Dot add error message so we'll create this message SQL DB type dot care and the length will be let's say 200. and CMD Dot parameters dot direction is equal to Direction dot output string message is equal to string CMD Dot parameters dot value so it will get our message whatever we will return from the database and we will pass this message here so no need to write any ah static message oops we need to go to our response basically this would be our string parameter save and in the else part let's copy this and change this value to 100. and we also need to use try catch exception and put it here and instead of message ex Dot message save and finally return response so we are done with our register dial method perfect let's create another public response login and it will also use the same kind of parameters so users and SQL connection and response is equal to new response try catch exception and here response dot status code is equal to 100 response dot status message is equal to ex Dot message save and here SQL data adapter is equal to new data adapter and for login we will use a procedure SP underscore login and the connection object d a DOT select command dot parameters dot add with value and the first parameter we will use for login is at the rate email and value will come from users dot email let's copy this paste and change the second property as password and now let's create a object of data table to data table DT is equal to new data table and we also give ta dot select command Dot command command type is equal to command type dot stored procedure and after creating the object of data table d a DOT fill DT and if DT dot rows dot count greater than zero means the user which we are trying to login exist in the database then it will return uh at least one row so we will try to count the number of rows so if it is greater than 0 then it is a valid user then we will get a num response like response dot status code 200 and response Dot status message is equal to user is valid and we will try to login and go to the further pages in the else part user is invalid and change the status code AS 100. save and finally return response save so both our methods are ready one for login one for registration save now coming back to controller so now here we can create our apis so first API would be so that will be http post dot patch post and let's give her out register new user let's copy this public response add new user and this will take users object from the front end so we will pass the same properties from the front end and now response response is equal to new response and let's create object of dial class is equal to new Del so Del Dot response is equal to Del Dot register what is the name of the okay registration is the name okay so it will take if you again open braces so it will take two parameters one is this user's class second one is SQL connection object so let's give a first user's object so users comma let's create a SQL connection also so here let me create SQL connection is equal to null and here in the Constructor connection is equal to underscore configuration dot get connection string Dot to a string and here we need to pass our connection string name which is you can find from app.settings so this one dbcs copy paste new SQL connection save so our connection is ready now let's copy this object and pass it from here and finally return response save so our registry API is ready now let's create another API for login so that will be again HTTP post API so HTTP post and give it a route login and public response login it will also accept users properties so give it a name users and another one is SQL no not not here now create object of response class response spawns is equal to new response and response Dot not response dot we need to create a dial object so dial is equal to new Del and response is equal to Del Dot login now login will accept the same parameter as register new users and SQL connection so users and connection so return response save so our both apis are ready one four is a new user one for login save now go to dial we need to create two procedures one for registration let's copy this name go to database and let's create this so create proc and this will take three parameters one for username Redcat 100 and second one is for email where care third one is for password and last one is for error output which is our output parameter so where can 200 and output as begin and so we will check if not exists select one from users oops first window create a table so quickly create table create table users username email password I also create one ID int identity and let's make it primary key and username will be prepared care also email same for password table so our table has been created now we can use the same table so select one from users where email is equal to at the rate email if the email which we are trying to register is not available then we will come to this block then we will insert the data insert into users username email password and values will come at username at email and at the rate password and we will set our at error message as user created successfully we cannot use double quotes we need to use single code and in the else part if user is already exist with the same email then set error message is equal to user already exists with the same email so we are done let's select and execute okay another one is create proc for login it will take two parameters email and password let's copy both of them as begin select star from users where email is equal to at the rate email and password equal to at the rate password then select execute so our procedures also ready now going to the project and let's open this home controller and right click on this index go to view so we don't need this let's remove this so this is my existing login template which I showed you in the starting of this video so we'll use the same form so first of all let's try to run this so Ctrl shift B try to build the project let's see if is there any error or not well succeeded try to run this people so as you can see the browser is renting something and localhost colon 5176 so this is our base URL of your project all right so as you can see this is the default you know page of our application and we have changed the design so that is what is showing our own login page and if see this is the application name and this home and privacy is coming from the default layout as you go back to Wheel Studio open solution Explorer and in the shared we have a layout.cs HTML so this is the default layout if you want to remove this layout you can simply open your view and give your layout as null all right so you can remove that so let's move the default layout as I just shown you so go back to your project let's stop this and here we have a property called layout and you can simply give value as null save now try to run the project so this layout is nothing but as a master page which we used in our older asp.net web forms so now only the login form is rendering let's try to click on this sign up so this is our registration form all right our design is working as expected so now we will try to create our Ajax calls which will communicate with our API and then API will go to our dalf class to save data and login all right let's go to the index.html file and create the calls so let's go to the scripts and we'll create two edgex calls one for the register one for the login so let's create a function first for register and give it a name save form and let's create some variables for the values so first one is let's say user what's the name and this value will come from the user input field and second one is for password and third one is for email and it will come from email and now if name equal equal blank or password equal equal blank or email equal equal blank we need to close bracket here and if any value is blank then we need to display our error message div which is message to and two Dot show so this will pop up our div containing that error message so save and return false and after that let's create an object which will contain our data for the API so in the API we have username so this will come from name we already have this one and second one is email so we already have email value and finally password and we also have password value in PWD so our object is ready now we need to create an address call so dollar Dot Ajax so first property is type which is call type so we will use post and after that we have data type which is in our case Json and now we have URL and for URL we will use API slash register slash the route which is register new user copy so this is our complete URL and after that we have data Json Dot stringify our object so obj and after that we have content type which is application slash Json and caresat UTF iPhone 8. of that we have our success block so success function it will take the result from the API and after that we have error function result console DOT log result so in the success if our API is successful then first of all let's log the result and after that if result Dot status code equal 200 means our API is Success then change the message so we have the ID of message is message one so I said one dot HTML so we will replace our static message with the API response so here we will use result Dot status message okay and not this one we need to change this and hash message1 Dot show and message two Dot hide and let's reset all the fields so dollar hash registration dot reset so save so we are done with our registration so let's save this so let's quickly create Ajax call for login then we'll try to run both the functionalities so where obj is equal to for login we will use email we will take from this let me recheck oh sorry for email we will use log email password lock password save let me copy these things and now let's change some of the properties so we are using the same and instead of register new user we will use login save and here we need to change something message dot show so save let's try to run this so let's open the sign up page and let me give any ID so manage test 1.03 plus one two three four five let me put a breakpoint on the distance submit so you can see the control is on register now let's try to debug okay we got the response user created successfully all right let me remove this and click on continue perfect user created successfully let's go to SQL Server and let me select star from users yeah we got this user perfect let me try to create the same user and let's see if the validation is working or not which we applied from procedure end you see user already exists with the same email perfect let me change this to five perfect so our SQL validation is working done now let's try to login so close this copy 0.2345 you see user is valid so both of the things are working let's close it and now let's create a separate view in the home controller so let's copy this quickly and give it a name dashboard save right click on it and add a view empty change the name as dashboard click on ADD here's create a simple div welcome user save and now go to index and instead of showing this one so let me cut this here window Dot location Dot href is equal to so we'll redirect user to this particular route so home slash dashboard save now let's try to run it again email password login so done welcome user so this is how we can use our login and registration functionality in asp.net core so this is about today's video I hope you like it if you enjoyed the like button share comment and let's say if you are working for a company and you are doing your internship and you have been assigned a project to work on in that project if you are facing any kind of problem regarding react.js regarding jQuery HX API MVC SQL Server so you can contact me on my Instagram my Instagram handle is open programmer you can also find my email and Instagram handle in my channel description all right I also do some college projects if you need any kind of help in your college assignments then I also do these paid services so please contact me on my Instagram on on my email so I'll see you in the next one thanks for watching take care bye

Channel: Manoj Deshwal

Views: 14,682

Keywords: login web api, register with web api, web api registraion, login with webapi, login with web api, login with api, web api login, c# webapi login, login in web api, webapi login using c#, web api login example c#, ASP NET Web API login page, asp.net web api login sample, asp net web api user login, how to login using webapi, how to login using C# webapi, how to use web api in mvc project, how to use web api, web api tutorial, web api, web api c#, manoj deshwal, yt:cc=on, js

Id: 1vEFDZran9Y

Length: 44min 19sec (2659 seconds)

Published: Sat Dec 10 2022