در این قسمت میخواهیم پایه‌ی اعتبارسنجی و احراز هویت سمت سرور برنامه‌ی کلاینت Blazor WASM را بر اساس JWT یکپارچه با ASP.NET Core Identity تامین کنیم. اگر با JWT آشنایی ندارید، نیاز است مطالب زیر را در ابتدا مطالعه کنید:
- «
معرفی JSON Web Token»
توسعه‌ی IdentityUser
در
قسمت‌های 21 تا 23، روش نصب و یکپارچگی ASP.NET Core Identity را با یک برنامه‌ی Blazor Server بررسی کردیم. در پروژه‌ی Web API جاری هم از قصد داریم از ASP.NET Core Identity استفاده کنیم؛ البته بدون نصب UI پیش‌فرض آن. به همین جهت فقط از ApplicationDbContext آن برنامه که از IdentityDbContext مشتق شده و همچنین قسمتی از تنظیمات سرویس‌های ابتدایی آن که در
قسمت قبل بررسی کردیم، در اینجا استفاده خواهیم کرد.
IdentityUser پیش‌فرض که معرف موجودیت کاربران یک سیستم مبتنی بر ASP.NET Core Identity است، برای ثبت نام یک کاربر، فقط به ایمیل و کلمه‌ی عبور او نیاز دارد که نمونهای از آن‌را در حین معرفی «
ثبت کاربر ادمین Identity» بررسی کردیم. اکنون میخواهیم این موجودیت پیش‌فرض را توسعه داده و برای مثال نام کاربر را نیز به آن اضافه کنیم. برای اینکار فایل جدید BlazorServer\BlazorServer.Entities\ApplicationUser .cs را به پروژه‌ی Entities با محتوای زیر اضافه می‌کنیم:
using Microsoft.AspNetCore.Identity;
namespace BlazorServer.Entities
{
public class ApplicationUser : IdentityUser
{
public string Name { get; set; }
}
}
برای توسعه‌ی IdentityUser پیش‌فرض، فقط کافی است از آن ارث‌بری کرده و خاصیت جدیدی را به خواص موجود آن اضافه کنیم. البته برای شناسایی IdentityUser، نیاز است بسته‌ی نیوگت Microsoft.AspNetCore.Identity.EntityFrameworkCore را نیز در این پروژه نصب کرد.
اکنون که یک ApplicationUser سفارشی را ایجاد کردیم، نیازی نیست تا DbSet خاص آن‌را به ApplicationDbContext برنامه اضافه کنیم. برای معرفی آن به برنامه ابتدا باید به فایل BlazorServer\BlazorServer.DataAccess\ApplicationDbContext.cs مراجعه کرده و نوع IdentityUser را به IdentityDbContext، از طریق آرگومان جنریکی که می‌پذیرد، معرفی کنیم:
public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
زمانیکه این آرگومان جنریک قید نشود، از همان نوع IdentityUser پیش‌فرض خودش استفاده میکند.
پس از این تغییر، در فایل BlazorWasm\BlazorWasm.WebApi\Startup.cs نیز باید ApplicationUser را به عنوان نوع جدید کاربران، معرفی کرد:
namespace BlazorWasm.WebApi
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
services.AddIdentity<ApplicationUser, IdentityRole>()
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddDefaultTokenProviders();
// ...
پس از این تغییرات، باید از طریق خط فرمان به پوشه‌ی BlazorServer.DataAccess وارد شد و دستورات زیر را جهت ایجاد و اعمال Migrations متناظر با تغییرات فوق، اجرا کرد. چون در این دستورات اینبار پروژه‌ی آغازین، به پروژه‌ی Web API اشاره میکند، باید بسته‌ی نیوگت Microsoft.EntityFrameworkCore.Design را نیز به پروژه‌ی آغازین اضافه کرد، تا بتوان آنها را با موفقیت به پایان رساند:
dotnet tool update --global dotnet-ef --version 5.0.4
dotnet build
dotnet ef migrations --startup-project ../../BlazorWasm/BlazorWasm.WebApi/ add AddNameToAppUser --context ApplicationDbContext
dotnet ef --startup-project ../../BlazorWasm/BlazorWasm.WebApi/ database update --context ApplicationDbContext
ایجاد مدل‌های ثبت نام
در ادامه میخواهیم کنترلری را ایجاد کنیم که کار ثبت نام و لاگین را مدیریت میکند. برای این منظور باید بتوان از کاربر، اطلاعاتی مانند نام کاربری و کلمه‌ی عبور او را دریافت کرد و پس از پایان عملیات نیز نتیجه‌ی آن‌را بازگشت داد. به همین جهت دو مدل زیر را جهت مدیریت قسمت ثبت نام، به پروژه‌ی BlazorServer.Models اضافه می‌کنیم:
using System.ComponentModel.DataAnnotations;
namespace BlazorServer.Models
{
public class UserRequestDTO
{
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
[Required(ErrorMessage = "Email is required")]
[RegularExpression("^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$",
ErrorMessage = "Invalid email address")]
public string Email { get; set; }
public string PhoneNo { get; set; }
[Required(ErrorMessage = "Password is required.")]
[DataType(DataType.Password)]
public string Password { get; set; }
[Required(ErrorMessage = "Confirm password is required")]
[DataType(DataType.Password)]
[Compare("Password", ErrorMessage = "Password and confirm password is not matched")]
public string ConfirmPassword { get; set; }
}
}
و مدل پاسخ عملیات ثبت نام:
public class RegistrationResponseDTO
{
public bool IsRegistrationSuccessful { get; set; }
public IEnumerable<string> Errors { get; set; }
} ایجاد و تکمیل کنترلر Account، جهت ثبت نام کاربران
در ادامه نیاز داریم تا جهت ارائه‌ی امکانات اعتبارسنجی و احراز هویت کاربران، کنترلر جدید Account را به پروژه‌ی Web API اضافه کنیم:
using System;
using BlazorServer.Entities;
using BlazorServer.Models;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
using System.Linq;
using BlazorServer.Common;
namespace BlazorWasm.WebApi.Controllers
{
[Route("api/[controller]/[action]")]
[ApiController]
[Authorize]
public class AccountController : ControllerBase
{
private readonly SignInManager<ApplicationUser> _signInManager;
private readonly UserManager<ApplicationUser> _userManager;
private readonly RoleManager<IdentityRole> _roleManager;
public AccountController(SignInManager<ApplicationUser> signInManager,
UserManager<ApplicationUser> userManager,
RoleManager<IdentityRole> roleManager)
{
_roleManager = roleManager ?? throw new ArgumentNullException(nameof(roleManager));
_userManager = userManager ?? throw new ArgumentNullException(nameof(userManager));
_signInManager = signInManager ?? throw new ArgumentNullException(nameof(signInManager));
}
[HttpPost]
[AllowAnonymous]
public async Task<IActionResult> SignUp([FromBody] UserRequestDTO userRequestDTO)
{
var user = new ApplicationUser
{
UserName = userRequestDTO.Email,
Email = userRequestDTO.Email,
Name = userRequestDTO.Name,
PhoneNumber = userRequestDTO.PhoneNo,
EmailConfirmed = true
};
var result = await _userManager.CreateAsync(user, userRequestDTO.Password);
if (!result.Succeeded)
{
var errors = result.Errors.Select(e => e.Description);
return BadRequest(new RegistationResponseDTO { Errors = errors, IsRegistrationSuccessful = false });
}
var roleResult = await _userManager.AddToRoleAsync(user, ConstantRoles.Customer);
if (!roleResult.Succeeded)
{
var errors = result.Errors.Select(e => e.Description);
return BadRequest(new RegistationResponseDTO { Errors = errors, IsRegistrationSuccessful = false });
}
return StatusCode(201); // Created
}
}
}
- در اینجا اولین اکشن متد کنترلر Account را مشاهده میکنید که کار ثبت نام یک کاربر را انجام می‌دهد. نمونهای از این کدها پیشتر در
قسمت 23 این سری، زمانیکه کاربر جدیدی را با نقش ادمین تعریف کردیم، مشاهده کرده‌اید.
- در تعریف ابتدایی این کنترلر، ویژگی‌های زیر ذکر شده‌اند:
[Route("api/[controller]/[action]")]
[ApiController]
[Authorize]
میخواهیم مسیریابی آن با api/ شروع شود و به صورت خودکار بر اساس نام کنترلر و نام اکشن متدها، تعیین گردد. همچنین نمی‌خواهیم مدام کدهای بررسی معتبر بودن ModelState را در کنترلرها قرار دهیم. به همین جهت از ویژگی ApiController استفاده شده تا اینکار را به صورت خودکار انجام دهد. قرار دادن فیلتر Authorize بر روی یک کنترلر سبب میشود تا تمام اکشن متدهای آن به کاربران اعتبارسنجی شده محدود شوند؛ مگر اینکه عکس آن به صورت صریح توسط فیلتر AllowAnonymous مشخص گردد. نمونه‌ی آن‌را در اکشن متد عمومی SignUp در اینجا مشاهده میکنید.
تا اینجا اگر برنامه را اجرا کنیم، میتوان با استفاده از Swagger UI، آن‌را آزمایش کرد:
که با اجرای آن، برای نمونه به خروجی زیر میرسیم:
که عنوان میکند کلمه‌ی عبور باید حداقل دارای یک عدد و یک حرف بزرگ باشد. پس از اصلاح آن، status-code=201 را دریافت خواهیم کرد.
و اگر سعی کنیم همین کاربر را مجددا ثبت نام کنیم، با خطای زیر مواجه خواهیم شد:
ایجاد مدل‌های ورود به سیستم
در پروژه‌ی Web API، از UI پیش‌فرض ASP.NET Core Identity استفاده نمی‌کنیم. به همین جهت نیاز است مدل‌های قسمت لاگین را به صورت زیر تعریف کنیم:
using System.ComponentModel.DataAnnotations;
namespace BlazorServer.Models
{
public class AuthenticationDTO
{
[Required(ErrorMessage = "UserName is required")]
[RegularExpression("^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$",
ErrorMessage = "Invalid email address")]
public string UserName { get; set; }
[Required(ErrorMessage = "Password is required.")]
[DataType(DataType.Password)]
public string Password { get; set; }
}
}
به همراه مدل پاسخ ارائه شده‌ی حاصل از عملیات لاگین:
using System.Collections.Generic;
namespace BlazorServer.Models
{
public class AuthenticationResponseDTO
{
public bool IsAuthSuccessful { get; set; }
public string ErrorMessage { get; set; }
public string Token { get; set; }
public UserDTO UserDTO { get; set; }
}
public class UserDTO
{
public string Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string PhoneNo { get; set; }
}
}
که در اینجا اگر عملیات لاگین با موفقیت به پایان برسد، یک توکن، به همراه اطلاعاتی از کاربر، به سمت کلاینت ارسال خواهد شد؛ در غیر اینصورت، متن خطای مرتبط بازگشت داده میشود.
ایجاد مدل مشخصات تولید JSON Web Token
پس از لاگین موفق، نیاز است یک JWT را تولید کرد و در اختیار کلاینت قرار داد. مشخصات ابتدایی تولید این توکن، توسط مدل زیر تعریف میشود:
namespace BlazorServer.Models
{
public class BearerTokensOptions
{
public string Key { set; get; }
public string Issuer { set; get; }
public string Audience { set; get; }
public int AccessTokenExpirationMinutes { set; get; }
}
}
که شامل کلید امضای توکن، مخاطبین، صادر کننده و مدت زمان اعتبار آن به دقیقه‌است و به صورت زیر در فایل BlazorWasm\BlazorWasm.WebApi\appsettings.json تعریف میشود:
{
"BearerTokens": {
"Key": "This is my shared key, not so secret, secret!",
"Issuer": "https://localhost:5001/",
"Audience": "Any",
"AccessTokenExpirationMinutes": 20
}
}
پس از این تعاریف، جهت دسترسی به مقادیر آن توسط سیستم تزریق وابستگی‌ها، مدخل آن‌را به صورت زیر به کلاس آغازین Web API اضافه می‌کنیم:
namespace BlazorWasm.WebApi
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
services.AddOptions<BearerTokensOptions>().Bind(Configuration.GetSection("BearerTokens"));
// ... ایجاد سرویسی برای تولید JSON Web Token
سرویس زیر به کمک سرویس توکار UserManager مخصوص Identity و مشخصات ابتدایی توکنی که معرفی کردیم، کار تولید یک JWT را انجام می‌دهد:
using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
using System.Threading.Tasks;
using BlazorServer.Entities;
using BlazorServer.Models;
using Microsoft.AspNetCore.Identity;
using Microsoft.Extensions.Options;
using Microsoft.IdentityModel.Tokens;
namespace BlazorServer.Services
{
public interface ITokenFactoryService
{
Task<string> CreateJwtTokensAsync(ApplicationUser user);
}
public class TokenFactoryService : ITokenFactoryService
{
private readonly UserManager<ApplicationUser> _userManager;
private readonly BearerTokensOptions _configuration;
public TokenFactoryService(
UserManager<ApplicationUser> userManager,
IOptionsSnapshot<BearerTokensOptions> bearerTokensOptions)
{
_userManager = userManager ?? throw new ArgumentNullException(nameof(userManager));
if (bearerTokensOptions is null)
{
throw new ArgumentNullException(nameof(bearerTokensOptions));
}
_configuration = bearerTokensOptions.Value;
}
public async Task<string> CreateJwtTokensAsync(ApplicationUser user)
{
var signingCredentials = new SigningCredentials(
new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration.Key)),
SecurityAlgorithms.HmacSha256);
var claims = await getClaimsAsync(user);
var now = DateTime.UtcNow;
var tokenOptions = new JwtSecurityToken(
issuer: _configuration.Issuer,
audience: _configuration.Audience,
claims: claims,
notBefore: now,
expires: now.AddMinutes(_configuration.AccessTokenExpirationMinutes),
signingCredentials: signingCredentials);
return new JwtSecurityTokenHandler().WriteToken(tokenOptions);
}
private async Task<List<Claim>> getClaimsAsync(ApplicationUser user)
{
string issuer = _configuration.Issuer;
var claims = new List<Claim>
{
// Issuer
new Claim(JwtRegisteredClaimNames.Iss, issuer, ClaimValueTypes.String, issuer),
// Issued at
new Claim(JwtRegisteredClaimNames.Iat, DateTimeOffset.UtcNow.ToUnixTimeSeconds().ToString(), ClaimValueTypes.Integer64, issuer),
new Claim(ClaimTypes.Name, user.Email, ClaimValueTypes.String, issuer),
new Claim(ClaimTypes.Email, user.Email, ClaimValueTypes.String, issuer),
new Claim("Id", user.Id, ClaimValueTypes.String, issuer),
new Claim("DisplayName", user.Name, ClaimValueTypes.String, issuer),
};
var roles = await _userManager.GetRolesAsync(user);
foreach (var role in roles)
{
claims.Add(new Claim(ClaimTypes.Role, role, ClaimValueTypes.String, issuer));
}
return claims;
}
}
}
کار افزودن نقش‌های یک کاربر به توکن او، به کمک متد userManager.GetRolesAsync انجام شده‌است. نمونهای از این سرویس را پیشتر در مطلب «
اعتبارسنجی مبتنی بر JWT در ASP.NET Core 2.0 بدون استفاده از سیستم Identity» مشاهده کرده‌اید. البته در آنجا از سیستم Identity برای تامین نقش‌های کاربران استفاده نمی‌شود و مستقل از آن عمل میکند.
در آخر، این سرویس را به صورت زیر به لیست سرویس‌های ثبت شده‌ی پروژه‌ی Web API، اضافه می‌کنیم:
namespace BlazorWasm.WebApi
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
services.AddScoped<ITokenFactoryService, TokenFactoryService>();
// ... تکمیل کنترلر Account جهت لاگین کاربران
پس از ثبت نام کاربران، اکنون میخواهیم امکان لاگین آنها را نیز فراهم کنیم:
namespace BlazorWasm.WebApi.Controllers
{
[Route("api/[controller]/[action]")]
[ApiController]
[Authorize]
public class AccountController : ControllerBase
{
private readonly SignInManager<ApplicationUser> _signInManager;
private readonly UserManager<ApplicationUser> _userManager;
private readonly ITokenFactoryService _tokenFactoryService;
public AccountController(
SignInManager<ApplicationUser> signInManager,
UserManager<ApplicationUser> userManager,
ITokenFactoryService tokenFactoryService)
{
_userManager = userManager ?? throw new ArgumentNullException(nameof(userManager));
_signInManager = signInManager ?? throw new ArgumentNullException(nameof(signInManager));
_tokenFactoryService = tokenFactoryService;
}
[HttpPost]
[AllowAnonymous]
public async Task<IActionResult> SignIn([FromBody] AuthenticationDTO authenticationDTO)
{
var result = await _signInManager.PasswordSignInAsync(
authenticationDTO.UserName, authenticationDTO.Password,
isPersistent: false, lockoutOnFailure: false);
if (!result.Succeeded)
{
return Unauthorized(new AuthenticationResponseDTO
{
IsAuthSuccessful = false,
ErrorMessage = "Invalid Authentication"
});
}
var user = await _userManager.FindByNameAsync(authenticationDTO.UserName);
if (user == null)
{
return Unauthorized(new AuthenticationResponseDTO
{
IsAuthSuccessful = false,
ErrorMessage = "Invalid Authentication"
});
}
var token = await _tokenFactoryService.CreateJwtTokensAsync(user);
return Ok(new AuthenticationResponseDTO
{
IsAuthSuccessful = true,
Token = token,
UserDTO = new UserDTO
{
Name = user.Name,
Id = user.Id,
Email = user.Email,
PhoneNo = user.PhoneNumber
}
});
}
}
}
در اکشن متد جدید لاگین، اگر عملیات ورود به سیستم با موفقیت انجام شود، با استفاده از سرویس Token Factory که آن‌را پیشتر ایجاد کردیم، توکن مخصوصی را به همراه اطلاعاتی از کاربر، به سمت برنامه‌ی کلاینت بازگشت میدهیم.
تا اینجا اگر برنامه را اجرا کنیم، میتوان در قسمت ورود به سیستم، برای نمونه مشخصات کاربر ادمین را وارد کرد:
و پس از اجرای درخواست، به خروجی زیر میرسیم:
که در اینجا JWT تولید شده‌ی به همراه قسمتی از مشخصات کاربر، در خروجی نهایی مشخص است. میتوان محتوای این توکن را در سایت
jwt.io مورد بررسی قرار داد که به این خروجی میرسیم و حاوی claims تعریف شده‌است:
{
"iss": "https://localhost:5001/",
"iat": 1616396383,
"http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name": "vahid@dntips.ir",
"http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress": "vahid@dntips.ir",
"Id": "582855fb-e95b-45ab-b349-5e9f7de40c0c",
"DisplayName": "vahid@dntips.ir",
"http://schemas.microsoft.com/ws/2008/06/identity/claims/role": "Admin",
"nbf": 1616396383,
"exp": 1616397583,
"aud": "Any"
} تنظیم Web API برای پذیرش و پردازش JWT ها
تا اینجا پس از لاگین، یک JWT را در اختیار کلاینت قرار میدهیم. اما اگر کلاینت این JWT را به سمت سرور ارسال کند، اتفاق خاصی رخ نخواهد داد و توسط آن، شیء User قابل دسترسی در یک اکشن متد، به صورت خودکار تشکیل نمی‌شود. برای رفع این مشکل، ابتدا بسته‌ی جدید نیوگت Microsoft.AspNetCore.Authentication.JwtBearer را به پروژه‌ی Web API اضافه می‌کنیم، سپس به کلاس آغازین پروژه‌ی Web API مراجعه کرده و آن‌را به صورت زیر تکمیل می‌کنیم:
namespace BlazorWasm.WebApi
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
var bearerTokensSection = Configuration.GetSection("BearerTokens");
services.AddOptions<BearerTokensOptions>().Bind(bearerTokensSection);
// ...
var apiSettings = bearerTokensSection.Get<BearerTokensOptions>();
var key = Encoding.UTF8.GetBytes(apiSettings.Key);
services.AddAuthentication(opt =>
{
opt.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
opt.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
opt.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(cfg =>
{
cfg.RequireHttpsMetadata = false;
cfg.SaveToken = true;
cfg.TokenValidationParameters = new TokenValidationParameters
{
ValidateIssuerSigningKey = true,
IssuerSigningKey = new SymmetricSecurityKey(key),
ValidateAudience = true,
ValidateIssuer = true,
ValidAudience = apiSettings.Audience,
ValidIssuer = apiSettings.Issuer,
ClockSkew = TimeSpan.Zero,
ValidateLifetime = true
};
});
// ...
در اینجا در ابتدا اعتبارسنجی از نوع Jwt تعریف شده‌است و سپس پردازش کننده و وفق دهنده‌ی آن‌را به سیستم اضافه کرده‌ایم تا توکن‌های دریافتی از هدرهای درخواست‌های رسیده را به صورت خودکار پردازش و تبدیل به Claims شیء User یک اکشن متد کند.
افزودن JWT به تنظیمات Swagger
هر کدام از اکشن متدهای کنترلرهای Web API برنامه که مزین به فیلتر Authorize باشد، در Swagger UI با یک قفل نمایش داده میشود. در این حالت میتوان این UI را به نحو زیر سفارشی سازی کرد تا بتواند JWT را دریافت و به سمت سرور ارسال کند:
namespace BlazorWasm.WebApi
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
// ...
services.AddSwaggerGen(c =>
{
c.SwaggerDoc("v1", new OpenApiInfo { Title = "BlazorWasm.WebApi", Version = "v1" });
c.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme
{
In = ParameterLocation.Header,
Description = "Please enter the token in the field",
Name = "Authorization",
Type = SecuritySchemeType.ApiKey
});
c.AddSecurityRequirement(new OpenApiSecurityRequirement {
{
new OpenApiSecurityScheme
{
Reference = new OpenApiReference
{
Type = ReferenceType.SecurityScheme,
Id = "Bearer"
}
},
new string[] { }
}
});
});
}
// ...
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-25.zip 
