Mise à jour des routes d'Identity dans ASP.NET Core 7
Vous vous demandez même comment Microsoft nomme des choses si rares ? J’ai toujours pensé qu’ils ne le faisaient pas vraiment très bien, mais bon, c’est ce que c’est !
La bonne chose à ce sujet est que vous pouvez pratiquement tout changer pendant que vous développez !
Êtes-vous déjà entré dans une page et réalisez-vous instantanément qu’il s’agit d’un projet Web ASP.NET simplement en effectuant le processus d’inscription ou de connexion ?
Cela m’est souvent arrivé car par défaut dans le projet que vous créez, vous avez ces URL pour effectuer le processus de connexion et d’enregistrement (vous avez également beaucoup d’autres pages).
Ce tutoriel montre donc un moyen de mettre à jour ces URL pour que votre projet soit plus joli !!
Comportement par défaut
Lorsque nous créons un projet Blazor et que nous décidons de l’utiliser avec Identity, il affiche quelque chose comme ceci :
Et lorsque nous essayons d’effectuer le processus de connexion ou d’enregistrement, nous allons soit /Identity/Account/Login ou /Identity/Account/Register.
Mais que se passe-t-il si je vous dis que vous pouvez réellement mettre à jour ces URL pour qu’elles soient différentes ?
Échafaudage des pages Login et Register
Afin de mettre à jour ces pages, Microsoft les masque, mais vous pouvez les échafauder rapidement et effectuer les modifications que vous souhaitez !
Pour ce faire, vous devez aller sur Add Scaffolded Item dans le menu contextuel du projet, comme ceci :
Ensuite, un modal apparaîtra et vous devrez sélectionner Identity deux fois et cliquer sur Add :
Après celui-ci, un autre modal apparaîtra, dans lequel vous pourrez sélectionner les pages de l’ensemble de l’identité que vous souhaitez mettre à jour. Il y a beaucoup de pages que vous pouvez mettre à jour, mais nous allons nous concentrer sur Account/Login et Account/Register :
Maintenant, laissez-le fonctionner un peu, puis vérifiez l’Explorateur de solutions, vous trouverez quelques nouveaux fichiers :
Ces nouveaux fichiers constituent la page de connexion et d’enregistrement qu’ASP.NET ajoute à votre projet lorsque vous le sélectionnez pour ajouter une identité !
Mise à jour des URL
Comme vous l’avez probablement remarqué, ces fichiers sont des fichiers rasoir, puisque leur extension est cshtml, nous allons donc simplement utiliser une directive pour mettre à jour l’url de la page :
@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" />
}
Comme vous pouvez le constater, la plupart des éléments sont les mêmes, mais si vous jetez un œil à la toute première ligne de la classe, j’ai mis à jour ce que nous avions auparavant :
@page
à
@page "/login"
Eh bien, c’était facile, n’est-ce pas ? Faisons maintenant un test rapide pour voir si cela fonctionne.
Tout d’abord, allons à la page par défaut que nous avons au début, pour vérifier si elle fonctionne toujours :
Ce qui n’est pas le cas ! Alors maintenant, allons tester notre nouvelle url qui est /login :
Et ça marche !!
Faisons maintenant de même pour le registre, mettons à jour sa page et ajoutons le chemin que nous voulons dans la directive @page et faisons un 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" />
}
J’ai mis à jour la partie supérieure avec @page "/login" et maintenant nous testons si cela fonctionne :
Fonctionne aussi !!
C’est toutJ’espère que vous avez appris comment mettre à jour ces URL, principalement parce que sur certains projets, lorsque vous créez les URL d’une certaine manière et que l’identité semble différente, c’est nul haha !
Si vous avez besoin de quelque chose, tweetez-moi ou envoyez-moi un e-mail et j’essaierai de vous donner un coup de main !