ASP.NET Coreでログイン認証付きMVCアプリ

## はじめに
### 概要
[前回記事](https://qiita.com/RioAki/items/24bd6af138c18b8691ed)ではASP.NET Coreの開発環境構築・Hello Worldを表示するWebアプリケーションを作成しました。
今回はASP.NET Coreを用いMVCアプリケーションを開発したいと思います。

### 本記事のスコープ
* ASP.NET Core MVCアプリ開発
* SQLite連携
* ユーザーアカウント認証

## ASP.NET Core MVCアプリ開発
### プロジェクト作成
１．Visual Studioを開く
２．[新しいプロジェクトの作成]を選択する
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/2671eef9-decc-f4bf-cebc-472e62644a7e.png)
３．[ASP.NET Core Web アプリケーション]を選択する
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/2fa4b0b2-c76a-7e12-e5e3-94144c640166.png)
４．任意のプロジェクト名を入力し、[作成]を選択する
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/8d5b7bc6-54ae-3a7e-8f54-aa380dd46288.png)
５．認証の項目の[変更]を選択する
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/e5bba4d6-c29c-5c2b-0d3e-9162fe090d06.png)
６．[個別のユーザーアカウント]・[アプリ内のストアユーザーアカウント]・[OK]を選択する
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/98c512fb-62f3-2835-3b90-d8bd3485ac93.png)
７．[Web アプリケーション(モデルビューコントローラー)]・[作成]を選択する
![a - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/3f4400af-334e-4925-958d-9a520f69e6bc.png)
### SQLiteソリューショのインストール
１．[Visual Studio]-[ツール]-[NuGetパッケージマネージャ]-[ソリューションのNuGetパッケージの管理]を開く
２．[Microsoft.EntityFrameworkCore.Sqlite]を選択する
３．インストールするプロジェクトを選択する
４．[インストール]を選択する
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/ceebf74b-5bd5-09c5-2dec-f09932696f2f.png)
### SQLiteの使用準備
１．Startup.csの下記箇所を変更する

```C#:Before
services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
```
```C#:After
services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));
```
２．DBへの接続情報を管理しているappsettings.jsonの下記箇所を変更する

```js:Before
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Delete2-9D2AC501-24A9-42B7-9482-DB0EC43700ED;Trusted_Connection=True;MultipleActiveResultSets=true"
```
```js:After
"DefaultConnection": "Data Source=sample.db"
```
３．[Visual Studio]-[ツール]-[NuGetパッケージマネージャ]-[パッケージマネージャコンソール]を開く
４．下記２つのコマンドを実行する
PM> Add-Migration Initial
PM> Update-Database

### コントローラの作成
１．[Controller右クリック]-[追加]-[コントローラ]を選択する
![スクリーンショット (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/a15ff23c-f48c-6488-3614-b187f3c9a79b.png)
２．[MVCコントローラー・空]・[追加]を選択する
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/5cbedba7-c524-1371-42fd-e843410b919b.png)
３．[コントローラークラス-空]を選択する
４．名前を[SampleController.cs]とする
５．[追加]を選択する
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/2195da3c-01b1-33fe-3573-8a33c2bba7b2.png)
６．今回はログインせず開けるAuthNotRequiredと、ログイン必須なAuthRequiredの２画面を作成する。そのため、SampleControllerに２つの画面を返すメソッドをそれぞれ定義する。


```C#:SampleController.cs
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;

namespace SampleApp.Controllers
{
    public class SampleController : Controller
    {
        // [AllowAnonymous]を付与するとログイン不要となる
        [AllowAnonymous]
        public IActionResult AuthNotRequired()
        {
            ViewData["Message"] = "ログインが不要なページです。";
            return View();
        }

        // [Authorize]を付与するとログイン必要となる
        [Authorize]
        public IActionResult AuthRequired()
        {
            ViewData["Message"] = "ログインが必要なページです。";
            return View();
        }
    }
}
```
### ビューの作成
１．画面ファイルを格納するフォルダを作成するため、[Views]フォルダを右クリックし[追加]-[新しいフォルダー]を選択する。今回は仮にSampleフォルダを作成する。
![スクリーンショット (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/1f753dde-bfe1-f7e6-650d-0ce40cb4dece.png)

２．[Sample]フォルダを右クリックし[追加]-[ビュー]を選択し、画面ファイルを作成する。
前述の通り２画面作成するためAuthNotRequired.cshtmlとAuthRequired.cshtmlを作成する。
![スクリーンショット (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/242f6d9e-5f7c-79bf-c269-b3318296ddb2.png)

３．ログイン不要な画面のソースは作成する。
コントローラ作成時に変数 ViewData["Message"] にメッセージを格納したが、下記のよう記述する事で画面上に表示できる。

```html:AuthNotRequired.cshtml
<div class="text-center">
    <h1>@ViewData["Message"]</h1>
</div>
```
４．ログインが必要な画面のソースを作成する。
1行の記述はC#で言うところのusingで、本モデルを読み込む事でログイン情報を扱えるようになる。
そのため５行目の様に @(User.Identity.Name) と短い記述でログイン情報が表示できる。

```html:AuthRequired.cshtml
@model Microsoft.AspNetCore.Identity.UI.V4.Pages.Account.Manage.Internal.IndexModel

<div class="text-center">
    <h1>@ViewData["Message"]</h1>
    <h1>Emailアドレス：@(User.Identity.Name)</h1>
</div>
```

## おわりに
それでは実際に動かしてみましょう。
実行ボタンを押し、ログイン不要な画面 localhost:44380/Sample/AuthNotRequired にアクセスしてみます。
下画像の様にソースに記載したメッセージが表示されれば成功です。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/b7d7a883-a892-b101-121b-a6c6872f80d4.png)
次にログインが必要な画面 localhost:44380/Sample/AuthRequired にアクセスしてみます。ログインしていないため、ログイン画面に飛ばされれば成功です。
[Register as a new user]を選択してアカウントを作成してみましょう。
![9 - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/1b5545b4-9da8-d176-58ce-79469966600c.png)
ご自身のEmail・パスワードを入力しRegisterを選択します。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/8fa3f8e4-ec0c-3eab-2717-69a77caf7772.png)
[Click here to confirm your account]を選択しアドレスの確認処理をします。
![11_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/d43c4b00-0b93-1326-e7ab-9bbe4472d106.png)
最後に作成したアカウントでログインし、再度ログインが必要な画面にlocalhost:44380/Sample/AuthRequired にアクセスしてみます。
ログイン画面に飛ばされず、ソースに記載したメッセージと登録したメールアドレスが表示されれば成功です。
![15_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463879/a2bb4fea-36b5-1f90-fdaa-083d6d36170a.png)