Asp.net-core-log-in-and-log-out

提供:Dev Guides
移動先:案内検索

ASP.NET Core-ログインとログアウト

この章では、ログインおよびログアウト機能について説明します。 ログアウトは、ログインに比べて実装がかなり簡単です。 いくつかのリンクを持つUIを構築したいので、レイアウトビューに進みましょう。 これにより、サインインしているユーザーがログアウトでき、ユーザー名も表示されます。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width"/>
       <title>@ViewBag.Title</title>
   </head>

   <body>
      <div>
         @DateTime.Now
      </div>

      <div>
         @RenderBody()
      </div>

   </body>
</html>
  • 匿名ユーザーの場合、ログインリンクが表示されます。
  • このUIを構築するために必要なすべての情報は、Razorビューコンテキストから入手できます。
  • まず、レイアウトビューに名前空間 System.Security.Claims を追加しましょう。
@using System.Security.Claims
<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width"/>
      <title>@ViewBag.Title</title>
   </head>

   <body>
      <div>
         @if (User.IsSignedIn()) {
            <div>@User.GetUserName()</div>
            <form method = "post" asp-controller = "Account" aspcontroller = "Logout">
               <input type = "submit" value = "Logout"/>
            </form>
         } else {
            <a asp-controller = "Account" asp-action = "Login">Login</a>
            <a asp-controller = "Account" asp-action = "Register">Register</a>
         }
      </div>

      <div>
         @DateTime.Now
      </div>

      <div>
         @RenderBody()
      </div>

   </body>
</html>
  • すべてのRazorビュー内で使用可能なUserプロパティがあり、ログインしているユーザーの名前を表示するUIを作成します。 拡張メソッド IsSignedIn もここで利用できます。
  • このメソッドを呼び出すことができます。trueが返された場合、ここにユーザー名を表示するためのマークアップを配置し、ログアウトボタンを表示できます。
  • ユーザーがサインインしている場合、ヘルパーメソッド GetUserName を使用してユーザーのユーザー名を表示できます。
  • フォーム内にログアウトボタンを作成し、Webサーバーに投稿する必要があります。 これは、単純なGET REQUESTを許可してユーザーを許可する場合、特定の好ましくない条件を作成するため、実行する必要があります。
  • これを強制的に投稿します。ユーザーがこのフォームを送信すると、必要な作業は、Logoutアクションを実行するだけです。これはAccountControllerを介して実装し、ユーザーをログアウトします。
  • ユーザーがサインインしておらず、匿名ユーザーがいる場合は、AccountController、具体的にはLoginアクションに移動するリンクを表示する必要があり、Loginというテキストを表示できます。
  • また、新規ユーザーが登録して直接登録ページに移動するためのリンクを追加する必要があります。

次のプログラムのように、AccountControllerに移動してログアウトアクションを最初に実装しましょう。

[HttpPost]
public async Task<IActionResult> Logout() {
   await _signManager.SignOutAsync();
   return RedirectToAction("Index", "Home");
}
  • このアクションは、HttpPostにのみ応答します。 これは非同期アクションです。 Identityフレームワークで別の非同期メソッドを呼び出す必要があります。
  • IActionResultのタスクを返すことができ、アクションの名前はLogoutです。
  • ログアウトするために必要なことは、* SignInManagerのSignOutAsync *メソッドを待つことだけです。
  • ユーザーコンテキストが変更されました。これで匿名ユーザーができました。 ビューはホームページにリダイレクトされ、従業員のリストに戻ります。

次に、ログイン機能を構築していきましょう。 ここでは、HttpGetリクエストに応答してログインに使用できるフォームを表示するアクションと、HttpPostリクエストに応答するアクションのペアが必要になります。

まず、ログインは登録とは非常に異なるため、ログインデータを取得する新しいViewModelが必要です。 そこで、新しいクラスを追加して、 LoginViewModel と呼びましょう。

public class LoginViewModel {
   public string Username { get; set; }

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

   [Display(Name ="Remember Me")]
   public bool RememberMe { get; set; }
   public string ReturnUrl { get; set; }

}
  • ユーザーがログインするとき、ユーザー名、パスワードなどの情報を提供する必要があります。
  • 3番目の情報はログインUIでなければなりません。 これらには、「私を覚えておいてください」という小さなチェックボックスが付いています。 これは、セッションCookieを使用するか、より永続的なCookieを使用するかの選択です。
  • この機能を許可するために、ブールプロパティ RememberMe を追加し、Display注釈を使用しました。 ラベルを作成すると、 Remember Meというテキストがスペース付きで表示されます。
  • このViewModelの一部として実際に必要な最後の情報は、ReturnUrlを格納するプロパティを持つことです。

次のプログラムに示すように、Getリクエストに応答するLoginアクションを追加しましょう。

[HttpGet]
public IActionResult Login(string returnUrl = "") {
   var model = new LoginViewModel { ReturnUrl = returnUrl };
   return View(model);
}
  • クエリ文字列にあるパラメーターとして returnUrl を使用します。

  • returnUrl は常に存在するとは限りません。 デフォルトとして空の文字列を用意しましょう。

    *Views→Account* フォルダーに新しいMVCビューページを追加して、新しいビューを作成します。

ログインログアウト新しいアイテムの追加

中央のペインで、MVCビューページを選択してLogin.cshtmlを呼び出し、[追加]ボタンをクリックします。 Login.cshtmlファイルに次のコードを追加しましょう。

@model LoginViewModel
@{
   ViewBag.Title = "Login";
}
<h2>Login</h2>

<form method = "post" asp-controller = "Account" asp-action = "Login"
   asp-route-returnurl = "@Model.ReturnUrl">
      <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 = "RememberMe"></label>
         <input asp-for = "RememberMe"/>
         <span asp-validation-for = "RememberMe"></span>
      </div>
   <input type = "submit" value = "Login"/>
</form>
  • このログインビューでは、ページのタイトルをLoginに設定し、 AccountLogin アクションに投稿するフォームがあります。
  • タグヘルパー asp-route-returnurl を使用して、フォームがポストバックするURLにReturnUrlがあることを確認する必要があります。
  • そのReturnUrlをサーバーに送り返す必要があります。これにより、ユーザーが正常にログインした場合に、目的の場所に送信できるようになります。
  • asp-route-、id、またはreturnurlの後に追加するものはすべて、そこにあるものは何でも、URLパスまたはクエリ文字列パラメーターのいずれかで要求に送られます。
  • ValidationSummary と、ユーザー名、パスワード、RememberMeの入力があり、[送信]ボタンがあります。

`* AccountController *、およびPostアクションを実装します。 HttpPostに応答するこのアクション。 Identityフレームワークを呼び出してタスクまたはIActionResultを返す必要があるため、これはAsyncメソッドになります。

[HttpPost]
public async Task<IActionResult> Login(LoginViewModel model) {
   if (ModelState.IsValid) {
      var result = await _signManager.PasswordSignInAsync(model.Username,
         model.Password, model.RememberMe,false);

      if (result.Succeeded) {
         if (!string.IsNullOrEmpty(model.ReturnUrl) && Url.IsLocalUrl(model.ReturnUrl)) {
            return Redirect(model.ReturnUrl);
         } else {
            return RedirectToAction("Index", "Home");
         }
      }
   }
   ModelState.AddModelError("","Invalid login attempt");
   return View(model);
}
  • これをLoginと呼び、LoginViewModelを受け取ることを期待しています。
  • ModelStateが有効かどうかを確認する必要があります。 有効な場合は、SignInManagerでAPIを呼び出してユーザーをサインインします。
  • PasswordSignInAsync メソッドは結果を返し、結果が成功した場合、ユーザーが正常にログインしたことがわかります。
  • リターンURLもあります。 有効なローカルURLである場合、戻りURLにリダイレクトされます。
  • ユーザーがログインしたばかりで特定の場所がない場合、HomeControllerのIndexアクションにユーザーをリダイレクトします。
  • ユーザーが無効なパスワードまたは無効なユーザー名を提供する場合があります。 また、無効なログインの試行がある場合にプロンプ​​トを出すモデルエラーを追加する必要があります。 これにより、ユーザーは何かがうまくいかなかったかどうかを知ることができます。

ここですべてを保存して、アプリケーションを実行しましょう。

ログイン登録

ログインと登録のリンクができました。 [ログイン]リンクをクリックします。

ログイン登録リンク

*Username* と *Password* を指定して前の章で作成したユーザーでログインし、 *Remember Me* チェックボックスをオンにします。

「ログイン」ボタンをクリックすると、ローカルホストのパスワードを保存するかどうかを尋ねるブラウザが表示されます。 [はい]ボタンをクリックします。

ログアウト

ここで、[ログアウト]ボタンをクリックしてログアウトします。

ログアウトボタン

匿名ユーザーとして、従業員の詳細を編集してみましょう。

匿名ユーザー

これで、* Loginビュー*にリダイレクトされたことを確認できます。

ユーザー名とパスワードを使用してログインし、Remember Meチェックボックスをオンにします。

Remember Meをチェック

次に、[ログイン]ボタンをクリックします。

ログインボタン

これで、編集するURLにリダイレクトされていることがわかります。 これは、リターンURLを適切に処理したためです。