Amazon Cognito の Hosted UI をカスタマイズしてみた

こんにちは！ アノテーションの吉本です。

先日 Amazon Cognito の Hosted UI（ホストされたウェブUI） をカスタマイズする機会があったので、その手順と出来ること・出来ないことをご紹介させていただきます。

本記事のゴール

バナーの背景色やロゴをカスタマイズした Hosted UI を表示する。

Cognito ユーザープールの作成

上記チュートリアルに沿ってユーザープールを作成します。

今回は、Hosted UI（ホストされたウェブUI）の検証のため、「ホストされた認証ページ」のチェックボックスはオンにします。

「ユーザープール名」・「ドメイン」・「アプリケーションクライアント名」・「コールバックURL」は任意のものを設定してください。

最後に問題なければ「ユーザープールを作成」をクリックします。

これでユーザープールが作成できました。次は本題の Hosted UI（ホストされたウェブUI） のカスタマイズを行います。

デフォルトの UI を確認する

それでは早速デフォルトの UI を確認していきましょう。

作成された UI への URL は以下の方法で確認できます。

コピーした情報を次の形式に貼り付けることによって、ホストされたウェブ UI の URL を作成します。

domainUrl/login?response_type=code&client_id=appClientId&redirect_uri=callbackUrl

例: https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com

-or-

ログインエンドポイントのデフォルト URL にアクセスするには、[アプリクライアント] セクションで [ホストされた UI を表示] を選択します。次に、前述のとおり URL の一部を置き換えます。

早速アクセスしてみましょう。

domainUrl は以下の箇所から取得できます。

appClientId、redirect_uriはそれぞれ、ユーザープール作成時のステップ5で設定したものを入力します。アクセスした結果がこちら

UI のカスタマイズ

それでは早速カスタマイズしていきます。今回はバナーの背景色の変更、ロゴの表示を行なっていきます。

バナーの背景色の変更

バナーの背景色の変更等のカスタマイズを行うために、まず デフォルトの CSS をダウンロードします。

アプリケーションの統合 > ホストされた UI のカスタマイズの編集ボタンをクリックします。

「CSS template.css」をクリックします。

ダウンロードしてきた CSS を以下のように編集してみました。

.banner-customizable {
  padding: 25px 0px 25px 0px;
  background-color: lightgray;
}

↓

.banner-customizable {
  padding: 25px 0px 25px 0px;
  background-color: red;
}

この CSS を適応していきます。

適応結果はこちら。背景色が変更されていますね。続いてロゴを表示してみましょう。

ロゴの表示

ロゴの表示のためには、ここからロゴ画像をアップロードする必要があります。今回は私のアイコンを表示してみます。

ロゴ表示結果はこちら。う〜ん非常にオシャレですね

できること・できないこと

Amazon Cognito の Hosted UI（ホストされたウェブUI）でカスタマイズできる CSS の要素は事前に定義されています。

以下のページに記載のないものはカスタマイズを行うことができません。

試しに、CSS の擬似要素 before を使って文字を表示させようとしてみます。

CSS に以下を追記し、再度適応してみます。

.submitButton-customizable::after {
  content: "こんにちは";
  color: red;
}

エラーが表示され、CSS をアップロードすることができませんでした。

まとめ

今回は、Cognito の Hosted UI をカスタマイズしてみました。実際にやってみると簡単にログイン画面を用意できるため非常に便利そうですが、日本語表示に対応していなかったり、カスタマイズの幅が狭かったりと用途を選ぶ必要があると感じました。

社内利用のサイトなど、あまりUIの作り込みにコストをかけたくない場合などには有用かもしれません！

参考資料

AmplifyでCognitoのHosted UIを利用した認証を最低限の実装で動かしてみて動作を理解する

Amazon Cognito とは

組み込みのサインインおよびサインアップウェブページのカスタマイズ

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。