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

カスタムブランディング

Keeper Connection Managerのユーザーインターフェースのカスタマイズ

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

概要

Keeper Connection Managerを使用すると、プラットフォーム全体にカスタム拡張機能を追加できる「拡張機能」を開発できます。このページでは、簡単な修正でブランディングやUIを変更できる基本的な例を説明します。

Keeper Connection Managerの拡張機能では、以下のことが可能です。

  1. 認証方法および接続ソース/ユーザーのデータソースを選択できます。

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

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

  4. 自動的にロードされるJavaScriptを使用して、KCMのJavaScriptコードを拡張できます。

  5. 表示言語を追加するか、既存の言語の翻訳文字列を変更できます。

拡張形式

KCMの拡張機能は標準のJavaの.jarファイル（これは基本的には、.zipファイルです）で、拡張機能に必要なすべてのクラスとリソース、およびKCM拡張機能のマニフェストが含まれます。マニフェストがアーカイブのルートになければならないことを除いて、拡張機能の構造は決められていません。Javaクラスとパッケージ（必要に応じて）は、ルートを基準として、.jarからも読み取られます。

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

カスタムブランディングを使用して既存のKCMインストールを変更するのは簡単です。以下の手順例に従ってください。

(1) Keeper Connection Managerまたはワークステーションを実行しているインスタンスで、サンプルリポジトリを取得するか、zipファイルとしてダウンロードします。例:

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

(2) ブランディングフォルダの内容をkcm-branding.jarというファイルに圧縮します。 ファイルの名前は、一意の名前である限り自由です。KCMは、目的のフォルダに配置された拡張機能をすべてロードします。

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インスタンスに直接ボリュームマウントします。KCMは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

以上で終わりです。サービスが起動すると、KCMページのブランディングが刷新され、ページを読み込むときにポップアップアラートが表示されます。

さらに変更を繰り返すには、リソースを編集してファイルを圧縮し、zipファイルを目的のフォルダにコピーして、KCMコンテナを再起動するだけです。

技術詳細

CSS

guac-manifest.jsonで参照されるCSSファイルは、ロード時にアプリケーションCSSに追加されるため、そのCSSプロパティをオーバーライドします。

Javascript

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

HTMLの修正

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

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

ここで、SELECTORは、変更のベースとして機能するKCMインターフェース内の要素と一致する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>

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

トラブルシューティング

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

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

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

Previous動的接続Nextボルト連携

Last updated