Complete login and registration system in ASP.NET MVC application

hello friends welcome to dotnet awesome calm this for this article we have seen how to create login and registration page in asp.net MVC application but it was very simple example and most of the important features like email verification password hashing in the registration page remember me option in the login page has not been explained for make this example simple and easy to understand for beginner today in this article I will explain the following registration page with email validation and password hashing login page with Remember Me option and e-mail verification page ok let's start first of all we need to create an application in this article we have used Visual Studio 2015 for create a new application here in this visual studio go to file new and then click on project it will brings up a new dialog window here new project from where we will select wave and then a spirited web application underway then provide unification leave you [Music] registration and logon and then select your such application select your project location and then click on OK button it will open one another dialog window from where we can select our project template I will select empty and then we'll check embassy come here for add all the folders and code references or this template and then click on OK button one application is created you can see your first of all I will start with registration page so before Easter we need to create one database here in our application so we can save user data for adding your new database here in our application I will go to AB data and here in this folder I will add our one local database as this is a tutorial project I will add here so right click on your AP data folder then add and then click on new again from here I will select SQL Server database under data and then provide your database name here and then click on Add button you see your auditor is added in our project so after that we need to create one table for save user details double click on this database so it will looking in your server Explorer from where we can add our database table for adding this database table right click here in this tables node and then we click on add new table here I will write our tailor schema so my table name is user then user ID this should be identity field first name the military field must be see it's also mandatory then I'll add molarity 2:54 this is also my Jeremy Gilbert this is not medically but I have added here because I want to show you how we can handle the date/time field in our form then password max because here I will store hash value so I don't know how many titles it will take and then I will add is email verified is a boolean value is email verified or not if the e-mail verification is not done the user cannot access the application and then I will add activation code the Skype will be unique identifier and this is ultimately this field we will use for validate the email so this is one unique value we need to store here and according to this value we need to validate the user which we will send this authentication activation code to user email ID our table schema is ready now we need to click on this Abed button for generate this table and then we'll click on update database okay our table is created successfully so exci here we can see this table is created now we will go to our solution explorer and we will add our intiki data model for adding the model i will go to models folder from here I will right-click then add then you I came from here I will select add your dotnet entity data model under data and then we need to provide data model name here in my case I will add in my model and then click on Add button it will open one another dialog window from where we can add data model from this dialog window I will select yes designer from database and then click on next so you can see here our database is already selected or you can also select your database if it's not available here using this new connection button ok there is a option for save configuration setting in wave dhadkan see this is the our data context model name I will leave it as it is and click on Next button from here I will select indicative of 6.8 again click Next select your table and finally I will click finish button for generate this data model here in our models folder it will take a little time or model is created successfully comes a button and kills it a PR model is also created now I will do a partial class of that user model that user model where we will add data annotation valuators for validate or model we will apply the validator to the metadata classes instead of applying the validators to the actual classes generate by the entity framework because the entity framework designer generates the model classes any changes you make to the model classes will be overwritten the next time you make any changes in the designer so what I will do I will first create a folder here inside this model here I will see try to extend it I have created one folder which named extended and inside that folder I will create one new class or generate dispersers of stack user model so the name should be user as it is defining the entity model and then click on Add button so this class is generated first of all I will remove this extended from the namespace because we are generating the virtual class of that user class which is defining the entity model so if you face here this is the actual class generated from this one generated from entity framework and this is our extended class is a perfume class where I will add validation so for adding validators as I told you I will not apply the validation to the actual class I will add one another class and where we will add all the validation so here I'm going to create one other class we serve metadata okay first of all I need to import system dot component model dot data annotation for apply the data annotation validation go so our first property was the first name this one so Oh sting first me okay here I need record okay and then get string false and error message should be first meaning required okay and I will add also display name equals to first me so I have done for the first name property now I will add valuation for the last commercial the same way top string lost me so here this place should be me [Music] lastly it word which is chain Falls and error message for free and error message equals to love's name record okay it's also done now I'll let email-id crop string milady so that is it good this planing should be Hardy it could record mrs. turn one more thing I need to add here data type should be email address this is required for verified valid email address now I will add validation for data birth so it's the date/time what you wanted to put explaining the tough work the good sorry it was not recorded because we have added nullable for this data but right but we need to add data type data type should be type of date time also we can apply her display format this one or display in edit mode how we need to render this data birth field here I will apply this like in edit format to you take their format string should be I want to show like this mm DD 5 5 5 5 okay Oh Matt I want to show in the 8th mode and then I'll add validation for password field so this is also required a long distance pause and error message should be first word is secured in and we need to add data type of password this is a code otherwise it will show plain text I want to show password more text box that's the reason I have added this also one thing is liquid I want to add mean length species you're onto so minimum clicks character record okay and finally I will add one additional here which is confirm password so I just copy this one paste record is not record here this should be confirm password and display name should be and from password and also this is not equal here i will add compare valuator other property is password and then add a message confirming password and password do not match okay so we have added all the validation here in this module then what we will do I will apply this validation in our user model so how we can apply we will add meta data type and type of this class name we need to add here in this way we can add all the validation in a separate class and apply risk validation metadata information here in our main tasks so this is done the validation part is done but just one thing as this is not in our actual model I need to add this field here as well this is the additional field this field will be displayed in the registration page but this value will not save to our database okay now we will add a controller here in our application for write all the required actions for register use the login logout and email validation okay so go to your solution Explorer in the solution Explorer I click on controllers folder then go to add and then click on controller from here I will select MVP 5 controller empty and then click on Add button here I will give the controller name user controller and then click on Add button you can see one is a controller is added here in our application ok so what I will do now here is right registration action stationing full section what are you loving doesn't post before logging and local what I will need then we will verify account and then verify mainly ok so let's start with registration action institution action okay so what I will do here is get it a bit public method registration yeah we don't need to do anything just we'll return here then what we need to do we need to create one view for that action so right click inside your view and click Add from here I'll select kill then from here I will select it yes this is our model and this needed the layout page or make it looks perfect okay now we can scripts library and then click on add water okay because here all regarded other fields from here we need to remove is one on activation code is not yet code so I removed it verification is not offered at the registration time so this is also removed okay and all it's okay softening love being mail ID date of birth first code confirm password one thing we need to change here as we have added this you can see the layout is automatically edit because we have checked the layout when we create a good view so just I'm going to here for change one thing your in the layout page i will add 150 x and sorry and the section now we need to provide one name clip expert false this I have added because I want to add all the clips from registration page after loaded this library so what I will do here and just don't need this one because it will take form layout page just what I need to do you just need to write section and then this means inside this section what I have written here all will window after this to equity you're in this section okay then it will work perfectly fine because we all know that the coil a we should enter before any other flipped which are dependent okay then what I will do here I need to send the little or make it looks perfect so what I will do here I don't need this one those this I have removed so this is our complete form on where to go now what I will do here I will write one condition here for show success message after registration successfully done otherwise I will show the form and error methods is in so here I will write one condition if we straight up this leave order status data we will insert here in the new bag after successful registration done so if it is not close to null and [Music] your dog teeth down if it is not equal to null and the status is true then here I will show the success message otherwise what I will do here I will show the inter form if it is not success and it will show the form okay and also I need to show validation message also here if there is any error after successes after submitted the form so I will show here so here I will show the message again I will write one if condition here I'll show a message I forgot the last name bootstrap class name it should be allowed I think we just allowed I think all danger this one then here I will show the things I will do also increase access the fish I'll show the aromatics okay so again anything like I have done here I have added one condition here if the view back message status is surface then we will show the successful message here and if it's not and if it is null then I will show the form for registration and if there is any error in the form it will show here it's clear once I need to change here this one I think not record because we already have this one the after if sign is not record with office already fish of course started here in his Beckett so this is not required and here what we will change to login if you are already registered so you can get this knowingly so user can this login link okay so this form is done now what we need to do we need to create our post action where we will submit this form okay so let's go back to user controller so this is done now here alright our for instead of a post action so HTTP post and one more thing I will add here valid a 24:3 token this is coffee event here sorry patter and now I will add public action result registration and here are to add our model in so this is not available so what I need to do your model the model I need to add this one here and in sir the last it's on you yes then here we need to like our whole fault I'm in this form and save all the data to our data okay so one of the most important things I need to add mirror which is all right fine sorry and to add this third bracket bind exclude and here I will suffice to property which is one is one second I just go to all model not here this is our stressors you can read from entity models angle so this one I will copy and adhere and one more property I need to add 0 which is occupation code is okay let me explain why I have added this to failure okay first I'm going back to our actual model cell which is this one here you can see we have these two property in female verified and activation code that we will present user to provide because we will do this form back and code right in female verified it will be true only after the user will verify their email and activation code we will generate a unique code the algorithm will not take any input or this to fill from user and this to field we need to present from user to provide he calls them if I go back to our controller here the model is bind automatically so we can prevent the properties that are allowed to be bound automatically using this bind X code okay that is the reason we have added to here if a new one wants to provide this value and provide this value from form it will reject from automatic binding okay okay let me first describe what things I will do so first of all I will check model is valid or not so audible validation then I will check email is already exist or not then I will do activation code generation so generate activation code here one more thing I need to do here which is password hashing of the Katie purpose you will not save key or password in our database so Josh what Helsing will do here we do so so dashing and then has a low we will store in our database okay an exam we finally we will save with so theta will and after save male to user okay these things we need to do here so we will do one by one for me this easy to understand okay so um first of all I will get conversion value of theta by phonics ball change message and again it's to property weenie because you know you we have used message and you can see the sticker so this too is needed and finally we will store this value in our view back so we can pick from here the formula to submit a service fee or not okay so our first tip is model rejection model devaluation employs the modern state that is really done model validation because all the remaining work we have already done in our validation class right okay so if it is very thin and that will do many but here other voice message look at this one revalued escaped then our identity which one so email is already exist or not I need to take this one or take Emily's already exist or not I'll read one function here so it should feel non action without public bouillon so it should be not you should be inside the class direct here non-action public Julian we email exist our personal ID somewhere I will return true or false if exist then I will return to if not then I will return false and this method I will call from here so okay let's this method ready first very simple CC dot user stock they're lightly first question your lighting your first default do you suppose to know then it's not exist and it should be false and it's not equals to now that limit exists when it really don't show I think we can do it very simply not it goes to null then we don't need to anything good here right this is simple it's not equals to now zapping x2 okay so this is done now I will call this method some go for a fiscal school here and the email ID should be you should talk in a like right Oh or like it's more here the reason I discovered this one make it clean if it exists then what I will do then we will add modern-day Thoth and other later one custom mod 1120 I do thank God my age returning you know from your data key so it will not exist because the remaining four then so we should show this message in our view where I will add this wrong I will add here just after the email editor so I will just change one line they I'm going to add this new line here oh also mail already exists page then add this mean custom name then I will add this flour sale or microscopes perfect okay so this is done it's email ids already kills then this error message will show you just after death email xbox okay I'm going back to our in the controller okay so email valuation is done now but what's the second thing is generate activation code it's very easy this one off second curve someone to put you the equation called how will generate nothing is a talk activation code is easy to qib talk mutual then activation code okay password has now we need to add as well as Washington's here copy q4k control is million for next week and you also has a black person as we go for password hashing will create one another class okay so just go to your solution Explorer right click on your project name go to add and then click on class state pointer select key crypto okay and then click on Add button so I will make this one static now I will add one method here public string sorry our matrix static class public static string hash skin well on return hash value of this value oh I need to convert 64 string security will be dog the Goffe dot create - hot computer cache including that is x8 goodbye so this is done first you converted it to bite and then complete ash from this that makes 256 this is done and now I I need to call this method where I need to convert time text to as valid so I am going back to our in the controller from here use the dot password equals to system dot has all the dot password okay we need to do one more thing here this is confirm password is equal to if the dot has is taught confirm password let me explain why I have done this line I have added this line or as this is the Hat for avoid confirm password does not match issue as dbcontext validate again on set changes so or ignore this validation because hashing this confirm password as well for mates this to value and it will validate again on Save Changes okay okay this is done and this we need to make it false for the first time so is the dot validation is false now what was an expert password as Mia turn then we need to save this information to our database to be able to create my little finger diminishes between the two entities what I'll do here is the dot users dot add this is and then I will call this is Peter to our database and it's like a sixth successive then what I need to do is I need to send this email to user or e-mail verification screen okay so so for sending Mary we need to again write one method here I will write for another method action and station what we need I need my lady-in-waiting malaria you could I will send this email and also an in the activation code okay and this method I will call some sure the dot melody and dot activation code Christian so here I knew correct method on the code for send email with activation code let's finish this method first to send email with this activation code for validate the account ok ok so first good waste dot click the host name who [Music] you good slash we require town / cause activation code right so final link should be a quest dot we will select replace sweet request talk da da da button query slowdown request with tip verify you are a lot so this is our actual URL for validation link which we need to send emails okay first angle we need from me system connected name this feeling talking son aspartate gmail.com I'm going to use email sitting here this mail explaining darkness awesome you can provide your email id ho to email you questioning manager Daniel ID where I need to send this email this one-minute password from password hearing me to provide your email password here you need to replace within your actual password for your gmail account if you provide to your gmail account here in the formulators and then subject your accounting Sicily created yes then for you so we can provide HTML this is space now it's some method here we are I did to tell you that you're gone you did click on the below link to verify your account yeah girls still need this is believe okay - break a leg go for the link okay so this is our body now I will configure our SMTP client to the point where we need to provide some information you can also continue your you can give you from your web config file for a menial so as I have used Gmail account force in this mail so I will add simulating an extra-wide host post if it's a dot gmail.com for channel then both 587 to make sure it's to make you go boy tell you very much network keep on to do and before feeding shall fall and if you're like dentures so you go one extra credential we need to import using system dot next click film in and from a new password for a criminal dot address so this is all SMTP client now some know to email subject equals just complete sorry I have done something wrong this is Matthew sorry people take to volume and then is body HTML gifts we need to make to as we are using HTML tag here you can see you so this one I could on finally we will do a dot paint so this method is done for sending email now what I will do I will call this method from here okay I have already done haha masses should be registrations that we've done account the Shandling asking Saint to yours and lady's dot email-id okay and stickers I'll make it to you now saying is also done and finally I will add it's not nice to be back be back dot cater equals to theta okay so we have done registration work okay so registration part is completed now we can run our application for sake everything is working fine or not and everything is fine then we will start this remaining code verify email verify mailing login login post action and logout okay let's check this portion is working or not so I am going to run this application we need to go to use the registration page because we have not done anything here we will take if you show after doing all the remaining work okay by Rivoli looking for home controller so if our home so when I click here it's showing all the message mostly my cordless can record in mail ID record password password is big word that means validation is working perfectly fine so let me create this form lady this there should be called one calendar when I would click you but it's not working okay let me fix this issue maybe I have done some wrong ok let's go back to our you zoom let me check yes it should create not date time that isn't the editor was not working perfectly let me run this application again the station page okay you can spin outfit can you so I'm going to fill up the form again and got home anything you want so anything from health system giving one dummy information now password see when you don't expect to code this message also continue and then it's looking for some calm password match now if I click here it will save the data to our database and also one email link to this nail ID but before doing this we should define or password in L password because for now I have added it to me password so before on this application you should change your password in the code okay let me update my email password then I am taking here okay I have changed the password now I am going to click here to create it's taking a little turn because the half-animal is taking a little time you can see how the masses the vegetation successfully done account activation link has been sent to your email ID this one Yahoo we have done this let me check my mail ID if I got any mail you can see I got this mail and this is the verification link after doing this verification part if I click here it will activate my account okay [Music] let me show you it details inserted successfully oh this is our database you need to check one yes you can see you mr. hash password email verification is called and this is activation code so it's working perfectly fine let's give my second video of this series or learn the remaining part how we can verify account how can create login page with Remember Me option and also logout thank you for watching please don't forget to Like comment and subscribe thank you

Channel: sourav mondal

Views: 321,530

Keywords: Complete login and registration system, Login, registration, asp.net mvc, registration with email verification, login with remember me, send email, Registration Page mvc, login page mvc, email verification mvc, login with remember me option, registration page with email verification, registratration page with password hashing

Id: gSJFjuWFTdA

Length: 71min 8sec (4268 seconds)

Published: Sat Apr 08 2017