【Angular】interceptorでCognitoのヘッダ生成を行う方法！

2024年7月26日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

AngularのinterceptorでCognitoのヘッダ生成を行う方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。

「AngularのinterceptorでCognitoのヘッダ生成を行う方法が知りたい」とお考えではありませんか？

Angularでヘッダ生成を行う場合、interceptor（インターセプター）を使うことが多いと思います。

特に、Cognito認証やIAM認証を突破するためのヘッダ生成はinterceptorで行うと非常に便利です。

いずみ

interceptorはマジで使った方がいいです。

ただし、rxjsもある程度使いこなせないとダメなので注意が必要です。

本記事を読めば、AngularのinterceptorでCognitoのヘッダ生成を行う方法が分かるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
投資歴5年（仮想通貨・FXが得意）
Twitterフォロワー約2,000人
運営者情報はこちら

いずみです

前提

Angular：14

【Angular】interceptorでCognitoのヘッダ生成を行う方法

早速ですが、AngularのinterceptorでCognitoのヘッダ生成を行う方法を解説します。

import { HttpEvent, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { from, Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { FailedToGetIdTokenError } from 'src/app/error/failed-to-get-id-token-error';

@Injectable()
export class Interceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return from(this.cognitoService.getIdToken()).pipe(
      catchError(() => {
        return throwError(new FailedToGetIdTokenError());
      }),
      concatMap((idToken) => {
        const newReq = req.clone({ headers: new HttpHeaders({ Authorization: idToken, 'Content-Type': 'application/json' }) });
        return next.handle(newReq);
      }),
    );

    return next.handle(req);
  }
}

結論ですが、上記のコードをinterceptorに記載すればCognitoからIDトークンを取得してヘッダを生成できます。

import { HttpEvent, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { from, Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { FailedToGetIdTokenError } from 'src/app/error/failed-to-get-id-token-error';

@Injectable()
export class Interceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return from(this.cognitoService.getIdToken()).pipe(
      catchError(() => {
        return throwError(new FailedToGetIdTokenError());
      }),
      concatMap((idToken) => {
        const newReq = req.clone({ headers: new HttpHeaders({ Authorization: idToken, 'Content-Type': 'application/json' }) });
        return next.handle(newReq);
      }),
    );

    return next.handle(req);
  }
}

「this.cognitoService.getIdToken()」でIDトークンを取得していますが、詳細は割愛します。

いずみ

「this.cognitoService.getIdToken」はPromiseを返すと仮定しています。

fromとpipeを使えば同期的に処理を行えるので、IDトークン取得後にヘッダ生成を行えます。

ちなみに、IDトークンの取得（特にトークンが切れた後の再取得）は時間がかかるので同期的に処理する必要があります。

import { HttpEvent, HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { from, Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { FailedToGetIdTokenError } from 'src/app/error/failed-to-get-id-token-error';

@Injectable()
export class Interceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return from(this.cognitoService.getIdToken()).pipe(
      catchError(() => {
        return throwError(new FailedToGetIdTokenError());
      }),
      concatMap((idToken) => {
        const newReq = req.clone({ headers: new HttpHeaders({ Authorization: idToken, 'Content-Type': 'application/json' }) });
        return next.handle(newReq);
      }),
    );

    return next.handle(req);
  }
}

IDトークンの取得に失敗した場合は「throwError」を使って例外を投げます。

「FailedToGetIdTokenError」は中身のないクラスなので、呼び出し元でIDトークンエラーが判別できれば何でも良いかと思います。

いずみ

例外処理はシステムによって色々だと思うので好きにしてください。