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

2025年9月18日

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

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

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

いずみ

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

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

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

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

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

いずみ

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

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

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

いずみ

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

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式

執筆者／監修者

フリーランスエンジニア（保有資格13個、企業と直接契約）
ブログ・アフィリエイト歴7年（2018年〜）
ブランドせどりで月利50万円⇨脱サラ
投資（仮想通貨・FX）歴7年（2018年〜）
X（旧Twitter）フォロワー約1,900人
運営者情報はこちら

いずみです

よく読まれている記事はこちら！

前提

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トークンエラーが判別できれば何でも良いかと思います。

いずみ

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

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式

【厳選】フリーランスエンジニアにおすすめなエージェント3選

フリーランスエンジニアになるにはエージェントから案件をもらう必要があります。

僕が実際に利用しているおすすめエージェントを紹介しますね。

いずみ

エージェントは必ず複数登録してください。

担当者によっては「全然案件紹介してくれない…」みたいなこともあるので…

僕は実際に5つのエージェントを使い回していますよ。

フリーランスを始めるなら「レバテックフリーランス」

案件数	マージン率	単価
約88,000件	非公開	高
初心者	福利厚生	申し込み
		無料

Good Point

業界最大級の案件数。
業界トップクラスの高単価報酬、低マージン（平均年収862万円）。
案件参画中のフォローの充実。

※詳細は「【業界最大手】レバテックフリーランスとは？メリットや利用手順を解説！」を参照。

レバテックフリーランス は業界最大手のフリーランスエージェントです。

とにかく案件数が多いので、とりあえず登録しておけば間違いないエージェントです！

いずみ

僕もはじめてフリーランスの案件を貰ったのはレバテックフリーランス です。

保有している案件数が多いので、業務経験がなくても何かしらの案件は紹介してもらえますよ（僕はJavaの経験3年でも案件を貰えました）。

詳細はコチラ

公式サイトを詳しく見る

手厚い保障を重視したいなら「Midworks 」

案件数	マージン率	単価
約10,000件	非公開	中
初心者	福利厚生	申し込み
		無料

Good Point

手厚い保障で正社員並みの安心感。
還元率60％超え＆単価公開でクリアな契約。
給与保障制度（審査あり）。

Midworks は手厚い保障が特徴のフリーランスエージェントです。

フリーランスを目指しているけど不安な方や保障を重視したい方におすすめです。

いずみ

僕も何度か案件を紹介してもらいました。

自分のスキルに合った案件を紹介してもらえましたし、電話のやり取りも非常に丁寧でした。

詳細はコチラ

公式サイトを詳しく見る

週2〜3日の案件探しなら「ITプロパートナーズ」

案件数	マージン率	単価
約5,000件	非公開	高
初心者	福利厚生	申し込み
経験者向け		無料

Good Point

IT案件に特化したフリーランスエージェント。
週2〜3日の案件が豊富。
リモート案件が多く、直エンドなので単価も高い。

※詳細は「【週2・3案件】ITプロパートナーズとは？メリットや利用手順を解説！」を参照。

ITプロパートナーズ はIT案件に特化したフリーランスエージェントです。

週2〜3日から参画できる案件が豊富なので、起業したい人にもおすすめです。

いずみ

週2〜3日の案件はある程度スキルがないと紹介してもらえない印象です。

とはいえ、週5の案件ももちろんありますし、僕が利用した時は迅速・丁寧に対応していただきました！

詳細はコチラ

公式サイトを詳しく見る

まとめ

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

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

まとめ

AngularのinterceptorでCognitoのヘッダ生成を行うにはrxjsを駆使する。

まとめ

おすすめ本

Angularアプリケーションプログラミング

¥4,070 （2023/07/23 15:56時点 | Amazon調べ）

Amazon

楽天市場

ポチップ

Angularの勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪

いずみ

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

【Angular】withInterceptorsでインターセプターを使う方法

スクロールできます

【当サイト】おすすめフリーランスエージェント3選
エージェント	評価	ポイント	公式サイト
レバテックフリーランス	5.0	業界最大級のエージェント。高単価案件が豊富。	公式
Midworks	4.8	満足度調査で 3年連続3冠を達成。	公式
ITプロパートナーズ	4.6	週2〜3向けの案件が豊富。	公式