Actualización de las rutas de Identity en ASP.NET Core 7
¿Incluso te preguntas por qué los nombres de Microsoft son tan raros? Siempre he pensado que no lo hacen tan bien pero bueno, ¡eso es lo que es!
¡Lo bueno de esto es que prácticamente puedes cambiar todo mientras te desarrollas!
¿Alguna vez ha ingresado a una página y se ha dado cuenta instantáneamente de que se trata de un proyecto web ASP.NET con solo realizar el proceso de registro o inicio de sesión?
Me ha pasado mucho porque por defecto en el proyecto que creas, tienes estas URL para hacer el proceso de inicio de sesión y registro (también tienes muchas otras páginas).
¡Así que este tutorial muestra una manera de actualizar esas URL para que se vean mejor en tu proyecto!
Comportamiento predeterminado
Cuando estamos creando un proyecto Blazor y decidimos usarlo con Identity, se muestra algo como esto:
Y cuando intentamos realizar el proceso de inicio de sesión o registro, vamos a /Identity/Account/Login o /Identity/Account/Register.
Pero, ¿qué pasa si te digo que realmente puedes actualizar esas URL para que sean diferentes?
Armado de las páginas Login y Register
Para actualizar estas páginas, Microsoft las oculta, pero usted puede ampliarlas rápidamente y realizar los cambios que desee.
Para hacer eso, debes ir a Add Scaffolded Item en el menú contextual del proyecto, así:
Luego aparecerá un modal y tendrás que seleccionar Identity dos veces y hacer clic en Add:
Después de este, aparecerá otro modal, donde podrá seleccionar qué páginas de toda la identidad desea actualizar. Hay muchas páginas que puedes actualizar, pero nos centraremos en Account/Login y Account/Register:
Ahora déjelo funcionar por un momento y luego revise el Explorador de soluciones, encontrará algunos archivos nuevos:
¡Estos nuevos archivos son la página de inicio de sesión y registro que ASP.NET agrega a su proyecto cuando lo selecciona para agregar Identidad!
Actualizando URL
Como probablemente habrás notado, estos archivos son archivos razor, ya que su extensión es cshtml, por lo que solo usaremos una directiva para actualizar la URL de la página:
@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" />
}
Como puedes ver, la mayoría de las cosas son iguales, pero si echas un vistazo a la primera línea de la clase, actualicé lo que teníamos antes:
@page
a
@page "/login"
Bueno, eso fue fácil, ¿no? Ahora hagamos una prueba rápida para ver si funciona.
En primer lugar, vayamos a la página predeterminada que tenemos al principio, para comprobar si todavía funciona:
¡Lo cual no es así! Ahora vamos a probar nuestra nueva URL que es /login:
¡¡Y funciona!!
Ahora hagamos lo mismo con el registro, actualizamos su página y agregamos la ruta que queremos en la directiva @page ¡y hagamos una prueba!
@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" />
}
Actualicé la parte superior con @page "/login" y ahora probamos si funciona:
¡¡También funciona!!
Eso es todoEspero que hayas aprendido cómo actualizar estas URL, principalmente porque en algunos proyectos, cuando haces las URL de cierta manera y luego la identidad se ve diferente, ¡apesta jaja!
Si necesitas algo, envíame un tweet o envíame un correo electrónico e intentaré echarte una mano.