ASP.NET Core 7 での ID のルートの更新
Microsoft がなぜこれほど珍しい名前を付けたのか不思議に思いませんか?彼らは実際にはそれほど素晴らしいことをしていないのではないかといつも思っていますが、まあ、それがそういうものなのです！
これの良い点は、開発中にほとんどすべてを変更できることです。
ページにアクセスし、登録またはログイン プロセスを実行するだけで、これが ASP.NET Web プロジェクトであることにすぐに気づいたことはありますか?
作成したプロジェクトにはデフォルトでログインと登録プロセスを実行するための URL が設定されているため、これはよく起こります (他のページもたくさんあります)。
そこで、このチュートリアルでは、プロジェクトの見栄えを良くするために、これらの URL を更新する方法を説明します。
デフォルトの動作
Blazor プロジェクトを作成し、それを Identity で使用することにすると、次のように表示されます。
そして、ログインまたは登録プロセスを実行しようとすると、/Identity/Account/Login または /Identity/Account/Register のいずれかになります。
しかし、これらの URL を実際に異なるものに更新できると言ったらどうなるでしょうか?
Login および Register ページのスキャフォールディング
これらのページを更新するために、Microsoft はページを非表示にしますが、すぐにページを足場にして、必要な変更を行うことができます。
これを行うには、次のように、プロジェクトのコンテキスト メニューで Add Scaffolded Item に移動する必要があります。
次にモーダルがポップアップするので、Identity を 2 回選択して、Add をクリックする必要があります。
このモーダルの後に、さらに別のモーダルがポップアップ表示され、アイデンティティ全体から更新するページを選択できます。更新できるページはたくさんありますが、ここでは Account/Login と Account/Register に焦点を当てます。
ここで少し動作させてから、ソリューション エクスプローラーを確認すると、いくつかの新しいファイルが見つかります。
これらの新しいファイルは、ID を追加するためにプロジェクトを選択したときに、ASP.NET がプロジェクトに追加するログイン ページと登録ページです。
URLを更新しています
お気づきかと思いますが、拡張子が cshtml であるため、このファイルは razor ファイルです。そのため、ディレクティブを使用してページの URL を更新するだけです。
@page "/login"
@model LoginModel
@{
ViewData["Title"] = "Log in";
}
<h1>@ViewData["Title"]</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post">
<h2>Use a local account to log in.</h2>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
<div class="form-floating mb-3">
<input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="[email protected]" />
<label asp-for="Input.Email" class="form-label">Email</label>
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" />
<label asp-for="Input.Password" class="form-label">Password</label>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="checkbox mb-3">
<label asp-for="Input.RememberMe" class="form-label">
<input class="form-check-input" asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
<div>
<button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">Log in</button>
</div>
<div>
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h3>Use another service to log in.</h3>
<hr />
@{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
about setting up this ASP.NET application to support logging in via external services</a>.
</p>
</div>
}
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
@foreach (var provider in Model.ExternalLogins!)
{
<button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
</div>
</div>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
ご覧のとおり、ほとんどの内容は同じですが、クラスの最初の行を見ると、以前のものを更新しています。
@page
に
@page "/login"
まあ、簡単でしたね。それでは、簡単なテストを行って、それが機能するかどうかを確認してみましょう。
まず最初に、最初に表示されているデフォルトのページに移動して、それがまだ機能しているかどうかを確認してみましょう。
それは違います！それでは、新しい URL /login をテストしてみましょう。
そしてそれはうまくいきます!!
次に、レジスタに対して同じことを行い、そのページを更新して、必要なパスを @page ディレクティブに追加して、テストを行ってみましょう。
@page "/register"
@model RegisterModel
@{
ViewData["Title"] = "Register";
}
<h1>@ViewData["Title"]</h1>
<div class="row">
<div class="col-md-4">
<form id="registerForm" asp-route-returnUrl="@Model.ReturnUrl" method="post">
<h2>Create a new account.</h2>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
<div class="form-floating mb-3">
<input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="[email protected]" />
<label asp-for="Input.Email">Email</label>
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
<label asp-for="Input.Password">Password</label>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
<label asp-for="Input.ConfirmPassword">Confirm Password</label>
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div>
<button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
</form>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h3>Use another service to register.</h3>
<hr />
@{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
about setting up this ASP.NET application to support logging in via external services</a>.
</p>
</div>
}
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
@foreach (var provider in Model.ExternalLogins!)
{
<button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
</div>
</div>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
上部を @page "/login" で更新し、それが機能するかどうかをテストします。
も動作します!!
以上ですこの URL を更新する方法を学んでいただければ幸いです。主な理由は、一部のプロジェクトで URL を特定の方法で実行すると ID が違って見えるためです。それは最悪です (笑)。
何か必要なことがあれば、私にツイートするかメールを送ってください。手を差し伸べようと思います。