ASP.NETCore3.1 MVC でログイン機能とユーザ管理画面(CRUD)を実装してみた

どうも。てちこまです。
Blazorやりたい...けど業務的にまずはこっちやんなきゃってことで復習と備忘録のために
タイトル通りWebアプリケーション作ってみます。

概要

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クラスが作成されますので以下追記します。格納したい内容の列を適当にいれてください。

デフォルトだと列名はNameやEmailになりますが上の例だと[DisplayName("XX")]で列名を変更しています。
こちらはオプションなのでなくても大丈夫です。

2.EntityとDBをつなげるDbContextを用意

ORMのためにModelsフォルダ内にDbContextを継承したクラスを作成します。
今回は名前を「MembersDbContext」にしました。

3. StartupにMembersDbContextを登録

DbContextの利用を明示的に設定する必要があります。
Startup.cs内のConfigureServicesメソッドに以下を追記しましょう。

とりあえずDefaultConnectionでDBを設定していますが独自にDB用意したい人はオプションの「利用するDBを設定する」を行い上記DefaultConnectionを変更してください。

4. Controllerの作成

Controllersフォルダを右クリックし

追加>コントローラ

EntityFrameworkを使用したビューがあるMVCコントローラを選択した状態で追加をクリック。

表示された画面で

  1. モデルクラスに先ほど作成したクラス(Memberクラス)

  2. データコンテキストクラスに(MembersDbContext)
    をセット

  3. 追加を選択

Scaffolldingという機能で「MembersController」が自動で作成されます。

5. DBを作成(Migration)

PMコンソールを開きます。

ツール>NuGetパッケージマネージャ>パッケージマネージャコンソール

そこでこのコマンドを実行してください

6. 実行してみましょう

IIS Expressを選択しましょう。

デフォルトブラウザが立ち上がりトップページが開きます。

ログイン機能がヘッダーにあることが確認できると思います。

また、アドレス末尾に/Membersをつけて叩くとユーザ管理画面に飛びます。

お気付きかと思いますがこのままだとログイン機能素通りですべてのページにアクセス出来てしまいます。

認証を挟みたいページのコントローラに[Authorize]を追加すると認証なしでアクセスできなくなります。

HomeControllerの場合

DBを設定する(オプション)

※このセクションは独自DBを用意した方のみ行ってください。

プロジェクト直下に存在するappsetting.jsonを開きましょう。

ConnectionString項目内に「MembersDbContext」で利用するDBを設定します。

以下で使用する接続文字列は

表示>SQLServerオブジェクトエクスプローラーからSQLサーバを参照しプロパティから確認できます。

まとめ

最初は.NETFrameworkは他のフレームワークに比べて楽と聞いてたので簡単かなーと思っていたのですが

  • この情報は.NET?.NETCore?
  • .NETCoreのバージョンが2.xの情報がいっぱい
  • 情報が断片的過ぎてよくわかんない
  • 認証を後から追加する方法よくわかんない
  • 公式Documentの日本語訳がよくわかんない

で正しい情報に辿り着き難い印象を持ちました。初学者にはきちい。

とは言え、雰囲気は分かったのでいい感じにデザインいじったり意味のある機能を実装したりしてみたいですね。

アカウント登録時のアカウント有効化メールの送信や外部認証もやったので別の記事で書きます。

てちこま

高卒後3年ニート。 起死回生でコン専入学。 資格とったり、アプリ作ったりしてました。 2020から新米WEBエンジニアになりました。

シェアする

コメントを残す

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

コメントする