Angular 5 User Registration with Web API

In this tutorial, we will implement Angular 5 User Registration Using Web API and ASP.Net Identity.

Contents discussed :

Design angular 5 user registration form with required validations
How to use Asp.Net Identity in Web API
Customize Asp.Net Identity Table Structure

Here is the complete article list.

Following tools and modules are used for this project :
– Angular CLI
– Angular 5
– ngx-Toastr (npm package)
– Materialize CSS (front end framework)
– VS Code & Visual Studio Editor

we assume that you have installed required packages and softwares for angular 5 development.

GitHub link for demo project : https://goo.gl/6bZM71

Create Angular 5 Project

First of all we will create the Angular 5 Project and then Web API Project. I use Visual Studio Code Editor for Angular 5 App Development. To create an angular application, you can use following Angular CLI command.


ng new Angular5

It will create an angular application with name Angular5 and install some default npm packages. In-order to run this application, following command can be used


ng serve --open

it will compile and open our application from default port number 4200 ( http://localhost:4200 ).

Let’s Start Application Design

In-order to design this application, we use Materialize CSS, it is one of the trending front end framework. jQuery library is need to work the framework script file. So let’s add the required style sheet and script references inside index.html.

Now let's update the global style sheet - styles.css. Inside the file we have added all css rules for entire application.


div.sm-jumbotron{
    margin: 0px;
    padding: 2rem;
    background-color: #38547b;
    color: #fff;
}

button.btn-submit{
    background-color: #38547b;
    color: #fff;
    width: 100%;
}
button.btn-submit:focus,button.btn-submit:hover{
    background-color: #38547b;
}

Create Angular 5 Component, Service Class and Model Class

We need one sign-up component. so let's execute the following Angular CLI command


ng g c sign-up

To save service and model class, we will create a new shared folder. then to create these classes execute following commands.


# from shared folder
# for service class
ng g s user
# for model class
ng g class user --type=model

Open newly created model class - user.model.ts file. let's add required properties for user registration.

Now update default component html ( app.component.html ) as follows.

app-sign-up tag will be replaced by the sign-up component html.

Design User Registration Form

First of all let's add a property of the type User model class inside sign-up component.

user property can be used to design the user registration form. For that Template Driven Approach can be used. So we need to import FormsModule in app.module.ts file.

Now update sign-up.component.html file with following html code.

Registration form will look like this.

Form Validation

As per the component html file, both UserName and Password are mandatory fields - so we have added required attribute to those controls. other than this required validation, we have added 'minlength=3' (minimum 3 charactors should be there) to Password text box and for preventing invalid email format 'pattern=emailPattern' attribute is added to email text box.

Here emailPattern property is added to sign-up component typescript and it is initialized with regular expression for evaluating email address as follows.


emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";

In-order to validate form controls, we have added css class validate to the controls and error message is added in respective label data-error attribute. Then materialize css will take care of the client side validation.

On form submission, OnSubmit function will be called. So we have to define this function in component typescript file. Before that we have to deal with User Service Class.

User Service Class

Inside registration form submit event, we have to insert a new user using a Web API project. we have not yet created the Web API Project, in that project we will have a web api method with URI '/api/User/Register' to add new user inside SQL Server. So we can define a function to consume the Web API method inside the service class.

rootUrl is initialised with Web API base url, function registerUser() will post user model data to the Web API method using HttpClient object. In-order to use HttpClient, HttpClientModule class must be imported in app.module.ts file.

ngx-toastr package installation

From sign-up component, we need to show notification messages after user registration, for that we can use npm package - ngx-toastr. In-order to install the package, you can use following npm command.


npm install ngx-toastr --save

then add ToastrModule inside appmodule.ts file. along with have to add User service class in providers array - because we need to inject the class in sign-up component.

BrowserAnimationsModule is needed to work some UI-animation from the package. Now you can add following code in sign-up.component.ts file.

inside the component, we have injected UserService class and ToastrService class (from ngx-Toastr). resetForm() function will reset the form controls to their initial state.

With OnSubmit() function, we called UserService function registerUser() for user registration, which in turn submit the form data to Web API method to Insert a new user.

Create Web API Project

To create the Web API Project,Open your Visual Studio. In-order to create a new project, go to FILE > New > Project (Ctrl + Shift + N).

Image Showing Creation Of Asp.Net MVC Project

Then select Web API template. then Click On Change Authentication and Make sure that we have selected No Authentication Option.

So here we have created a brand new Web API Project.

Add Asp.Net Identity to Asp.Net Application

Asp.Net Identity is a membership system for Asp.Net Applications. It provides lot of feature like User Management, Role Management, User Authentication and Authorization, Social Logins with Facebook, gmail, twitter etc. In this article, we will use Asp.net Identity to store user details inside Identity tables.

First of install required package for Asp.Net Identity. Right click on the project, then Manage NuGet Packages... , then search(Online) and Install Microsoft ASP.NET Identity EntityFramework.

Asp.Net Identity uses Code First Approach, So table structure inside the membership system is already defined, if you want to customize the structure, we have to do some additional works. First of all add IdentityModels file inside Models folder as follows.

ApplicationUser class is inherited from IdentityUser. In IdentityUser class, Asp.Net Identity defined the default properties for Identity table (like Username,Email, PasswordHash etc). Inside ApplicationUser class we have added additional two properties to User details table - FirstName and LastName.

Configure DB Connection

Inside IdentityModels.cs file, we have ApplicationDbContext class which inherits IdentityDbContext class from Asp.Net Identity. With the class constructor, we have configured the DB connection. as part of that we have to add DB connection string in Web.config file with DefaultConnection name as follows.

This connection string will be used for Asp.Net Identity Code First Approach With UserDB Database. You can use all of your application data along Identity table inside this same database or you can have a separate DB for Application Data (Data except User Management and Role Management), in that case you may have to add one more connection string.

Back to ApplicationDbContext class, there we have overridden OnModelCreating from Asp.Net Identity to change the default identity table names.

Now in-order to see these changes in action. Go to Tools > Library Package Manager > Package Manager Console.

In code first application, Database table structure are defined in C# code, in-order to see them as database objects first of all we have to enable migration for that execute following Command.


enable-migrations

then add a migration - it's like restore point in windows


add migration InitialMigration

to see these changes in database, execute following update command


update-database

Now if you check the database as per web config connection string you can see tables from Asp.Net Identity with our customization.

Add Web API Controller for User Registration

Now let's add Web API controller for user registration. Right click on Controllers folder, Add > Controller. I'll name this controller as AccountController. Inside the controller we need a Web API method Register to Post registration data from Angular 5 application. Finally the controller will be as follows.

As per Asp.Net Identity, Password should be at least 6 characters long. Inside the method we reduced minimum number of characters to 3. As a parameter for this we an object of AccountModel class. So let's add this class inside Models Folder.

So here we have done with this Web API Project.

But there is a Problem - CORS

CORS (Cross-Origin Resource Sharing) : it is a mechanism to let a user agent (browser) gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. cross-origin HTTP request occurs when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

In this application, our web API project will block request from angular 5 application, since they are cross-origin HTTP request(from different port number - 4200). In-order to allow cross-origin HTTP request, we have to configure Web API project for this localhost:4200 request. so let's look how we can do that.

First of we have to install NuGet Package : WebApi.Cors. Back to Visual Studio, Select your Web API project from solution explorer, then go to Tools > Library Package Manager > Package Manager Console. use following NuGet command to install WebApi.Cors.


Install-Package Microsoft.AspNet.WebApi.Cors

Now let's look how we can use this package. In-order allow cross-origin request in Web API project, Go to App_Start >WebApiConfig.cs file. add following lines of code

now web API project is ready for cross-origin request from our angular 5 application.

Now try run this application without debug mode, some of you may get this problem.

Could not load file or assembly System.Web.Http

It is due to different version of latest WebApi.Cors and System.Web.Http (5.0.0), so lets install same version of WebApi.Core (Not Cors it is Core). it will resolve this assembly problem. for that you can run following NuGet Command from Package Manager Console.


Update-Package Microsoft.AspNet.WebApi -reinstall
Install-Package Microsoft.AspNet.WebApi.Cors

So here we have successfully implemented Angular 5 User Registration with Web API. In the next part, we'll discuss Login and Logout in Angular 5 Using Based Authentication and Web API.