【AWS】Cognitoを利用したシンプルな認証機能付きのWebページの作成

はじめに

こんにちは、やくもです。
前回の記事では、CloudFront と S3 を使った静的ウェブサイトの配信環境を構築しました。

今回はその環境をベースに、Amazon Cognito を使ったシンプルな認証機能を追加してみます。

Amazon Cognito とは

Amazon Cognito は AWS が提供するユーザー認証・認可サービスです。主に以下の機能を提供します。

• ユーザープール（User Pool）: ユーザーのサインアップ・サインインを管理
• IDプール（Identity Pool）: AWS リソースへのアクセス権限を付与

今回はユーザープールを中心に利用します。自前でユーザー管理の仕組みを実装する必要がなく、メールアドレス＋パスワードによる認証をかんたんに実現できます。

今回作るもの

前回構築した CloudFront + S3 の構成に、赤枠で囲んだ以下を追加します。

• Cognito ユーザープール: ユーザーの管理
• Cognito ホスト型 UI: ログイン画面（自前実装不要）
• CloudFront + Lambda@Edge: 認証チェックの仕組み

全体像のイメージは以下です。

構築手順

Cognitoの設定

まず認証機能に必要なCognitoを設定していきます。

ここでのサインインオプションは「Eメール」を選択します。
リターンURLはCloudFrontのコールバックURLを指定します。

これにてCognitoのログインページが作成されます。
ユーザー作成などを行い、ログイン後ページが表示されることを確認してみましょう。

以下のようにCognitoのログインページから作成したページにコールバックされることを確認できました。

ですが、現状だとCognito経由で無くとも、直接CloudFrontにリクエストした場合でもアクセスできてしまうので、以下のLambdaを利用してCognitoで認証しないとページの表示ができないようにしていきます。

Lambda@Edgeの作成

以下のリポジトリを参考に関数を作成していきます。

AWSから公開されているこのNode.jsのパッケージをCloudFrontとLambda@Edgeに適用することでCognitoと連携します。
本パッケージの概要は以下です。

Cognito authentication made easy to protect your website with CloudFront and Lambda@Edge.
This Node.js package helps you verify that users making requests to a CloudFront distribution are authenticated using a Cognito user pool. It achieves that by looking at the cookies included in the request and, if the requester is not authenticated, it will redirect then to the user pool's login page.
Cognito認証を簡単に実現し、CloudFrontとLambda@Edgeでウェブサイトを保護します。
このNode.jsパッケージは、CloudFrontディストリビューションへのリクエストを送信するユーザーがCognitoユーザープールで認証されていることを確認するのに役立ちます。リクエストに含まれるクッキーを確認し、リクエスト送信者が認証されていない場合、ユーザープールのログインページへリダイレクトすることでこれを実現します。

Lambda@Edgeにはus-east-1で作成しないといけない制約もあるため、そこも留意が必要です。

まず、マネコンでCloudShellを開き、以下のコマンドを打ち込んでいきます。

mkdir test-cognito-at-edge
cd  test-cognito-at-edge
npm install cognito-at-edge
vi index.js
zip -r hogehoge.zip *

この時必要な最小限のvimコマンドも記載しておきます。

vi index.js // vimの画面が開く
i //挿入モードのなる。その後貼り付けて編集
Esc //ノーマルモードに戻る
:wq + Enter //保存して終了

実際に編集して入力する内容は以下です。

const { Authenticator } = require('cognito-at-edge');

const authenticator = new Authenticator({
  // Replace these parameter values with those of your own environment
  region: 'us-east-1', // user pool region
  userPoolId: '（ユーザープールID）', // user pool ID
  userPoolAppId: '（クライアントID）', // user pool app client ID
  userPoolDomain: '（カスタムドメイン ※https://は不要）', // user pool domain
});

exports.handler = async (request) => authenticator.handle(request);

その後s3バケットに格納します。あらかじめバケットが作成されている必要があります。

aws s3 cp cognito-at-edge.zip s3://<S3バケット名>/cognito-at-edge.zip

続いて、アップロードしたzipファイルをLambda関数に適用します。
関数名は任意でいいですが、ランタイムはnodejs24.x、アーキテクチャはx86にしています。

また、関数作成時のロールは、「AWSポリシーテンプレートから新しいロールを作成」を選択し、基本的なLambda@edgeの権限を持つポリシーを選択し作成します。

関数画面から、先ほどアップロードしたS3を選択しコードを上書きして適用します。

その後Lambda@Edgeへデプロイし、CloudFrontとくっつけます。

ディストリビューションには、静的サイトに向いているCloudFrontのものを選択します。

その後、CloudFrontディストリビューションまでデプロイが完了したことを確認したら、実際にアクセスしてみて下さい。認証ページに遷移すれば今回したいことは完了となります。
うまくいかない場合はキャッシュが残っているか、どこかデプロイの段階でエラーが発生していないか確認してみるといいかもしれないです。

さいごに

今回は Amazon Cognito を使って 前回のCloudFront + S3 の静的サイトにシンプルなログイン機能を追加してみました。
パラメータ設定のためにjsファイルを若干編集したものの、ほぼノーコードで静的サイトに対して認証を追加することができました。この記事が参考になれば幸いです！

参考