こんにちは！虎の穴ラボの鷺山です。

ユーザー認証が必要なシステムを作る際は、ログインやユーザー管理の機能の実装が欠かせません。

セキュリティを考えると、ログインやユーザー管理は手を抜けない重要な部分です。
一方で、これらはサービスの差別化にはつながりにくく、できればあまり工数をかけたくないところでもあります。

そこで今回は、Amazon Cognitoの「マネージドログイン」でログイン画面をサクッと作る方法をご紹介します！

画面イメージ

こんな感じのログイン画面を作れるようになります：

前提環境

項目	バージョン・値
Python	3.14
リージョン	`ap-northeast-1`

💡Amazon Cognitoの「マネージドログイン」とは？

AWSが提供するマネージドなログイン画面です。「ログインUI」と「その裏側の認証処理」をセットで提供しています。
ログインまわりの処理やセキュリティ対策を丸ごと面倒見てくれるため、開発者は手間をかけずに認証基盤を導入できます。

次のセクションから、マネージドログインによるログイン画面を作成するための手順をご紹介します。

ユーザープールの作成

最初のステップとして、Amazon Cognitoでユーザープール（ユーザー管理のためのユーザーディレクトリ）を作成する必要があります。

現在Amazon Cognitoでは、ユーザープールを作成するとマネージドログインも自動的に生成されるようになっています。

まず、Amazon Cognitoのページからユーザープールを作成をクリックします。

アプリケーションタイプを選択し、アプリケーション名を入力します。
ここでは従来ウェブアプリケーションを選択し、名前を My web app - xxxxxx としています。

サイン識別子のオプションにメールアドレスを選択します。

自己登録を有効化にチェックを入れると、ユーザー自身がアカウントを作成できるようになります。
ここではチェックを入れていますが、実際のシステムでは要件に合わせて選択してください。

リターンURLに、ログイン成功後のリダイレクト先URLを指定します。
ここでは、後述のサンプルプログラムのURL http://localhost:5000/authorize を指定します。

設定完了後、ユーザーディレクトリを作成するをクリックするとユーザープールが作成されます。

マネージドログインのログイン画面が生成されるのを確認する

ユーザープールを作成すると、マネージドログインのログイン画面も自動的に生成されます。

ユーザープール作成後、以下の画面のログインページを表示からログイン画面を確認できます。

次のようなログイン画面が表示されます。
※ 表示できるようになるまでに時間がかかることがあります（15分以上かかることもありました）。

このページは、AWSのドメイン (例: https://ap-northeast-1xxxxx.auth.ap-northeast-1.amazoncognito.com) でホストされています（独自ドメインにも変更できます）。

デフォルトでは英語表記になっていますが、URLパラメータにlang=jaを追加することで日本語化することができます。

例: .../login?lang=ja&...

ログインUIのカスタマイズ

マネージドログインのUIはデフォルトのままでも十分よい感じのデザインなのですが、
ユーザーのWebサービスのデザイン（ブランド）に合わせて、スタイルを細かく調整することもできます。

設定は、ユーザープールのブランディング → マネージドログイン → スタイルから変更できます。

今回は、ログインページの背景画像を差し替えてみようと思います。
（画像はとらラボ素材集のものを使います。）

コンポーネント → ページの背景から画像をアップロードして変更を保存します。

設定が完了したら、ログインページを表示から実際の画面を確認できます。

背景画像が変更されました（これだけでもグッと「それっぽく」なる気がします）。

また、Faviconも変更できます。SVGとICO形式に対応しています。

マネージドログインを使ったログイン処理の実装

マネージドログインを使った、アプリケーション側のログイン処理の実装例をご紹介します。

Quick Setupガイド

ユーザープールのアプリケーションクライアントの設定画面にQuick Setupガイドが用意されています。
このガイドに従うだけで、動作するアプリが簡単に構築できるようになっています。
言語はGo、Java、Node.js、Pythonが用意されています。

今回は、Pythonを用いた実装例をご紹介します。
以下は、Quick Setupガイドのコードを少し整えたものになります：

▼server.py

from flask import Flask, redirect, url_for, session
from authlib.integrations.flask_client import OAuth
import os

app = Flask(__name__)
app.secret_key = "abcd1234"
oauth = OAuth(app)

oauth.register(
    name="oidc",
    client_id="xxxxxxxxxx",  # クライアントID
    client_secret="xxxxxxxxxx",  # クライアントシークレット
    server_metadata_url=(
        "https://cognito-idp.ap-northeast-1.amazonaws.com/"
        "ap-northeast-1_ZZZZZZZZZ"  # ユーザープールID
        "/.well-known/openid-configuration"
    ),
    client_kwargs={"scope": "email openid phone"},
)


@app.route("/")
def index():
    user = session.get("user")
    if user:
        return f'こんにちは、{user["email"]}さん！ <a href="/logout">ログアウト</a>'
    else:
        return f'ようこそ！ <a href="/login">ログイン</a>してください。'


@app.route("/login")
def login():
    redirect_uri = url_for("authorize", _external=True)
    return oauth.oidc.authorize_redirect(redirect_uri, lang="ja")


@app.route("/authorize")
def authorize():
    token = oauth.oidc.authorize_access_token()
    user = token["userinfo"]
    session["user"] = user
    return redirect(url_for("index"))


@app.route("/logout")
def logout():
    session.pop("user", None)
    return redirect(url_for("index"))


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)

※ クライアントID、クライアントシークレット、ユーザープールIDはご自身のものに書き換えてください。

実行

必要なライブラリを pip install でインストール後、python server.py で実行できます。

$ pip install authlib werkzeug flask requests
$ python server.py

Dockerの場合は、次のように実行できます：

docker run --rm \
  -p 5000:5000 \
  -v $(pwd):/app \
  -w /app \
  python:3-slim \
  bash -c "pip install authlib werkzeug flask requests && python server.py"

動作確認と解説

上記のアプリケーションを、一連の流れで動作確認しながら解説します。

まずローカルでサーバーを起動したら、ブラウザで http://localhost:5000 にアクセスします。

最初は未ログインの状態なので、次の画面が表示されます。

ログインのリンク先にはhref="/login"が設定されており、/loginは次のような実装になっています：

@app.route("/login")
def login():
    redirect_uri = url_for("authorize", _external=True)
    return oauth.oidc.authorize_redirect(redirect_uri, lang="ja")

ここでは、

redirect_uriに「ログイン後のリダイレクト先URL」を指定しています。
- URLは http://localhost:5000/authorizeのようになります。
oauth.oidc.authorize_redirect()で「ログイン画面のURL」を構築し、ブラウザをそのURLに移動させています。
- URLは次のようになります：
  - https://ap-northeast-xxxxx.auth.ap-northeast-1.amazoncognito.com/login?client_id=...&lang=ja&redirect_uri=...

ログインをクリックすると、マネージドログインのログイン画面に移動します。

最初はアカウントが無いため、新しいアカウントを作成する必要があります。
アカウントを作成をクリックすると、サインアップ画面に移動します。

必要な項目を入力してサインアップをクリックします。
すると入力したメールアドレス宛てに、確認コードが記載されたメールが送信されます。

確認コードを入力してアカウントの確認をクリックすると、サインアップ及びログインが完了します。
ログインが完了すると、http://localhost:5000/authorize にリダイレクトされます。

/authorize の実装は次のようになっています。

@app.route("/authorize")
def authorize():
    token = oauth.oidc.authorize_access_token()
    user = token["userinfo"]
    session["user"] = user
    return redirect(url_for("index"))

ここでは、

oauth.oidc.authorize_access_token()でリダイレクト時にURLパラメータに含まれていた認可コード (?code=xxxxx) をCognitoのトークンエンドポイントに送信し、取得したトークンをtokenに格納しています。
トークンの中からuserinfoを取り出してセッションに保存しています。
- userinfoには次のような情報（IDトークンのクレーム）が含まれています：

{
  "sub": "xxxxxxxxxx",         // Cognito内でのユーザーID
  "email": "test@example.com", // ユーザーのメールアドレス
  "iss": "https://...", // トークンの発行者（CognitoのユーザープールのURL）
  "aud": "xxxxxxxxxx",  // アプリケーションクライアントのID
  "iat": 1800000000,    // トークンの発行時間
  "exp": 1800003600,    // トークンの有効期限
  ...
}

最後にredirect(url_for("index"))でインデックス/にリダイレクトさせています。

再びインデックスに訪れると、今度はログイン済みなので次の画面が表示されます：

ログアウトをクリックすると、セッションが破棄されて再びログインが要求されるようになります。

@app.route("/logout")
def logout():
    session.pop("user", None)
    return redirect(url_for("index"))

💡注意

ログイン操作は http://localhost:5000 から始める必要があります。
マネージドログイン画面から直接ログインすると、ステートが検証できずCSRFエラーが発生します。

まとめ

Amazon Cognitoの「マネージドログイン」を使ってログイン画面を作る方法をご紹介しました。

小規模なアプリ、社内ツール、プロトタイプ開発など「シンプルなユーザー認証で十分」な要件には有効な選択肢になりそうです。

ユーザー認証が必要になったとき、この記事が「マネージドログイン」を思い出すきっかけになれば幸いです！

採用情報

虎の穴ラボでは一緒に働く仲間を募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧ください。
toranoana-lab.co.jp