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"と表示されることを確認します。
