はじめに
2021年4月のアップデートで、アプリケーションごとに画面カスタマイズを制御する「テーマ」という機能が追加されました。
 |
|---|
以前ご紹介した「テンプレート機能」は、IBM Security Verify テナント単位で画面カスタマイズが適用されました。
このため、IBM Security Verifyが連携するアプリケーションが複数あった場合に、アプリケーション単位でログイン画面の見た目を変更することはできませんでした。
4月にリリースされたテーマ機能を利用することで、アプリケーション単位でカスタマイズができるようになりました。
<テーマ活用イメージ＞
 |
|---|
画面カスタマイズを行う際には、以下の流れで操作します。
- Defaultテーマをダウンロードする
- テーマをカスタマイズする
- カスタマイズしたテーマをアップロードする。
- アプリケーションに対してテーマを適用する。
APIのリファレンス
APIのリファレンスは、以下のURLから確認できます。
https://<自分のテナント名＞.verify.ibm.com/developer/explorer/#
- ユーザーの取得に利用するAPIは、以下の項目になります。
- Customization-Theme
画面カスタマイズに関するヘルプはこちらです。
- テーマを管理する
1.IBM Security VerifyへのAPIクライアントの登録
OAuth アクセストークンを取得するために使用するクライアント ID とクライアントシークレットを準備します。
ブラウザで、IBM Security Verifyの管理画面にアクセスします。
https://<自分のテナント名＞.verify.ibm.com/ui/admin
「構成」-「API クライアント」タブを開きます。
「APIクライアントの追加」をクリックします。
アクセス件を与えるAPIとしては以下を選択して、「保存」します。
- テンプレートの管理
- 付与する権限は「テンプレート」です。「テーマ」のみ変更する権限はありません。
登録したAPIクライアントを編集モードにすると、クライアントID/クライアント秘密鍵をコピーできます。
2.アクセストークンの取得
curl -X POST "https://<テナント名＞.verify.ibm.com/oidc/endpoint/default/token" --header "Content-Type: application/x-www-form-urlencoded" --data-urlencode "grant_type=client_credentials" --data-urlencode "client_id=<クライアントID>" --data-urlencode "client_secret=＜クライアント秘密鍵＞"
取得したアクセストークンは赤枠部分になります。
3.テーマのダウンロード方法
テーマをダウンロードします。
テーマのファイル名は、デフォルトの「theme.zip」を利用します。
curl -X GET https://<テナント名＞.verify.ibm.com:443/v1.0/branding/themes/default -H "Accept: application/octet-stream" -H "Authorization: Bearer <アクセストークン>" --output <出力先＞\themes.zip
ダウンロードしたテーマをエクスプローラーで開き、theme.zip\templatesフォルダを開くと以下のようなフォルダ階層となっています。テンプレートのときよりフォルダ階層は少ないです。
 |
|---|
4.テーマのアップロード方法
カスタマイズしたテーマをアップロードするためには、2つのファイルが必要です。
- 1.カスタマイズしたテーマファイル
- 2.テーマ名を記載したconfig.jsonファイル
2つ目のconfig.jsonの例です。
この例では、"custome1"というテーマ名称で登録されます。
{
"name": "custome1",
"description": "first theme customize",
}
テーマをアップロードするコマンドです。
curl -X POST https://<テナント名＞.verify.ibm.com:443/v1.0/branding/themes -H "Content-Type: multipart/form-data" -H "Accept: application/json" -F configuration=@<参照先＞/config.json -F "files=@<参照先＞/theme_file.zip" -H "Authorization: Bearer <アクセストークン>"
5.テーマの適用方法
アプリケーションにテーマを適用するため、管理画面-アプリケーションから対象のアプリケーションを編集し、テーマを適用します。
6.テーマのリセット方法
テーマをリセットする場合は、2つの方法があります。
- 1.テンプレートをリセットする(一括削除)
- 2.個別のテーマを削除する
なお、アプリケーションにテーマが適用されている場合は、テーマを解除する必要があります。
1つ目のテンプレートリセットコマンドは次のようになります。
curl -i -X DELETE https://<テナント名＞.verify.ibm.com:443/v1.0/branding/reset -H "Authorization: Bearer <アクセストークン>"
レスポンスコードは204になります。
なお、テーマがアプリケーションに適用された状態でテンプレートをリセットすると、以下のようなエラーになります。
2つ目のテーマの個別削除には、テーマIDが必要になります。
以下のコマンドでテーマIDを取得します。
curl -X GET https://<テナント名＞.verify.ibm.com:443/v1.0/branding/themes -H "Authorization: Bearer <アクセストークン>""
テーマの個別削除コマンドは次のようになります。
curl -i -X DELETE https://<テナント名＞.verify.ibm.com:443/v1.0/branding/themes/<テーマID＞ -H "Authorization: Bearer <アクセストークン>"
最後に
準備編として、テーマを利用した画面カスタマイズの基本的な操作、コマンドについてご紹介しました。
実践編では実際の画面を変更する方法について記載したいと思います。