はじめに
概要
前回記事ではASP.NET Coreの開発環境構築・Hello Worldを表示するWebアプリケーションを作成しました。
今回はASP.NET Coreを用いMVCアプリケーションを開発したいと思います。
本記事のスコープ
- ASP.NET Core MVCアプリ開発
- SQLite連携
- ユーザーアカウント認証
ASP.NET Core MVCアプリ開発
プロジェクト作成
１．Visual Studioを開く
２．[新しいプロジェクトの作成]を選択する
３．[ASP.NET Core Web アプリケーション]を選択する
４．任意のプロジェクト名を入力し、[作成]を選択する
５．認証の項目の[変更]を選択する
６．[個別のユーザーアカウント]・[アプリ内のストアユーザーアカウント]・[OK]を選択する
７．[Web アプリケーション(モデルビューコントローラー)]・[作成]を選択する
SQLiteソリューショのインストール
１．[Visual Studio]-[ツール]-[NuGetパッケージマネージャ]-[ソリューションのNuGetパッケージの管理]を開く
２．[Microsoft.EntityFrameworkCore.Sqlite]を選択する
３．インストールするプロジェクトを選択する
４．[インストール]を選択する
SQLiteの使用準備
１．Startup.csの下記箇所を変更する
services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));
２．DBへの接続情報を管理しているappsettings.jsonの下記箇所を変更する
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Delete2-9D2AC501-24A9-42B7-9482-DB0EC43700ED;Trusted_Connection=True;MultipleActiveResultSets=true"
"DefaultConnection": "Data Source=sample.db"
３．[Visual Studio]-[ツール]-[NuGetパッケージマネージャ]-[パッケージマネージャコンソール]を開く
４．下記２つのコマンドを実行する
PM> Add-Migration Initial
PM> Update-Database
コントローラの作成
１．[Controller右クリック]-[追加]-[コントローラ]を選択する
２．[MVCコントローラー・空]・[追加]を選択する
３．[コントローラークラス-空]を選択する
４．名前を[SampleController.cs]とする
５．[追加]を選択する
６．今回はログインせず開けるAuthNotRequiredと、ログイン必須なAuthRequiredの２画面を作成する。そのため、SampleControllerに２つの画面を返すメソッドをそれぞれ定義する。
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フォルダを作成する。
２．[Sample]フォルダを右クリックし[追加]-[ビュー]を選択し、画面ファイルを作成する。
前述の通り２画面作成するためAuthNotRequired.cshtmlとAuthRequired.cshtmlを作成する。
３．ログイン不要な画面のソースは作成する。
コントローラ作成時に変数 ViewData["Message"] にメッセージを格納したが、下記のよう記述する事で画面上に表示できる。
<div class="text-center">
<h1>@ViewData["Message"]</h1>
</div>
４．ログインが必要な画面のソースを作成する。
1行の記述はC#で言うところのusingで、本モデルを読み込む事でログイン情報を扱えるようになる。
そのため５行目の様に @(User.Identity.Name) と短い記述でログイン情報が表示できる。
@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 にアクセスしてみます。
下画像の様にソースに記載したメッセージが表示されれば成功です。
次にログインが必要な画面 localhost:44380/Sample/AuthRequired にアクセスしてみます。ログインしていないため、ログイン画面に飛ばされれば成功です。
[Register as a new user]を選択してアカウントを作成してみましょう。
ご自身のEmail・パスワードを入力しRegisterを選択します。
[Click here to confirm your account]を選択しアドレスの確認処理をします。
最後に作成したアカウントでログインし、再度ログインが必要な画面にlocalhost:44380/Sample/AuthRequired にアクセスしてみます。
ログイン画面に飛ばされず、ソースに記載したメッセージと登録したメールアドレスが表示されれば成功です。
