IBM Cloud から提供されているユーザーディレクトリ管理サービスである App ID の UI カスタマイズに挑戦しています。自分的にはまだ道半ばではありますが、途中経過という意味でいったん公開・紹介します。
【IBM Cloud AppID とは？】
IBM Cloud App ID サービス（以下「App ID」）はアプリケーションで利用するユーザーディレクトリを管理するサービスです。オンラインサインアップを含めたユーザー管理機能を持ち、アプリケーションにログイン機能を付加させたい場合に非常に簡単にログイン機能を実装できるようになります。IBM Cloud の（無料の）ライトアカウントを持っていれば（２要素認証など、一部機能が使えなかったり、１日の実行回数などに制限もありますが）無料のライトプランで利用することも可能です：
【IBM Cloud AppID のカスタマイズに挑戦した背景】
App ID はユーザー管理機能が必要なアプリケーション開発を行う上で非常に便利な一方、UIのカスタマイズに関する情報が少なく（管理メニューに用意されているのは、ログイン画面内にロゴ画像を貼り付けることができる程度）、ほぼあらかじめ用意された（英語メインの）画面を利用する必要がありました。
機能的には満足なのですが、この UI カスタマイズがどの程度厄介なものなのかを調べる意味も含めて、AppID の UI カスタマイズに挑戦してみました。結論として 2021/06/02 のこのブログエントリ公開時点では 100% の実装ができているわけではないのですが、ログイン画面およびパスワードリセット画面のカスタマイズには成功しているため、ここでいったん公開することにしました。
【IBM Cloud AppID のカスタマイズサンプル】
AppID UI カスタマイズを使ったサンプルアプリケーションのソースコードはこちらで公開しています：
https://github.com/dotnsf/appid_fullcustom
サンプルアプリケーションを利用するには IBM Cloud にログインして、App ID サービスのインスタンスを作成し、サービス資格情報を作成・参照する必要があります：
そして以下の値を確認します：
これらの値をソースコード内 settings.js のそれぞれの変数に代入して保存します：
※exports.region の値は appidServiceEndpoint の値の "https://" と ".appid.cloud.ibm.com" の間の文字列です。それ以外はサービス資格情報にかかれている値をそのまま記載します。
また exports.redirectUri の値はアプリケーションの OAuth ログインのリダイレクト先 URL を記載します。このサンプルアプリケーションでは 8080 番ポートで待ち受けて /appid/callback にリダイレクトする想定で作られているのでこのような値になりますが、実際にパブリックなインターネットで利用する場合はこの値を実際の URL 値に書き換えてください。
準備の最後に AppID サービスのリダイレクト URI にここで指定した export.redirectUri の値と同じものを登録します。サービスの「認証の管理」メニューから「認証設定」タブを選択し、「Web リダイレクト URL の登録」欄に export.redirectUri に指定した値と同じものを追加してください。これで準備は完了です：
このサンプルアプリケーションを実際に動かしてみましょう。まずは
8080 番ポートで待ち受ける形で起動するので、ウェブブラウザで
AppID サービスに登録した ID とパスワードを入力して "Login" します：
ログインに成功すると、そのユーザーの名前などが表示される画面になります。この画面で "logout" すると元のログイン画面に戻ります：
ログイン画面下部に２つのリンクがあります。「オンラインサインアップ」と書かれたリンクをクリックすると、オンラインサインアップ用の画面に切り替わります（この画面もカスタム UI です）：
ここでメールアドレスなどを入力してサインアップ可能です：
サインアップしてしばらく待つと、メールアドレスの有効性確認を行う必要があるため、指定したメールアドレスにメールが届きます（なお、自分の環境では「迷惑メール」扱いで届きました（苦笑））。メールを開いてリンクをクリックし、有効性確認処理をしてください：
メールアドレスの有効性が確認されるとオンラインサインアップが完了したとみなされ、これ以降はメールアドレスとサインアップ時に指定したパスワードでログインできるようになります：
ログイン画面下部のもう１つのリンク「パスワードを忘れた場合」はパスワードリセット用のリンクです：
こちらをクリックするとパスワードを忘れてしまったメールアドレスを指定する画面（これもカスタムUIです）が表示されるので、ここにパスワードを忘れたアカウントのメールアドレスを指定します：
すると指定したメールアドレスにパスワードリセット用の URL が書かれたメールが届きます。このメールを開いて、URL にアクセスします：
すると新しいパスワードを入力する画面（この画面だけはカスタムUIではなく、あらかじめ用意されたものです）が表示されるので、新しいパスワードを入力します：
これで新しいパスワードを使って再びログインが可能になります：
念の為、カスタマイズ無しの場合の AppID の各種画面UIを以下に紹介しておきます。（Your Logo Here) と書かれた箇所にロゴ画像を貼り付けることは可能ですが、それ以外のカスタマイズをしようとすると今回紹介したサンプルのような方法を取る必要があります。その代わり、これらの画面を使う場合は非常に簡単に実装することができるものです。
（ログイン画面）
（パスワード忘れ）
（オンラインサインアップ）
【まとめ】
以上、AppID を独自のカスタム UI で利用する手順を紹介しました。一連の手順の中でパスワードリセット時の新パスワードを指定する画面だけは元の（英語の）UIになってしまっていますが、それ以外はすべて独自の UI で実現できているのがおわかりいただけると思います。この残った箇所の対応は前後関係含めて対応する必要があってちと面倒そうな印象も持っているので、いったんこの状況で公開しました。細かな実装についてはソースコードを参照ください。
便利な AppID を好みの UI で使えるメリットは大きいと思っていますので、興味ある方の参考になれば。
【IBM Cloud AppID とは？】
IBM Cloud App ID サービス（以下「App ID」）はアプリケーションで利用するユーザーディレクトリを管理するサービスです。オンラインサインアップを含めたユーザー管理機能を持ち、アプリケーションにログイン機能を付加させたい場合に非常に簡単にログイン機能を実装できるようになります。IBM Cloud の（無料の）ライトアカウントを持っていれば（２要素認証など、一部機能が使えなかったり、１日の実行回数などに制限もありますが）無料のライトプランで利用することも可能です：
【IBM Cloud AppID のカスタマイズに挑戦した背景】
App ID はユーザー管理機能が必要なアプリケーション開発を行う上で非常に便利な一方、UIのカスタマイズに関する情報が少なく（管理メニューに用意されているのは、ログイン画面内にロゴ画像を貼り付けることができる程度）、ほぼあらかじめ用意された（英語メインの）画面を利用する必要がありました。
機能的には満足なのですが、この UI カスタマイズがどの程度厄介なものなのかを調べる意味も含めて、AppID の UI カスタマイズに挑戦してみました。結論として 2021/06/02 のこのブログエントリ公開時点では 100% の実装ができているわけではないのですが、ログイン画面およびパスワードリセット画面のカスタマイズには成功しているため、ここでいったん公開することにしました。
【IBM Cloud AppID のカスタマイズサンプル】
AppID UI カスタマイズを使ったサンプルアプリケーションのソースコードはこちらで公開しています：
https://github.com/dotnsf/appid_fullcustom
サンプルアプリケーションを利用するには IBM Cloud にログインして、App ID サービスのインスタンスを作成し、サービス資格情報を作成・参照する必要があります：
そして以下の値を確認します：
{
"apikey": "*****",
"appidServiceEndpoint": "https://us-south.appid.cloud.ibm.com",
"clientId": "*****",
"secret": "*****",
"tenantId": "*****",
:
:
}
これらの値をソースコード内 settings.js のそれぞれの変数に代入して保存します：
//. IBM App ID exports.region = 'us-south'; exports.tenantId = '*****'; exports.apiKey = '*****'; exports.secret = '*****'; exports.clientId = '*****'; exports.redirectUri = 'http://localhost:8080/appid/callback'; exports.oauthServerUrl = 'https://' + exports.region + '.appid.cloud.ibm.com/oauth/v4/' + exports.tenantId;
※exports.region の値は appidServiceEndpoint の値の "https://" と ".appid.cloud.ibm.com" の間の文字列です。それ以外はサービス資格情報にかかれている値をそのまま記載します。
また exports.redirectUri の値はアプリケーションの OAuth ログインのリダイレクト先 URL を記載します。このサンプルアプリケーションでは 8080 番ポートで待ち受けて /appid/callback にリダイレクトする想定で作られているのでこのような値になりますが、実際にパブリックなインターネットで利用する場合はこの値を実際の URL 値に書き換えてください。
準備の最後に AppID サービスのリダイレクト URI にここで指定した export.redirectUri の値と同じものを登録します。サービスの「認証の管理」メニューから「認証設定」タブを選択し、「Web リダイレクト URL の登録」欄に export.redirectUri に指定した値と同じものを追加してください。これで準備は完了です：
このサンプルアプリケーションを実際に動かしてみましょう。まずは
npm install して node app で起動します：$ cd appid_fullcustom $ npm install $ node app
8080 番ポートで待ち受ける形で起動するので、ウェブブラウザで
http://localhost:8080/ にアクセスします。正しく動作すると http://localhost:8080/login にリダイレクトされ、以下のようなシンプルなログイン画面になります（この画面はカスタムUIで作った画面です）：
AppID サービスに登録した ID とパスワードを入力して "Login" します：
ログインに成功すると、そのユーザーの名前などが表示される画面になります。この画面で "logout" すると元のログイン画面に戻ります：
ログイン画面下部に２つのリンクがあります。「オンラインサインアップ」と書かれたリンクをクリックすると、オンラインサインアップ用の画面に切り替わります（この画面もカスタム UI です）：
ここでメールアドレスなどを入力してサインアップ可能です：
サインアップしてしばらく待つと、メールアドレスの有効性確認を行う必要があるため、指定したメールアドレスにメールが届きます（なお、自分の環境では「迷惑メール」扱いで届きました（苦笑））。メールを開いてリンクをクリックし、有効性確認処理をしてください：
メールアドレスの有効性が確認されるとオンラインサインアップが完了したとみなされ、これ以降はメールアドレスとサインアップ時に指定したパスワードでログインできるようになります：
ログイン画面下部のもう１つのリンク「パスワードを忘れた場合」はパスワードリセット用のリンクです：
こちらをクリックするとパスワードを忘れてしまったメールアドレスを指定する画面（これもカスタムUIです）が表示されるので、ここにパスワードを忘れたアカウントのメールアドレスを指定します：
すると指定したメールアドレスにパスワードリセット用の URL が書かれたメールが届きます。このメールを開いて、URL にアクセスします：
すると新しいパスワードを入力する画面（この画面だけはカスタムUIではなく、あらかじめ用意されたものです）が表示されるので、新しいパスワードを入力します：
これで新しいパスワードを使って再びログインが可能になります：
念の為、カスタマイズ無しの場合の AppID の各種画面UIを以下に紹介しておきます。（Your Logo Here) と書かれた箇所にロゴ画像を貼り付けることは可能ですが、それ以外のカスタマイズをしようとすると今回紹介したサンプルのような方法を取る必要があります。その代わり、これらの画面を使う場合は非常に簡単に実装することができるものです。
（ログイン画面）
（パスワード忘れ）
（オンラインサインアップ）
【まとめ】
以上、AppID を独自のカスタム UI で利用する手順を紹介しました。一連の手順の中でパスワードリセット時の新パスワードを指定する画面だけは元の（英語の）UIになってしまっていますが、それ以外はすべて独自の UI で実現できているのがおわかりいただけると思います。この残った箇所の対応は前後関係含めて対応する必要があってちと面倒そうな印象も持っているので、いったんこの状況で公開しました。細かな実装についてはソースコードを参照ください。
便利な AppID を好みの UI で使えるメリットは大きいと思っていますので、興味ある方の参考になれば。
コメント