AWS API Gateway とは

AWS Lambda関数をインターネット経由でREST API として呼び出すことができます。
API呼び出し毎の認証が設定可能です。本記事では認証のバックエンドにCognitoを利用します。
Amazon API Gateway の概念

この記事の目的

AWS Cognitoから発行した認証トークンを利用してAWS API Gatewayを経由してLambda関数を呼び出すよう構成します。
これによりセキュリティが確保されたAPI呼び出しを実現します。

👇これより先は下記記事の内容を前提とします

認証の有効化

API Gatewayのメニューから"オーソライザー"を選択し、"新しいオーソライザーの作成"をクリックします。

名前は任意の名称を指定します。
タイプは"Cognito"を指定します。
作成済のCognitoユーザプールを指定します。
トークンのソースにAuthorizationを指定します。

GETメソッドの詳細ページを開きます。

認可のリストに作成したオーソライザーを指定します。
オーソライザーは表示されるのに時間がかかることがあるので、選択肢に作成したオーソライザーが無かったら、一度ブラウザを再起動すると良いです。

APIをデプロイします。

動作確認①

ローカルサーバを起動します。

PS C:\home\git\material.angular.github> ng s --o

ステータス:401で認証エラーになることを確認します。

認証の組み込み

取得した認証トークンをヘッダーへ設定します。
認証トークンの取得は関連記事参照下さい。
取得した認証トークンを連携する部分はGitHub参照下さい。
[main.component.ts]

main.component.ts

    let access_token = this.commonService.getToken();
    let httpHeaders = new HttpHeaders({
      'Content-Type' : 'application/json',
      'Authorization' : access_token,
    });
　　...
    this.http.get<any>(url, options).subscribe({
      next:(data) => {
        console.log("OK");
        console.log(data);
      },
      error:(e) =>{
        console.log("NG");
        console.error(e);
      },
      complete: () => {
        console.log("complete");
      }
    })

動作確認②

ローカルサーバを起動します。

PS C:\home\git\material.angular.github> ng s --o
✔ Browser application bundle generation complete.

√ Compiled successfully.

"Call Func"をクリックして、コンソールに"OK"と表示されることを確認します。

👇前提記事

👇関連記事

👇GitHubはこちら

https://github.com/jun-knd/material.angular.github/tree/cognito

👇参考URL