ASP.NETCore3.1 MVC でログイン機能とユーザ管理画面(CRUD)を実装してみた
どうも。てちこまです。
Blazorやりたい...けど業務的にまずはこっちやんなきゃってことで復習と備忘録のために
タイトル通りWebアプリケーション作ってみます。
Index
概要
ASP.NETCore3.1 MVC でログイン機能とユーザ管理画面があるWebページを作る
環境
Windows 10
Visual Studio 2019
ASP.NETCore 3.1
Entity FrameworkCore
手順
1.プロジェクトを作成する
VisualStudioで
ファイル＞新規作成＞プロジェクト
からASP.NETCore Webアプリケーションを作成しましょう。
Webアプリケーションの形式を選択する画面が現れますので今回はWebアプリケーション(モデルビューコントローラ)を選択します。
また右側の認証を「なし」から「個別のユーザアカウント」に変更してください。
以上設定終わり次第、「作成」を選択。
(実はログイン認証はこれで実装完了です。引くぐらい簡単です。）
2. ユーザ管理画面を実装しよう(CRUD)
このまま実行してもログイン機能やトップページは完成していますがそれだけでは味気ないのでユーザ管理画面的なものを実装してみましょう。
1.登録する内容のEntityを作成します。
ソリューションエクスプローラーを開いてModelsフォルダが存在することを確認しましょう。
Modelsフォルダの上で右クリックして
追加＞新しい項目＞クラス
名前は「Member」にしました。なんでもいいです。
Membersクラスが作成されますので以下追記します。格納したい内容の列を適当にいれてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
using System; using System.ComponentModel; namespace TestWebApplication.Models { public class Member { public int Id { get; set; } [DisplayName("名前")] public string Name { get; set; } [DisplayName("メールアドレス")] public string Email { get; set; } [DisplayName("誕生日")] public DateTime Birth { get; set; } [DisplayName("既婚")] public bool Married { get; set; } [DisplayName("自己紹介")] public string Memo { get; set; } } } |
デフォルトだと列名はNameやEmailになりますが上の例だと[DisplayName("XX")]で列名を変更しています。
こちらはオプションなのでなくても大丈夫です。
2.EntityとDBをつなげるDbContextを用意
ORMのためにModelsフォルダ内にDbContextを継承したクラスを作成します。
今回は名前を「MembersDbContext」にしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
using Microsoft.EntityFrameworkCore; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace TestWebApplication.Models { public class MembersDbContext:DbContext { public MembersDbContext(DbContextOptions<MembersDbContext> options) : base(options) { } public DbSet<Member> Members { get; set; } } } |
3. StartupにMembersDbContextを登録
DbContextの利用を明示的に設定する必要があります。
Startup.cs内のConfigureServicesメソッドに以下を追記しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
... public void ConfigureServices(IServiceCollection services) { services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer( Configuration.GetConnectionString("DefaultConnection"))); //MembersDbContextを利用する設定(追記する部分) services.AddDbContext<MembersDbContext>(options => options.UseSqlServer( Configuration.GetConnectionString("DefaultConnection"))); services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true) .AddEntityFrameworkStores<ApplicationDbContext>(); services.AddControllersWithViews(); services.AddRazorPages(); } ... |
とりあえずDefaultConnectionでDBを設定していますが独自にDB用意したい人はオプションの「利用するDBを設定する」を行い上記DefaultConnectionを変更してください。
4. Controllerの作成
Controllersフォルダを右クリックし
追加＞コントローラ
EntityFrameworkを使用したビューがあるMVCコントローラを選択した状態で追加をクリック。
表示された画面で
-
モデルクラスに先ほど作成したクラス(Memberクラス)
-
データコンテキストクラスに(MembersDbContext)
をセット -
追加を選択
Scaffolldingという機能で「MembersController」が自動で作成されます。
5. DBを作成(Migration)
PMコンソールを開きます。
ツール＞NuGetパッケージマネージャ＞パッケージマネージャコンソール
そこでこのコマンドを実行してください
|
1 2 |
Add-Migration Initial -Context MembersDbContext Update-Database |
6. 実行してみましょう
IIS Expressを選択しましょう。
デフォルトブラウザが立ち上がりトップページが開きます。
ログイン機能がヘッダーにあることが確認できると思います。
また、アドレス末尾に/Membersをつけて叩くとユーザ管理画面に飛びます。
お気付きかと思いますがこのままだとログイン機能素通りですべてのページにアクセス出来てしまいます。
認証を挟みたいページのコントローラに[Authorize]を追加すると認証なしでアクセスできなくなります。
HomeControllerの場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
... using Microsoft.AspNetCore.Authorization; ... [Authorize] //追記 public class HomeController : Controller { private readonly ILogger<HomeController> _logger; public HomeController(ILogger<HomeController> logger) { _logger = logger; } ... |
DBを設定する(オプション)
※このセクションは独自DBを用意した方のみ行ってください。
プロジェクト直下に存在するappsetting.jsonを開きましょう。
ConnectionString項目内に「MembersDbContext」で利用するDBを設定します。
以下で使用する接続文字列は
表示＞SQLServerオブジェクトエクスプローラーからSQLサーバを参照しプロパティから確認できます。
|
1 2 3 4 5 6 |
.... "ConnectionStrings": { "MembersDbContext": "接続文字列をここに書き込む", "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=xxx" }, ... |
まとめ
最初は.NETFrameworkは他のフレームワークに比べて楽と聞いてたので簡単かなーと思っていたのですが
- この情報は.NET?.NETCore?
- .NETCoreのバージョンが2.xの情報がいっぱい
- 情報が断片的過ぎてよくわかんない
- 認証を後から追加する方法よくわかんない
公式Documentの日本語訳がよくわかんない
で正しい情報に辿り着き難い印象を持ちました。初学者にはきちい。
とは言え、雰囲気は分かったのでいい感じにデザインいじったり意味のある機能を実装したりしてみたいですね。
アカウント登録時のアカウント有効化メールの送信や外部認証もやったので別の記事で書きます。
