web-dev-qa-db-ja.com

angular 5のクライアント側でJWTエンコードトークンペイロードをデコードする方法

応答で、APIから1つのJWTエンコードアクセストークンを取得しています。しかし、それをデコードしてJSON形式で取得することはできません。 Angular2-jwtライブラリを使用してみましたが、うまくいきませんでした。以下にコードを書いています。

 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);




}


    });
    }

誰でもこの問題の解決を手伝ってくれますか？

angularjwtdecodeaccess-token
28
Sunny Parekh

angular 5のJWTトークンをデコードするためにjwt-decodeパッケージを使用します。このパッケージでうまくいく。

このコマンドでパッケージをインストールした後：

npm install jwt-decode

次の構文を使用して、このパッケージをTypeScriptクラスにインポートします。

import * as jwt_decode from "jwt-decode";

このライブラリメソッドを使用して、このようにアクセストークンをデコードします

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

tokenパラメーターは、APIから取得するアクセストークンを定義します

jwt_decodeメソッドは、デコードされたトークン情報をオブジェクトとして返します。トークンの情報にアクセスできます。

例：

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は、Base64UrlでエンコードされたJWTトークンのデコードに役立つ小さなブラウザライブラリです。

重要：このライブラリはトークンを検証しません。整形式のJWTはデコードできます。 express-jwt、koa-jwt、Owin Bearer JWTなどを使用して、サーバー側のロジックでトークンを検証する必要があります。

54
Hasan Fathi

@ auth0/angular-jwtを使用します


ステップ-1：npmを使用してインストールする

npm install @auth0/angular-jwt


ステップ-2：パッケージをインポートします

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


ステップ-3：インスタンスを作成して使用

const helper = new JwtHelperService();

const decodedToken = helper.decodeToken(myRawToken);

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

関数atob()のJavaScriptビルドを試して使用してください。このようなもの：

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

注：トークンは実際には文字列です。

ここでトークンを分割した理由を知りたい場合は、このWebサイト jwt.io を確認してください。

3
jogarcia