در
قسمت 25، سرویس‌های سمت سرور اعتبارسنجی و احراز هویت مبتنی بر ASP.NET Core Identity را تهیه کردیم. همچنین در
قسمت قبل، سرویس‌های سمت کلاینت کار با این Web API Endpoints را توسعه دادیم. در این مطلب، رابط کاربری متصل کننده‌ی بخش‌های سمت کلاینت و سمت سرور را تکمیل خواهیم کرد.
تکمیل فرم ثبت نام کاربران 
در ادامه کدهای کامل کامپوننت فرم ثبت نام کاربران را مشاهده می‌کنید:
@page "/registration"
@inject IClientAuthenticationService AuthenticationService
@inject NavigationManager NavigationManager
<EditForm Model="UserForRegistration" OnValidSubmit="RegisterUser" class="pt-4">
<DataAnnotationsValidator />
<div class="py-4">
<div class=" row form-group ">
<div class="col-6 offset-3 ">
<div class="card border">
<div class="card-body px-lg-5 pt-4">
<h3 class="col-12 text-success text-center py-2">
<strong>Sign Up</strong>
</h3>
@if (ShowRegistrationErrors)
{
<div>
@foreach (var error in Errors)
{
<p class="text-danger text-center">@error</p>
}
</div>
}
<hr style="background-color:aliceblue" />
<div class="py-2">
<InputText @bind-Value="UserForRegistration.Name" class="form-control" placeholder="Name..." />
<ValidationMessage For="(()=>UserForRegistration.Name)" />
</div>
<div class="py-2">
<InputText @bind-Value="UserForRegistration.Email" class="form-control" placeholder="Email..." />
<ValidationMessage For="(()=>UserForRegistration.Email)" />
</div>
<div class="py-2 input-group">
<div class="input-group-prepend">
<span class="input-group-text"> +1</span>
</div>
<InputText @bind-Value="UserForRegistration.PhoneNo" class="form-control" placeholder="Phone number..." />
<ValidationMessage For="(()=>UserForRegistration.PhoneNo)" />
</div>
<div class="form-row py-2">
<div class="col">
<InputText @bind-Value="UserForRegistration.Password" type="password" id="password" placeholder="Password..." class="form-control" />
<ValidationMessage For="(()=>UserForRegistration.Password)" />
</div>
<div class="col">
<InputText @bind-Value="UserForRegistration.ConfirmPassword" type="password" id="confirm" class="form-control" placeholder="Confirm Password..." />
<ValidationMessage For="(()=>UserForRegistration.ConfirmPassword)" />
</div>
</div>
<hr style="background-color:aliceblue" />
<div class="py-2">
@if (IsProcessing)
{
<button type="submit" class="btn btn-success btn-block disabled"><i class="fas fa-sign-in-alt"></i> Please Wait...</button>
}
else
{
<button type="submit" class="btn btn-success btn-block"><i class="fas fa-sign-in-alt"></i> Register</button>
}
</div>
</div>
</div>
</div>
</div>
</div>
</EditForm>
@code{
UserRequestDTO UserForRegistration = new UserRequestDTO();
bool IsProcessing;
bool ShowRegistrationErrors;
IEnumerable<string> Errors;
private async Task RegisterUser()
{
ShowRegistrationErrors = false;
IsProcessing = true;
var result = await AuthenticationService.RegisterUserAsync(UserForRegistration);
if (result.IsRegistrationSuccessful)
{
IsProcessing = false;
NavigationManager.NavigateTo("/login");
}
else
{
IsProcessing = false;
Errors = result.Errors;
ShowRegistrationErrors = true;
}
}
} توضیحات:
- مدل این فرم بر اساس UserRequestDTO تشکیل شده‌است که همان شیءای است که اکشن متد ثبت نام سمت Web API انتظار دارد.
- در این کامپوننت به کمک سرویس IClientAuthenticationService که آن‌را در
قسمت قبل تهیه کردیم، شیء نهایی متصل به فرم، به سمت Web API Endpoint ثبت نام ارسال می‌شود.
- در اینجا روشی را جهت غیرفعال کردن یک دکمه، پس از کلیک بر روی آن مشاهده می‌کنید. می‌توان پس از کلیک بر روی دکمه‌ی ثبت نام، با true کردن یک فیلد مانند IsProcessing، بلافاصله دکمه‌ی جاری را برای مثال با ویژگی disabled در صفحه درج کرد و یا حتی آن‌را از صفحه حذف کرد. این روش، یکی از روش‌های جلوگیری از کلیک چندباره‌ی کاربر، بر روی یک دکمه‌است.
- فرم جاری، خطاهای اعتبارسنجی مخصوص Identity سمت سرور را نیز نمایش می‌دهد که حاصل از ارسال آن‌ها توسط اکشن متد ثبت نام است:
- پس از پایان موفقیت آمیز ثبت نام، کاربر را به سمت فرم لاگین هدایت می‌کنیم.
تکمیل فرم ورود به سیستم کاربران 
در ادامه کدهای کامل کامپوننت فرم ثبت نام کاربران را مشاهده می‌کنید:
@page "/login"
@inject IClientAuthenticationService AuthenticationService
@inject NavigationManager NavigationManager
<div id="logreg-forms">
<h1 class="h3 mb-3 pt-3 font-weight-normal text-primary" style="text-align:center;">Sign In</h1>
<EditForm Model="UserForAuthentication" OnValidSubmit="LoginUser">
<DataAnnotationsValidator />
@if (ShowAuthenticationErrors)
{
<p class="text-center text-danger">@Errors</p>
}
<InputText @bind-Value="UserForAuthentication.UserName" id="email" placeholder="Email..." class="form-control mb-2" />
<ValidationMessage For="(()=>UserForAuthentication.UserName)"></ValidationMessage>
<InputText @bind-Value="UserForAuthentication.Password" type="password" placeholder="Password..." id="password" class="form-control mb-2" />
<ValidationMessage For="(()=>UserForAuthentication.Password)"></ValidationMessage>
@if (IsProcessing)
{
<button type="submit" class="btn btn-success btn-block disabled"><i class="fas fa-sign-in-alt"></i> Please Wait...</button>
}
else
{
<button type="submit" class="btn btn-success btn-block"><i class="fas fa-sign-in-alt"></i> Sign in</button>
}
<a href="/registration" class="btn btn-primary text-white mt-3"><i class="fas fa-user-plus"></i> Register as a new user</a>
</EditForm>
</div>
@code
{
AuthenticationDTO UserForAuthentication = new AuthenticationDTO();
bool IsProcessing = false;
bool ShowAuthenticationErrors;
string Errors;
string ReturnUrl;
private async Task LoginUser()
{
ShowAuthenticationErrors = false;
IsProcessing = true;
var result = await AuthenticationService.LoginAsync(UserForAuthentication);
if (result.IsAuthSuccessful)
{
IsProcessing = false;
var absoluteUri = new Uri(NavigationManager.Uri);
var queryParam = HttpUtility.ParseQueryString(absoluteUri.Query);
ReturnUrl = queryParam["returnUrl"];
if (string.IsNullOrEmpty(ReturnUrl))
{
NavigationManager.NavigateTo("/");
}
else
{
NavigationManager.NavigateTo("/" + ReturnUrl);
}
}
else
{
IsProcessing = false;
Errors = result.ErrorMessage;
ShowAuthenticationErrors = true;
}
}
} توضیحات:
- مدل این فرم بر اساس AuthenticationDTO تشکیل شده‌است که همان شیءای است که اکشن متد لاگین سمت Web API انتظار دارد.
- در این کامپوننت به کمک سرویس IClientAuthenticationService که آن‌را در
قسمت قبل تهیه کردیم، شیء نهایی متصل به فرم، به سمت Web API Endpoint ثبت نام ارسال می‌شود.
- در اینجا نیز همانند فرم ثبت نام، پس از کلیک بر روی دکمه‌ی ورود به سیستم، با true کردن یک فیلد مانند IsProcessing، بلافاصله دکمه‌ی جاری را با ویژگی disabled در صفحه درج کرد‌ه‌ایم تا از کلیک چندباره‌ی کاربر، جلوگیری شود.
- این فرم، خطاهای اعتبارسنجی مخصوص Identity سمت سرور را نیز نمایش می‌دهد که حاصل از ارسال آن‌ها توسط اکشن متد لاگین است:
- پس از پایان موفقیت آمیز ورود به سیستم، یا کاربر را به آدرسی که پیش از این توسط کوئری استرینگ returnUrl مشخص شده، هدایت می‌کنیم و یا به صفحه‌ی اصلی برنامه. همچنین در اینجا Local Storage نیز مقدار دهی شده‌است:
همانطور که مشاهده می‌کنید، مقدار JWT تولید شده‌ی پس از لاگین و همچنین مشخصات کاربر دریافتی از Web Api، جهت استفاده‌های بعدی، در Local Storage مرورگر درج شده‌اند.
تغییر منوی راهبری سایت، بر اساس وضعیت لاگین شخص 
تا اینجا قسمت‌های ثبت نام و ورود به سیستم را تکمیل کردیم. در ادامه نیاز داریم تا منوی سایت را هم بر اساس وضعیت اعتبارسنجی شخص، تغییر دهیم. برای مثال اگر شخصی به سیستم وارد شده‌است، باید در منوی سایت، لینک خروج و نام خودش را مشاهده کند و نه مجددا لینک‌های ثبت‌نام و لاگین را. جهت تغییر منوی راهبری سایت، کامپوننت Shared\NavMenu.razor را گشوده و لینک‌های قبلی ثبت‌نام و لاگین را با محتوای زیر جایگزین می‌کنیم:
<AuthorizeView>
<Authorized>
<li class="nav-item p-0">
<NavLink class="nav-link" href="#">
<span class="p-2">
Hello, @context.User.Identity.Name!
</span>
</NavLink>
</li>
<li class="nav-item p-0">
<NavLink class="nav-link" href="logout">
<span class="p-2">
Logout
</span>
</NavLink>
</li>
</Authorized>
<NotAuthorized>
<li class="nav-item p-0">
<NavLink class="nav-link" href="registration">
<span class="p-2">
Register
</span>
</NavLink>
</li>
<li class="nav-item p-0">
<NavLink class="nav-link" href="login">
<span class="p-2">
Login
</span>
</NavLink>
</li>
</NotAuthorized>
</AuthorizeView>
نمونه‌ی چنین منویی را در
قسمت 22 نیز مشاهده کرده بودید. AuthorizeView، یکی از کامپوننت‌های استانداردBlazor است. زمانیکه کاربری به سیستم لاگین کرده باشد، فرگمنت Authorized و در غیر اینصورت قسمت NotAuthorized آن‌را مشاهده خواهید کرد و همانطور که در
قسمت قبل نیز عنوان شد، این کامپوننت برای اینکه کار کند، نیاز دارد به اطلاعات AuthenticationState (و یا همان لیستی از User Claims) دسترسی داشته باشد که آن‌را توسط یک AuthenticationStateProvider سفارشی، به سیستم معرفی و توسط کامپوننت CascadingAuthenticationState، به صورت آبشاری در اختیار تمام کامپوننت‌های برنامه قرار دادیم که نمونه‌ای از آن، درج مقدار context.User.Identity.Name در منوی سایت است.
تکمیل قسمت خروج از سیستم
اکنون که لینک logout را در منوی سایت، پس از ورود به سیستم نمایش می‌دهیم، می‌توان کدهای کامپوننت آن‌را (Pages\Authentication\Logout.razor) به صورت زیر تکمیل کرد:
@page "/logout"
@inject IClientAuthenticationService AuthenticationService
@inject NavigationManager NavigationManager
@code
{
protected async override Task OnInitializedAsync()
{
await AuthenticationService.LogoutAsync();
NavigationManager.NavigateTo("/");
}
}
در اینجا در ابتدا توسط سرویس IClientAuthenticationService و متد LogoutAsync آن، کلیدهای Local Storage مربوط به JWT و اطلاعات کاربر حذف می‌شوند و سپس کاربر به صفحه‌ی اصلی هدایت خواهد شد.
مشکل! پس از کلیک بر روی logout، هرچند می‌توان مشاهده کرد که اطلاعات Local Storage به درستی حذف شده‌اند، اما ... پس از هدایت به صفحه‌ی اصلی برنامه، هنوز هم لینک logout و نام کاربری شخص نمایان هستند و به نظر هیچ اتفاقی رخ نداده‌است!
علت اینجا است که AuthenticationStateProvider سفارشی را که تهیه کردیم، فاقد اطلاع رسانی تغییر وضعیت است:
namespace BlazorWasm.Client.Services
{
public class AuthStateProvider : AuthenticationStateProvider
{
// ...
public void NotifyUserLoggedIn(string token)
{
var authenticatedUser = new ClaimsPrincipal(
new ClaimsIdentity(JwtParser.ParseClaimsFromJwt(token), "jwtAuthType")
);
var authState = Task.FromResult(new AuthenticationState(authenticatedUser));
base.NotifyAuthenticationStateChanged(authState);
}
public void NotifyUserLogout()
{
var authState = Task.FromResult(new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity())));
base.NotifyAuthenticationStateChanged(authState);
}
}
}
در اینجا نیاز است پس از لاگین و یا خروج شخص، حتما متد NotifyAuthenticationStateChanged کلاس پایه‌ی AuthenticationStateProvider فراخوانی شود تا وضعیت AuthenticationState ای که در اختیار کامپوننت‌ها قرار می‌گیرد نیز تغییر کند. در غیراینصورت login و logout و یا هر تغییری در لیست user claims، به صورت آبشاری در اختیار کامپوننت‌های برنامه قرار نمی‌گیرند. به همین جهت دو متد عمومی NotifyUserLoggedIn و NotifyUserLogout را به AuthStateProvider اضافه می‌کنیم، تا این متدها را در زمان‌های لاگین و خروج از سیستم، در سرویس ClientAuthenticationService، فراخوانی کنیم:
namespace BlazorWasm.Client.Services
{
public class ClientAuthenticationService : IClientAuthenticationService
{
private readonly HttpClient _client;
private readonly ILocalStorageService _localStorage;
private readonly AuthenticationStateProvider _authStateProvider;
public ClientAuthenticationService(
HttpClient client,
ILocalStorageService localStorage,
AuthenticationStateProvider authStateProvider)
{
_client = client;
_localStorage = localStorage;
_authStateProvider = authStateProvider;
}
public async Task<AuthenticationResponseDTO> LoginAsync(AuthenticationDTO userFromAuthentication)
{
// ...
if (response.IsSuccessStatusCode)
{
//...
((AuthStateProvider)_authStateProvider).NotifyUserLoggedIn(result.Token);
return new AuthenticationResponseDTO { IsAuthSuccessful = true };
}
//...
}
public async Task LogoutAsync()
{
//...
((AuthStateProvider)_authStateProvider).NotifyUserLogout();
}
}
}
در اینجا تغییرات لازم اعمالی به سرویس ClientAuthenticationService را مشاهده می‌کنید:
- ابتدا AuthenticationStateProvider به سازنده‌ی کلاس تزریق شده‌است.
- سپس در حین لاگین موفق، متد NotifyUserLoggedIn آن فراخوانی شده‌است.
- در آخر پس از خروج از سیستم، متد NotifyUserLogout فراخوانی شده‌است.
پس از این تغییرات اگر بر روی لینک logout کلیک کنیم، این گزینه به درستی عمل کرده و اینبار شاهد نمایش مجدد لینک‌های لاگین و ثبت نام خواهیم بود.
محدود کردن دسترسی به صفحات برنامه بر اساس نقش‌های کاربران
پس از ورود کاربر به سیستم و تامین AuthenticationState، اکنون می‌خواهیم تنها این نوع کاربران اعتبارسنجی شده بتوانند جزئیات اتاق‌ها (برای شروع رزرو) و یا صفحه‌ی نمایش نتیجه‌ی پرداخت را مشاهده کنند. البته نمی‌خواهیم صفحه‌ی نمایش لیست اتاق‌ها را محدود کنیم. برای این منظور ویژگی Authorize را به ابتدای تعاریف کامپوننت‌های PaymentResult.razor و RoomDetails.razor، اضافه می‌کنیم:
@attribute [Authorize(Roles = ConstantRoles.Customer)]
که البته در اینجا ذکر فضای نام آن در فایل BlazorWasm.Client\_Imports.razor، ضروری است:
@using Microsoft.AspNetCore.Authorization
با این تعریف، دسترسی به صفحات کامپوننت‌های یاد شده، محدود به کاربرانی می‌شود که دارای نقش Customer هستند. برای معرفی بیش از یک نقش، فقط کافی است لیست نقش‌های مدنظر را که می‌توانند توسط کاما از هم جدا شوند، به ویژگی Authorize کامپوننت‌ها معرفی کرد و نمونه‌ای از آن‌را
در مطلب 23 مشاهده کردید.
نکته‌ی مهم: فیلتر Authorize را باید بر روی اکشن متدهای متناظر سمت سرور نیز قرار داد؛ در غیراینصورت تنها نیمی از کار انجام شده‌است و هنوز آزادانه می‌توان با Web API Endpoints موجود کار کرد.
تکمیل مشخصات هویتی شخصی که قرار است اتاقی را رزرو کند
پیشتر در فرم RoomDetails.razor، اطلاعات ابتدایی کاربر را مانند نام او، دریافت می‌کردیم. اکنون با توجه به محدود شدن این کامپوننت به کاربران لاگین کرده، می‌توان اطلاعات کاربر وارد شده‌ی به سیستم را نیز به صورت خودکار بارگذاری و تکمیل کرد:
@page "/hotel-room-details/{Id:int}"
// ...
@code {
// ...
protected override async Task OnInitializedAsync()
{
try
{
HotelBooking.OrderDetails = new RoomOrderDetailsDTO();
if (Id != null)
{
// ...
if (await LocalStorage.GetItemAsync<UserDTO>(ConstantKeys.LocalUserDetails) != null)
{
var userInfo = await LocalStorage.GetItemAsync<UserDTO>(ConstantKeys.LocalUserDetails);
HotelBooking.OrderDetails.UserId = userInfo.Id;
HotelBooking.OrderDetails.Name = userInfo.Name;
HotelBooking.OrderDetails.Email = userInfo.Email;
HotelBooking.OrderDetails.Phone = userInfo.PhoneNo;
}
}
}
catch (Exception e)
{
await JsRuntime.ToastrError(e.Message);
}
}
در اینجا با توجه به اینکه UserId هم مقدار دهی می‌شود، می‌توان سطر زیر را از ابتدای متد SaveRoomOrderDetailsAsync سرویس ClientRoomOrderDetailsService، حذف کرد:
public async Task<RoomOrderDetailsDTO> SaveRoomOrderDetailsAsync(RoomOrderDetailsDTO details)
{
// details.UserId = "unknown user!";
به این ترتیب هویت کاربری که کار خرید را انجام می‌دهد، دقیقا مشخص خواهد شد و همچنین پس از بازگشت از صفحه‌ی پرداخت بانکی، اطلاعات او مجددا از Local Storage دریافت و مقدار دهی اولیه می‌شود.
کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید: Blazor-5x-Part-32.zip 
