フォームの事前入力ウォークスルーシリーズ

チュートリアル : ログインページの作成

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

このトピックでは、訪問者がエクストラネットにログインおよびログアウトできるフォームページを作成する方法について説明します。このチュートリアルは、フォームの事前入力シリーズのパート2です。このチュートリアルの手順を実行するには、まず「チュートリアル : レジスタの作成」ページを完了する必要があります。

このチュートリアルでは、次の方法について説明します

ログインおよびログアウト送信アクション・クラスの作成
ログインアクションエディターコントロールを作成する
ログイン送信アクションアイテムを作成する
ログアウト送信アクションアイテムの作成
ログインフォームを作成する
ログアウトフォームを作成する
フォームをWebページに追加する

ログインおよびログアウト送信アクション・クラスの作成

ログインおよびログアウト送信アクションクラスを作成するには、次のようにします。

Visual Studioプロジェクトで、SubmitActionsフォルダーに移動します。 LoginUserという名前のフォルダを作成します。

LoginUserフォルダに、LoginUserDataクラスを作成します。

public class LoginUserData
 {
 public Guid UserNameFieldId { get; set; }
 public Guid PasswordFieldId { get; set; }
 }

LoginUserクラスを作成します。

public class LoginUser : SubmitActionBase<LoginUserData>
 {
 public LoginUser(ISubmitActionData submitActionData) : base(submitActionData)
 {
 }

 protected override bool Execute(LoginUserData data, FormSubmitContext formSubmitContext)
 {
 Assert.ArgumentNotNull(data, nameof(data));
 Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));

 var fields = GetFormFields(data, formSubmitContext);

 Assert.IsNotNull(fields, nameof(fields));

 if (UsernameOrPasswordFieldIsNull(fields))
 {
 return AbortForm(formSubmitContext);
 }

 var values = fields.GetFieldValues();

 if (UsernameOrPasswordValueIsNull(values))
 {
 return AbortForm(formSubmitContext);
 }

 var user = Login(values.Username, values.Password);

 if (user == null)
 {

 return AbortForm(formSubmitContext);
 }

 return true;
 }

 protected virtual User Login(string userName, string password)
 {
 var accountName = string.Empty;
 var domain = Context.Domain;
 if (domain != null)
 {
 accountName = domain.GetFullName(userName);
 }

 var result = AuthenticationManager.Login(accountName, password);
 if (!result)
 {
 return null;
 }

 var user = AuthenticationManager.GetActiveUser();
 return user;
 }

 private LoginUserFormFields GetFormFields(LoginUserData data, FormSubmitContext formSubmitContext)
 {
 Assert.ArgumentNotNull(data, nameof(data));
 Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));

 return new LoginUserFormFields
 {
 Username = FieldHelper.GetFieldById(data.UserNameFieldId, formSubmitContext.Fields),
 Password = FieldHelper.GetFieldById(data.PasswordFieldId, formSubmitContext.Fields)
 };
 }

 private bool UsernameOrPasswordFieldIsNull(LoginUserFormFields field)
 {
 Assert.ArgumentNotNull(field, nameof(field));
 return field.Username == null || field.Password == null;
 }

 private bool UsernameOrPasswordValueIsNull(LoginUserFieldValues values)
 {
 Assert.ArgumentNotNull(values, nameof(values));
 return string.IsNullOrEmpty(values.Username) || string.IsNullOrEmpty(values.Password);
 }

 private bool AbortForm(FormSubmitContext formSubmitContext)
 {
 formSubmitContext.Abort();
 return false;
 }

 internal class LoginUserFormFields
 {
 public IViewModel Username { get; set; }
 public IViewModel Password { get; set; }

 public LoginUserFieldValues GetFieldValues()
 {
 return new LoginUserFieldValues
 {
 Username = FieldHelper.GetValue(Username),
 Password = FieldHelper.GetValue(Password)
 };
 }
 }

 internal class LoginUserFieldValues
 {
 public string Username { get; set; }
 public string Password { get; set; }
 }
 }

SubmitActionsフォルダに移動し、LogoutUserという名前のフォルダを追加します。そのフォルダに、LogoutUserクラスを作成します。

public class LogoutUser : SubmitActionBase<string>
 {
 public LogoutUser(ISubmitActionData submitActionData) : base(submitActionData)
 {
 }

 protected override bool Execute(string data, FormSubmitContext formSubmitContext)
 {
 Assert.ArgumentNotNull(formSubmitContext, nameof(formSubmitContext));

 Logout();
 return true;
 }

 protected override bool TryParse(string value, out string target)
 {
 target = string.Empty;
 return true;
 }

 protected virtual void Logout()
 {
 AuthenticationManager.GetActiveUser();
 AuthenticationManager.Logout();
 }
 }

ログインアクションエディターコントロールを作成する

次の手順では、フォームフィールドをLoginUserDataクラスにマップするためのLoginUserアクションエディターを作成します。

メモ

このタスクを完了するには、Sitecore Rocks Visual Studioプラグインが必要です。このプラグインは、Visual Studio 2019以前と互換性があります。

LoginUserアクションエディタコントロールを作成するには:

アクションエディタのJavaScriptファイルを作成します。Visual Studioで、scriptsフォルダーに移動し、LoginUser.jsという名前のJavaScriptファイルを作成します。

次のスクリプトをファイルにコピーします。

	(function (speak) {
	    var parentApp = window.parent.Sitecore.Speak.app.findApplication('EditActionSubAppRenderer'),
	        designBoardApp = window.parent.Sitecore.Speak.app.findComponent('FormDesignBoard');
	    
	    var getFields = function () {
	        var fields = designBoardApp.getFieldsData();
	        
	        return _.reduce(fields,
	            function (memo, item) {
	                if (item && item.model && item.model.hasOwnProperty("value")) {
	                    memo.push({
	                        itemId: item.itemId,
	                        name: item.model.name
	                    });
	                }
	                return memo;
	            },
	            [
	                {
	                    itemId: '',
	                    name: ''
	                }
	            ],
	            this);
	    };
	    
	    speak.pageCode(["underscore"],
	        function (_) {
	            return {
	                initialized: function () {
	                    this.on({
	                        "loaded": this.loadDone
	                    },
	                        this);
	                    
	                    this.Fields = getFields();
	                    
	                    this.MapLoginUserForm.children.forEach(function (control) {
	                        if (control.deps && control.deps.indexOf("bclSelection") !== -1) {
	                            control.IsSelectionRequired = false;
	                        }
	                    });
	                    
	                    if (parentApp) {
	                        parentApp.loadDone(this, this.HeaderTitle.Text, this.HeaderSubtitle.Text);
	                        parentApp.setSelectability(this, true);
	                    }
	                },
	                
	                setDynamicData: function (propKey) {
	                    var componentName = this.MapLoginUserForm.bindingConfigObject[propKey].split(".")[0];
	                    var component = this.MapLoginUserForm[componentName];
	                    
	                    var items = this.Fields.slice(0);
	                    
	                    if (this.Parameters[propKey] &&
	                        !_.findWhere(items, { itemId: this.Parameters[propKey] })) {
	                        var currentField = {
	                            itemId: this.Parameters[propKey],
	                            name: this.Parameters[propKey] +
	                                " - " +
	                                (this.ValueNotInListText.Text || "value not in the selection list")
	                        };
	                        
	                        items.splice(1, 0, currentField);
	                        
	                        component.DynamicData = items;
	                        $(component.el).find('option').eq(1).css("font-style", "italic");
	                    } else {
	                        component.DynamicData = items;
	                    }
	                },
	                
	                loadDone: function (parameters) {
	                    this.Parameters = parameters || {};
	                    _.keys(this.MapLoginUserForm.bindingConfigObject).forEach(this.setDynamicData.bind(this));
	                    this.MapLoginUserForm.BindingTarget = this.Parameters;
	                },
	                
	                getData: function () {
	                    var formData = this.MapLoginUserForm.getFormData(),
	                        keys = _.keys(formData);
	                    
	                    keys.forEach(function (propKey) {
	                        if (formData[propKey] == null || formData[propKey].length === 0) {
	                            if (this.Parameters.hasOwnProperty(propKey)) {
	                                delete this.Parameters[propKey];
	                            }
	                        } else {
	                            this.Parameters[propKey] = formData[propKey];
	                        }
	                    }.bind(this));
	                    
	                    return this.Parameters;
	                }
	            };
	        });
	})(Sitecore.Speak);

LoginUser.js Webサイトフォルダ (YourInstance/Website/sitecore/shell/client/Applications/FormsBuilder/Layouts/Action) にデプロイします。
Sitecore Rocksで、コアデータベースを展開し、/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actionsに移動します。
「 Add」をクリックし、「 New item」をクリックします。
Add New Itemダイアログボックスで、Speak-BasePageテンプレートを検索してクリックし、名前に「LoginUser」と入力します。
このアイテムのレイアウトを /sitecore/client/Speak/Layouts/Layouts/Speak-FlexLayoutに更新し、次のレンダリングを追加します。
- ページコード
- ヘッダータイトル
- ヘッダーサブタイトル
- ValueNotinListテキスト
- メインボーダー
- MapLoginUserForm (英語)
PageCodeレンダリングのプロパティウィンドウを開き、PageCodeScriptFileNameを次のように更新します。/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/LoginUser.js

追加したレンダリングのテンプレートに基づいてパラメータを追加します。

アイテム	テンプレート
スタイルシート	ページスタイルシートファイル
ヘッダータイトル	テキストパラメータ
ヘッダーサブタイトル	テキストパラメータ
MapLoginUserForm (英語)	フォルダ
ユーザー名	FormDropListパラメーター
パスワード	FormDropListパラメーター
ValueNotInListText (値NotInListText)	テキストパラメータ

フィールドを次の値で更新します。

パラメーター	フィールド:値
Stylesheet	スタイルシート: /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.css
HeaderTitle	IsVisible：オフ Text: Map the fields in the form to the user profile details。
HeaderSubtitle	IsVisible：解除 Text: Map the fields in the form to the user profile details.
UserName	ValueFieldName: アイテムID DisplayFieldName：名前 Form Label: ユーザー名 BindingConfiguration: userNameFieldId / SelectedValue
Password	ValueFieldName: アイテムID DisplayFieldName：名前 Form Label：パスワード BindingConfiguration: passwordFieldId / SelectedValue
ValueNotInListText	IsVisible：解除 Text: Value not in the selection list

ログイン送信アクションアイテムを作成する

ログイン送信アクションアイテムを作成するには:

コンテンツエディターで、/system/Settings/Forms/Submit Actionsに移動し、Submit Actionアイテムを挿入して、Login Userという名前を付けます。

フィールドを次の値で更新します。

畑	価値
モデルタイプ	ValueProviderSample.SubmitActions.LoginUser
エラーメッセージ	ログインに失敗しました!
編集者	ログインユーザー

ログアウト送信アクションアイテムの作成

ログアウト送信アクションアイテムを作成するには:

サブミットアクションアイテムをSubmit Actionsフォルダに挿入し、Logout Userという名前を付けます。

フィールドを次の値で更新します。

畑	価値
Model Type	ValueProviderSample.SubmitActions.LogoutUser
Error Message	ログアウトに失敗しました。

手記

アイテムを保存することを忘れないでください。

ログインフォームを作成する

ログインフォームを作成するには:

Sitecoreスタート画面からSitecore Formsアプリケーションを開きます。

フォームを作成し、次のセクションを追加します。

セクション名	Cssクラス
ログインセクション	form-group col-md-6
Submitセクション	form-group col-md-12

次のフィールドを追加します。

種類	ラベル	フィールド名	節
1行テキスト	ユーザー名	ユーザー名	ログインセクション
パスワード	パスワード	パスワード	ログインセクション
送信ボタン	ログイン	ログイン	Submitセクション

Login User送信アクションをログインボタンに追加します。それに応じてフォームフィールドをマッピングします。次に、「OK」をクリックします。
フォームを保存し、Login Formという名前を付けます。

ログアウトフォームを作成する

ログアウトフォームを作成するには:

空白のフォームを作成します。
Form Elementsペインから、送信ボタンをページにドラッグします。
送信ボタンのプロパティを次の値で編集します。
- Label：ログアウト
- Field name:送信ボタン
- CSS class: BTN BTNリンク
Submit actionsセクションで、Logout User送信アクションを追加します。
フォームをLogout Formという名前で保存します。

フォームをWebページに追加する

Sitecore Formsアプリケーションを使用すると、新しいフォームを簡単に作成したり、テンプレートを使用したりできます。Webページにフォームを挿入できるのは、コンテンツエディターとエクスペリエンスエディターの両方です。まず、デフォルトのサンプルレイアウトをMVCレイアウトに置き換える必要があり、次にフォームをWebページに挿入できます。

Webページにフォームを追加するには:

sitecore/Content/Homeに移動し、サンプル項目を挿入します。Loginという名前を付けます。
Loginアイテムの既定のレイアウトをMVCレイアウト (前のチュートリアルで作成したMVCレイアウト) に変更します。
すべてのサンプルコントロールを削除し、MVCフォームレンダリングを追加します。メインプレースホルダーに追加します。
追加したMVCフォームレンダリングを編集し、そのData SourceをLogin Formに更新します。
アイテムを保存して公開します。

これで、ログインページを表示できます。次のチュートリアルに進み、値プロバイダーの設定方法を学習します。

この記事を改善するための提案がある場合は、お知らせください!

チュートリアル : ログイン ページの作成

ログインおよびログアウト送信アクション・クラスの作成

ログイン アクション エディター コントロールを作成する

ログイン送信アクションアイテムを作成する

ログアウト送信アクションアイテムの作成

ログインフォームを作成する

ログアウトフォームを作成する

フォームをWebページに追加する

チュートリアル : ログインページの作成

ログインアクションエディターコントロールを作成する