【初心者向け】ASP.NET MVC5 ログイン機能の実装方法

Webアプリ開発をする際、必ずと言っていいほど
必要になるのが許可されたユーザーだけにシステムを利用できるようにするログイン機能です。

この記事では、初心者でも手順通りやればできる
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>内に
「認証の設定」の部分と「承認の設定」を追加します。

今回のサンプルでは以下のように設定します。
認証の設定で、ログイン画面のURLを/Auth/Loginに設定し、
承認の設定で、未ログインユーザーはすべてのリソースに対してアクセス権限がなし(ログイン画面以外はアクセスできない)

 

Modelの作成

Modelクラスの追加方法

次にMVCのデータを扱う部分のModelを作成します。

プロジェクトの「Model」⇒「追加」⇒「クラス」をクリックします。

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

 

Modelの編集

先ほど作成したクラスを以下のように修正します。
1行目のusingディレクティブの部分と、
AuthModel内の変数部分(7行目から13行目)を追加します。

今回、認証に最低限必要な項目(ユーザーID、パスワード)の2項目を
クラス内の変数に用意します。

 

アノテーションについて

変数宣言している上に上記のようなコードが書かれています。
これをアノテーションと言います。

今回、DisplayとRequiredを設定しました。
Displayに関しては、この後のViewの作成でも紹介しますが、
簡単に言うと画面上で表示する項目名の設定をここでしています。

Requiredは、入力チェック時の必須入力チェックです。
MVCでない場合、入力チェックのコードを別に書かないといけませんが、
MVCではアノテーションを設定するだけで必須、文字数オーバーなどの基本的な入力チェックを自動でやってくれます。
またErrorMessageを設定しておくことで、自由にエラーメッセージの設定することができます。

 

Viewの作成

Viewファイルの追加方法

・プロジェクトの「View」⇒「追加」⇒「新しいフォルダ」をクリックして、
「View」内に「Auth」フォルダを作成します。

・作成した「Auth」フォルダ内にログイン画面用のViewファイルを作成する為、
「追加」⇒「MVC5 ビューページ(Razor)」をクリックします。

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

 

ログイン画面作成

先ほど作成したLogin.cshtmlの内容を以下の通りに修正します。

Modelクラスの作成時にDisplayのアノテーションを設定しましたが、
上記の10、14行目でアノテーションに設定した項目名が表示されます。
本来、htmlだけであれば、以下のように書きますが、
アノテーションで設定することでView側で項目名を書く必要性がなくなります。

 

ヘッダー部の編集(ログイン/ログアウト リンク追加)

次にページのヘッダー部にログインしていない時はログイン、ログイン中はログアウトと表示されるように
「Views」⇒「Shared」⇒「_Layout.cshtml」を修正します。

20行目は、ヘッダー部のタイトル部分です。
デフォルトのままだと作った感じがしないので、ひとまず「ログインsample」にしました。

さて、大事なのは、28~39行目です。
28行目の判定で、ログインされている場合は、ログアウト処理を呼び出すリンクを表示、
ログインされていない場合は、ログイン処理を呼び出すリンクを表示しています。

Contollerの作成

Contollerクラスの追加方法

最後は実際にログイン処理とログアウト処理をする為のContollerクラスを作成します。

プロジェクトの「Contoller」を右クリック後、「追加」⇒「コントローラー」をクリックします。

「MVC5 コントローラー – 空」を選択し、「追加」をクリックします。

コントローラーの追加の子画面が表示されるので、AuthControllerと入力し、「追加」をクリックします。

 

ログイン画面表示時

まずはログイン画面表示、ログイン処理、ログアウト処理含めてソースを紹介します。

ログイン画面表示のメソッドは、9~17行目にが該当します。

これで対応するViewクラス(ここでは先ほど作成したLogin.cshtml)を呼び出して、画面を表示しています。

ログイン処理

ログイン処理は、19~40行目に該当します。

本来はデータベースに接続して認証しますが、
今回は固定のIDとパスワードで認証します。

ユーザーID:test
パスワード:passwd

この辺りは、お好きなユーザーIDとパスワードに変更して頂いて全然OKです!

 

ログアウト処理

ログアウト処理は、42~50行目に該当します。

 

まとめ

さて、ここまでできたら、さっそく実行してみましょう!
(Visual Studioでの実行は、メニューバーの[デバッグ]→[デバッグなしで実行] または Ctrl + F5キーです。)

【実行結果】

ログイン前は、ヘッダーの右部にあるリンクは、ログインになっています。

ユーザーIDとパスワードを入力後、ログインボタンをクリック!

 

ログインが成功して、トップページに遷移されました。

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

ログアウトされて、ログイン画面に遷移されました!

ちなみにバリデーションチェックの確認として、
ユーザー名とパスワードを入力せずにログインボタンをクリックしてみます。

すると、Modelクラスに設定した必須入力エラーと、
コントローラー側で設定した認証に失敗した際のエラーが表示されたことを確認できました。

 

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

お問い合わせはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA