تحديث مسارات الهوية في ASP.NET Core 7
هل تتساءل كيف تسمي Microsoft الأشياء النادرة جدًا؟ لقد اعتقدت دائمًا أنهم لا يفعلون ذلك بشكل رائع حقًا، لكن هذا ما هو عليه الأمر!
والشيء الجيد في هذا هو أنه يمكنك تغيير كل شيء إلى حد كبير أثناء تطويرك!
هل سبق لك أن دخلت إلى إحدى الصفحات وأدركت على الفور أن هذا هو مشروع ويب ASP.NET بمجرد القيام بعملية التسجيل أو تسجيل الدخول؟
لقد حدث لي ذلك كثيرًا لأنه افتراضيًا في المشروع الذي تقوم بإنشائه، لديك عناوين URL هذه للقيام بعملية تسجيل الدخول والتسجيل (لديك أيضًا الكثير من الصفحات الأخرى أيضًا).
لذلك يوضح هذا البرنامج التعليمي طريقة لتحديث عناوين URL هذه حتى يبدو مشروعك أجمل!!
السلوك الافتراضي
عندما نقوم بإنشاء مشروع Blazor ونقرر استخدامه مع الهوية، فإنه يعرض شيئًا مثل هذا:
وعندما نحاول القيام بعملية تسجيل الدخول أو التسجيل، فإننا ننتقل إما /Identity/Account/Login أو /Identity/Account/Register.
ولكن ماذا لو أخبرتك أنه يمكنك تحديث عناوين URL هذه بشكل كامل لتكون مختلفة؟
سقالات صفحات Login و Register
ومن أجل تحديث هذه الصفحات، تقوم Microsoft بإخفائها، ولكن يمكنك دعمها بسرعة وإجراء التغييرات التي تريدها!
للقيام بذلك، عليك الانتقال إلى Add Scaffolded Item في قائمة السياق الخاصة بالمشروع، تمامًا مثل هذا:
بعد ذلك سينبثق شكل مشروط وعليك تحديد Identity مرتين والنقر على Add:
بعد ذلك، سينبثق نموذج آخر، حيث يمكنك تحديد الصفحات من الهوية بأكملها التي تريد تحديثها. هناك الكثير من الصفحات التي يمكنك تحديثها، لكننا سنركز على Account/Login وAccount/Register:
الآن دع الأمر يعمل قليلاً ثم تحقق من Solution Explorer، ستجد بعض الملفات الجديدة:
هذه الملفات الجديدة هي صفحة تسجيل الدخول والتسجيل التي يضيفها ASP.NET إلى مشروعك عندما تحدده لإضافة الهوية!
تحديث عناوين URL
كما لاحظت على الأرجح، هذه الملفات هي ملفات razor، نظرًا لأن امتدادها هو 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"
حسناً، كان ذلك سهلاً، أليس كذلك؟ الآن دعونا نجري اختبارًا سريعًا لمعرفة ما إذا كان يعمل أم لا.
أولاً، دعنا نذهب إلى الصفحة الافتراضية التي كانت لدينا في البداية، للتحقق مما إذا كانت لا تزال تعمل:
وهو ما لا! فلنبدأ الآن ونختبر عنوان URL الجديد وهو /login:
ويعمل!!
الآن دعونا نفعل الشيء نفسه بالنسبة للسجل، نقوم بتحديث صفحته وإضافة المسار الذي نريده في التوجيه @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 بطريقة معينة ثم تبدو الهوية مختلفة، فهذا أمر سيئ للغاية!
إذا كنت بحاجة إلى أي شيء، فقط قم بالتغريد علي أو أرسل لي بريدًا إلكترونيًا وسأحاول تقديم المساعدة!