ASP.NET Core2.1 Identityのログイン画面をカスタマイズ

ページを上書きする

ASP.NET Core Identityには、ログイン画面もライブラリ内に保持されており、デフォルトのまま利用するのであれば、ライブラリを取得するだけで利用することが可能です。
もし、デザインを変更したい場合には、Areas/Identity/Pages/Account/Login.cshtmlファイルを追加すれば、そちらが利用されるようになります。

Login.cshtml

@page
@model Identity.ExternalClaims.Pages.Account.LoginModel
@{ ViewData["Title"] = "LoginTest"; }

<div class="row">
    <div class="col-md-4">
        <section>
            <form name="loginForm" method="post">
                <div asp-validation-summary="All" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Input.Email"></label>
                    <input asp-for="Input.Email" class="form-control" id="inputEmail" />
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Input.Password"></label>
                    <input asp-for="Input.Password" class="form-control" id="inputPassword" />
                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <div class="checkbox">
                        <label asp-for="Input.RememberMe">
                            <input asp-for="Input.RememberMe" />
                            @Html.DisplayNameFor(m => m.Input.RememberMe)
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default" id="submitButton">Log in</button>
                </div>
            </form>
        </section>
    </div>
</div>

認証まわりのカスタマイズ方法を調べるのは、資料よりもマイクロソフトが提供しているサンプルコードをあたった方が理解が早いです。

追記

スキャフォールディングというコマンドラインのツールを使うと簡単に、必要なコードを生成してくれます。
カスタマイズしたいページのコードは、ツールを使って生成しましょう。

> dotnet aspnet-codegenerator identity -dc Vue2Spa.Data.ApplicationDbContext --files "Account.Register;Account.Login"