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

Related Angular 5 Articles : –

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

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

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.

Create Angular 5 Component, Service Class and Model Class

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

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

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.

Screen shot of Angular 5 User Registration Form

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.

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.

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.

Select MVC Template

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.

then add a migration –  it’s like restore point in windows

to see these changes in database, execute following update command

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.

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.

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.

Step by Step Video Tutorial

14
Leave a Reply

avatar
9 Comment threads
5 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
10 Comment authors
SrikarAdamJeedycensyureEden Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
anowerullah
Guest
anowerullah

useful article thanks..

Rahul Gupta
Guest
Rahul Gupta

Hello this Rahul Gupta, Actually this is a very helpful article. I will wait for further videos on angular.

fahedalh
Guest
fahedalh

hello sir , thanks for this wonderful article , i appreciate your great work , I did all the codes , i ran it but i still have an erros :

RROR Error: StaticInjectorError(AppModule)[SignUpComponent -> UserService]:
StaticInjectorError(Platform: core)[SignUpComponent -> UserService]:
NullInjectorError: No provider for UserService!

Bihi Abankik
Guest
Bihi Abankik

It looks like you did not add the userservice as a provider to app.module

Bihi Abankik
Guest
Bihi Abankik

Thank you for your nice article and video. I just wanted to make a remark, when you submit the form with OnSubmit method, you don’t need to pass in the form. you can just use the property user already defined in the component sign-up. the property is already binded to… Read more »

Eden
Guest
Eden

after i make enable-migrations this is the message i get : An error occurred accessing the database. This usually means that the connection to the database failed. Check that the connection string is correct and that the appropriate DbContext constructor is being used to specify it or find it in… Read more »

censyure
Guest
censyure

Uncaught ReferenceError: $ is not defined
Cannot read property ‘UserName’

Jeedy
Guest
Jeedy

Please I need an urgent answer. How do I use firebase as the bankend instead of web api?

Adam
Guest
Adam

Install-Package Microsoft.AspNet.WebApi.Core should be Install-Package Microsoft.AspNet.WebApi.Cors 🙂

Adam
Guest
Adam

Actually.. I might have skipped a part…

Srikar
Guest
Srikar

Wonderful Learning Module