ASP.NET Core 7에서 ID의 경로 업데이트
Microsoft라는 이름이 왜 그렇게 희귀한지 궁금하십니까? 나는 항상 그들이 그렇게 훌륭하게 해내지는 않는다고 생각했지만, 글쎄요, 그게 바로 그거예요!
이것의 좋은 점은 개발하는 동안 거의 모든 것을 변경할 수 있다는 것입니다!
페이지에 들어가서 등록이나 로그인 프로세스를 수행하는 것만으로 이것이 ASP.NET 웹 프로젝트라는 것을 즉시 깨달은 적이 있습니까?
여러분이 생성한 프로젝트에는 기본적으로 로그인 및 등록 프로세스를 수행하는 데 필요한 URL이 있기 때문에 이런 일이 많이 발생했습니다(또한 다른 페이지도 많이 있습니다).
따라서 이 튜토리얼에서는 해당 URL을 업데이트하여 프로젝트가 더 멋지게 보이도록 하는 방법을 보여줍니다!!
기본 동작
Blazor 프로젝트를 생성하고 이를 ID와 함께 사용하기로 결정하면 다음과 같이 표시됩니다.
그리고 로그인이나 등록 프로세스를 수행하려고 하면 /Identity/Account/Login 또는 /Identity/Account/Register로 이동합니다.
하지만 해당 URL을 다르게 업데이트할 수 있다고 말하면 어떻게 될까요?
Login 및 Register 페이지 스캐폴딩
Microsoft는 이러한 페이지를 업데이트하기 위해 해당 페이지를 숨기지만 사용자는 신속하게 페이지를 스캐폴드하고 원하는 변경을 수행할 수 있습니다!
그렇게 하려면 다음과 같이 프로젝트의 컨텍스트 메뉴에서 Add Scaffolded Item로 이동해야 합니다.
그런 다음 모달이 팝업되고 Identity를 두 번 선택하고 Add를 클릭해야 합니다.
이 후에는 또 다른 모달이 팝업되어 전체 ID에서 업데이트할 페이지를 선택할 수 있습니다. 업데이트할 수 있는 페이지가 많지만 여기서는 Account/Login 및 Account/Register에 중점을 둘 것입니다.
이제 잠시 작동시킨 후 솔루션 탐색기를 확인하면 몇 가지 새로운 파일을 찾을 수 있습니다.
이러한 새 파일은 ID를 추가하기 위해 ASP.NET을 선택하면 프로젝트에 추가되는 로그인 및 등록 페이지입니다!
URL 업데이트 중
아마도 눈치채셨겠지만 이 파일은 확장자가 cshtml이므로 면도기 파일이므로 지시문을 사용하여 페이지의 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"
글쎄, 그건 쉬웠지, 그렇지? 이제 간단한 테스트를 통해 제대로 작동하는지 확인해 보겠습니다.
우선, 처음에 있는 기본 페이지로 이동하여 아직 작동하는지 확인하겠습니다.
그렇지 않습니다! 이제 /login인 새 URL을 테스트해 보겠습니다.
그리고 그것은 작동합니다 !!
이제 레지스터에 대해서도 동일한 작업을 수행해 보겠습니다. 페이지를 업데이트하고 @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가 달라 보이기 때문입니다. 하하!
필요한 것이 있으면 저에게 트윗을 보내거나 이메일을 보내주세요. 제가 도와드리겠습니다!