はじめに
バックエンドのサービス間認証は以下の IAM と API Gateway を使用したアクセス制御で良いですが、フロントエンドから APサーバー（BFF） を挟まず、直接 API Gateway にリクエストを行うサーバレスの要件が上がってきました。いいや、降りてきました。
その場合、 cognito を使用して AWS リソースへのアクセス許可を取得するのが一般的なようで、そのとき行った設定をメモしておきます。
やりたいこと
フロントエンドから直接…
- cognito（IDプール） から未認証ユーザーのロールを付与してもらい、ゲストユーザーとして未認証ユーザー用の API が実行できる。
- cognito 認証後、認証済みユーザー用の API が実行できる。
Cognito
1. ユーザープールの作成
デフォルトの設定を使用します。
2. アプリクライアントの追加
「クライアントシークレットの生成」を解除し、SRP認証を有効にします。
USER_SRP_AUTH
SRP 認証に関しては以下の記事で投稿してたりします。
3. IDプールの作成
未認証のユーザーに対してもアクセス制御（許可）を行いたいので 「認証されていない ID に対してアクセスを有効にする」 をチェック。
また、認証プロバイダーに先程作成したユーザープールを設定します。
API Gateway
1. API を作成
「REST API」 を選択。
2.リソースの作成
未認証ユーザーに公開する/public
認証済みユーザーに公開する/private
を同じ設定で作成します。
フロントエンドから直接リクエストするので CORS を有効にしておきます。
3. HTTPメソッドの作成
どちらもモックデータをを返すように設定しておきます。
4. モックレスポンスの設定
/public と /private どちらかを判別できるレスポンスにしておきます。
5. 動作確認
一度デプロイして動作確認をしてみます。何も設定していないのでどちらにもリクエストが通ります。
6. アクセス制御の設定
未認証ユーザーに公開する/public
認証済みユーザーに公開する/private
どちらも同じく 「AWS IAM」 を設定します。
7. 動作確認
デプロイし直します。
著名が付与されていないリクエストがブロックされることが確認できます。
IAM
1. IAM ロールの確認
ID プールを作成したときに一緒に作った 「認証されていないロール」 「認証されたロール」 に対して API Gateway のアクセス許可を設定していきます。
設定されている IAM ロールは ID プールの管理画面 「ID プールの編集」 から確認できます。
2. IAM ポリシーの設定
「認証されていないロール」 は /public に
「認証されたロール」 は /public /privateの両方に対して以下のように設定していきます。
※ インラインポリシー、ビジュアルエディタ どちらも 「認証されたロール」 に対して設定を行ったときのキャプチャです。
ビジュアルエディタから登録する場合は以下のように
フロントエンド
フロントエンドを作成していきます。
$ npx create-react-app aws-hello --template typescript
著名の作成 がとても面倒ですが aws-amplifyのパッケージを使用することで、その工程を意識せずに認証を行うことができます。
$ npm i aws-amplify
力尽きました。
長々と書いていて力尽きました。笑
amplify と React.js を使用した SRP 認証の実装は以下を参照していただくと…
ログイン前は IDプールから未認証の IAM ロールが付与され /public のみ実行でき、
ログイン後は認証済みの IAM ロールが付与されて /public と /private どちらの URL もフロントエンドから直接リクエストできるようになります。
アドレスバーなどから /public を実行しても未認証用の IAM ロールが付与されていないため、リクエストは通りません。
そして、ログインするためのユーザーは cognito の管理画面で作っておきましょう。
まとめ
AWS の認証をうまく使って、機能開発から認証を切り離して開発効率上げたいですね 😇