使用WebApi和Asp.Net Core Identity 认证 Blazor WebAssembly(Blazor客户端应用)
原文:https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-webapi-aspnet-core-identity/
由于Blazor框架已经有所更新，翻译中有些内容我根据实际情况做了更改。
设置：创建解决方案
选择Blazor应用
项目名称
选择Blazor WebAssembly App(这里要勾选Asp.Net Core Host),如果找不到Blazor WebAssembly App,请先在命令行执行以下命令:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview1.19508.20
解决方案创建之后，我们将开始对AuthenticationWithBlazorWebAssembly.Server这个项目进行一些更改。
配置WebAPI
在配置WebAPI之前我先安装一些NuGet包:
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="3.0.0" /> <PackageReference Include="Microsoft.AspNetCore.Blazor.Server" Version="3.0.0-preview9.19465.2" /> <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="3.0.0" /> <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.0.0" /> <PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="3.0.0" /> <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.0.0" /> <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.0.0"> <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.0.0" />
设置Identity数据库：连接字符串
在进行任何设置之前，数据库方面需要一个连接字符串。这通常是保存在appsettings.json中的,但Blazor托管模版并未提供此文件，所以我们需要手动添加此文件。
在AuthenticationWithBlazorWebAssembly.Server项目右键添加 -> 新建项，然后选择应用设置文件。
{ "ConnectionStrings": { "DefaultConnection": "Server=(localdb)\\MSSQLLocalDB;Database=AuthenticationWithBlazorWebAssembly;Trusted_Connection=True;MultipleActiveResultSets=true" } }
该文件带有一个已经设置好的连接字符串，你可以随时将其指向需要的地方。我们只需要添加一个数据库名就可以了，其余的保持默认值。
设置Identity数据库：DbContext
在AuthenticationWithBlazorWebAssembly.Server项目跟目录创建一个名为Data的目录，然后使用下面代码添加一个名为ApplicationDbContext的类文件。
public class ApplicationDbContext : IdentityDbContext { public ApplicationDbContext(DbContextOptions options) : base(options) { } }
因为我们使用Identity需要将信息存储在数据库中，所以我们不是从DbContext继承,而是从IdentityDbContext继承。IdentityDbContext基类包含EF配置管理Identity数据库表需要的所有配置。
设置Identity数据库：注册服务
在Startup类中，我们需要添加一个构造函数，接收IConfiguration参数和一个属性来存储它。IConfiguration允许我们访问appsettings.json文件，如：连接字符串。
public IConfiguration Configuration { get; } public Startup(IConfiguration configuration) { Configuration = configuration; }
接下来我们将以下代码添加到ConfigureServices方法的顶部。
public void ConfigureServices(IServiceCollection services) { services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); services.AddDefaultIdentity<IdentityUser>() .AddEntityFrameworkStores<ApplicationDbContext>(); //这里省略掉其他代码 }
这里两行代码将ApplicationDbContext添加到服务集合中。然后为ASP.NET Core Identity注册各种服务并通过ApplicationDbContext使用Entity Framework作为数据存储。
设置Identity数据库：创建数据库
现在可以为数据库创建初始迁移。在程序包管理器控制台运行以下命令。
Add-Migration CreateIdentitySchema -o Data/Migations
命令运行完成，你应该能在Data > Migrations文件夹中看到迁移文件。在控制台中运行命令Update-Database将迁移应用到数据库。
在运行迁移命令时遇到任何问题，请确保在程序包管理器中选择AuthenticationWithBlazorWebAssembly.Server项目作为默认项目。
启用身份验证：注册服务
接下来在API中启用身份验证。同样，在ConfigureServices中，在上一节添加的代码之后添加以下代码。
public void ConfigureServices(IServiceCollection services) { //这里省略到其他代码 services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme) .AddJwtBearer(options => { options.TokenValidationParameters = new TokenValidationParameters { ValidateIssuer = true, ValidateAudience = true, ValidateLifetime = true, ValidateIssuerSigningKey = true, ValidIssuer = Configuration["JwtIssuer"], ValidAudience = Configuration["JwtAudience"], IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["JwtSecurityKey"])) }; });
//这里省略掉其他代码
}
上面代码想服务容器添加和设置一些身份验证所需的服务。然后为JSON Web Tokens(JWT)添加处理程序，并配置接收到的JWTs应该如何验证。你可以根据需求调整这些设置。
启用身份验证：应用程序设置
有一些设置要从appsettings.json文件中加载。
Configuration["JwtIssuer"]Configuration["JwtAudience"]Configuration["JwtSecurityKey"]
我们还未将它们添加到appsettings文件中。现在添加它们并添加一个设置用来控制令牌的持续时间，稍后我们会使用这个设置。
"JwtSecurityKey": "RANDOM_KEY_MUST_NOT_BE_SHARED", "JwtIssuer": "https://localhost", "JwtAudience": "https://localhost", "JwtExpiryInDays": 1,
保证JwtSecurityKey 的安全是非常重要的，因为这是用来对API产生的令牌签名的，如果泄露那么你的应用程序将不在安全。
由于我们在本地运行所有内容，所以我将Issuer和Audience设置为localhost。如果在生产环境使用它，我们需要将Issuer 设置为API运行的域名，将Audience设置为客户端应用程序运行的域名。
启用身份验证：添加中间件
最后，我们需要在Configure 方法中将必要的中间件添加到管道中。这将在API中启用身份验证和授权功能。将以下代码添加到app.UseEndpoints中间件前面。
app.UseAuthentication();
app.UseAuthorization();
这就是Startup类所需要的所有东西。现在API已经启用了身份验证。
你可以通过向WeatherForecastController中的Get方法添加[Authorize]属性来测试一切是否正常。然后启用应用程序并导航到Fetch Data页面，应该不会加载任何数据，应该会在控制台中看到401错误。
添加账户(account)控制器
为了让人们登录到我们的应用程序，他们需要能够注册。我们将添加一个帐户控制器，它将负责创建新帐户。
[Route("api/[controller]")] [ApiController] public class AccountsController : ControllerBase { //private static UserModel LoggedOutUser = new UserModel { IsAuthenticated = false }; private readonly UserManager<IdentityUser> _userManager; public AccountsController(UserManager<IdentityUser> userManager) { _userManager = userManager; } [HttpPost] public async Task<IActionResult> Post([FromBody]RegisterModel model) { var newUser = new IdentityUser { UserName = model.Email, Email = model.Email }; var result = await _userManager.CreateAsync(newUser, model.Password); if (!result.Succeeded) { var errors = result.Errors.Select(x => x.Description); return BadRequest(new RegisterResult { Successful = false, Errors = errors }); } return Ok(new RegisterResult { Successful = true }); } }
Post操作使用ASP.NET Core Identity从RegisterModel来创建系统的新用户。
我们还没用添加注册模型，现在使用以下代码添加到AuthenticationWithBlazorWebAssembly.Shared项目中，稍后我们的Blazor应用程序将会使用到它。
public class RegisterModel { [Required] [EmailAddress] [Display(Name = "Email")] public string Email { get; set; } [Required] [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)] [DataType(DataType.Password)] [Display(Name = "Password")] public string Password { get; set; } [DataType(DataType.Password)] [Display(Name = "Confirm password")] [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")] public string ConfirmPassword { get; set; } }
如果一切顺利，则会返回一个成功的RegisterResult，否则会返回一个失败的RegisterResult，我们一样将它添加到AuthenticationWithBlazorWebAssembly.Shared项目中。
public class RegisterResult { public bool Successful { get; set; } public IEnumerable<string> Errors { get; set; } }
添加登录(login)控制器
现在我们有了用户注册的方式，我们还需要用户登录方式。
[Route("api/[controller]")] [ApiController] public class LoginController : ControllerBase { private readonly IConfiguration _configuration; private readonly SignInManager<IdentityUser> _signInManager; public LoginController(IConfiguration configuration, SignInManager<IdentityUser> signInManager) { _configuration = configuration; _signInManager = signInManager; } [HttpPost] public async Task<IActionResult> Login([FromBody] LoginModel login) { var result = await _signInManager.PasswordSignInAsync(login.Email, login.Password, false, false); if (!result.Succeeded) return BadRequest(new LoginResult { Successful = false, Error = "Username and password are invalid." }); var claims = new[] { new Claim(ClaimTypes.Name, login.Email) }; var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration["JwtSecurityKey"])); var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256); var expiry = DateTime.Now.AddDays(Convert.ToInt32(_configuration["JwtExpiryInDays"])); var token = new JwtSecurityToken( _configuration["JwtIssuer"], _configuration["JwtAudience"], claims, expires: expiry, signingCredentials: creds ); return Ok(new LoginResult { Successful = true, Token = new JwtSecurityTokenHandler().WriteToken(token) }); } }
登录控制器(login controller)使用ASP.NET Core Identity SignInManger验证用户名和密码。如果它们都正确，则生成一个新的JSON Web Token并在LoginResult返回给客户端。
像之前一样,我们需要将LoginModel和LoginResult添加到AuthenticationWithBlazorWebAssembly.Shared项目中。
public class LoginModel { [Required] public string Email { get; set; } [Required] public string Password { get; set; } public bool RememberMe { get; set; } }
public class LoginResult { public bool Successful { get; set; } public string Error { get; set; } public string Token { get; set; } }
这就是API需要的所有东西。我们现在已经将其配置为通过JSON web tokens进行身份验证。接下来我们需要为Blazor WebAssembly(客户端)应用程序添加注册新用户和登录控制器。
配置Blazor客户端
接下来我们关注Blazor。首先需要安装Blazored.LocalStorage，我们稍后将需要它在登录时从API中持久化验证令牌。
我们还需要在App组件中使用AuthorizeRouteView组件替换RouteView组件(这里需要使用Microsoft.AspNetCore.Components.Authorization NuGet包并在_Imports.razor添加@using Microsoft.AspNetCore.Components.Authorization)。
<Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router>
此组件提供类型为Task<AuthenticationState>的级联参数。AuthorizeView通过使用它来确定当前用户的身份验证状态。
但是任何组件都可以请求参数并使用它来执行过程逻辑，例如：
@page "/" <button @onclick="@LogUsername">Log username</button> @code { [CascadingParameter] private Task<AuthenticationState> authenticationStateTask { get; set; } private async Task LogUsername() { var authState = await authenticationStateTask; var user = authState.User; if (user.Identity.IsAuthenticated) { Console.WriteLine($"{user.Identity.Name} is authenticated."); } else { Console.WriteLine("The user is NOT authenticated."); } } }
创建自定义AuthenticationStateProvider
因为我们使用Blazor WebAssembly，所以我们需要为AuthenticationStateProvider提供自定义实现。因为在客户端应用程序有太多的选项，所以无法设计一个适用于所有人的默认类。
我们需要重写GetAuthenticationStateAsync方法。在此方法中，我们需要确定当前用户是否经过身份验证。我们还将添加两个辅助方法，当用户登录或注销时，我们将使用这些方法更新身份验证状态。
public class ApiAuthenticationStateProvider : AuthenticationStateProvider { private readonly HttpClient _httpClient; private readonly ILocalStorageService _localStorage; public ApiAuthenticationStateProvider(HttpClient httpClient, ILocalStorageService localStorage) { _httpClient = httpClient; _localStorage = localStorage; } public override async Task<AuthenticationState> GetAuthenticationStateAsync() { var savedToken = await _localStorage.GetItemAsync<string>("authToken"); if (string.IsNullOrWhiteSpace(savedToken)) { return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity())); } _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", savedToken); return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(savedToken), "jwt"))); } public void MarkUserAsAuthenticated(string token) { var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(token), "jwt")); var authState = Task.FromResult(new AuthenticationState(authenticatedUser)); NotifyAuthenticationStateChanged(authState); } public void MarkUserAsLoggedOut() { var anonymousUser = new ClaimsPrincipal(new ClaimsIdentity()); var authState = Task.FromResult(new AuthenticationState(anonymousUser)); NotifyAuthenticationStateChanged(authState); } private IEnumerable<Claim> ParseClaimsFromJwt(string jwt) { var claims = new List<Claim>(); var payload = jwt.Split('.')[1]; var jsonBytes = ParseBase64WithoutPadding(payload); var keyValuePairs = JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes); keyValuePairs.TryGetValue(ClaimTypes.Role, out object roles); if (roles != null) { if (roles.ToString().Trim().StartsWith("[")) { var parsedRoles = JsonSerializer.Deserialize<string[]>(roles.ToString()); foreach (var parsedRole in parsedRoles) { claims.Add(new Claim(ClaimTypes.Role, parsedRole)); } } else { claims.Add(new Claim(ClaimTypes.Role, roles.ToString())); } keyValuePairs.Remove(ClaimTypes.Role); } claims.AddRange(keyValuePairs.Select(kvp => new Claim(kvp.Key, kvp.Value.ToString()))); return claims; } private byte[] ParseBase64WithoutPadding(string base64) { switch (base64.Length % 4) { case 2: base64 += "=="; break; case 3: base64 += "="; break; } return Convert.FromBase64String(base64); } }
这里有很多代码，让我们一步一步来分析。
CascadingAuthenticationState组件调用GetAuthenticationStateAsync方法来确定当前用户是否经过验证。
上面的代码，我们检查local storge是否有验证令牌。如果local storge中没有令牌，那么我们将返回一个新的AuthenticationState，其中包含一个空的ClaimsPrincipal。这就说明当前用户用户没有经过身份验证。
如果有令牌，读取并设置HttpClient的默认Authorization Header，并返回一个包含ClaimsPrincipal新的AuthenticationState的令牌声明。该声明(Claims)使用ParseClaimsFromJwt方法从令牌中提取。此方法解码令牌并返回其中包含的声明。
MarkUserAsAuthenticated辅助方法用于登录时调用NotifyAuthenticationStateChanged方法，该方法触发AuthenticationStateChanged事件。这将通过CascadingAuthenticationState组件级联新的身份验证状态。
MarkUserAsLoggedOut用于用户注销时。
Auth Service
Auth Service将在组件中注册用户并登录到应用程序和用户注销使用。
public class AuthService : IAuthService { private readonly HttpClient _httpClient; private readonly AuthenticationStateProvider _authenticationStateProvider; private readonly ILocalStorageService _localStorage; public AuthService(HttpClient httpClient, AuthenticationStateProvider authenticationStateProvider, ILocalStorageService localStorage) { _httpClient = httpClient; _authenticationStateProvider = authenticationStateProvider; _localStorage = localStorage; } public async Task<RegisterResult> Register(RegisterModel registerModel) { var result = await _httpClient.PostJsonAsync<RegisterResult>("api/accounts", registerModel); return result; } public async Task<LoginResult> Login(LoginModel loginModel) { var loginAsJson = JsonSerializer.Serialize(loginModel); var response = await _httpClient.PostAsync("api/Login", new StringContent(loginAsJson, Encoding.UTF8, "application/json")); var loginResult = JsonSerializer.Deserialize<LoginResult>(await response.Content.ReadAsStringAsync(), new JsonSerializerOptions { PropertyNameCaseInsensitive = true }); if (!response.IsSuccessStatusCode) { return loginResult; } await _localStorage.SetItemAsync("authToken", loginResult.Token); ((ApiAuthenticationStateProvider)_authenticationStateProvider).MarkUserAsAuthenticated(loginResult.Token); _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", loginResult.Token); return loginResult; } public async Task Logout() { await _localStorage.RemoveItemAsync("authToken"); ((ApiAuthenticationStateProvider)_authenticationStateProvider).MarkUserAsLoggedOut(); _httpClient.DefaultRequestHeaders.Authorization = null; } }
Register方法提交registerModel给accounts controller并返回RegisterResult给调用者。
Login 方法类似于Register 方法，它将LoginModel 发送给login controller。但是，当返回一个成功的结果时，它将返回一个授权令牌并持久化到local storge。
最后我们调用ApiAuthenticationStateProvider上的方法MarkUserAsAuthenticated ，设置HttpClient的默认authorization header。
Logout 这个方法就是执行与Login 方法相反的操作。
注册组件(Register Component)
我们已经到了最后阶段了。现在我们可以将注意力转向UI，并创建一个允许人们在站点注册的组件。
@page "/register" @inject IAuthService AuthService @inject NavigationManager NavigationManager <h1>Register</h1> @if (ShowErrors) { <div class="alert alert-danger" role="alert"> @foreach (var error in Errors) { <p>@error</p> } </div> } <div class="card"> <div class="card-body"> <h5 class="card-title">Please enter your details</h5> <EditForm Model="RegisterModel" OnValidSubmit="HandleRegistration"> <DataAnnotationsValidator /> <ValidationSummary /> <div class="form-group"> <label for="email">Email address</label> <InputText Id="email" class="form-control" @bind-Value="RegisterModel.Email" /> <ValidationMessage For="@(() => RegisterModel.Email)" /> </div> <div class="form-group"> <label for="password">Password</label> <InputText Id="password" type="password" class="form-control" @bind-Value="RegisterModel.Password" /> <ValidationMessage For="@(() => RegisterModel.Password)" /> </div> <div class="form-group"> <label for="confirmpassword">Confirm Password</label> <InputText Id="confirmpassword" type="password" class="form-control" @bind-Value="RegisterModel.ConfirmPassword" /> <ValidationMessage For="@(() => RegisterModel.ConfirmPassword)" /> </div> <button type="submit" class="btn btn-primary">Submit</button> </EditForm> </div> </div> @code { private RegisterModel RegisterModel = new RegisterModel(); private bool ShowErrors; private IEnumerable<string> Errors; private async Task HandleRegistration() { ShowErrors = false; var result = await AuthService.Register(RegisterModel); if (result.Successful) { NavigationManager.NavigateTo("/login"); } else { Errors = result.Errors; ShowErrors = true; } } }
注册组件包含一个表单让用户输入他们的电子邮件和密码。提交表单时，会调用AuthService 的方法Register 。如果注册成功那么用户会被导航到登录页，否则，会将错误显示给用户。
登录组件(Login Component)
现在我们可以注册一个新的帐户，我们需要能够登录。登录组件将用于此。
@page "/login" @inject IAuthService AuthService @inject NavigationManager NavigationManager <h1>Login</h1> @if (ShowErrors) { <div class="alert alert-danger" role="alert"> <p>@Error</p> </div> } <div class="card"> <div class="card-body"> <h5 class="card-title">Please enter your details</h5> <EditForm Model="loginModel" OnValidSubmit="HandleLogin"> <DataAnnotationsValidator /> <ValidationSummary /> <div class="form-group"> <label for="email">Email address</label> <InputText Id="email" Class="form-control" @bind-Value="loginModel.Email" /> <ValidationMessage For="@(() => loginModel.Email)" /> </div> <div class="form-group"> <label for="password">Password</label> <InputText Id="password" type="password" Class="form-control" @bind-Value="loginModel.Password" /> <ValidationMessage For="@(() => loginModel.Password)" /> </div> <button type="submit" class="btn btn-primary">Submit</button> </EditForm> </div> </div> @code { private LoginModel loginModel = new LoginModel(); private bool ShowErrors; private string Error = ""; private async Task HandleLogin() { ShowErrors = false; var result = await AuthService.Login(loginModel); if (result.Successful) { NavigationManager.NavigateTo("/"); } else { Error = result.Error; ShowErrors = true; } } }
与注册组件类似的设计，我们也提供一个表单用于用户输入电子邮件和密码。表单提交时，将调用AuthService的方法Login。如果登录成功，用户将被重定向到主页，否则将显示错误消息。
注销组件(Logout Component)
我们现在可以注册和登录，但我们也需要注销的功能。我用了一个页面组件来做这个，但是你也可以通过点击某个地方的按钮来实现。
@page "/logout" @inject IAuthService AuthService @inject NavigationManager NavigationManager @code { protected override async Task OnInitializedAsync() { await AuthService.Logout(); NavigationManager.NavigateTo("/"); } }
这个组件没有用户界面，当用户导航到它时，将调用AuthService上的方法Logout，然后将用户重定向回主页。
添加一个LoginDisplay组件并更新MainLayout组件
最后的任务是添加一个LoginDisplay组件并更新MainLayout 组件。
LoginDisplay 组件与Blazor Server模版一样，如果未经验证，它将显示登录与注册链接，否则显示电子邮件和注销链接。
<AuthorizeView>
<Authorized>
Hello, @context.User.Identity.Name!
<a href="/logout">Log out</a>
</Authorized>
<NotAuthorized>
<a href="/register">Register</a>
<a href="/login">Log in</a>
</NotAuthorized>
</AuthorizeView>
我们现在只需要更新MainLayout组件。
@inherits LayoutComponentBase <div class="sidebar"> <NavMenu /> </div> <div class="main"> <div class="top-row px-4"> <LoginDisplay /> <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a> </div> <div class="content px-4"> @Body </div> </div>
注册服务(Registering Services)
最后在Startup类中注册服务。
services.AddBlazoredLocalStorage(); services.AddAuthorizationCore(); services.AddScoped<AuthenticationStateProvider, ApiAuthenticationStateProvider>(); services.AddScoped<IAuthService, AuthService>();
如果一切都按计划进行，那么你应该得到这样的结果。
总结
这篇文章展示了如何WebAPI和ASP.NET Core Identity创建一个带有身份验证的Blazor WebAssembly(Blazor客户端)应用程序。
展示WebAPI如何处理和签发令牌(JSON web tokens)。以及如何设置各种控制器操作来为客户端应用程序提供服务。最后，展示如何配置Blazor来使用API和它签发的令牌来设置应用的身份验证状态。
最后也提供我学习本文跟随作者所写的源码(GITHUB)。
