ウォークスルー

ログインとログアウトのサブミッションアクションクラスを作成します

ログインおよびログアウトを作成するには、アクションクラスを提出します:

1. Visual StudioプロジェクトでフォルダSubmitActions行ってください。 LoginUserという名前のフォルダを作成します。

2. LoginUserフォルダ内にLoginUserDataクラスを作成します:

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

3. LoginUserクラスを作成する:

   public class LoginUser : SubmitActionBase { 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; } } }

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

   public class LogoutUser : SubmitActionBase { 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アクションエディターコントロールを作成するには:

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

2. 以下のスクリプトをファイルにコピーします:

   (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.bindingConfigObjectpropKey.split(".")0; var component = this.MapLoginUserFormcomponentName;

   var items = this.Fields.slice(0);

   if (this.ParameterspropKey && !_.findWhere(items, { itemId: this.ParameterspropKey })) { var currentField = { itemId: this.ParameterspropKey, name: this.ParameterspropKey + " - " + (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 (formDatapropKey == null || formDatapropKey.length === 0) { if (this.Parameters.hasOwnProperty(propKey)) { delete this.ParameterspropKey; } } else { this.ParameterspropKey = formDatapropKey; } }.bind(this));

   return this.Parameters; } }; }); })(Sitecore.Speak);

3. LoginUser.jsをウェブサイトのフォルダにデプロイしてください

   /Website/sitecore/shell/client/Applications/FormsBuilder/Layouts/Action。

4. Sitecore Rocksでコアデータベースを展開し、/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actionsへ行ってください。

5. 追加をクリックしてから****「新しい項目」をクリックしてください。

6. 「 新しいアイテムを追加 」ダイアログボックスで、Speak-BasePageテンプレートを検索してクリックし、「 LoginUser」と入力してください。

7. このアイテムのレイアウトを /sitecore/client/Speak/Layouts/Layouts/Speak-FlexLayoutに更新し、以下のレンダリングを追加してください。

   • ページコード
   • ヘッダータイトル
   • ヘッダー字幕
   • ValueNotinListText
   • メインボーダー
   • MapLoginUserForm

8. PageCodeレンダリングのプロパティウィンドウを開き、PageCodeScriptFileNameを以下に更新してください:/sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/LoginUser.js

9. 追加したレンダリングのテンプレートに基づいてパラメータを追加してください:

   アイテム

   テンプレート

   スタイルシート

   ページ・スタイルシート・ファイル

   ヘッダータイトル

   テキストパラメータ

   ヘッダー字幕

   テキストパラメータ

   MapLoginUserForm

   フォルダー

   ユーザー名

   FormDropList パラメータ

   パスワード

   FormDropList パラメータ

   ValueNotInListText

   テキストパラメータ

   

10. 以下の値でフィールドを更新してください:

    パラメータ

    フィールド

    Stylesheet

    スタイルシート: /sitecore/shell/client/Applications/FormsBuilder/Layouts/Actions/Actions.css

    HeaderTitle

    IsVisible: deselect(選択解除)

    テキスト: フォーム内のフィールドをユーザープロフィールの詳細にマッピングしてください。

    HeaderSubtitle

    IsVisible: 選択解除

    テキスト: フォーム内のフィールドをユーザープロフィールの詳細にマッピングしてください。

    UserName

    ValueFieldName: itemId

    DisplayFieldName: 名前

    フォームラベル

    BindingConfiguration: userNameFieldId / SelectedValue

    Password

    ValueFieldName: itemId

    DisplayFieldName: 名前

    フォームラベル

    BindingConfiguration: passwordFieldId / SelectedValue

    ValueNotInListText

    IsVisible: 選択解除

    テキスト: 選択リストにない価値

ログイン送信アクションアイテムを作成してください

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

1. コンテンツエディターで /system/Settings/Forms/Submit Actionsに移動し、Submit Actionアイテムを挿入し、名前をLogin User。

2. 以下の値でフィールドを更新します:

   フィールド

   価値

   モデルタイプ

   ValueProviderSample.SubmitActions.LoginUser

   エラーメッセージ

   ログインに失敗しました!

   編集者

   LoginUser

ログアウト作成

ログアウトを作成するには、アクションアイテムを送信してください:

1. Submit Actionsフォルダに送信アクションアイテムを挿入し、Logout Userと名付けます。

2. 以下の値でフィールドを更新します:

   フィールド

   価値

   モデルタイプ

   ValueProviderSample.SubmitActions.LogoutUser

   エラーメッセージ

   ログアウトに失敗しました!

   !注アイテムは忘れずに保存してください。

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

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

1. Sitecore LaunchpadからSitecoreフォームアプリケーションを開きます。

2. フォームを作成し、以下のセクションを追加してください:

   区間名

   CSSクラス

   ログインセクション

   form-group col-md-6

   サブミットセクション

   form-group col-md-12

3. 以下のフィールドを追加してください:

   種類

   レーベル

   フィールド名

   セクション

   単行テキスト

   ユーザー名

   ユーザー名

   ログインセクション

   パスワード

   パスワード

   パスワード

   ログインセクション

   送信ボタン

   ログイン

   ログイン

   サブミットセクション

4. ログインボタンに「 ログインユーザー 提出」アクションを追加してください。フォームフィールドを適切にマッピングしてください。次に **「OK」**をクリックします。

   

5. フォームを保存して、Login Formと名付けてください。

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

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

1. 空白のフォームを作成しましょう。
2. フォーム要素ペインから、送信ボタンをページにドラッグします。
3. 送信ボタンのプロパティを以下の値で編集してください:
   • ラベル
   • フィールド名
   • CSSクラス
     btn-link(リンク)
4. 「 アクションの提出 」セクションで、 ログアウトユーザーの 送信アクションを追加してください。
5. 名前 Logout Formでフォームを保存してください。

ウェブページにフォームを追加してください

Sitecoreフォームアプリケーションを使えば、新しいフォームを簡単に作成したりテンプレートを使ったりできます。コンテンツエディターとエクスペリエンスエディターの両方で、ウェブページにフォームを挿入できます。まず、デフォルトのサンプルレイアウトをMVCレイアウトに置き換え、その後ウェブページにフォームを挿入できます。

ウェブページにフォームを追加するには:

1. sitecore/Content/Homeに移動し、サンプルアイテムを挿入します。名前をLogin。
2. LoginアイテムのデフォルトのレイアウトをMVCレイアウト(前の攻略で作成したMVCレイアウト)に変更してください。
3. すべてのサンプルコントロールを削除し、MVCフォームレンダリングを追加します。メインのプレースホルダーに追加します。
4. 追加したMVCフォームレンダリングを編集し、 そのデータソース を Login Formに更新してください。
5. アイテムを保存して公開してください。

ログインページを閲覧できます。 次のウォークスルー でバリュープロバイダーの設定方法を学びましょう。