python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Angular 4 Token Based Authentication

Angular 5 and 4 Token Based Authentication

Token Based Authentication Steps As -
User enters their login credentials and the server verifies the entered credentials. Validating to the entered credentials, It’s correct or not. If the credentials are correct, returns a signed token. This token is stored local storage in the client side. We can also store in session storage or cookie.

Example As –
private _setSession(authResultprofile) {
  //Save session data and update login status subject
  localStorage.setItem('access_token'authResult.accessToken);
  localStorage.setItem('id_token'authResult.idToken);
  localStorage.setItem('userProfile'JSON.stringify(profile));
  this.setLoggedIn(true);
}


Advantages of Token-Based Authentication -
1.     Stateless,
2.     Scalable
3.     Decoupled
4.     JWT is placed in the browsers local storage
5.     Protect Cross Domain and CORS
6.     Store Data in the JWT
7.     Protect XSS and XSRF Protection

Where To Store Tokens?
It does depend on you, where you want to store the JWT. The JWT is placed in your browsers local storage.

Example - Authentication Service [auth.service.ts]
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { AUTH_CONFIG } from './auth0-variables';
import { tokenNotExpired } from 'angular2-jwt';
import { UserProfile } from './profile.model';

// Avoid name not found warnings
declare var auth0: any;

@Injectable()
export class AuthService {
  // Create Auth0 web auth instance
  // @TODO: Update AUTH_CONFIG and remove .example extension in src/app/auth/auth0-variables.ts.example
  auth0 = new auth0.WebAuth({
    clientIDAUTH_CONFIG.CLIENT_ID,
    domainAUTH_CONFIG.CLIENT_DOMAIN
  });

  userProfile: UserProfile;

  // Create a stream of logged in status to communicate throughout app
  loggedIn: boolean;
  loggedIn$ = new BehaviorSubject<boolean>(this.loggedIn);

  constructor(private router: Router) {
    // If authenticated, set local profile property and update login status subject
    if (this.authenticated) {
      this.userProfile = JSON.parse(localStorage.getItem('profile'));
      this.setLoggedIn(true);
    }
  }

  setLoggedIn(value: boolean) {
    // Update login status subject
    this.loggedIn$.next(value);
    this.loggedIn = value;
  }

  login() {
    // Auth0 authorize request
    // Note: nonce is automatically generated: https://auth0.com/docs/libraries/auth0js/v8#using-nonce
    this.auth0.authorize({
      responseType'token id_token',
      redirectUriAUTH_CONFIG.REDIRECT,
      audienceAUTH_CONFIG.AUDIENCE,
      scopeAUTH_CONFIG.SCOPE
    });
  }

  handleAuth() {
    // When Auth0 hash parsed, get profile
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        window.location.hash = '';
        this._getProfile(authResult);
        this.router.navigate(['/']);
      } else if (err) {
        this.router.navigate(['/']);
        console.error(`Error: ${err.error}`);
      }
    });
  }

  private _getProfile(authResult) {
    // Use access token to retrieve user's profile and set session
    this.auth0.client.userInfo(authResult.accessToken, (err, profile) => {
      this._setSession(authResultprofile);
    });
  }

  private _setSession(authResult, profile) {
    // Save session data and update login status subject
    localStorage.setItem('access_token'authResult.accessToken);
    localStorage.setItem('id_token'authResult.idToken);
    localStorage.setItem('profile'JSON.stringify(profile));
    this.userProfile = profile;
    this.setLoggedIn(true);
  }

  logout() {
    // Remove tokens and profile and update login status subject
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('profile');
    this.userProfile = undefined;
    this.setLoggedIn(false);
  }

  get authenticated() {
    // Check if there's an unexpired access token
    return tokenNotExpired('access_token');
  }
}


Use of AuthService in the Component Page –
//Use of AuthService in the Component Page.
import { Component } from '@angular/core';
import { AuthService } from './auth/auth.service';
export class Login {
  constructor(private authServiceAuthService) {
    // Check for authentication and handle, if hash present.
    authService.handleAuth();
  }
}



I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions