--- title: "ウォークスルー:ログインページの作成" slug: "walkthrough--creating-a-login-page" abstract: "ログイン・ログアウトを可能にするフォームページの作成方法を学びましょう。" --- # ウォークスルー:ログインページの作成 このトピックでは、訪問者がエクストラネットでログイン・ログアウトできるフォームページの作成方法を説明します。このウォークスルーは「 [フォームの事前入力」シリーズ](https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/prefilling-forms-walkthrough-series.html "Prefilling forms walkthrough series")の第2部です。このウォークスルーの手順を実行するには、まず「 [ウォークスルー:レジスター作成」ページ](https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/walkthrough--creating-a-register-page.html "Walkthrough: Creating a register page")を完了する必要があります。 このウォークスルーでは、 - ログインとログアウトのサブミッションアクションクラスを作成します - ログインアクションエディターのコントロールを作成する - ログイン送信アクションアイテムを作成してください - ログアウト作成:アクションアイテムを送信 - ログインフォームを作成する - ログアウトフォームを作成する - ウェブページにフォームを追加してください ## ログインとログアウトのサブミッションアクションクラスを作成します ログインおよびログアウトを作成するには、アクションクラスを提出します: 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をウェブサイトのフォルダにデプロイしてください:YourInstance/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 テキストパラメータ ![Add parameters]() 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」**をクリックします。 ![The login form]() 5. フォームを保存して、*Login Form*と名付けてください。 ## ログアウトフォームを作成する ログアウトフォームを作成するには: 1. 空白のフォームを作成しましょう。 2. **フォーム要素**ペインから、送信ボタンをページにドラッグします。 3. 送信ボタンのプロパティを以下の値で編集してください: - **ラベル**:ログアウト - **フィールド名**:送信ボタン - **CSSクラス**:btn btn-link(リンク) 4. 「 **アクションの提出** 」セクションで、 **ログアウトユーザーの** 送信アクションを追加してください。 5. 名前 *Logout Form*でフォームを保存してください。 ## ウェブページにフォームを追加してください Sitecoreフォームアプリケーションを使えば、新しいフォームを簡単に作成したりテンプレートを使ったりできます。コンテンツエディターとエクスペリエンスエディターの両方で、ウェブページにフォームを挿入できます。まず、デフォルトのサンプルレイアウトをMVCレイアウトに置き換え、その後ウェブページにフォームを挿入できます。 ウェブページにフォームを追加するには: 1. *sitecore/Content/Home*に移動し、サンプルアイテムを挿入します。名前を*Login*。 2. LoginアイテムのデフォルトのレイアウトをMVCレイアウト([前の攻略](https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/walkthrough--creating-a-register-page.html "Walkthrough: Creating a register page")で作成したMVCレイアウト)に変更してください。 3. すべてのサンプルコントロールを削除し、MVCフォームレンダリングを追加します。メインのプレースホルダーに追加します。 4. 追加したMVCフォームレンダリングを編集し、 **そのデータソース** を *Login Form*に更新してください。 5. アイテムを保存して公開してください。 ログインページを閲覧できます。 [次のウォークスルー](https://doc.sitecore.com/xp/ja/developers/92/sitecore-experience-manager/walkthrough--setting-up-a-value-provider-for-prefilling-forms.html "Walkthrough: Setting up a value provider for prefilling forms") でバリュープロバイダーの設定方法を学びましょう。 ![The finished login form]()