ASP.NET MVC5 プロジェクト作成

使用ツールについて

・Visual Studio Community 2019
こちらでダウンロード可能です。

visual_studio2019_download.png

プロジェクトの作成

・VisualStudioを起動し、「新しいプロジェクトの作成」をクリックします。
・ASP.NET Webアプリケーション(.NET Framework)を選択しプロジェクト名を入力します。
aspnetmvc5_login0.PNG

aspnetmvc5_login1.PNG

・プロジェクト名、プロジェクトの格納場所を決めて、「作成」をクリックします。
(場所は特に指定がなければデフォルトのままでOK。)

※プロジェクト名は自由ですが、私はMvc5LoginSample1として、この先のサンプルコードも進めていきます。もしMvc5LoginSample1でない場合は、この先のサンプルコードでMvc5LoginSample1と書かれた箇所は、ご自身で決めたプロジェクト名に書き換えてください。

aspnetmvc5_login2.PNG

・「MVC」を選択して、「作成」をクリックします。

aspnetmvc5_login3.PNG

その後、画面右のソリューションエクスプローラーに
初期状態として以下のようなプロジェクトが出来上がります。

aspnetmvc5_login4.PNG

認証・承認の設定

Web.configの修正

まずは認証したユーザーのみWebアプリの機能を使用できるように
以下のWeb.configファイルを修正します。

aspnetmvc5_login5_0.PNG

<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」⇒「追加」⇒「クラス」をクリックします。
aspnetmvc5_login6.PNG

ファイル名は AuthModelにして、「追加」をクリックします。

aspnetmvc5_login7.PNG

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」フォルダを作成します。

aspnetmvc5_login10.PNG

項目の名前を指定する子画面が表示されるので、Loginと入力し、「OK」をクリックします。
aspnetmvc5_login7_2.PNG

ログイン画面作成

先ほど作成した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」を右クリック後、「追加」⇒「コントローラー」をクリックします。
aspnetmvc5_login11.png

「MVC5 コントローラー – 空」を選択し、「追加」をクリックします。
aspnetmvc5_login12.png
コントローラーの追加の子画面が表示されるので、AuthControllerと入力し、「追加」をクリックします。
aspnetmvc5_login12_2.png

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キーです。)
visual_studio2019_debugnone.png

【実行結果】
aspnetmvc5_login_matome1.png
ログイン前は、ヘッダーの右部にあるリンクは、ログインになっています。
ユーザーIDとパスワードを入力後、ログインボタンをクリック!
aspnetmvc5_login_matome2.png
ログインが成功して、トップページに遷移されました。

ログイン後は、ヘッダーの右部にあるリンクが、ログアウトに変更されましたね。
では、ログアウトのリンクをクリックしてましょう!
aspnetmvc5_login_matome3.png
ログアウトされて、ログイン画面に遷移されました!

ちなみにバリデーションチェックの確認として、
ユーザー名とパスワードを入力せずにログインボタンをクリックしてみます。
aspnetmvc5_login_matome4.png
すると、Modelクラスに設定した必須入力エラーと、
コントローラー側で設定した認証に失敗した際のエラーが表示されたことを確認できました。

以上で、ASP.NET MVC5でのログイン機能の実装方法を解説しました。
少し長めでしたが、まずはソースコードを丸パクリしても良いので、
実際にログイン画面を自分で作ってみてください。