AWS Cognito ユーザープールを認証制御に利用してLambda関数を呼び出す

## AWS API Gateway とは

- [AWS Lambda関数](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/welcome.html)をインターネット経由でREST API として呼び出すことができます。
- API呼び出し毎の認証が設定可能です。本記事では認証のバックエンドにCognitoを利用します。
- [Amazon API Gateway の概念](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-basic-concept.html)

## この記事の目的

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

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

- [REST API としてAWS Lambda関数を呼び出す](https://docusaurus.plant11.com/AWS/apigateway_lambda)
- [AWS Cognito ユーザープールからの認証トークン取得](https://docusaurus.plant11.com/AWS/cognito)

## 認証の有効化

- API Gatewayのメニューから"オーソライザー"を選択し、"新しいオーソライザーの作成"をクリックします。
![image](https://user-images.githubusercontent.com/38905609/177023268-feed750d-a5a0-4ec6-aac4-c98f3776662a.png)

&nbsp;  

- 名前は任意の名称を指定します。  
- タイプは"Cognito"を指定します。  
- 作成済のCognitoユーザプールを指定します。  
- トークンのソースに`Authorization`を指定します。  
![image](https://user-images.githubusercontent.com/38905609/177023385-a923f54c-2460-43eb-92ff-07adca3b1ed4.png)

&nbsp;  

- GETメソッドの詳細ページを開きます。  
![image](https://user-images.githubusercontent.com/38905609/177023467-a796933d-28f5-4626-a448-6618325dfd23.png)

&nbsp;  

- 認可のリストに作成したオーソライザーを指定します。
- オーソライザーは表示されるのに時間がかかることがあるので、選択肢に作成したオーソライザーが無かったら、一度ブラウザを再起動すると良いです。
![image](https://user-images.githubusercontent.com/38905609/177023514-678343d1-f8bf-43d2-b205-b50ad03e1bac.png)
![image](https://user-images.githubusercontent.com/38905609/177023592-a66bcea8-c50c-4284-9822-09acbe123183.png)

&nbsp;  

- APIをデプロイします。  
![image](https://user-images.githubusercontent.com/38905609/177019653-a0b4ec15-dba8-459e-a908-c015cd91f807.png)
![image](https://user-images.githubusercontent.com/38905609/177024541-783caf1e-ed7c-444d-a3cf-a47355910346.png)

## 動作確認①

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

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

&nbsp;  

- ステータス:401で認証エラーになることを確認します。  
![image](https://user-images.githubusercontent.com/38905609/177024696-bb163e2d-e3fd-43c2-9355-3c180dec990c.png)

## 認証の組み込み

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

```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
PS C:\home\git\material.angular.github> ng s --o
✔ Browser application bundle generation complete.

√ Compiled successfully.
```

&nbsp;  

- "Call Func"をクリックして、コンソールに"OK"と表示されることを確認します。  
![image](https://user-images.githubusercontent.com/38905609/177025133-b30e30aa-2923-4442-a556-56f970c39955.png)

## 👇前提記事

- [REST API としてAWS Lambda関数を呼び出す](https://qiita.com/jun_knd/items/7af5427f64627424a97a)
- [AWS Cognito ユーザープールからの認証トークン取得](https://qiita.com/jun_knd/items/fd70e370153e8cbd8d75)  

## 👇関連記事

- [AWS Cognito ユーザープールにGoogleサインイン連携を設定する](https://docusaurus.plant11.com/AWS/cognito_google)
- [AWS Cognito ユーザープールにLINEサインイン連携を設定する](https://docusaurus.plant11.com/AWS/cognito_line)

## 👇GitHubはこちら

- <https://github.com/jun-knd/material.angular.github/tree/cognito>
[![image](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/jun-knd/material.angular.github/tree/cognito)

## 👇参考URL

- [AWS Lambda とは](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/welcome.html)
- [Amazon API Gateway の概念](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-basic-concept.html)
- [Amazon Cognito ユーザープールをオーソライザーとして使用して REST API へのアクセスを制御する](https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/apigateway-integrate-with-cognito.html)