Aktualisieren der Routen von Identity in ASP.NET Core 7
Sie fragen sich auch, wie Microsoft so seltene Dinge benennen kann? Ich habe immer gedacht, dass sie es nicht wirklich gut machen, aber nun ja, das ist es!
Das Gute daran ist, dass Sie während der Entwicklung so ziemlich alles ändern können!
Sind Sie schon einmal auf eine Seite gelangt und haben sofort erkannt, dass es sich um ein ASP.NET-Webprojekt handelt, wenn Sie nur den Registrierungs- oder Anmeldevorgang durchführen?
Das ist mir schon oft passiert, weil Sie in dem von Ihnen erstellten Projekt standardmäßig diese URLs haben, um den Anmelde- und Registrierungsprozess durchzuführen (und Sie haben auch viele andere Seiten).
Dieses Tutorial zeigt also eine Möglichkeit, diese URLs zu aktualisieren, damit sie in Ihrem Projekt schöner aussehen!!
Standardverhalten
Wenn wir ein Blazor-Projekt erstellen und beschließen, es mit Identity zu verwenden, wird etwa Folgendes angezeigt:
Und wenn wir versuchen, den Anmelde- oder Registrierungsvorgang durchzuführen, gehen wir entweder zu /Identity/Account/Login oder zu /Identity/Account/Register.
Was aber, wenn ich Ihnen sage, dass Sie diese URLs tatsächlich so aktualisieren können, dass sie anders sind?
Gerüst für die Seiten Login und Register.
Um diese Seiten zu aktualisieren, blendet Microsoft sie aus, aber Sie können sie schnell einbinden und die gewünschten Änderungen vornehmen!
Dazu müssen Sie im Kontextmenü des Projekts auf und Add Scaffolded Item gehen, genau so:
Dann wird ein Modal angezeigt und Sie müssen Identity zweimal auswählen und auf Add klicken:
Danach erscheint ein weiteres Popup-Fenster, in dem Sie auswählen können, welche Seiten der gesamten Identität Sie aktualisieren möchten. Es gibt viele Seiten, die Sie aktualisieren können, aber wir konzentrieren uns auf Account/Login und Account/Register:
Lassen Sie es nun ein wenig arbeiten und schauen Sie dann im Projektmappen-Explorer nach. Dort werden Sie ein paar neue Dateien finden:
Bei diesen neuen Dateien handelt es sich um die Anmelde- und Registrierungsseite, die ASP.NET Ihrem Projekt hinzufügt, wenn Sie es zum Hinzufügen von Identität auswählen!
URLs werden aktualisiert
Wie Sie wahrscheinlich bemerkt haben, handelt es sich bei diesen Dateien um Razor-Dateien, da ihre Erweiterung cshtml ist. Daher verwenden wir lediglich eine Anweisung, um die URL der Seite zu aktualisieren:
@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" />
}
Wie Sie sehen, ist das meiste gleich, aber wenn Sie sich die allererste Zeile in der Klasse ansehen, habe ich das, was wir zuvor hatten, aktualisiert:
@page
zu
@page "/login"
Nun, das war einfach, nicht wahr? Machen wir nun einen kurzen Test, um zu sehen, ob es funktioniert.
Gehen wir zunächst zur Standardseite, die wir zunächst haben, um zu prüfen, ob diese noch funktioniert:
Was nicht der Fall ist! Also lasst uns jetzt unsere neue URL testen, die /login lautet:
Und es funktioniert!!
Jetzt machen wir dasselbe für das Register, wir aktualisieren seine Seite und fügen den gewünschten Pfad in der @page-Direktive hinzu und machen einen Test!
@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" />
}
Ich habe den oberen Teil mit @page "/login" aktualisiert und jetzt testen wir, ob es funktioniert:
Funktioniert auch!!
Das ist esIch hoffe, Sie haben gelernt, wie man diese URLs aktualisiert, vor allem, weil es bei manchen Projekten scheiße ist, wenn man die URLs auf eine bestimmte Art und Weise erstellt und dann die Identität anders aussieht, haha!
Wenn Sie etwas brauchen, twittern Sie mir einfach oder schicken Sie mir eine E-Mail und ich werde versuchen, Ihnen zu helfen!