Atualizando rotas de identidade no ASP.NET Core 7
Mesmo se perguntando como a Microsoft nomeia coisas tão raras? Eu sempre pensei que eles não fazem isso tão bem, mas, bem, é isso que é!
O bom disso é que você pode mudar praticamente tudo enquanto está desenvolvendo!
Você já entrou em uma página e percebeu instantaneamente que se trata de um projeto Web ASP.NET apenas fazendo o processo de registro ou login?
Já aconteceu muito comigo porque por padrão no projeto que você cria, você tem essas urls para fazer o processo de login e cadastro (também tem muitas outras páginas).
Portanto, este tutorial mostra uma maneira de atualizar essas URLs para que seu projeto fique mais bonito!!
Comportamento padrão
Quando estamos criando um projeto Blazor e decidimos utilizá-lo com o Identity, ele exibe algo assim:
E quando tentamos fazer o processo de login ou registro, vamos /Identity/Account/Login ou /Identity/Account/Register.
Mas e se eu disser que você pode atualizar efetivamente esses URLs para serem diferentes?
Estruturando as páginas Login e Register
Para atualizar essas páginas, a Microsoft as oculta, mas você pode armazená-las rapidamente e fazer as alterações desejadas!
Para fazer isso você precisa ir e Add Scaffolded Item no menu de contexto do projeto, assim:
Então irá aparecer um modal e você deve selecionar Identity duas vezes e clicar em Add:
Após este, aparecerá mais um modal, onde você poderá selecionar quais páginas de toda a Identidade deseja atualizar. Há muitas páginas que você pode atualizar, mas vamos nos concentrar em Account/Login e Account/Register:
Agora deixe funcionar um pouco e depois verifique o Solution Explorer, você encontrará alguns arquivos novos:
Esses novos arquivos são a página de login e registro que o ASP.NET adiciona ao seu projeto quando você o seleciona para adicionar Identidade!
Atualizando URLs
Como você provavelmente notou, esses arquivos são arquivos razor, já que sua extensão é cshtml, então vamos apenas usar uma diretiva para atualizar a url da 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 você pode ver, a maior parte das coisas é a mesma, mas se você der uma olhada na primeira linha da aula, atualizei o que tínhamos antes:
@page
para
@page "/login"
Bem, isso foi fácil, não foi? Agora vamos fazer um teste rápido para ver se funciona.
Em primeiro lugar, vamos para a página padrão que temos inicialmente, para verificar se ainda funciona:
O que não acontece! Então agora vamos testar nosso novo URL que é /login:
E funciona!!
Agora vamos fazer o mesmo para o registrador, atualizamos sua página e adicionamos o caminho que queremos na diretiva @page e vamos fazer um teste!
@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" />
}
Atualizei a parte superior com @page "/login" e agora testamos se funciona:
Também funciona!!
É issoEspero que você tenha aprendido como atualizar essas urls, principalmente porque em alguns projetos quando você está fazendo as urls de uma certa maneira e aí a Identidade fica diferente, é uma merda haha!
Se precisar de alguma coisa é só twittar para mim ou me enviar um e-mail e tentarei ajudar!