【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向けの案件が豊富。 | 公式 |
よく読まれている記事はこちら！
目次
前提
- 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の勉強なら「Angularアプリケーションプログラミング」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
スクロールできます
| 【当サイト】おすすめフリーランスエージェント3選 | |||
|---|---|---|---|
| エージェント | 評価 | ポイント | 公式サイト |
レバテックフリーランス | 5.0 | 業界最大級のエージェント。 高単価案件が豊富。 | 公式 |
Midworks | 4.8 | 満足度調査で 3年連続3冠を達成。 | 公式 |
ITプロパートナーズ | 4.6 | 週2〜3向けの案件が豊富。 | 公式 |
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
この記事が気に入ったら
フォローしてね！