How
to set in Angular 4 cookies, type number values?
Why
Token Based Authentication is more preferable Then Cookie based?
Cookie
Based Authentication -
The cookie based authentication has been the
default and the cookie based authentication is stateful.
Stateful
– keep and track of the previously stored information which is used for current
transaction.
A stateful service based on HTTP cookies uses the
HTTP transport protocol and its ability to convey cookies, used as session
context.
Example1
for Cookies –
import
{ Component, OnInit
} from '@angular/core';
import
{ CookieService } from
'ngx-cookie-service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export
class AppComponent
implements OnInit
{
cookieValue = 'default';
constructor( private
cookieService: CookieService
) { }
ngOnInit(): void
{
//set Cookie
//Syntax- set( name: string, value: string,
expires?: number | Date, path?: string, domain?: string, secure?: boolean ):
void;
this.cookieService.set(
'appCookie', 'This
is hello apps.' );
}
//set Cookie
//Syntax - get( name: string ): string;
getCookie(key:
string){
return this.cookieService.get(key);
}
//check Cookie
//Syntax - check( name: string ): boolean;
checkCookie(key:
string){
return this.cookieService.check(key);
}
//get All Cookie
//Syntax - getAll(): {};
getAllCookie(){
return this.cookieService.getAll();
}
//delete cookie
//Syntax - delete( name: string, path?: string,
domain?: string ): void;
deleteCookie(key:
string){
return this.cookieService.delete(key);
}
//delete All cookie
//Syntax - deleteAll( path?: string, domain?:
string ): void;
deleteAllCookie(){
return this.cookieService.deleteAll();
}
}
Example
2 For Cookies –
import
{ Component, OnInit
} from '@angular/core';
import
{ Cookie } from
'ng2-cookies/ng2-cookies';
export
class AppComponent
implements OnInit
{
constructor( private
cookieService: CookieService
) { }
ngOnInit(): void
{
//set Cookie
//Syntax- set( name: string, value: string,
expires?: number | Date, path?: string, domain?: string, secure?: boolean ):
void;
this.cookieService.set(
'appCookie', 'This
is hello apps.' );
}
//set Cookie
//Syntax - get( name: string ): string;
getCookie(key:
string){
return this.cookieService.get(key);
}
//delete cookie
//Syntax - delete( name: string, path?: string,
domain?: string ): void;
deleteCookie(key:
string){
return this.cookieService.delete(key);
}
}
Cookies
Limitations –
We can only store around 20 cookies per web
server and not more than 4KB of information in each cookie and they can last
indefinitely should you choose to specify the max-age attribute.
Token
Based Authentication -
The Token based authentication has received expansion
over last few years due to RESTful Web APIs, SPA and so on. The Token based
authentication is stateless.
Stateless
– every transaction is performed as if it was being done for the very first
time and there is no previously stored information used for the current
transaction.
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(authResult,
profile) {
//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({
clientID: AUTH_CONFIG.CLIENT_ID,
domain: AUTH_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',
redirectUri: AUTH_CONFIG.REDIRECT,
audience: AUTH_CONFIG.AUDIENCE,
scope: AUTH_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(authResult,
profile);
});
}
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
authService: AuthService)
{
// 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!!