Citrix ADC

nFactorの拡張性

August 23, 2021

寄稿者:

nFactor 認証フレームワークは、高度なユーザーエクスペリエンスを得るためにログオンインターフェイスをより直感的にするためのカスタマイズを追加する柔軟性を提供します。カスタムログインラベル、カスタムログイン認証情報、UI 表示のカスタマイズなどを追加できます。

nFactor を使用すると、各要因に独自のログオン画面を設定できます。各ログオン画面では、以前の要因からの任意の情報や、他の要因では見えないより多くの情報を表示することができます。たとえば、最後の要因は、ユーザーが指示を読んで [続行] をクリックする情報ページです。

nFactor 以前は、カスタムログインページが制限され、カスタマイズとサポートが必要でした。tmindex.htmlを置き換えたり、書き換えルールを適用して動作の一部を変更することができました。ただし、基盤となる機能を実現することはできませんでした。

このトピックでは、次の nFactor 関連のカスタマイズについて詳しく説明します。

ログインラベルのカスタマイズ
イメージを表示するための UI のカスタマイズ
Citrix ADC のログオンフォームをカスタマイズする

前提条件

nFactor、シェルコマンド、XML、およびテキストエディタに精通しています。

前提条件

このトピックで説明するカスタマイズは、Citrix ADCでRfWeb UIテーマ（またはテーマベース）が構成されている場合にのみ可能です。
認証ポリシーは、認証、承認、および監査仮想サーバーにバインドする必要があります。バインドされていない場合、フローは意図したとおりに機能しません。詳細については、CTX224241 を参照してください。
あなたはnFactorに関連する次のアイテムを持っています
- XML スキーマ
- JavaScript
- 認証アクション
- 認証仮想サーバー
- Citrix ADC バージョン11.1以降

ログオンラベルのカスタマイズ

ログオンラベルをカスタマイズするには、次のものが必要です。

ログオンページの外観を記述する XML スキーマ。
レンダリングプロセスの変更に使用される JavaScript を含む script.js ファイル。

機能

JavaScript は XML ファイルを解析し、<Requirements> タグ内の各項目をレンダリングします。各要素は、HTML フォーム内の行に対応します。たとえば、ログインフィールドは行、パスワードフィールドは別の行、ログインボタンも同様です。新しい行を導入するには、StoreFront SDKを使用してXMLスキーマファイルで指定する必要があります。StoreFront SDKでは、XMLスキーマを持つログオンページでタグを使用し、<Requirement> タグに要素を定義することができます。これらの要素は、必要なHTML要素が何であれ、その空間に導入するためにJavaScriptを使用することができます。この場合、HTML形式のテキストを含む行が作成されます。

使用できる XML は次のとおりです。

<Requirement>
<Credential>
<Type>nsg-custom-cred</Type>
<ID>passwd</ID>
</Credential>
<Label>
<Type>nsg-custom-label</Type>
</Label>
</Requirement>
<!--NeedCopy-->

<Requirement>: ログオンページで提供される領域。クレデンシャルはスペースを埋め、他の部分はエンジンを正しい情報にルーティングします。この場合は、「nsg-custom-cred」と入力します。これはプレーンテキストとして定義され、ラベルはその本文に定義されます。要件 XML は JavaScript コードとペアになっており、必要な結果が得られます。

// Custom Label Handler for Self Service Links
CTXS.ExtensionAPI.addCustomAuthLabelHandler({
getLabelTypeName: function () { return "nsg-custom-label"; },
getLabelTypeMarkup: function (requirements) {
return $("< Your HTML Code Here>");
},
// Instruction to parse the label as if it was a standard type
parseAsType: function () {
return "plain";
}
});
//Custom Credential Handler for Self Service Links
CTXS.ExtensionAPI.addCustomCredentialHandler({
getCredentialTypeName: function () { return "nsg-custom-cred"; },
getCredentialTypeMarkup: function (requirements) {
return $("<div/>");
},
});
<!--NeedCopy-->

XML の部分は、表示するログオンページを示し、JavaScript コードは実際のテキストを提供します。クレデンシャルハンドラーがスペースを開き、ラベルがスペースを埋めます。すべての認証トラフィックが書き換えやレスポンダに表示されないようになったため、ページの外観を変更できます。ログインラベルをカスタマイズするための設定

RfWeb に基づいてテーマを作成し、バインドします。
```
add vpn portaltheme RfWebUI_MOD -basetheme RfWebUI

bind vpn vserver TESTAAA –portaltheme RfWebUI_MOD

```
テーマに基づくファイルのパスは、ディレクトリにあります。/var/netscaler/ログオン/テーマ/ RfWebUI_MOD

script.js ファイルの末尾に次のスニペットを追加します。

注：正しいファイル内に前の行を含めないか、JavaScript関数を含めるために欠落すると、XMLがロードされなくなります。このエラーは、ブラウザーの開発者コンソールでのみ表示されます。「未定義の型 nsg-custom-cred」。

// Custom Label Handler for Self Service Links
CTXS.ExtensionAPI.addCustomAuthLabelHandler({
getLabelTypeName: function () { return "nsg-custom-label"; },
getLabelTypeMarkup: function (requirements) {
return $("<a href="https://identity.test.com/identity/faces/register" style="font-size: 16px;" style="text-align: center;">Self Registration</a><br><a href="https://identity.test.com/identity/faces/forgotpassword" style="font-size: 16px;" style="text-align: center;">Forgot Password</a><br><a href="https://identity.test.com/identity/faces/forgotuserlogin" style="font-size: 16px;" style="text-align: center;">Forgot User Login</a>");
},
// Instruction to parse the label as if it was a standard type
parseAsType: function () {
return "plain";
}
});
//Custom Credential Handler for Self Service Links
CTXS.ExtensionAPI.addCustomCredentialHandler({
getCredentialTypeName: function () { return "nsg-custom-cred"; },
getCredentialTypeMarkup: function (requirements) {
return $("<div/>");
},
});
<!--NeedCopy-->

この例で使用されるLoginschema

<?xml version="1.0" encoding="utf-8"?>
<AuthenticateResponse xmlns="http://citrix.com/authentication/response/1">
<Status>success</Status>
<Result>more-info</Result>
<StateContext/>
<AuthenticationRequirements>
<PostBack>/nf/auth/doAuthentication.do</PostBack>
<CancelPostBack>/Citrix/Authentication/ExplicitForms/CancelAuthenticate</CancelPostBack>
<CancelButtonText>Cancel</CancelButtonText>
<Requirements>
<Requirement>
<Credential>
<ID>login</ID>
<SaveID>Username</SaveID>
<Type>username</Type>
</Credential>
<Label>
<Text>User name</Text>
<Type>plain</Type>
</Label>
<Input>
<AssistiveText>Please supply either domain\username or user@fully.qualified.domain</AssistiveText>
<Text>
<Secret>false</Secret>
<ReadOnly>false</ReadOnly>
<InitialValue></InitialValue>
<Constraint>.+</Constraint>
</Text>
</Input>
</Requirement>
<Requirement>
<Credential>
<ID>passwd</ID>
<SaveID>Password</SaveID>
<Type>password</Type>
</Credential>
<Label>
<Text>Password:</Text>
<Type>plain</Type>
</Label>
<Input>
<Text>
<Secret>true</Secret>
<ReadOnly>false</ReadOnly>
<InitialValue/>
<Constraint>.+</Constraint>
</Text>
</Input>
</Requirement>
<Requirement>
<Credential>
<Type>nsg-custom-cred</Type>
<ID>passwd</ID>
</Credential>
<Label>
<Type>nsg-custom-label</Type>
</Label>
</Requirement>
<Requirement>
<Credential>
<ID>loginBtn</ID>
<Type>none</Type>
</Credential>
<Label>
<Type>none</Type>
</Label>
<Input>
<Button>Please Log On</Button>
</Input>
</Requirement>
</Requirements>
</AuthenticationRequirements>
</AuthenticateResponse>
<!--NeedCopy-->

次のコマンドを実行して、カスタムスキーマを config にロードします。

add authentication loginSchema custom -authenticationSchema custom.xml

add authentication loginSchemaPolicy custom -rule true -action custom

bind authentication vserver AAATEST -policy custom -priority 100 -gotoPriorityExpression END
<!--NeedCopy-->

次の図は、この設定でレンダリングされるログインページを示しています。

ローカライズされた画像

イメージを表示するための UI のカスタマイズ

nFactor を使用すると、Loginschemaファイルを使用してカスタマイズされた表示が可能になります。組み込みの loginschema ファイルで提供されるもの以外に、さらにカスタマイズが必要な場合があります。たとえば、ハイパーリンクを表示したり、UI にカスタムロジックを記述したりします。これらは、loginschema拡張と対応するjavascriptファイルを構成する「カスタム認証情報」を使用して達成することができます。

UIをカスタマイズしてイメージを表示するには、「Citrix ADC-Swivel」統合の展開フローを例として使用します。

このフローには2つの要因があります。

第 1 要素:ユーザーの AD 資格情報を確認します。
2 番目の要素:グループメンバーシップに基づいてユーザーログオンを要求します。

ローカライズされた画像

このフローでは、すべてのユーザーが最初の要素を通過します。第2因子の前に、一部のユーザーが「スイベル」係数から省略できるかどうかを確認する擬似係数があります。ユーザーが「スイベル」係数が必要な場合は、画像とテキストボックスが表示され、コードを入力できます。

解決策

画像を表示するためにUIをカスタマイズするソリューションには、2つの部分が含まれています。

Loginschema拡張。
loginschema拡張を処理するカスタムスクリプト。

Loginschema拡張

フォームのレンダリングを制御するために、カスタムの「id」/「credential」がloginschemaに注入されます。これは、既存のスキーマを再利用し、要件に従って変更することによって行うことができます。

この例では、テキストフィールドが 1 つしかないloginschemaが考慮されます (たとえば、/nsconfig/Loginschema/OnlyPassword.xml)。次のスニペットがloginschemaに追加されます。

<Requirement><Credential><ID>swivel_cred</ID><Type>swivel_cred</Type><Input><Text><Hidden>true</Hidden><InitialValue>${http.req.user.name}</InitialValue></Text></Input></Credential></Requirement>
<!--NeedCopy-->

スニペットでは、「swivel_cred」が認証情報の「タイプ」として指定されています。これは組み込みの「クレデンシャル」として認識されないため、UI はこの型のハンドラを探し、存在する場合はそれを呼び出します。この資格情報の初期値が送信されます。これは、Citrix ADCが動的に入力する式です。この例では、ユーザー名をスイベルサーバーに通知するために使用されるユーザー名です。それは常に必要ではないかもしれないし、いくつかの他のデータで拡張することができます。これらの詳細は、必要に応じて追加する必要があります。

カスタム認証情報を処理するためのJavascript

UI はカスタム認証情報を検出すると、ハンドラーを探します。すべてのカスタム・ハンドラは、デフォルトのポータル・テーマ用に /var/netscaler/ログオン/ログオンポイント/カスタム/スクリプト.js に書き込まれます。カスタム・ポータル・テーマの場合、script.js はディレクトリ/var/netscaler/logon/themes/<custom_theme>/にあります。

カスタム認証情報のマークアップをレンダリングするために、次のスクリプトが追加されました。

CTXS.ExtensionAPI.addCustomCredentialHandler({
    // The name of the credential, must match the type returned by the server
    getCredentialTypeName: function () { return "swivel_cred"; },
    // Generate HTML for the custom credential
    getCredentialTypeMarkup: function (requirements) {
        var div = $("<div></div>");
        var image = $("<img/>");
        var username = requirements.input.text.initialValue; //Get the secret from the response
        image.attr({
            "style" : "width:200px;height:200px;",
            "id" : "qrcodeimg",
            "src" : "https://myswivelserver.citrix.com:8443/pinsafe/SCImage?username=" + username
        });
        div.append(image);
        return div;
    }
});
<!--NeedCopy-->

このスニペットは、’swivel_cred’のマークアップを処理するためのものです。強調表示された資格情報名は、loginschema 拡張で指定された ‘type’ と一致する必要があります。マークアップを生成するには、ソースがスイベルサーバーを指す画像を追加する必要があります。これが完了すると、UIは指定された場所からイメージをロードします。このloginschemaにもテキストボックスがあるため、UIはそのテキストボックスをレンダリングします。

注：管理者は、画像要素の「スタイル」を変更して画像のサイズを変更することができます。現在、200x200ピクセルに設定されています。

UI をカスタマイズして画像を表示するための設定

nFactor の構成は、ボトムアップで構築された方が良いでしょう。これは、前のファクターに「nextFactor」を指定しようとすると、後続のファクターの名前が必要になるためです。

旋回係数構成:

add loginschema swivel_image –authenticationSchema /nsconfig/loginschema/SwivelImage.xml

add authentication policylabel SwivelFactor –loginSchema swivel_image

bind authentication policylabel SwivelFactor –policy <policy-to-check-swivel-image> -priority 10
<!--NeedCopy-->

注:この例で使用されているloginschemaから SwivelImage.xml をダウンロードしてください。

グループチェック設定の擬似ファクタ:

add authentication policylabel GroupCheckFactor

add authentication policy contractors_auth_policy –rule ‘http.req.user.is_member_of(“contractors”)’ –action NO_AUTHN

add authentication policy not_contractors _auth_policy–rule true –action NO_AUTHN

bind authentication policylabel GroupCheckFactor –policy contractors_auth_policy –pri 10 –nextFactor SwivelFactor

bind authentication policylabel GroupCheckFactor –policy not_contractors_auth_policy –pri 20
<!--NeedCopy-->

Active Directory ログインの最初の要素:

add ldapAction <>

add authentication policy user_login_auth_policy –rule true –action <>

bind authentication vserver <> -policy user_login_auth_policy –pri 10 –nextFactor GroupCheckFactor
<!--NeedCopy-->

構成では、3 つのファクタが指定されており、そのうちの 1 つは暗黙的/疑似です。

この例で使用されるLoginschema

以下は、スイベル認証情報とテキストボックスを使用したスキーマの例です。

注：Webブラウザ用のデータをコピーする場合、引用符の表示が異なる場合があります。ファイルに保存する前に、メモ帳などのエディタでデータをコピーします。

<?xml version="1.0" encoding="UTF-8"?>
<AuthenticateResponse xmlns="http://citrix.com/authentication/response/1">
<Status>success</Status>
<Result>more-info</Result>
<StateContext></StateContext>
<AuthenticationRequirements>
<PostBack>/nf/auth/doAuthentication.do</PostBack>
<CancelPostBack>/nf/auth/doLogoff.do</CancelPostBack>
<CancelButtonText>Cancel</CancelButtonText>
<Requirements>
<Requirement><Credential><ID>swivel_cred</ID><Type>swivel_cred</Type><Input><Text><Hidden>true</Hidden><InitialValue>${http.req.user.name}</InitialValue></Text></Input></Credential></Requirement>
<Requirement><Credential><ID>passwd</ID><SaveID>ExplicitForms-Password</SaveID><Type>password</Type></Credential><Label><Text>Password:</Text><Type>plain</Type></Label><Input><Text><Secret>true</Secret><ReadOnly>false</ReadOnly><InitialValue></InitialValue><Constraint>.+</Constraint></Text></Input></Requirement>
<Requirement><Credential><Type>none</Type></Credential><Label><Text>Hello ${http.req.user.name}, Please enter passcode from above image.</Text><Type>confirmation</Type></Label><Input /></Requirement>
<Requirement><Credential><ID>saveCredentials</ID><Type>savecredentials</Type></Credential><Label><Text>Remember my password</Text><Type>plain</Type></Label><Input><CheckBox><InitialValue>false</InitialValue></CheckBox></Input></Requirement>
<Requirement><Credential><ID>loginBtn</ID><Type>none</Type></Credential><Label><Type>none</Type></Label><Input><Button>Log On</Button></Input></Requirement>
</Requirements>
</AuthenticationRequirements>
</AuthenticateResponse>
<!--NeedCopy-->

出力

設定が完了すると、次のイメージが表示されます。

ローカライズされた画像

注：画像の高さと配置は、JavaScriptで変更することができます。

Citrix ADC nFactorログオンフォームをカスタマイズしてフィールドを表示または非表示にする

Citrix GatewayのRfWeb UIでは、さまざまなカスタマイズが可能です。この機能を nFactor 認証フレームワークと組み合わせると、既存のワークフローを損なうことなく複雑なフローを設定できます。

この例では、[ログオンの種類] ボックスの一覧から OAuth と LDAP という 2 つの認証オプションを使用できます。フォームが最初に読み込まれると、ユーザー名とパスワードのフィールド (LDAP が最初に表示されます) が表示されます。OAuth が選択されている場合、OAuth はサードパーティのサーバーへの認証のオフロードを意味するため、すべてのフィールドが非表示になります。このように、管理者は、ユーザーの利便性ごとに直感的なワークフローを構成することができます。

注：

[ログオンの種類] ボックスの一覧の値は、スクリプトファイルを簡単に変更して変更できます。
このセクションでは、フローの UI 部分のみについて説明します。認証の実行時の処理は、この資料の対象外です。認証の設定については、nFactor のマニュアルを参照することをお勧めします。

nFactor ログオンフォームをカスタマイズする方法

nFactorログオンフォームのカスタマイズは、2つの部分に分類することができます

正しいLoginschemaをUIへ送信する
Loginschemaとユーザーの選択を解釈するためのハンドラの作成

正しいLoginschemaをUIに送信する

この例では、単純な要求/要件が loginschema で送信されます。

このために、SingleAuth.xmlファイルが変更されます。SingleAuth.xmlは、Citrix ADCファームウェアに同梱されており、/nsconfig/loginschema/Loginschemaディレクトリにあります。

Loginschemaを送信する手順：

SSH経由でログインし、シェルにドロップします（「shell」と入力します）。
SingleAuth.xml を別のファイルにコピーして修正します。

注：宛先フォルダは、デフォルトのCitrix ADC Loginschemaフォルダとは異なります。

cp /nsconfig/loginschema/LoginSchema/SingleAuth.xml /nsconfig/loginschema/SingleAuthDynamic.xml

次のクレームを SingleAuthDynamic.xml に追加します。

<Requirement><Credential><ID>nsg_dropdown</ID><Type>nsg_dropdown</Type></Credential><Label><Text>Logon Type:</Text><Type>plain</Type></Label></Requirement>
<!--NeedCopy-->

このLoginschemaを送信して最初のフォームをロードするようにCitrix ADCを構成します。

add loginschema single_auth_dynamic –authenticationSchema SingleAuthDynamic.xml

add loginschemaPolicy single_auth_dynamic –rule true –action single_auth_dynamic

bind authentication vserver aaa_nfactor –policy single_auth_dynamic –pri 10
<!--NeedCopy-->

フォームをロードしてユーザーイベントを処理するためのスクリプト変更

管理者は、ログオンフォームの表示をカスタマイズできる JavaScript を変更できます。この例では、LDAP が選択されている場合はユーザー名とパスワードフィールドが表示され、OAuth が選択されている場合は非表示になります。管理者は、パスワードのみを非表示にすることもできます。管理者は、「/var/netscaler/logon/LogonPoint/custom」ディレクトリにある「script.js」に次のスニペットを追加する必要があります。

注:このディレクトリはグローバル・ディレクトリであるため、ポータル・テーマを作成し、そのフォルダ内の「script.js」ファイルを"/var/netscaler/logon/themes/<THEME_NAME>"で編集します。

CTXS.ExtensionAPI.addCustomCredentialHandler({
    // The name of the credential, must match the type returned by the server
    getCredentialTypeName: function () { return "nsg_dropdown"; },
    // Generate HTML for the custom credential
    getCredentialTypeMarkup: function (requirements) {
        var div = $("<div></div>");
        var select = $("<select name='nsg_dropdown'></select>").attr("id", "nsg_dropdown");

        var rsa = $("<option></option>").attr("selected", "selected").text("LDAP").val("LDAP");
        var OAuthID = $("<option></option>").text("OAuth").val("OAuth");
        select.append(rsa, OAuthID);

        select.change(function(e) {
            var value = $(this).val();
            var ldapPwd = $($(".credentialform").find(".CredentialTypepassword")[0]);
            var ldapUname = $($(".credentialform").find(".CredentialTypeusername"));
            if(value == "OAuth") {
                if (ldapPwd.length)
                        ldapPwd.hide();
                if (ldapUname.length)
                        ldapUname.hide();
            } else if(value == "LDAP") {
                if (ldapPwd.length)
                        ldapPwd.show();
                if (ldapUname.length)
                        ldapUname.show();
            }
        });
       div.append(select);
        return div;
    }
});
<!--NeedCopy-->

エンドユーザーエクスペリエンス

エンドユーザーがログオンページを初めて読み込むと、次の画面が表示されます。

ローカライズされた画像

[ログオンの種類] で [OAuth] が選択されている場合、ユーザー名とパスワードのフィールドは非表示になります。

ローカライズされた画像

LDAP を選択すると、ユーザー名とパスワードが表示されます。これにより、ユーザーの選択に基づいてログオンページを動的に読み込むことができます。

この例で使用されるLoginschema

<?xml version="1.0" encoding="UTF-8"?>
<AuthenticateResponse xmlns="http://citrix.com/authentication/response/1">
<Status>success</Status>
<Result>more-info</Result>
<StateContext></StateContext>
<AuthenticationRequirements>
<PostBack>/nf/auth/doAuthentication.do</PostBack>
<CancelPostBack>/nf/auth/doLogoff.do</CancelPostBack>
<CancelButtonText>Cancel</CancelButtonText>
<Requirements>
<Requirement><Credential><ID>login</ID><SaveID>ExplicitForms-Username</SaveID><Type>username</Type></Credential><Label><Text>User name</Text><Type>plain</Type></Label><Input><AssistiveText>Please supply either domain\username or user@fully.qualified.domain</AssistiveText><Text><Secret>false</Secret><ReadOnly>false</ReadOnly><InitialValue></InitialValue><Constraint>.+</Constraint></Text></Input></Requirement>
<Requirement><Credential><ID>passwd</ID><SaveID>ExplicitForms-Password</SaveID><Type>password</Type></Credential><Label><Text>Password:</Text><Type>plain</Type></Label><Input><Text><Secret>true</Secret><ReadOnly>false</ReadOnly><InitialValue></InitialValue><Constraint>.+</Constraint></Text></Input></Requirement>
<Requirement><Credential><ID>nsg_dropdown</ID><Type>nsg_dropdown</Type></Credential><Label><Text>Logon Type:</Text><Type>plain</Type></Label></Requirement>
<Requirement><Credential><Type>none</Type></Credential><Label><Text>First factor</Text><Type>confirmation</Type></Label><Input /></Requirement>
<Requirement><Credential><ID>saveCredentials</ID><Type>savecredentials</Type></Credential><Label><Text>Remember my password</Text><Type>plain</Type></Label><Input><CheckBox><InitialValue>false</InitialValue></CheckBox></Input></Requirement>
<Requirement><Credential><ID>loginBtn</ID><Type>none</Type></Credential><Label><Type>none</Type></Label><Input><Button>Log On</Button></Input></Requirement>
</Requirements>
</AuthenticationRequirements>
</AuthenticateResponse>
<!--NeedCopy-->

重要: さまざまな nFactor 関連のトピックの詳細については、 nFactorを参照してください。

このコンテンツの正式なバージョンは英語で提供されています。Citrix ドキュメントのコンテンツの一部は、お客様の利便性のみを目的として機械翻訳されています。Citrix は機械翻訳されたコンテンツを管理していないため、誤り、不正確な情報、不適切な用語が含まれる場合があります。英語の原文から他言語への翻訳について、精度、信頼性、適合性、正確性、またはお使いの Citrix 製品またはサービスと機械翻訳されたコンテンツとの整合性に関する保証、該当するライセンス契約書またはサービス利用規約、あるいは Citrix とのその他すべての契約に基づき提供される保証、および製品またはサービスのドキュメントとの一致に関する保証は、明示的か黙示的かを問わず、かかるドキュメントの機械翻訳された範囲には適用されないものとします。機械翻訳されたコンテンツの使用に起因する損害または問題について、Citrix は責任を負わないものとします。

nFactorの拡張性

August 23, 2021

寄稿者:

August 23, 2021

寄稿者:

この記事の概要

前提条件
前提条件
ログオンラベルのカスタマイズ
イメージを表示するための UI のカスタマイズ
Citrix ADC nFactorログオンフォームをカスタマイズしてフィールドを表示または非表示にする