web-dev-qa-db-fra.com

Comment décoder la charge utile du jeton codé JWT côté client dans angular 5?

Je reçois un jeton d'accès codé JWT de mon API en réponse. Mais je ne suis pas capable de le décoder et de l’obtenir au format JSON. J'ai essayé d'utiliser la bibliothèque angular2-jwt pour cela, mais cela n'a pas fonctionné. J'écris mon code ci-dessous:

 setXAuthorizationToken(client){
    let requestHeader = new Headers();
    requestHeader.append('Content-Type', 'application/x-www-form-urlencoded');
    this.http.post(client.clientURL + "oauth/token", 'grant_type=password&client_id=toto&client_secret=sec&' +  'username=' + client.username
    + '&password=' + client.password, {
      headers: requestHeader
    }).map(res=>res.json())
    .subscribe((token) =>{
      if(!token.access_token){
          return;
      }
      else{
       var decompressToken = LZString.decompressFromEncodedURIComponent(token.access_token);
       console.log(decompressToken);




}


    });
    }

Quelqu'un peut-il m'aider s'il vous plaît à résoudre ce problème?

angularjwtdecodeaccess-token
28
Sunny Parekh

J'utilise le package jwt-decode pour décoder le jeton JWT dans angular 5; ce paquet fonctionne bien moi.

après l'installation du paquet via cette commande:

npm install jwt-decode

importez ce paquet dans votre classe TypeScript avec cette syntaxe:

import * as jwt_decode from "jwt-decode";

et utilisez cette méthode de bibliothèque pour décoder votre jeton d'accès comme ceci

  getDecodedAccessToken(token: string): any {
    try{
        return jwt_decode(token);
    }
    catch(Error){
        return null;
    }
  }

Le paramètre token définit votre jeton d'accès qui provient de votre API

jwt_decode la méthode renvoie les informations de jeton décodées sous forme d'objet; vous pouvez accéder à n'importe quelle information dans votre jeton.

Exemple:

let tokenInfo = this.getDecodedAccessToken(token); // decode token
let expireDate = tokenInfo.exp; // get token expiration dateTime
console.log(tokenInfo); // show decoded token object in console

jwt-decode est une petite bibliothèque de navigateur permettant de décoder le jeton JWT qui est codé en Base64Url.

IMPORTANT: Cette bibliothèque ne valide pas le jeton, tout JWT bien formé peut être décodé. Vous devez valider le jeton dans votre logique côté serveur en utilisant quelque chose comme express-jwt, koa-jwt, Owin Bearer JWT, etc.

54
Hasan Fathi

Utilisez @ auth0/angular-jwt


Étape 1: Installation à l’aide de npm

npm install @auth0/angular-jwt


Étape 2: importez le paquet

import { JwtHelperService } from '@auth0/angular-jwt';


Étape 3: créez une instance et utilisez-la

const helper = new JwtHelperService();

const decodedToken = helper.decodeToken(myRawToken);

// Other functions
const expirationDate = helper.getTokenExpirationDate(myRawToken);
const isExpired = helper.isTokenExpired(myRawToken);
24
Debojyoti

Essayez d'utiliser la fonction JavaScript build atob(). Un peu comme ça:

atob(token.split('.')[1])

Remarque: le jeton est en réalité une chaîne.

Si vous voulez savoir pourquoi je divise le jeton ici, vous devriez vérifier ce site jwt.io .

3
jogarcia