Extending ASP.net Identity in an ASP.net MVC 5 application

A typical ASP.NET MVC application comes with a system for User Registration, Login and other elements you need to control your website that uses an user management system. This is more than enough for a typical website. In some cases you might need to extend this functionality. For example add few fields to your Registration Form. Before starting this tutorial make sure you have downloaded and installed Microsoft Visual Studio Express 2013 for Web (Link: http://bit.ly/1gNqqvJ). If you already have it or you have another Visual Studio 2013 version no problem lets gets started and skip the downloads.

Why Express Editions ?

Express editions are FREE to download from the Microsoft. Can be easily grab and install using above link. Express edition has everything you need to complete this tutorial. And this tutorial uses Microsoft Visual Studio Express 2013 for Web.

OK, Lets get started

First of all let us build a new project using Microsoft Visual Studio Express 2013 for Web. Lets click >

New Project

In the window, expand Templates and then Visual C# and select Web. In the Templates pane select ASP.net Web Application.  In the Project Name text box type a project name. In my demo I gave IdentityDemo. Now click OK

New ASP.net Project

Now you will be presented with New ASP.NET Project dialog box. Now select MVC in the Select template: area and make sure MVC check box is checked, under Add folders and core references for: section and finally click OK.

Now you have everything to test this demo. To confirm everything is working fine. Press , and the default project will be compiled and launched in the default web browser. If everything is OK you should see this screen.

IE

Lets click on the Register link to see what we have there. A default registration page will be displayed. This registration form has only a user name and a password (yes confirm password too). So its a basic registration form. What if we need to capture more data. For an example I need to capture an email. How do I add this to the default registration system without breaking it.

Registration Page

Lets get an user registered here and check what is the default system has to offer. Like a normal registration form type a user name and a password and click the Register button. After a few seconds you get registered and logged in to the system.

Hmm, what happened in the background ?

At this moment you must be wondering whats going on in the background. Where is the database, where is these data stored. How do you check these data. By default ASP.NET MVC 5 project template has connection to a local database file under App_Data folder in the Solution Explorer. By default you wont see anything under there. First you need to click the icon Show All Files. This will show all the files that not included in to this project.

Show All Files

Now expand the App_Data folder. You will see a MDF file with the project name and the date. Double click on this file and you will able to see the structure of the database and its tables. You will notice (Server Explorer will be opened with your database). If you have used or familiar with ASP.NET Membership and seen tables created. But ASP.NET Identity has created a different set of tables and there are no more long names, stored procedure and views. Spend some time exploring these tables.

Database - SE

As you see under Server Explorer under Data Connection and you expand the Default Connection. Default Connection is the connection string name to your database. The table names are straight forward and understandable. Now you have seen the database. Lets explorer the code.

By default all these elements are controlled by the AccountController.cs (in the Solution Explorer, expand the Controllers folder). And the models can be found under Models folder. And the file name is AccountViewModels.cs. Our goal is to add a new field to the registration form. For example we add a new Email field to the registration form. You may think simply add an Email field in the AspNetUser table and update the view. Thats what I thought in the first place. It doesn’t work that way. The Identity model is developed using Code First method. So we need to follow that method to add a new field.

OK, Where is these information stored ?

If you expand the Models folder. You will see and extra file than the AccounttViewModel.cs which named IdentityModel.cs which as two simple classes implemented.

OK lets look at the class. This is the class we gonna add properties to the user. In this case an Email address. This class inherits the IdentityUser which has the model for the AspNetUser table. This class implements the IUser interface. Again the class will be link the actual database to the ApplicaitonUser. This is the place where the connection has been made to the database and to the table AspNetUser. Lets add a property named Email to the class. The changed code will be.

So far so good. Now Lets modify the code at AccountViewModel.cs and add the new Email field. The class we going to modify is . Why we doing this? Because, type is used to generate the Register.cshtml view, which is a strongly typed view of type. All the validation code can be implemented here. Lets see the modified code of the .

The new field added in to the class (see line 18, 19 and 20) also validated and given an error message.

Now lets go and modify the View for the registration page to reflect this change. Expand the Views folder under solution explorer. Again expand Account folder. Now double click on the file named Register.cshtml. This file has all the necessary code for the default registration system. Now we are going to add the new Email field we created. This is how this file looks by default.

Lets add the below code to the Register.cshtml below confirm password field (this is after line 31 in above code, or any place with in the form).

OK, we are ready to test our code. Simply press to test our code. All seems to be good. Site loaded without and compile error 🙂 and now click on the Register link. YaY !!! you can see the new email field is added. With all the validation stuff working.

Email field added

Lets just type some valid information and click the register button.

8

OK all the happiness just we had is gone. A runtime error has been thrown. What does this error message means. In simple words its says “OK, dude you have added a field in the class remember? Its not in the database duh!!”

Ah, OK Shall I go and modify the database and check?

No, you cannot. Remember at the top of this post I have mentioned ASP.net Identity is implemented under CodeFirst approach. We need some help from out side to update the database using newly made changes to the class. Where can we get this help? Yes you already have the correct tool in the Visual Studio it self. Lets open the Package Manage Console by using > > . This will open the . In the console prompt type with - parameter and press . After a successful command console window will look this.

10

Now you have enabled the CodeFirst migrations. Lets update the database issuing command. And after a successful command the console window should look like this.

11

Have a look on the Server Explorer and expand the database. You will see the newly added field is there.

12

OK, we are almost done. Lets not get excited yet. We need one more change to be done to store the newly added email data to the database. Lets open the AccountContoller.cs  in the Solution Explorer under Controllers folder. Move to the override method (action) of Register (which has the HttpPost attribute).

Change the code in line number 8 to reflect this

Phew !!! we are done now. Press and test your code.

Congratulations Coder !!! You have just extended the ASP.NET Identity  🙂