Keeperコネクションマネージャー

カスタムブランディング

Keeperコネクションマネージャーのユーザーインターフェースのカスタマイズ

Keeperコネクションマネージャーでは、フロントエンドユーザーインターフェースCSSのカスタマイズとカスタムJavascriptの注入がサポートされています。本ページでは、カスタマイズしたブランディングを表示してカスタムJavascriptコードを実行するようにウェブアプリケーションを変更する方法について解説します。

概要

Keeperコネクションマネージャーを使用して、プラットフォーム全体にカスタム拡張機能を追加できる「拡張機能」を開発できます。簡単な修正でブランディングやUIを変更できる例をご紹介します。

Keeperコネクションマネージャーの拡張機能では以下が可能となります。

  1. 代替の認証方法および接続ソース/ユーザーのデータソース

  2. Guacamoleが認証やトンネル接続などのタスクを実行するときに通知されるイベントリスナー

  3. 追加のCSSファイルと静的リソースを使用して、ユーザーインターフェースをテーマにそって構成またはブランディング

  4. 自動的にロードされるJavaScriptを使用して、KeeperコネクションマネージャーのJavaScriptコードを拡張

  5. 表示言語の追加や既存の言語の翻訳文字列の変更

拡張形式

Keeperコネクションマネージャーの拡張機能は標準のJavaの.jarファイル (基本的には.zipファイル) で、拡張機能に必要なすべてのクラスとリソースおよびKCM拡張機能のマニフェストが含まれます。マニフェストがアーカイブのルートになければならないことを除いて、拡張機能に決まった構造はありません。Javaクラスとパッケージ (存在する場合) は、ルートを基準とした.jarからも読み取られます。

ブランディング拡張機能の例

以下は、カスタムブランディングで既存のKeeperコネクションマネージャーインストールを変更する手順となります。

(1) Keeperコネクションマネージャーまたはワークステーションを実行しているインスタンスで、以下のようにサンプルリポジトリを取得するか、zipファイルとしてダウンロードします。

git clone https://github.com/Keeper-Security/kcm-branding.git
cd kcm-branding

(2) ブランディングフォルダの内容をkcm-branding.jarというファイルに圧縮します。ファイルの名前は、ユニークな名前である限り自由です。Keeperコネクションマネージャーが目的のフォルダに配置された拡張機能をすべてロードします。

zip -r kcm-branding.jar guac-manifest.json css/ html/ js/ resources/ translations/

(3) ファイルを/etc/kcm-setupフォルダまたはサーバー上の任意のパスにコピーします。

sudo cp kcm-branding.jar /etc/kcm-setup/

(4) docker-compose.ymlファイル (/etc/kcm-setup/docker-compose.ymlなど) には、以下の2つの変更が必要となります。

  • 「guacamole」セクションで、Jarファイルへの参照を追加して、ホストからguacamoleインスタンスに直接ボリュームマウントします。Keeperコネクションマネージャーはjarファイルをすべて取得して処理するため、ファイルの名前は重要ではありません。

  • 値が「N」の環境変数USE_DEFAULT_BRANDINGを追加します。

以下はその例です。

    guacamole:
        image: keeper/guacamole:2
        restart: unless-stopped
        environment:
            ...
            USE_DEFAULT_BRANDING:"N"
        volumes:
            ...
            - "/etc/kcm-setup/kcm-branding.jar:/etc/guacamole/extensions/kcm-branding.jar:ro"

(5) コンテナを再起動します。

sudo ./kcm-setup.run stop
sudo ./kcm-setup.run upgrade

以上です。サービスが起動すると、Keeperコネクションマネージャーページのブランディングが刷新され、ページを読み込む際にポップアップアラートが表示されます。

さらに変更を繰り返すには、リソースを編集してファイルを圧縮し、zipファイルを目的のフォルダにコピーして、Keeperコネクションマネージャーコンテナを再起動します。

技術的詳細

CSS

guac-manifest.jsonで参照されるCSSファイルは、ロード時にアプリケーションCSSに追加されるため、CSSプロパティが上書きされます。

Javascript

guac-manifest.jsonで参照されるJavascriptファイルは、ロード時にアプリケーションJavascriptに追加されます。

HTMLの修正

Keeperコネクションマネージャーのインターフェースの既存のHTML構造は、guac-manifest.jsonのhtmlプロパティによって宣言された特別な「patch」HTMLファイルを使用して変更できます。これらのファイルはHTMLフラグメントであり、他のHTMLファイルと同じですが、Keeperコネクションマネージャー独自のHTMLを特別な方法で変更するようにKeeperコネクションマネージャーに指示するKeeperコネクションマネージャー固有のメタタグが含まれている点が異なります。各メタタグの形式は以下のとおりです。

<meta name="NAME" content="SELECTOR">

ここで、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ファイルを追加します。

<meta name="after" content=".login-ui .login-dialog">

<div class="welcome">
    <h2>Welcome to our Keeper Connection Manager Demo</h2>
    <p>
        Please be sure to read our <a href="#">privacy
        policy</a> before continuing.
    </p>
</div>

拡張機能をインストールしてKeeperコネクションマネージャーを再起動すると、最初からKeeperコネクションマネージャーのHTMLの一部であるかのように、「welcome」divブロックとその内容がログインダイアログ (.login-ui .login-dialogに一致する唯一の要素) のすぐ下に自動的に挿入されます。

トラブルシューティング

拡張機能の適用後にページに空白が読み込まれた場合は、以下のようにログを確認します。

sudo ./kcm-setup.run logs -f guacamole

nullポインター例外が発生する場合は、guac-manifest.jsonで参照されているリソースの1つが.jar アーカイブで見つからないことが原因である可能性があります。すべてのファイルとフォルダが正しく圧縮されていることを確認します。

Previous動的接続Nextロゴを追加する

Last updated