カスタムブランディング
Keeperコネクションマネージャーのユーザーインターフェースのカスタマイズ
Last updated
Keeperコネクションマネージャーのユーザーインターフェースのカスタマイズ
Last updated
Keeperコネクションマネージャーでは、フロントエンドユーザーインターフェースCSSのカスタマイズとカスタムJavascriptの注入がサポートされています。本ページでは、カスタマイズしたブランディングを表示してカスタムJavascriptコードを実行するようにウェブアプリケーションを変更する方法について解説します。
Keeperコネクションマネージャーを使用して、プラットフォーム全体にカスタム拡張機能を追加できる「拡張機能」を開発できます。簡単な修正でブランディングやUIを変更できる例をご紹介します。
Keeperコネクションマネージャーの拡張機能では以下が可能となります。
代替の認証方法および接続ソース/ユーザーのデータソース
Guacamoleが認証やトンネル接続などのタスクを実行するときに通知されるイベントリスナー
追加のCSSファイルと静的リソースを使用して、ユーザーインターフェースをテーマにそって構成またはブランディング
自動的にロードされるJavaScriptを使用して、KeeperコネクションマネージャーのJavaScriptコードを拡張
表示言語の追加や既存の言語の翻訳文字列の変更
Keeperコネクションマネージャーの拡張機能は標準のJavaの.jarファイル (基本的には.zipファイル) で、拡張機能に必要なすべてのクラスとリソースおよびKCM拡張機能のマニフェストが含まれます。マニフェストがアーカイブのルートになければならないことを除いて、拡張機能に決まった構造はありません。Javaクラスとパッケージ (存在する場合) は、ルートを基準とした.jarからも読み取られます。
以下は、カスタムブランディングで既存のKeeperコネクションマネージャーインストールを変更する手順となります。
(1) Keeperコネクションマネージャーまたはワークステーションを実行しているインスタンスで、以下のようにサンプルリポジトリを取得するか、zipファイルとしてダウンロードします。
(2) ブランディングフォルダの内容をkcm-branding.jarというファイルに圧縮します。ファイルの名前は、ユニークな名前である限り自由です。Keeperコネクションマネージャーが目的のフォルダに配置された拡張機能をすべてロードします。
(3) ファイルを/etc/kcm-setupフォルダまたはサーバー上の任意のパスにコピーします。
(4) docker-compose.ymlファイル (/etc/kcm-setup/docker-compose.ymlなど) には、以下の2つの変更が必要となります。
「guacamole」セクションで、Jarファイルへの参照を追加して、ホストからguacamoleインスタンスに直接ボリュームマウントします。Keeperコネクションマネージャーはjarファイルをすべて取得して処理するため、ファイルの名前は重要ではありません。
値が「N」の環境変数USE_DEFAULT_BRANDINGを追加します。
以下はその例です。
(5) コンテナを再起動します。
以上です。サービスが起動すると、Keeperコネクションマネージャーページのブランディングが刷新され、ページを読み込む際にポップアップアラートが表示されます。
さらに変更を繰り返すには、リソースを編集してファイルを圧縮し、zipファイルを目的のフォルダにコピーして、Keeperコネクションマネージャーコンテナを再起動します。
guac-manifest.jsonで参照されるCSSファイルは、ロード時にアプリケーションCSSに追加されるため、CSSプロパティが上書きされます。
guac-manifest.jsonで参照されるJavascriptファイルは、ロード時にアプリケーションJavascriptに追加されます。
Keeperコネクションマネージャーのインターフェースの既存のHTML構造は、guac-manifest.jsonのhtmlプロパティによって宣言された特別な「patch」HTMLファイルを使用して変更できます。これらのファイルはHTMLフラグメントであり、他のHTMLファイルと同じですが、Keeperコネクションマネージャー独自のHTMLを特別な方法で変更するようにKeeperコネクションマネージャーに指示するKeeperコネクションマネージャー固有のメタタグが含まれている点が異なります。各メタタグの形式は以下のとおりです。
ここで、SELECTORは、変更のベースとして機能するKeeperコネクションマネージャーインターフェース内の要素と一致するCSSセレクタで、NAMEは以下の定義済み変更のいずれかになります。
before
CSSセレクタに一致する要素の直前に、指定したHTMLを挿入します。
after
CSSセレクタに一致する要素の直後に、指定したHTMLを挿入します。
replace
CSSセレクタに一致する要素を、指定したHTMLに置き換えます。
before-children
CSSセレクタに一致する要素の最初の子 (存在する場合) の直前に、指定したHTMLを挿入します。一致する要素に子がない場合は、HTMLがそのまま一致する要素の内容となります。
after-children
CSSセレクタに一致する要素の最後の子 (存在する場合) の直後に、指定したHTMLを挿入します。一致する要素に子がない場合は、HTMLがそのまま一致する要素の内容となります。
replace-children
CSSセレクタに一致する要素の内容をすべて指定したHTMLで置き換えます。
たとえば、ごく一般的なニーズとしてあいさつ文と企業のプライバシーポリシーへのリンクを追加するには、以下のようなHTMLファイルを追加します。
拡張機能をインストールしてKeeperコネクションマネージャーを再起動すると、最初からKeeperコネクションマネージャーのHTMLの一部であるかのように、「welcome」divブロックとその内容がログインダイアログ (.login-ui .login-dialogに一致する唯一の要素) のすぐ下に自動的に挿入されます。
拡張機能の適用後にページに空白が読み込まれた場合は、以下のようにログを確認します。
nullポインター例外が発生する場合は、guac-manifest.jsonで参照されているリソースの1つが.jar アーカイブで見つからないことが原因である可能性があります。すべてのファイルとフォルダが正しく圧縮されていることを確認します。
