ASP.NET Core-ユーザー登録

この章では、ユーザー登録について説明します。これで作業用のデータベースができました。アプリケーションにいくつかの機能を追加し始めましょう。また、アプリケーションを構成し、機能するデータベーススキーマがあります。アプリケーションのホームページに行きましょう。

ユーザー登録

F12キーを押して開発者ツールを開き、[編集]リンクをクリックします。以前は、編集リンクをクリックすると、MVCフレームワークはAuthorize属性の存在を検出し、ユーザーがログインしていないため401ステータスコードを返しました。

開発ツール

これで、構成ファイルから画面にメッセージが表示されることがわかります。

それでは、開発者ツールに行きましょう。

デベロッパーツールネットワーク

ブラウザが編集ページを要求し、MVCフレームワークがユーザーにこのリソースを表示する権限がないと判断したことがわかります。
そのため、MVCフレームワーク内のどこかで、401ステータスコードが生成されました。
Identityミドルウェアが準備できました。 Identityミドルウェアは、ユーザーに送信される401ステータスコードを確認し、それを302ステータスコードに置き換えます。これはリダイレクトステータスコードです。
Identityフレームワークは、ユーザーがこのリソースに到達する前にログインを試行する必要があることを認識しています。
アドレスバーで確認できるように、IdentityフレームワークはこのURLを指示しました—/Account/Login。
これは、これらのサービスとミドルウェアを登録する際のスタートアップ内の、Identityフレームワークで構成可能なエンドポイントです。設定できるさまざまなオプションがあり、オプションの1つはログインURLを変更することです。
デフォルトでは、URLは/Account/Loginになります。現在、アカウントコントローラーがないため、最終的には、アカウントコントローラーを作成し、ユーザーにログインを許可する必要があります。
ただし、ユーザーがログインする前に、サイトに登録し、ユーザー名とパスワードを保存する必要があります。
ログイン機能と登録機能の両方をアカウントコントローラーの一部にすることができます。

次に、Controllersフォルダーに新しいクラスを追加して、AccountControllerと呼びましょう。これは、MVCフレームワークのベースコントローラークラスから派生します。

using Microsoft.AspNet.Mvc;

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace FirstAppDemo.Controllers {
   public class AccountController : Controller {
   }
}

ユーザーがこのサイトに登録できる機能を設定する必要があります。
編集フォームに非常に似たものになるでしょう。
ユーザーが登録を希望する場合、必要な情報を入力できるフォームを最初に表示します。その後、このフォームをサイトにアップロードできます。
その後、この情報はデータベースに保存されます。

/account/registerに移動したときにビューを返すアクションを作成しましょう。

public class AccountController : Controller {
   [HttpGet]
   public ViewResult Register() {
      return View();
   }
}

調べる必要はありません。ユーザーは必要なすべての情報を提供します。そのビューのViewModelを構築する前に、ビューが表示する情報を決定する必要があります。また、ユーザーから受け取る必要がある情報を決定する必要がありますか？

AccountController.csファイルに新しいクラスを追加してこのシナリオのビューモデルを作成し、これをRegisterViewModelと呼びましょう。

次のプログラムに示すように、2回入力して両方のパスワードが一致することを確認して、ユーザー名、パスワード、およびユーザーConfirmPasswordを保持するプロパティを作成します。

public class RegisterViewModel {
   [Required, MaxLength(256)]
   public string Username { get; set; }

   [Required, DataType(DataType.Password)]
   public string Password { get; set; }

   [DataType(DataType.Password), Compare(nameof(Password))]
   public string ConfirmPassword { get; set; }
}

上記のクラスでは、このモデルの検証に役立ついくつかの注釈を見ることができます。ここにはユーザー名が必要です。データベーススキーマを見ると、ユーザー名を保持する列の長さは256文字です。

ユーザー名

ここでもMaxLength属性を適用します。
パスワードが必要になります。このパスワードの入力をレンダリングするときは、入力タイプを Type Password にして、文字が画面に表示されないようにします。
Confirm Password もDataType Passwordになり、追加のCompare属性があります。 ConfirmPasswordフィールドを、指定可能なこの他のプロパティであるPasswordフィールドと比較します。

必要なビューを作成しましょう。ビューに新しいフォルダーを追加してAccountと呼ぶ必要があるため、AccountControllerに関連するすべてのビューがこのフォルダーに追加されます。

アカウントコントローラー

ここで、アカウントフォルダーを右クリックし、[追加]→[新しいアイテム]を選択します。

MVCビューページ

中央のペインで、MVCビューページを選択してRegister.cshtmlを呼び出し、[追加]ボタンをクリックします。

Register.cshtmlファイルから既存のコードをすべて削除し、次のコードを追加します。

@model RegisterViewModel
@{
   ViewBag.Title = "Register";
}
<h1>Register</h1>

<form method = "post" asp-controller = "Account" asp-action = "Register">
   <div asp-validation-summary = "ValidationSummary.ModelOnly"></div>

   <div>
      <label asp-for = "Username"></label>
      <input asp-for = "Username"/>
      <span asp-validation-for = "Username"></span>
    </div>

   <div>
      <label asp-for = "Password"></label>
      <input asp-for = "Password"/>
      <span asp-validation-for = "Password"></span>
   </div>

   <div>
      <label asp-for = "ConfirmPassword"></label>
      <input asp-for = "ConfirmPassword"/>
      <span asp-validation-for = "ConfirmPassword"></span>
   </div>

   <div>
      <input type = "submit" value = "Register"/>
   </div>

</form>

これで、作成したばかりのRegisterViewModelとしてモデルを指定したことがわかります。
また、ViewBagを使用してこのページのタイトルを設定し、タイトルをRegisterにする必要があります。
また、ユーザー名、パスワード、および確認パスワードのフィールドを含むフォームを作成する必要があります。
検証の概要を表示するdivも含まれています。 ASP検証サマリーを使用する場合、サマリーに表示するエラーを指定する必要があります。
すべてのエラーをサマリー領域に表示するか、ValidationSummary.ModelOnlyと言うことができます。サマリー内のモデル検証から表示されるエラーは、モデルの特定のプロパティではなく、モデルに関連付けられた検証エラーのみですそのモデル。
言い換えると、ユーザーがユーザー名を入力しなくてもユーザー名が必要な場合、その特定のプロパティの検証エラーが発生します。
ただし、特定のプロパティに関連付けられていないモデルエラーを生成することもでき、このエラーはこのValidationSummaryに表示されます。
<form>タグ内には、ViewModelにあるすべての異なるフィールドのラベルと入力があります。
ユーザー名のラベル、ユーザー名の入力、およびユーザー名の検証メッセージが必要です。
ユーザーが入力する必要がある他の2つのプロパティは同じであり、ラベルと入力、パスワードの範囲とラベル、入力とConfirmPasswordの範囲があります。
PasswordヘルパーとConfirmPasswordの入力タイプを指定する必要はありません。タグヘルパーの asp は、その入力タイプをパスワードとして必ず設定するためです。
最後に、*登録*というボタンが必要です。ユーザーがこのボタンをクリックすると、フォームがコントローラーに送信されます。

AccountControllerでは、HttpPost Registerアクションメソッドも実装する必要があります。 AccountControllerに戻って、次のRegisterアクションを追加します。

[HttpPost]
public IActionResult Register (RegisterViewModel model) {
}

このアクションメソッドは、IActionResultを返します。これはRegisterViewModelを受け取ります。ここで、ユーザーが有効であることを確認するためにIdentityフレームワークとやり取りし、Identityフレームワークにそのユーザーを作成するように指示し、アカウントを作成したばかりなのでログインしてください。次の章では、これらすべての手順の実装について見ていきます。

Asp.net-core-user-registration

ASP.NET Core-ユーザー登録