Angular でクライアント側の JWT トークンをデコードする方法：包括的ガイド

2024-05-24

Angular でクライアント側 JWT エンコードされたトークンペイロードをデコードする方法

atob() と JSON.parse() を使用する

これは最もシンプルな方法で、以下の手順で行います。

トークンをドット . で分割し、2 番目の部分を取得します。これはペイロード部分です。
atob() 関数を使って、ペイロード部分を base64 デコードします。
JSON.parse() 関数を使って、デコードされたペイロード部分を JSON オブジェクトに変換します。

const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxNTk2OTM2OTMwfQ.eyJpc3MiOiJqb2hucGVyLmNvbSIsImlhdCI6MTU5NjkzMjU0MCwiYWN0aW9ucyI6WyJhZG1pbiIsIk1hbmFnZW1lbnQiLCJ1c2VyIl19';
const payload = JSON.parse(atob(token.split('.')[1]));
console.log(payload); // { sub: "1234567890", name: "John Doe", exp: 1596932930, iss: "johndoe.com", iat: 1596932540, authorities: ["admin", "Management", "user"] }

jwt-decode ライブラリを使用すると、より簡単にトークンをデコードできます。

npm install jwt-decode コマンドでライブラリをインストールします。
以下のコードのように jwtDecode() 関数を使用してトークンをデコードします。

import * as jwtDecode from 'jwt-decode';

const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxNTk2OTM2OTMwfQ.eyJpc3MiOiJqb2hucGVyLmNvbSIsImlhdCI6MTU5NjkzMjU0MCwiYWN0aW9ucyI6WyJhZG1pbiIsIk1hbmFnZW1lbnQiLCJ1c2VyIl19';
const payload = jwtDecode(token);
console.log(payload); // { sub: "1234567890", name: "John Doe", exp: 1596932930, iss: "johndoe.com", iat: 1596932540, authorities: ["admin", "Management", "user"] }

どちらの方法を選択するかは、開発者の好みとプロジェクトの要件によって異なります。

シンプルさ を重視する場合は、atob() と JSON.parse() を使用する方が簡単です。
読みやすさ と 保守性 を重視する場合は、jwt-decode ライブラリを使用する方が良いでしょう。

注意点

トークンをデコードする前に、その有効性を検証する必要があります。
デコードされたペイロード情報は機密情報であるため、安全に処理する必要があります。

atob() と JSON.parse() を使用する

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxNTk2OTM2OTMwfQ.eyJpc3MiOiJqb2hucGVyLmNvbSIsImlhdCI6MTU5NjkzMjU0MCwiYWN0aW9ucyI6WyJhZG1pbiIsIk1hbmFnZW1lbnQiLCJ1c2VyIl19';

  constructor() {
    const payload = JSON.parse(atob(this.token.split('.')[1]));
    console.log(payload); // { sub: "1234567890", name: "John Doe", exp: 1596932930, iss: "johndoe.com", iat: 1596932540, authorities: ["admin", "Management", "user"] }
  }
}

jwt-decode ライブラリを使用する

import { Component } from '@angular/core';
import * as jwtDecode from 'jwt-decode';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxNTk2OTM2OTMwfQ.eyJpc3MiOiJqb2hucGVyLmNvbSIsImlhdCI6MTU5NjkzMjU0MCwiYWN0aW9ucyI6WyJhZG1pbiIsIk1hbmFnZW1lbnQiLCJ1c2VyIl19';

  constructor() {
    const payload = jwtDecode(this.token);
    console.log(payload); // { sub: "1234567890", name: "John Doe", exp: 1596932930, iss: "johndoe.com", iat: 1596932540, authorities: ["admin", "Management", "user"] }
  }
}

注: 上記のコードは、トークンをデコードする例です。実際のアプリケーションでは、トークンをAPIから取得したり、ストレージから読み込んだりする必要があります。

Angular で JWT エンコードされたトークンペイロードをデコードする方法

ngx-jwt ライブラリは、Angular で JWT を扱うための包括的なライブラリです。トークンのデコードだけでなく、トークンの検証、エンコード、保存などの機能も提供しています。

import { Component } from '@angular/core';
import { JwtHelperService } from 'ngx-jwt';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxNTk2OTM2OTMwfQ.eyJpc3MiOiJqb2hucGVyLmNvbSIsImlhdCI6MTU5NjkzMjU0MCwiYWN0aW9ucyI6WyJhZG1pbiIsIk1hbmFnZW1lbnQiLCJ1c2VyIl19';

  constructor(private jwtHelperService: JwtHelperService) {
    const payload = this.jwtHelperService.decodeToken(this.token);
    console.log(payload); // { sub: "1234567890", name: "John Doe", exp: 1596932930, iss: "johndoe.com", iat: 1596932540, authorities: ["admin", "Management", "user"] }
  }
}

自作のデコーダー関数を使用する

atob() と JSON.parse() を使用して、独自のデコーダー関数を作成することもできます。これは、より柔軟な制御が必要な場合に役立ちます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxNTk2OTM2OTMwfQ.eyJpc3MiOiJqb2hucGVyLmNvbSIsImlhdCI6MTU5NjkzMjU0MCwiYWN0aW9ucyI6WyJhZG1pbiIsIk1hbmFnZW1lbnQiLCJ1c2VyIl19';

  constructor() {
    const decodePayload = (token: string) => {
      const parts = token.split('.');
      const payloadBase64 = parts[1];
      const payloadJson = atob(payloadBase64);
      return JSON.parse(payloadJson);
    };

    const payload = decodePayload(this.token);
    console.log(payload); // { sub: "1234567890", name: "John Doe", exp: 1596932930, iss: "johndoe.com", iat: 1596932540, authorities: ["admin", "Management", "user"] }
  }
}