Angular2 Token Based Authentication using Asp.net Core Web API and JSON Web Token

ASP.NET Core Identity is designed to enable us to easily use a number of different storage providers for our ASP.NET applications. We can use the supplied identity providers that are included with the .NET Framework, or we can implement our own providers.

In this tutorial, we will  build a Token-Based Authentication using ASP.NET Core Identity , ASP.NET Core Web API and Angular2

With Token-Based Authentication, the client application is not dependent on a specific authentication mechanism. The token is generated by the server and the Web API have some APIs to understand, validate the token and perform the authentication. This approach provides Loose Coupling between client and the Web API.

this toturial is not for beginners, to follow it, you must understand Angular2 and Asp.NET REST Services

2

Securing our web application consists of two scenarios  :  Authentication and Authorization

1.   Authentication identifies the user. So the user must be registered first, using login and password or third party logins like Facebook, Twitter, etc…
     2.  Authorization  talks about  permission for authenticated users
– What is the user (authenticated) allowed to do ?
– What ressources can the user access ?

We have build our back end service using ASP.NET WEB API Core, web api provides an internal authorization server using OWIN MIDDLEWARE

The authorization server and the authentication filter are both called into an OWIN middleware component that handles  OAuth2
3

This article is the third part of a series of 3 articles

  1. Token Based Authentication using Asp.net Core Web Api
  2. Asp.Net Core Web Api Integration testing using EntityFrameworkCore LocalDb and XUnit2
  3. Angular2 Token Based Authentication using Asp.net Core Web API and JSON Web Token

BUILDING WEB API RESSOURCE SERVER AND AUTHORIZATION SERVER

In the first part Token Based Authentication using Asp.net Core Web API,  I talked about how to configure an ASP.NET Web API  Core Token Based Authentication using JWT.  So in this tutorial I will talk about an Angular2 client that connect to the  Web Api Authorization server using a JWT Token

BUILDING ANGULAR2 WEB CLIENT

Create an ASP.NET Empty WebSite  and structure it as follow

Structure

Package.json

Package.json defines some dependencies , so use npm to restore them :  npm install

Main.ts

Here, we import AppModule and bootstrap it using platformBrowserDynamic. Because we run our application on the browser. platformBrowserDynamic use a specific way of bootstrapping the application and is defined in @angular/platform-browser-dynamic
There are many ways to setup an angular2 project (Webpack or System.js), but we can use the angular project template in visual studio 2017

app.module.ts file

app.module contains sections like :

  • Imports : import dependencies
  • declarations  : components, …
  • providers : injected services

index.html

Index.html is the entry point of our SPA application, the selector  jwt-app  will be replaced dynamically by the template of the current route

app.component.ts

common.service.ts

Lets create a common.service.ts  file and CommonService class and decorate it as @Injectable()

import { Injectable } from ‘@angular/core’;

Here, we implement common functionalities such as error handling, baseUrl to call API, (http://localhost:58834/api is the API endpoint)

app-routing.module.ts

app-routing module enable us to define routing strategy :

  • http://localhost:3276/home : loads HomeComponent
  • Empty URL : loads HomeComponent also
  • Enexisting URL : loads PageNotFoundComponent

app.component.html

home.component.ts

home.component.html

product.service.ts

ProductService.getProducts is the protected ressource, so to get products users must be logged in first and get a token in the response.  and finally the token is send (in the header) with the request  to access protected ressource:

ProductListComponent is protected by a guard. So we must add a guard to any protected route.   Here AuthGuard.canActivate must be equal to true but AuthGuard.canActivate  return true only if the user is authenticated and the token is valid.

The server validate the token and send good response if the user is authorized ,

product-list.component.ts

product-list.component.html

  1. Register User 

signup.component.ts

signup.component.html

2.  Authenticate User

login.component.ts

login.component.html

3. Auth Gard

auth.guard.ts

user.model.ts

user.module.ts

user.profile.ts

user.service.ts

Source Code is available here

SEE IT IN ACTION

Open Package Manager Console and run update-database command to generate database

This is the generated database on localdb

Configure Startup multiple project : TokenAuthWebApiCore.Server and TokenAuthWebApiCore.Client

Run F5

Gora LEYE

I’m a .NET Architect and Technical Expert skills located in Paris (FRANCE). The purpose of this blog is mainly to post general .NET tips and tricks,