.NET Core

Token Based Authentication Using ASP.NET Web API In Angular

In this article, we will check how to use token based authentication with Web.API in angular

So, let’s See below example here,

Step 1:-

Create a Web API Project and create a class.

using System.ComponentModel.DataAnnotations;

namespace demo.modules
{
    public class LoginDto
    {
        [Required]
        public string Email { get; set; }

        [Required]
        public string Password { get; set; }
    }
}

Step 2:-

Add the following package to your project

Microsoft.IdentityModel.Tokens

System.IdentityModel.Tokens.Jwt

Step 3:-

Create an interface in your project and add below code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace demo.Interface
{
  public interface IUserService
  {
    Task<string> LoginAuthenticate(string email, string password);
  }
}

Step 4:-

Create service in your project and add below code

using demo.Interface;
using System;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using Microsoft.Extensions.Options;
using System.Threading.Tasks;
using Iris.API.Helpers;
using System.Text;

namespace demo.Service
{
  public class UserService : IUserService
  {
    private IOptions<AppSettings> _appSettings;
    public UserService(IOptions<AppSettings> appSettings)
    {
      _appSettings = appSettings;
    }

    public async Task<string> LoginAuthenticate(string email, string password)
    {
      var userEntity = false;
      if (email == "admin@mail.com"  && password == "Test@123")
      {
        userEntity = true;
      }
      if (userEntity == false)
        return "sorry";

      var tokenHandler = new JwtSecurityTokenHandler();
      string appSecret = _appSettings.Value.Secret;
      var key = Encoding.ASCII.GetBytes(appSecret);
      var tokenDescriptor = new SecurityTokenDescriptor
      {
        Expires = DateTime.UtcNow.AddDays(7),
        SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature)
      };
      var token = tokenHandler.CreateToken(tokenDescriptor);

      return tokenHandler.WriteToken(token);
    }
  }
}

Step 5:-

Create controller in your project and add below code

using demo.Interface;
using demo.modules;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace demo.Controllers
{
  public class UserController : ControllerBase
  {
    private readonly IUserService _userService;

    public UserController(IUserService userService)
    {
      _userService = userService;
    }
    [AllowAnonymous]
    [HttpPost("LoginAuthenticate")]
    public async Task<ActionResult<string>> LoginAuthenticate([FromBody] LoginDto loginModel)
    {
      return await _userService.LoginAuthenticate(loginModel.Email, loginModel.Password);
    }
  }
}

Step 6:-

Create an angular application using following command

ng new domo
cd domo

Step 7:-

Create login and employee component using following command

ng g c login
ng g c employee-master

Step 8:-

Create auth.guard.ts file and add following code

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { EmployeeService } from './employee.service';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  username:any;
  password:any;
  constructor(private employeeservice:EmployeeService,private router:Router){}

  canActivate(): boolean  
  {
    var tocken = localStorage.getItem('tocken');
    if(tocken){
       return true;
    }
    else
    {
       this.router.navigate(['login']);
       return true;
    }
  }
  
}

Step 9:-

Create tockeninterceptor service and add following code

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest,HttpResponse,HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { EmployeeService } from './employee.service';
import { AuthGuard } from './auth.guard';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';


@Injectable({
  providedIn: 'root'
})
export class TockeninterceptorService implements HttpInterceptor {

  constructor(private EmployeeService:EmployeeService,public auth:AuthGuard,private router:Router) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
  {
      var gettocken = localStorage.getItem("tocken");
      console.log("interceptor: " + gettocken);
      const getdata = gettocken; 
      if(getdata)
      {
        req = req.clone({
          setHeaders:
          {
            Authorization: 'Bearer ' + JSON.parse(getdata)           
          }
        });
      }
     
      return next.handle(req).pipe(
        catchError((error: HttpErrorResponse)=>{
          let errorMsg = '';
          let data = {};
          if(error.error instanceof ErrorEvent)
          {
            console.log("This is client side error");
            errorMsg = `Error: ${error.error.message}`;
          }
          else
          {       
            switch(error.status)
            {
              case 401:
                alert(error.status);
                debugger
                data = 
                {
                  status:error.status
                }
                this.router.navigate(['login']);
                break;
              case 403:
                this.router.navigate(['login']);
                break;
              case 404:
                alert(error.status);
                this.router.navigate(['notfound']); 
                break; 
            }
            console.log('this is server side error');
            errorMsg = `Error Code: ${error.status},  Message: ${error.message}`;
          }
          console.log(errorMsg);
          return throwError(errorMsg);
        })
      )
  }
}

Step 10:-

Create employee service and add following code

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Observable } from 'rxjs';
import { Country } from './Country';
import { City } from './City';


@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  public isDialogOpen: Boolean = false;
  flag: any = true;
  fDate: any;
  baseURL = environment.apiURL;
  constructor(private http: HttpClient) { }

  getTocken(userName: string, passWord: string): Observable<any> {
    debugger
    let _requestObj = {
      "email": userName,
      "password": passWord
    }
    return this.http.post<any>(`${this.baseURL}/User/LoginAuthenticate`, _requestObj);
  }

  getEmployee(): Observable<Employee_Mst[]> {
    return this.http.get<Employee_Mst[]>(`${this.baseURL}/api/User/GetAllUsers`)
  }

  isUserLogIn() {
    return this.flag;
  }

}

export class Employee_Mst
{
    public id!: number;
    public name!:string;
    public dob!:Date;
    public gender!:string;
    public phoneNo!:string;
    public address!:string;
    public emailId!:string;
    public designation!:string;
    public hobbies!:string;
    public salary!:string;
    public country!:number;
    public city!:number;
    public image!:string;
    public password!:string;
}

Step 11:-

Add following code in app.modules.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { EmployeesMasterComponent } from './employees-master/employees-master.component';
import { TockeninterceptorService } from './tockeninterceptor.service';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { AuthGuard } from './auth.guard';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    EmployeesMasterComponent,
    PagenotfoundComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule
   
  ],
  providers: [{provide:HTTP_INTERCEPTORS,useClass:TockeninterceptorService,multi:true},DatePipe,AuthGuard],
  bootstrap: [AppComponent]
  
})
export class AppModule { }

Step 12:-

Add following code in app-routing.module.ts file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmployeesMasterComponent } from './employees-master/employees-master.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {path: '',component:LoginComponent,canActivate:[AuthGuard]},
  {path: 'login',component:LoginComponent},
  {path: 'employee',component:EmployeesMasterComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 13:-

Add following code in login.component.html file

<div class="container" style="padding-left: 200px;padding-right: 200px;">
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <div style="margin-top:25%;background-color: lightgray;border-radius: 10px;padding-top: 20px;padding-bottom: 20px;padding-left: 173px;padding-right: 212px;box-shadow: 10px 10px 8px black;">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Login</h2>
                </div>
                <div class="col-lg-12" style="margin-top:10px">
                    <!--<label>UserName:</label>-->
                    <input type="text" id="UserName" class="form-control" formControlName="UserName" placeholder="Enter UserName">
                </div>
                <div class="col-lg-12" style="margin-top:10px">
                     <!--<label>Password:</label>-->
                     <input type="password" id="PassWord" class="form-control" formControlName="PassWord" placeholder="Enter Password">
                </div>
                <div class="col-lg-12" style="margin-top:30px">
                      <button type="submit" class="form-control">Login</button>
                </div>
           </div>
        </div>
    </form>
</div>

Step 14:-

Add following code in login.component.ts file

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { EmployeeService } from '../employee.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm!: FormGroup;
  constructor(private fb: FormBuilder, private employeeService: EmployeeService, private router: Router) { }

  ngOnInit(): void {
    this.loginForm = this.fb.group({
      UserName: ['', Validators.required],
      PassWord: ['', Validators.required]
    });
  }

  get loginData() {
    return this.loginForm.controls;
  }

  onSubmit() {
    var userName = ((this.loginForm.value).UserName);
    var passWord = ((this.loginForm.value).PassWord);
    this.employeeService.getTocken(userName, passWord).subscribe((response: any) => {
      if (response.isSuccess) {
        localStorage.setItem("tocken", JSON.stringify(response.tocken));
        this.router.navigate(['/employee']);
      }
    })
  }
}

Step 15:-

Add following code in employees-master.component.html file

<!-- Modal -->
<div>
    <!--grid-->
    <div class="row" style="margin-top: 10px;">
        <div class="col-lg-2"></div>
        <div class="col-lg-8">
            <!-- <button type="button" class="btn btn-lg btn-outline-primary" data-toggle="modal" data-target="#myModal" (click)="showModal=true">Add Employee</button>-->
            <table class="table-striped table-hover">
                <tr style="background-color: rgb(43, 42, 42);color: white;">
                    <th class="set-padding">Name</th>
                    <th class="set-padding">DOB</th>
                    <th class="set-padding">Gender</th>
                    <th class="set-padding">PhoneNo</th>
                    <th class="set-padding">Address</th>
                    <th class="set-padding">EmailId</th>
                    <th class="set-padding">Designation</th>
                    <th class="set-padding">Salary</th>
                </tr>
                <tr>
                    <td>Siddharth</td>
                    <td>21/06/1994</td>
                    <td>Male</td>
                    <td>9999995555</td>
                    <td>abc</td>
                    <td>abc@gmail.com</td>
                    <td>CEO</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>Aaliya</td>
                    <td>21/06/1995</td>
                    <td>Female</td>
                    <td>9999995555</td>
                    <td>abcd</td>
                    <td>abcd@gmail.com</td>
                    <td>Employee</td>
                    <td>-</td>
                </tr>
            </table>
        </div>
        <div class="col-lg-2"></div>
    </div>
</div>

Step 16:-

Run your application

npm start
krishna kukadiya

Jr. .Net Developer

Leave a Comment
Share
Published by
krishna kukadiya
Tags: AngularAngular token based authenticationcodehubsHTMLthecodehubsToken Based Authentication using Angular
3 years ago

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

3 years ago