Amazon Cognito セットアップ手順
今回はAWSを使って素早く簡単にユーザーのサインアップ/サインインおよびアクセスコントロールの機能を追加できるAmazon Cognitoを利用してみる編です。1時間程度でCognitoを利用したログイン機能が作成できます。
簡単に以下のログイン画面ができます。しかもこの画面は 自分で作成したものではなく、Congnitoが用意しているもの です。もはやログイン画面を自作することはなくなりますね。
資格勉強的にはCognitoのユーザープールが何かを確認しつつ、手っ取り早くログイン画面の作成するための手順になっています。
興味がある方は読んでみて下さい。
作業手順
ステップ 1: ユーザープール作成の開始
AWSマネジメントコンソールの画面で操作します。
Amazon Cognitoサービス画面で、新しいユーザープールの作成を開始します。
- 画面右上の 「ユーザープールを作成」 ボタンをクリックします。
ステップ 2: アプリケーションリソースの設定（従来のウェブアプリケーション）
ユーザープール作成の最初のステップで、アプリケーションタイプや識別子を設定します。
- アプリケーションタイプ: 「従来のウェブアプリケーション」 を選択します。
- アプリケーション名: 「My web app - e1c9rk」 と自動的にランダムな文字列が入力されます（任意の名前で問題ありません）。
- サインイン識別子: 今回はログインにメールアドレスを使用する設定にするため、 「メールアドレス」 のチェックボックスを選択します。
- 最後に画面右下の 「ユーザーディレクトリを作成する」 ボタンをクリックします。
ステップ 3: GitHubリポジトリの作成
認証画面用のhtmlとJavaScriptを動作させるための環境を用意します。
最近では様々なサービスが用意されていますが、今回はサクッと試せるGitHubのCodespacesで行います。
それでは、認証プロジェクトのコードを管理するために、GitHub上で新しいリポジトリを作成します。
- Repository name: 任意の名前でOKですが、今回は 「cognito-with-javascript」 としました。
- Visibility: このコードは公開する必要がないので、 「Private」 を選択します。
- 「Create repository」 ボタンをクリックして専用のリポジトリ作成します。
ステップ 4: GitHub Codespaces の初期化
ブラウザ上で開発環境を構築するため、GitHub Codespaces を利用します。
- 「Create a codespace」 ボタンを押した後、「Create new codespace」 ボタンをクリックしてサクッと作成します。
ステップ 5: プロジェクトのセットアップとライブラリのインストール（事前確認）
Congnitoの画面のQuick Setup ガイドに沿って認証画面のセットアップを行っていくため、事前にその内容を確認します。
今回は JavaScript で実装するので JavaScript を選択します。
Quick Setup ガイドはCongnitoの画面の左側メニュー、 アプリケーションクライアント を選択した先に用意されています。
画像イメージは加工していますが、Quick Setup ガイドにはauthorityやclient_idが自動的に入力されているので便利です。
ステップ 5: プロジェクトのセットアップとライブラリのインストール
それではGitHubに戻り、GitHub Codespaces ターミナルを使用して、Viteを使ったプロジェクトの初期化と必要なライブラリのインストールを行います。
以下のコマンドを順に実行します。
npm create vite@latest oidc-sample -- --template vanilla
cd oidc-sample
npm install
npm install oidc-client-ts
touch main.js
ステップ 6: OIDCクライアントの設定 (main.js)
oidc-client-ts ライブラリを使用して main.js ファイルにOIDCの設定を記述します。
具体的には以下のauthority/client_id/redirect_uri/cognitoDomainを、自身のCognito環境の設定値に書き換えます。
// main.js の例
import { UserManager } from "oidc-client-ts";
const cognitoAuthConfig = {
authority: "https://cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_xxxxx",
client_id: "xxxxx",
redirect_uri: "https://xxxxx.cloudfront.net",
response_type: "code",
scope: "email openid phone"
};
// create a UserManager instance
export const userManager = new UserManager({
...cognitoAuthConfig,
});
export async function signOutRedirect () {
const clientId = "xxxxx";
const logoutUri = "<logout uri>";
const cognitoDomain = "https://ap-northeast-xxxxx.auth.ap-northeast-1.amazoncognito.com";
window.location.href = `${cognitoDomain}/logout?client_id=${clientId}&logout_uri=${encodeURIComponent(logoutUri)}`;
};
※ authority（ユーザープールIDの一部）や client_id 等は自身の環境で作成されたものを使用してください。（またはQuick Setup ガイドの内容を貼り付けます）
ステップ 7: サインインUIの実装 (index.html)
index.html ファイルにサインインボタンと、それをクリックした際のロジックを追加します。
以下が、 index.html HTML内のボタン要素とスクリプト記述部分です。
<!-- index.html の例 -->
<body>
<!-- 赤枠箇所: サインインボタン -->
<button id="signIn">Sign In</button>
<script type="module">
import { userManager } from "./main.js";
// 赤枠箇所: クリックイベント
document.getElementById("signIn").addEventListener("click", () => {
userManager.signinRedirect();
});
</script>
</body>
ステップ 8: 最終テストと実行
GitHub Codespaces ターミナルで開発サーバーを起動し、ログインテストを行います。
ターミナルで npm run dev を実行してローカルサーバーを起動して、アクセスしてみましょう。
成功していれば割とオシャレな以下の画面が表示されます。
- 最初は登録者がいない状態のため、画面下部の Create an account から、自身のメールアドレスを使ってサインインフローを確認します。
メールアドレス確認用のメールが届くので認証しましょう。するとログインできるようになり、Congnitoの ユーザ メニューからもユーザが登録されたことを確認できます。
まとめ
手順は以上です。簡単でしたね。
GitHub Codespacesを活用することで、環境構築の手間を省きつつ、Amazon Cognitoを使った認証フローを素早く試すことができます。
ぜひ試してみてください。