Cognito+APIGateway+lambdaで認証機能付きAPIを作る

AWS

Cognitoの設定

ユーザープールの作成

ユーザープールはここまで作成してきたVueプロジェクトのものを使用します。

Amplify+Vueでログイン機能搭載のToDoアプリを作る
はじめに下記のドキュメントを元にVueプロジェクトをAmplify上にデプロイしてみます。環境Windows11Githubリポジトリ作成初めに、Github上にリポジトリを作成します。「Create repository from tem...
kemushitech29.com
2024.10.18

ユーザープールの作成の仕方は別途調べてください。

ユーザープールとログインユーザーの作成ができればそれ以上の設定は必要ありません。

lambdaの設定

lambdaの作成

AWSコンソールへアクセス

以下のURLからAWSコンソールにアクセスします。

https://ap-northeast-1.console.aws.amazon.com/lambda/home?region=ap-northeast-1#/functions
ap-northeast-1.console.aws.amazon.com

lambdaの作成

  1. 画面右上部の「関数の作成」をクリック
  2. 以下を設定する
    1. 「一から作成」を選択
    2. 関数名を入力
    3. 言語を選択

API Gatewayの設定

APIの作成

AWSコンソールへアクセス

以下のURLからAWSコンソールにアクセスします。

https://ap-northeast-1.console.aws.amazon.com/apigateway/main/apis?experience=rest®ion=ap-northeast-1
ap-northeast-1.console.aws.amazon.com

APIの作成

  1. 画面右上部の「APIを作成」を押下
  2. REST APIカードの「構築」を押下
  3. 「新しいAPI」を選択
  4. 任意のAPI名を入力
  5. APIエンドポイントタイプは「エッジ最適化」を選択

リソースの作成

  • 「リソースを作成」を押下
  1. 任意のリソース名を入力する
  2. CORS(クロスオリジンリソース)を選択
  3. 「リソースを作成」を押下

メソッドの作成

  • 「メソッドを作成」を押下
  • 任意のメソッドタイプを選択
  • 統合タイプは「Lambda関数」を選択
  • 「Lambda関数」はlambdaの作成で作成したlambdaを選択

オーソライザーの作成

  • 画面左のメニューバーから「オーソライザー」を押下
  • オーソライザーを作成を押下
  1. 任意のオーソライザー名を入力
  2. 「オーソライザーのタイプ」はCognitoを選択
  3. 「Cognitoユーザープール」は「ユーザープールの作成」で作成したユーザープールを選択
  4. 「トークンのソース」には「Authorization」を入力
  5. 「オーソライザーを作成」を押下

オーソライザーとAPI Gateway関数の紐づけ

  • 作成したAPI Gatewayのメソッドから「編集」を押下
  • 「認可」欄に先ほど作成したオーソライザーを選択し、「保存」ボタンを押下

APIのテスト

postmanのインストール

Id Tokenの取得

API Gatewayの認証に必要なのはCognitoが発行するId Tokenです。

私はAmplifyを使用しているため、以下のように取得しました。適当なボタンを作成し、クリックイベントでperformSearchを実行してください。

<script setup>
import { fetchAuthSession, signOut } from 'aws-amplify/auth';

function performSearch() {
    async function fetchSession() {
        const session = await fetchAuthSession();

        if (session.tokens) {
            console.log("id token", session.tokens.idToken.toString());
            // console.log("access token", session.tokens.accessToken.toString());
            console.log('Searching for:', searchQuery.value);
        } else {
            console.error("セッショントークンが未定義です");
            await signOut();
            console.log("Logged out successfully");
        }
    }
    fetchSession();
}
</script>

APIのテスト

PostmanのインストールとId Tokenの取得が終わったら、API Gatewayがきちんと認証をするかをテストしてみます。

URLの確認

  • API Gatewayのページに戻り、ステージングされているAPIのルート(私の場合dev)を押下
  • 「URLを呼び出す」に表示されているURLをコピー

テスト実施

まずは失敗パターンを試みます

  1. APIのメソッドを選択する
  2. コピーしたURLを貼り付ける
  3. KeyにAuthorizationを設定
  4. AuthorizationのValueとして適当な文字列を入力
  • Unauthorizedと帰ってきていれば、APIGatewayが認証ではじいてくれています。

最後に成功パターンを試みます

  1. APIのメソッドを選択する
  2. コピーしたURLを貼り付ける
  3. KeyにAuthorizationを設定
  4. AuthorizationのValueとして「Id Tokenの取得」で取得したId Tokenを貼り付ける
  • Hello from Lambdaと帰ってきていれば認証成功です

おわりに

今回はCognitoを使ったAPI Gatewayの認証を実装してみました。これで、認証されたユーザーのみが使用できるAPIを作成することができました。

この次は、ユーザーごとにロールを設定して、使用できるAPIの回数を制限したりなど実際の運用に近い実装を行っていきたいです。

コメント

タイトルとURLをコピーしました