Amazon Cognito Hosted UIのサインイン属性設定によるサインインとサインアップの画面や入力内容の違いを確認
2024.08.23はじめに
本記事では、Amazon Cognito Hosted UIのサインインに使用できる3つの属性（ユーザー名、Eメール、電話番号）を有効化した場合の、サインインおよびサインアップ画面の表示や入力内容の違いについて確認しました。
Amazon Cognitoでは、ログイン画面と新規登録画面を自前で開発する必要がなく、マネージドサービスの一部としてWeb UI（Hosted UI）を利用できます。これにより、認証プロセスの実装が大幅に簡素化されます。
Hosted UIは以下の主要な機能をサポートしています。
- アプリの新しいユーザーとしてのサインアップ
- E メールアドレスおよび電話番号の検証
- 多要素認証 (MFA) のセットアップ
- ユーザー名とパスワードでのサインイン
- サードパーティーの ID プロバイダー (IdP) でのサインイン
- パスワードのリセット
Cognitoユーザープールでは、ユーザーがサインインに使用できる属性として以下の3つを提供しています。
- ユーザー名
- 電話番号
- Eメールアドレス
引用元
コンソール画面（サインインに使用できる属性）
必須項目はパスワードで、任意でMFAも利用できます。
今回は、CognitoのHosted UIを利用し、サインインに使用できる３つの属性を組み合わせて有効化した場合、サインイン/サインアップ画面の表示や入力内容の違いを確認してみます。
サードパーティーの ID プロバイダーは考慮しません。
結論
1. サインイン属性の選択肢
サインインに使用できる属性は3つ（ユーザー名、Eメール、電話番号）あり、これらの組み合わせにより以下の7パターンがあります。
| 属性の組み合わせ | サインインの入力内容（+パスワード） |
|---|---|
| ユーザー名 | ユーザー名 |
| ユーザー名とEメール | ユーザー名またはEメール |
| ユーザー名と電話番号 | ユーザー名または電話番号 |
| ユーザー名と電話番号とEメール | ユーザー名、電話番号、またはEメール |
| Eメール | Eメール |
| 電話番号 | 電話番号 |
| 電話番号とEメール | 電話番号またはEメール |
2. サインイン画面の表示
ユーザー名を含む場合
- ユーザー名を含む以下のいずれかの組み合わせを有効化した場合
- ユーザー名のみ
- ユーザー名とEメール
- ユーザー名と電話番号
- ユーザー名と電話番号とEメール
サインイン画面は以下のように表示されます
- タイトル: "Sign in with your username and password"
- 入力欄: "Username"
注意点として、ユーザー名と電話番号やEメールを有効化した場合、"Username"欄にはユーザー名だけでなく電話番号やメールアドレスを入力しても、ログインできます。
Eメールのみの場合
- 以下の属性の有効化した場合
- Eメールのみ
サインイン画面は以下のように表示されます
- タイトル: "Sign in with your email and password"
- 入力欄: "Email"
電話番号のみの場合
- 以下の属性の有効化した場合
- 電話番号のみ
サインイン画面は以下のように表示されます
- タイトル: "Sign in with your phone number and password"
- 入力欄: "Phone number"
電話番号とEメールの場合
- 以下の属性の有効化した場合
- 電話番号とEメール
サインイン画面は以下のように表示されます
- タイトル: "Sign in with your email or phone number and password"
- 入力欄: "Email or Phone number"
3. ユーザー名の要件2つ
ユーザー名の要件には２つのオプションがあります。
- [ユーザーが任意のユーザー名でサインインすることを許可]
- [ユーザー名の大文字と小文字を区別する]
[ユーザー名の大文字と小文字を区別する]については、文字通りです。
[ユーザーが任意のユーザー名でサインインすることを許可]を有効化した場合、任意のユーザー名は、ユーザー属性のpreferred_usernameで設定できます。
ユーザー名をpreferred_usernameの値にしてもログインできます。
4. 特記事項
- サインイン属性の組み合わせによる入力欄の違い
- ユーザー名を含む組み合わせの場合、「Username」欄が表示されますが、この欄にはユーザー名だけでなく、有効化した他の属性（Eメールや電話番号）も入力可能です。
- 電話番号とEメールのみの組み合わせの場合、サインイン画面では「Email or Phone number」という入力欄が表示され、両方のオプションが明示的に示されます。
- サインアップ画面の必須項目
- サインインオプションの設定に関わらず、MFAやアカウント復旧のために必要な属性（電話番号やEメール）の入力が求められる場合があります。
- これらの必須項目は、Cognitoの設定画面で指定された必須属性に基づいて表示されます。
- MFAでSMSメッセージを有効化している場合、Phone numberが必須になります。
- [アカウント復旧メッセージの配信方法]をEメールに設定している場合、Emailが必須になります。
ユーザープールを作成
前述の結論を導き出すために実施した検証方法について詳細に説明します。
前提条件
検証環境は以下の通りです
- 構成
- Application Load Balancer (ALB) + Amazon EC2インスタンスの構成
- HTTPS対応済み（HTTPS設定の詳細はこちらの記事を参照）
- HTTPS要件
- Amazon Cognitoのユーザー認証はHTTPSリスナーでのみサポートされるため、HTTPS対応は必須です。
- ドメイン設定
- 本記事では、取得したドメインを
example.comと仮定します。 - DNSレコード：
example.comのAレコードをALBのDNS名にルーティングするよう設定済みです。
- 本記事では、取得したドメインを
本検証では、サインインオプションとして以下の3つの属性をすべて選択します。
- ユーザー名
- 電話番号
- Eメールアドレス
推奨やデフォルトの設定にします。
ホストされた認証ページは、有効化します。
Cognito で E メールを送信します。
- ユーザープール名とアプリケーションクライアント名も入力します。
- Cognito ドメインは適当な値を入力します。
- 例：
https://test-cm
- 例：
- クライアントのシークレットを生成する
- ALBでの認証でCognitoを利用する場合、クライアントシークレットは必須です。
- 許可されているコールバック URL
- 認証成功後、ユーザーがリダイレクトされるURLです。
[ドメイン名]/oauth2/idpresponseは必須であり、ALB側での認証をおこなうURLになります。 - https://[ドメイン名]/oauth2/idpresponse
- 例：
https://example.com/oauth2/idpresponse
- 認証成功後、ユーザーがリダイレクトされるURLです。
この設定でユーザープールを作成します。
ALBの設定
HTTPSのリスナールールのデフォルト設定で、認証に先ほど作成したユーザープール、ユーザードメイン、アプリケーションクライアントを選択します。
アクセスしてみる
example.comにアクセスすると、ALBがCognito認証を要求するため、自動的にCognitoのサインイン画面であるhttps://test-cm.auth.ap-northeast-1.amazoncognito.com/login?client_id=xxxxにリダイレクトされます。
サインアップするため、[Sign up]に遷移します。
- 名前、電話番号、メールアドレス、パスワードを登録します。
メールアドレスに6桁の認証コードが送られます。
6桁を入力するとユーザーのEメールが検証済みとなります。
電話番号にもSMS送信され、6桁を入力すると、ユーザーの電話番号が検証済みとなります。
[Sign in]を入力すると、EC2のWebサーバーの内容が表示されます。
Eメールや電話番号が検証済みかどうかは、マネジメントコンソール上で確認できます。
サインイン
ユーザー名とパスワードを入力します。
SMS送信されるので、入力します。
[Sign in]をクリックすると、EC2のWebサーバーの内容が表示されます。
ユーザー名以外でもサインイン可能
ユーザー名と電話番号とEメールを選択している場合、ユーザーは選択したすべてのオプションを使用してサインインできます。
Usernameの欄に電話番号やEメールを入力し、[Sign in]するとログインできます。
Eメールの場合
電話番号の場合
MFAでSMS送信されるので、入力します。
[Sign in]をクリックすると、EC2のWebサーバーの内容が表示されます。
ユーザー名のみの場合
Cognito ユーザープールのサインインオプションをユーザー名のみにした場合、サインイン時、Username 欄には、ユーザー名のみが有効な入力となります。
サインアップのPhone numberとEmailは、それぞれ以下の理由で、入力必須です。Cognito ユーザープールのサインインオプションの設定とは関係ありません。
- 電話番号が必須の理由は、MFAでSMSメッセージを有効化しているためです。
- Eメールが必須の理由は、[ユーザーアカウント復旧メッセージの配信方法]をEメールのみにしているためです。
サインイン画面では、Sign in with your username and passwordというタイトルで、入力欄がUsernameになります。
ユーザー名を含む以下のいずれかの組み合わせを有効化した場合、サインイン画面は、上記と同じです。
- ユーザー名のみ
- ユーザー名とEメール
- ユーザー名と電話番号
- ユーザー名と電話番号とEメール
Eメールのみの場合
Cognito ユーザープールのサインインオプションがEメールのみの場合を確認します。
サインインのタイトルがSign in with your email and password、入力欄がEmailになります。
サインアップ時は、ユーザー名が不要です。電話番号が必須の理由は、MFAでSMSメッセージを有効化しているためです。
電話番号のみの場合
Cognito ユーザープールのサインインオプションが電話番号のみの場合を確認します。
サインインのタイトルがSign in with your phone number and password、入力欄がPhone numberになります。
サインアップ時は、ユーザー名が不要です。Eメールが入力必須の理由は[ユーザーアカウント復旧メッセージの配信方法]をEメールのみにしているためです。
電話番号とEメールの場合
Cognito ユーザープールのサインインオプションが電話番号とEメールの場合を確認します。
サインインのタイトルがSign in with your email or phone number and password、入力欄がEmail or Phone numberになります。
サインアップ時、Email or Phone numberの欄があります。これは、Eメールもしくは、電話番号を登録します。
Email or Phone numberの下に、Phone numberとEmailの欄がありますが、以下の理由です。
- 電話番号が必須の理由は、MFAでSMSメッセージを有効化しているためです。
- Eメールが必須の理由は、[ユーザーアカウント復旧メッセージの配信方法]をEメールのみにしているためです。
Cognitoの設定画面のうち、必須の属性に記載されている属性が、サインアップ画面のPhone numberやEmailの欄として表示されます。
必須属性が無い場合、サインアップ画面では、以下の通りEmail or Phone numberとパスワードのみになります。
ユーザー名の要件
ユーザー名の要件には２つのオプションがあります。
- [ユーザーが任意のユーザー名でサインインすることを許可]
- [ユーザー名の大文字と小文字を区別する]
[ユーザー名の大文字と小文字を区別する]については、文字通りです。
[ユーザーが任意のユーザー名でサインインすることを許可]を有効化した場合の挙動を確認してみます。
任意のユーザー名は、ユーザー属性のpreferred_usernameで設定できます。
preferred_usernameの値は、１つのみです。test2を設定します。この設定は、HostedUI側ではできず、マネジメントコンソール上で設定が必要です。
ユーザー名の入力をpreferred_usernameの値（test2）にしてもログインできました。
ちなみに、[ユーザーが任意のユーザー名でサインインすることを許可]を有効化していない場合、preferred_username自体は設定できますが、ログイン時のユーザ名としては利用できません
最後に
本記事では、Amazon Cognito Hosted UIのサインインに使用できる3つの属性（ユーザー名、Eメール、電話番号）を有効化した場合の、サインインおよびサインアップ画面の表示の違いについて確認しました。
注意点としては、ユーザーを選択した属性の組み合わせによって、サインイン画面の表示が変わることです。特に以下の点に注意が必要です。
- ユーザー名を含む組み合わせの場合、サインイン画面では「Username」欄が表示されますが、この欄には有効化した他の属性（Eメールや電話番号）も入力可能です。
- 電話番号とEメールのみを選択した場合、サインイン画面では両方のオプションが明示的に表示されます。
- サインアップ画面では、サインインオプションとは別に、MFAやアカウント復旧のために必要な属性（電話番号やEメール）の入力が求められる場合があります。
- ユーザー名の要件オプションにより、preferred_usernameを使用したサインインが可能です。
参照
