【初心者向け】ASP.NET MVC5 ログイン機能の実装方法
ASP.NET MVC5 プロジェクト作成
使用ツールについて
・Visual Studio Community 2019
こちらでダウンロード可能です。
プロジェクトの作成
・VisualStudioを起動し、「新しいプロジェクトの作成」をクリックします。
・ASP.NET Webアプリケーション(.NET Framework)を選択しプロジェクト名を入力します。
・プロジェクト名、プロジェクトの格納場所を決めて、「作成」をクリックします。
(場所は特に指定がなければデフォルトのままでOK。)
※プロジェクト名は自由ですが、私はMvc5LoginSample1として、この先のサンプルコードも進めていきます。もしMvc5LoginSample1でない場合は、この先のサンプルコードでMvc5LoginSample1と書かれた箇所は、ご自身で決めたプロジェクト名に書き換えてください。
・「MVC」を選択して、「作成」をクリックします。
その後、画面右のソリューションエクスプローラーに
初期状態として以下のようなプロジェクトが出来上がります。
認証・承認の設定
Web.configの修正
まずは認証したユーザーのみWebアプリの機能を使用できるように
以下のWeb.configファイルを修正します。
<system.web>から</system.web>内に
「認証の設定」の部分と「承認の設定」を追加します。
// ... 略
<system.web>
// ... 略
<!-- 認証の設定 -->
<authentication mode="Forms">
<forms loginUrl="/Auth/Login" />
</authentication>
<!-- 承認の設定 -->
<authorization>
<deny users="?" />
</authorization>
</system.web>
// ... 略今回のサンプルでは以下のように設定します。
認証の設定で、ログイン画面のURLを/Auth/Loginに設定し、
承認の設定で、未ログインユーザーはすべてのリソースに対してアクセス権限がなし(ログイン画面以外はアクセスできない)
Modelの作成
Modelクラスの追加方法
次にMVCのデータを扱う部分のModelを作成します。
プロジェクトの「Model」⇒「追加」⇒「クラス」をクリックします。
ファイル名は AuthModelにして、「追加」をクリックします。
Modelの編集
先ほど作成したクラスを以下のように修正します。
1行目のusingディレクティブの部分と、
AuthModel内の変数部分(7行目から13行目)を追加します。
using System.ComponentModel.DataAnnotations;
namespace Mvc5LoginSample1.Models
{
public class AuthModel
{
[Display(Name = "ユーザーID")]
[Required(ErrorMessage = "ユーザーIDは必須入力です。")]
public string Id { get; set; }
[Display(Name = "パスワード")]
[Required(ErrorMessage = "パスワードは必須入力です。")]
public string Password { get; set; }
}
}今回、認証に最低限必要な項目(ユーザーID、パスワード)の2項目を
クラス内の変数に用意します。
アノテーションについて
[Display(Name = "ユーザーID")]
[Required(ErrorMessage = "ユーザーIDは必須入力です。")]変数宣言している上に上記のようなコードが書かれています。
これをアノテーションと言います。
今回、DisplayとRequiredを設定しました。
Displayに関しては、この後のViewの作成でも紹介しますが、
簡単に言うと画面上で表示する項目名の設定をここでしています。
Requiredは、入力チェック時の必須入力チェックです。
MVCでない場合、入力チェックのコードを別に書かないといけませんが、
MVCではアノテーションを設定するだけで必須、文字数オーバーなどの基本的な入力チェックを自動でやってくれます。
またErrorMessageを設定しておくことで、自由にエラーメッセージの設定することができます。
Viewの作成
Viewファイルの追加方法
・プロジェクトの「View」⇒「追加」⇒「新しいフォルダ」をクリックして、
「View」内に「Auth」フォルダを作成します。
項目の名前を指定する子画面が表示されるので、Loginと入力し、「OK」をクリックします。
ログイン画面作成
先ほど作成したLogin.cshtmlの内容を以下の通りに修正します。
@model Mvc5LoginSample1.Models.AuthModel
@{
ViewBag.Title = "ログイン";
}
<h2>@ViewBag.Title</h2>
@using (@Html.BeginForm())
{
<div class="form-item">
@Html.LabelFor(model => model.Id)
@Html.TextBoxFor(model => model.Id)
</div>
<div class="form-item">
@Html.LabelFor(model => model.Password)
@Html.PasswordFor(model => model.Password)
</div>
<div class="button-panel">
<input type="submit" class="button" value="ログイン" />
</div>
<br />
<label style="color:#ff0000">@Html.ValidationSummary()</label>
}Modelクラスの作成時にDisplayのアノテーションを設定しましたが、
上記の10、14行目でアノテーションに設定した項目名が表示されます。
本来、htmlだけであれば、以下のように書きますが、
アノテーションで設定することでView側で項目名を書く必要性がなくなります。
<div class="form-item">
<Label>ユーザーID</label>
@Html.TextBoxFor(model => model.Id)
</div>
<div class="form-item">
<Label>パスワード</label>
@Html.PasswordFor(model => model.Password)
</div>ヘッダー部の編集(ログイン/ログアウト リンク追加)
次にページのヘッダー部にログインしていない時はログイン、ログイン中はログアウトと表示されるように
「Views」⇒「Shared」⇒「_Layout.cshtml」を修正します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("ログインsample", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("ホーム", "Index", "Home")</li>
<li>@Html.ActionLink("詳細", "About", "Home")</li>
<li>@Html.ActionLink("問い合わせ", "Contact", "Home")</li>
</ul>
@if (Request.IsAuthenticated)
{
<ul class="nav navbar-nav navbar-right">
<li>@Html.ActionLink("ログアウト", "Logout", "Auth")</li>
</ul>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>@Html.ActionLink("ログイン", "Login", "Auth")</li>
</ul>
}
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - マイ ASP.NET アプリケーション</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>20行目は、ヘッダー部のタイトル部分です。
デフォルトのままだと作った感じがしないので、ひとまず「ログインsample」にしました。
さて、大事なのは、28～39行目です。
28行目の判定で、ログインされている場合は、ログアウト処理を呼び出すリンクを表示、
ログインされていない場合は、ログイン処理を呼び出すリンクを表示しています。
Contollerの作成
Contollerクラスの追加方法
最後は実際にログイン処理とログアウト処理をする為のContollerクラスを作成します。
プロジェクトの「Contoller」を右クリック後、「追加」⇒「コントローラー」をクリックします。
「MVC5 コントローラー – 空」を選択し、「追加」をクリックします。
コントローラーの追加の子画面が表示されるので、AuthControllerと入力し、「追加」をクリックします。
using Mvc5LoginSample1.Models;
using System.Web.Mvc;
using System.Web.Security;
namespace Mvc5LoginSample1.Controllers
{
public class AuthController : Controller
{
/// <summary>
/// ログイン 表示
/// </summary>
/// <returns></returns>
[HttpGet]
public ActionResult Login()
{
return View();
}
/// <summary>
/// ログイン処理
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Login(AuthModel model)
{
// サンプルの為、ハードコーディング
if(model.Id == "test" && model.Password == "passwd")
{
// ユーザー認証 失敗
FormsAuthentication.SetAuthCookie(model.Id, true);
return RedirectToAction("Index", "Home");
}
else
{
// ユーザー認証 失敗
this.ModelState.AddModelError(string.Empty, "指定されたユーザー名またはパスワードが正しくありません。");
return this.View(model);
}
}
/// <summary>
/// ログアウト処理
/// </summary>
/// <returns></returns>
public ActionResult Logout()
{
FormsAuthentication.SignOut();
return RedirectToAction("Auth","Index");
}
}
}ログイン処理は、19～40行目に該当します。
本来はデータベースに接続して認証しますが、
今回は固定のIDとパスワードで認証します。
ユーザーID：test
パスワード：passwd
この辺りは、お好きなユーザーIDとパスワードに変更して頂いて全然OKです！
まとめ
さて、ここまでできたら、さっそく実行してみましょう！
(Visual Studioでの実行は、メニューバーの[デバッグ]→[デバッグなしで実行] または Ctrl + F5キーです。)
【実行結果】
ログイン前は、ヘッダーの右部にあるリンクは、ログインになっています。
ユーザーIDとパスワードを入力後、ログインボタンをクリック！
ログインが成功して、トップページに遷移されました。
ログイン後は、ヘッダーの右部にあるリンクが、ログアウトに変更されましたね。
では、ログアウトのリンクをクリックしてましょう！
ログアウトされて、ログイン画面に遷移されました！
ちなみにバリデーションチェックの確認として、
ユーザー名とパスワードを入力せずにログインボタンをクリックしてみます。
すると、Modelクラスに設定した必須入力エラーと、
コントローラー側で設定した認証に失敗した際のエラーが表示されたことを確認できました。
以上で、ASP.NET MVC5でのログイン機能の実装方法を解説しました。
少し長めでしたが、まずはソースコードを丸パクリしても良いので、
実際にログイン画面を自分で作ってみてください。
