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

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

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

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

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

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

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

いずみ

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

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

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

いずみ

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

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴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トークンエラーが判別できれば何でも良いかと思います。

いずみ

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

まとめ

今回は、AngularのinterceptorでCognitoのヘッダ生成を行う方法を解説しました。

以下が本記事のまとめになります。

まとめ
  • AngularのinterceptorでCognitoのヘッダ生成を行うにはrxjsを駆使する。
まとめ♪
  • おすすめ本
¥4,070 (2023/07/23 15:56時点 | Amazon調べ)

Angularの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次