学习ASP.NET Core Blazor编程系列二十八——JWT登录（3）

牢记使命不忘初心

学习ASP.NET Core Blazor编程系列文章之目录学习ASP.NET Core Blazor编程系列一——综述学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）
学习ASP.NET Core Blazor编程系列三——实体学习ASP.NET Core Blazor编程系列五——列表页面学习ASP.NET Core Blazor编程系列七——新增图书学习ASP.NET Core Blazor编程系列八——数据校验学习ASP.NET Core Blazor编程系列十三——路由（完）学习ASP.NET Core Blazor编程系列十五——查询学习ASP.NET Core Blazor编程系列十六——排序学习ASP.NET Core Blazor编程系列二十——文件上传（完）学习ASP.NET Core Blazor编程系列二十一——数据刷新 学习ASP.NET Core Blazor编程系列二十二——登录（1）学习ASP.NET Core Blazor编程系列二十七——JWT登录（1） 十二、实现登入

        在学习ASP.NET Core Blazor编程系列二十二——登录（1）至学习ASP.NET Core Blazor编程系列二十六——登录（5）

系列文章中学习了使用AuthenticationStateProvider实现模拟登录。今天的文章实现JWT登录，使用WebAPI接口来实现通过JWT令牌登录。

• 在Visual Studio 2022的解决方案资源管理器中，鼠标右键单击“BlazorAppDemo”项目名称，在弹出菜单中选择 “添加—>新建文件夹”，并将新建文件夹改为“Api”。如下图。
  

 

     2.在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Api”文件夹，右键单击，在弹出菜单中选择“添加—>新建项”，在弹出对话框中，选择“API控制器-空”，并将控制器命名为“AuthController”。如下图。并添加如下代码：

 

1. using BlazorAppDemo.Models;
2. using BlazorAppDemo.Utils;
3. using Microsoft.AspNetCore.Http;
4. using Microsoft.AspNetCore.Identity;
5. using Microsoft.AspNetCore.Mvc;
6. using Microsoft.Extensions.Configuration;
7. using Microsoft.IdentityModel.Tokens;
8. using Newtonsoft.Json.Linq;
9. using System.IdentityModel.Tokens.Jwt;
10. using System.Security.Claims;
11. using System.Text;
13. namespace BlazorAppDemo.Api
14. {
15.     [Route("api/[controller]")]
16.     [ApiController]
17.     public class AuthController : ControllerBase
18.     {
19.         private readonly IJWTHelper jwtHelper;
20.       
22.         public AuthController(IJWTHelper _IJWTHelper)
23.         {
24.             this.jwtHelper = _IJWTHelper;
25.            
26.             }
28.         [HttpPost("Login")]
29.             public async Task<ActionResult<UserToken>> Login(UserInfo userInfo)
30.         {
31.             //Demo用，更好的做法是查询用户表来实现
32.             if (userInfo.UserName == "admin" && userInfo.Password == "111111")
33.             {
34.                 return BuildToken(userInfo);
35.             }
36.             else
37.             {
38.                 UserToken userToken = new UserToken()
39.                 {
40.                     StatusCode = System.Net.HttpStatusCode.Unauthorized,
41.                     IsSuccess = false
42.                   
43.                 };
44.                 return userToken;
45.             }
46.         }
47.       
49.         /// <summary>
50.         /// 建立Token
51.         /// </summary>
52.         /// <param name="userInfo"></param>
53.         /// <returns></returns>
54.         private UserToken BuildToken(UserInfo userInfo)
55.         {
56.          
57.             string jwtToken = jwtHelper.CreateJwtToken<UserInfo>(userInfo);
59.             //建立UserToken，回传客户端
60.             UserToken userToken = new UserToken()
61.             {
63.                 StatusCode = System.Net.HttpStatusCode.OK,
64.                 Token = jwtToken,
65.                 ExpireTime = DateTime.Now.AddMinutes(30),
66.                 IsSuccess= true
67.                
68.             };
70.             return userToken;
71.         }
72.     }
73. }

复制代码

3.在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Models”文件夹，右键单击，在弹出菜单中选择“添加—>类”，在弹出对话框中，将类命名为“UserToken”。并添加如下代码：

1. using System.Net;
2. namespace BlazorAppDemo.Models
3. {
4.     public class UserToken
5.     {
7.         public bool IsSuccess { get ; set; }
8.         public HttpStatusCode StatusCode { get; set; }
9.         public string Token { get; set; }
10.         public DateTime ExpireTime { get; set; }
11.      }
12. }

复制代码

 
4.在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Utils”文件夹，右键单击，在弹出菜单中选择“添加—>类”，在弹出对话框中，将类命名为“TokenManager”。并添加如下代码：

1. using BlazorAppDemo.Models;
2. using System.Collections.Concurrent;
4. namespace BlazorAppDemo.Utils
5. {
6.     public class TokenManager
7.     {
8.         private const string TOKEN = "authToken";
10.         private static readonly ConcurrentDictionary<string, UserToken> tokenManager;
12.          static TokenManager()
13.         {
15.             tokenManager=new ConcurrentDictionary<string, UserToken>();
16.         }
18.         public static ConcurrentDictionary<string, UserToken> Instance { get { return tokenManager; } }
20.         public static string Token { get { return TOKEN; } }
21.     }
22. }

复制代码

    5.在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Auth”文件夹，右键单击，在弹出菜单中选择“添加—>新建项”，在弹出对话框中，选择“接口”，并将接口命名为“IAuthService”。如下图。并添加如下代码：

1. using BlazorAppDemo.Models;
3. namespace BlazorAppDemo.Auth
4. {
6.     public interface IAuthService
7.     {
9.         Task<UserToken> LoginAsync(UserInfo userInfo);
11.         Task<UserToken> LogoutAsync();
12.     }
13. }

复制代码

 
6.在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Auth”文件夹，右键单击，在弹出菜单中选择“添加—>类”，在弹出对话框中，将类命名为“AuthService”。并添加如下代码：

1. using BlazorAppDemo.Models;
2. using BlazorAppDemo.Utils;
3. using Microsoft.AspNetCore.Components.Authorization;
4. using Microsoft.AspNetCore.Identity;
5. using Newtonsoft.Json;
6. using Newtonsoft.Json.Linq;
7. using System.Collections.Concurrent;
8. using System.Net.Http;
9. using System.Text;
11. namespace BlazorAppDemo.Auth
12. {
14.     public class AuthService : IAuthService
15.     {
16.         private readonly HttpClient httpClient;
17.         private readonly AuthenticationStateProvider authenticationStateProvider;
18.         private readonly IConfiguration configuration;
19.         private readonly Api.AuthController authController;
20.         private readonly string currentUserUrl, loginUrl, logoutUrl;
22.      
23.         public AuthService( HttpClient httpClient, AuthenticationStateProvider authenticationStateProvider, IConfiguration configuration,Api.AuthController authController)
24.         {
25.             this.authController = authController;
26.             this.httpClient = httpClient;
27.             this.authenticationStateProvider = authenticationStateProvider;
28.             this.configuration = configuration;
29.             currentUserUrl = configuration["AuthUrl:Current"] ?? "Auth/Current/";
30.             loginUrl = configuration["AuthUrl:Login"] ?? "api/Auth/Login";
31.             logoutUrl = configuration["AuthUrl:Logout"] ?? "/api/Auth/Logout/";
32.         }
33.         public async Task<UserToken> LoginAsync(UserInfo userInfo)
34.         {
36.             var result = authController.Login(userInfo);
37.             var loginResponse =  result.Result.Value;
38.             if (loginResponse != null && loginResponse.IsSuccess)
39.                 {                  
40.                     TokenManager.Instance.TryAdd(TokenManager.Token, loginResponse);
41.                    ((ImitateAuthStateProvider)authenticationStateProvider).NotifyUserAuthentication(loginResponse.Token);
43.                     httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("bearer", loginResponse.Token);
44.                      return loginResponse;
45.                 }
47.             return new UserToken() { IsSuccess = false };
48.         }
50.         public Task<UserToken> LogoutAsync()
51.         {
52.             throw new NotImplementedException();
53.         }
54.     }
55. }

复制代码

 
LoginAsync登录方法的实现功能：

• 將账号与密码，发送到AuthController做验证，验证成功生成UserToken实例
  
• 将token写到TokenManger实例中
  
• 通知前面页面更新登录状态
  
• 每次request的header将bearer token都带上。
  

 

7. 在Visual Studio 2022的解决方案管理器中，使用鼠标左键，双击ImitateAuthStateProvider.cs文件，对代码进行修改。具体代码如下：

1. using BlazorAppDemo.Models;
2. using BlazorAppDemo.Utils;
3. using Microsoft.AspNetCore.Components.Authorization;
4. using System.Net.Http;
5. using System.Security.Claims;
7. namespace BlazorAppDemo.Auth
8. {
9.     public class ImitateAuthStateProvider : AuthenticationStateProvider
10.     {
11.         private readonly IJWTHelper jwt;
12.         private AuthenticationState anonymous;
13.         private readonly HttpClient httpClient;
15.         public ImitateAuthStateProvider(IJWTHelper _jwt, HttpClient httpClient)
16.         {
18.             anonymous = new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
19.             jwt = _jwt;
20.             this.httpClient = httpClient;
21.         }
23.         bool isLogin = false;
24.         string token = string.Empty;
25.         public override Task<AuthenticationState> GetAuthenticationStateAsync()
26.         {
27.             //确认是否已经登录
28.             UserToken userToken;
29.                 TokenManager.Instance.TryGetValue(TokenManager.Token,out userToken);
30.             string tokenInLocalStorage=string.Empty;
31.             if (userToken != null)
32.             {
33.                 tokenInLocalStorage = userToken.Token;
34.             }
35.             if (string.IsNullOrEmpty(tokenInLocalStorage))
36.             {
37.                 //沒有登录，则返回匿名登录者
38.                 return Task.FromResult(anonymous);
39.             }
41.             //將token取出转换为claim
42.             var claims = jwt.ParseToken(tokenInLocalStorage);
44.             //在每次request的header中都将加入bearer token
45.             httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("bearer", <br>tokenInLocalStorage);
47.             //回传带有user claim的AuthenticationState
48.             return Task.FromResult(new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(claims, "jwt"))));
50.         }
51.         public void Login(UserInfo request)
52.         {
53.             //1.验证用户账号密码是否正确
54.             if (request == null)
55.             {
56.                 isLogin=false;
57.             }
58.             if (request.UserName == "user" && request.Password == "111111")
59.             {
60.                 isLogin = true;
61.                token= jwt.CreateJwtToken<UserInfo>(request);
62.                 Console.WriteLine($"JWT Token={token}");
63.             }
64.             NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
65.         }
67.         public void NotifyUserAuthentication(string token)
68.         {
69.             var claims = jwt.ParseToken(token);
70.             var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(claims, "jwt"));
72.             var authState = Task.FromResult(new AuthenticationState(authenticatedUser));
73.             NotifyAuthenticationStateChanged(authState);
74.        }
76.     }
77. }

复制代码

 
8. 在Visual Studio 2022的解决方案管理器中，使用鼠标左键，双击Program.cs文件，将之在文本编辑器中打开，将我们写的AuthController和框架中的HttpClient，使用DI方式注入，添加Controller服务。具体代码如下：

1. using BlazorAppDemo.Data;
2. using BlazorAppDemo.Models;
3. using Microsoft.AspNetCore.Components;
4. using Microsoft.AspNetCore.Components.Web;
5. using Microsoft.Extensions.Configuration;
6. using Microsoft.EntityFrameworkCore;
7. using Microsoft.Extensions.Hosting;
8. using Microsoft.AspNetCore.Components.Authorization;
9. using BlazorAppDemo.Auth;
10. using Microsoft.AspNetCore.Authentication.JwtBearer;
11. using Microsoft.IdentityModel.Tokens;
12. using System.Text;
13. using System.IdentityModel.Tokens.Jwt;
14. using BlazorAppDemo.Utils;
15. using BlazorAppDemo.Api;
17. var builder = WebApplication.CreateBuilder(args);
21. // Add services to the container.
22. builder.Services.AddRazorPages();
23. builder.Services.AddServerSideBlazor();
24. builder.Services.AddSingleton<WeatherForecastService>();
25. IConfiguration config = ConfigHelper.Configuration;
26. System.Console.WriteLine(config["ConnectionStrings:BookContext"]);
27. builder.Services.AddDbContextFactory<BookContext>(opt =>
28.    opt.UseSqlServer(ConfigHelper.Configuration["ConnectionStrings:BookContext"]));
29. builder.Services.AddScoped<ImitateAuthStateProvider>();
30. builder.Services.AddScoped<AuthenticationStateProvider>(implementationFactory =>
31. implementationFactory.GetRequiredService<ImitateAuthStateProvider>());
32. builder.Services.AddScoped<JwtSecurityTokenHandler>();
33. //此处的url地址改成自己实际的地址
35. builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("http://localhost:7110") });
37. builder.Services.AddScoped<IAuthService, AuthService>();
38. builder.Services.AddScoped<AuthController>();
39. //JWT
40. //JWT认证
42. builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme).AddJwtBearer(options =>
43. {
44.     //取出私钥
45.     var secretByte = Encoding.UTF8.GetBytes(builder.Configuration["Authentication:SecretKey"]);
46.     options.TokenValidationParameters = new TokenValidationParameters()
47.     {
48.         //验证发布者
49.         ValidateIssuer = true,
50.         ValidIssuer = builder.Configuration["Authentication:Issuer"],
51.         //验证接收者
52.         ValidateAudience = true,
53.         ValidAudience = builder.Configuration["Authentication:Audience"],
54.         //验证是否过期
55.         ValidateLifetime = true,
56.         //验证私钥
57.         IssuerSigningKey = new SymmetricSecurityKey(secretByte)
58.     };
59. });
60. ;
61. builder.Services.AddScoped<IJWTHelper,JWTHelper>();
63. var app = builder.Build();
65. // Configure the HTTP request pipeline.
66. if (!app.Environment.IsDevelopment())
67. {
68.     app.UseExceptionHandler("/Error");
69.     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
70.     app.UseHsts();
71. }
74. using (var scope = app.Services.CreateScope())
75. {
76.     var services = scope.ServiceProvider;
77.     try
78.     {
79.         Console.WriteLine("数据库开始初始化。");
80.         var context = services.GetRequiredService<BookContext>();
81.         // requires using Microsoft.EntityFrameworkCore;
82.         context.Database.Migrate();
83.         // Requires using RazorPagesMovie.Models;
84.         SeedData.Initialize(services);
85.         Console.WriteLine("数据库初始化结束。");
86.     }
88.     catch (Exception ex)
89.     {
90.         var logger = services.GetRequiredService<ILogger<Program>>();
91.         logger.LogError(ex, "数据库数据初始化错误.");
92.     }
93. }
96. app.UseHttpsRedirection();
98. app.UseStaticFiles();
101. app.UseRouting();
102. app.MapControllers();
105. app.MapBlazorHub();
106. app.MapFallbackToPage("/_Host");
107. app.UseAuthentication();
108. app.UseAuthorization();
111. app.Run();

复制代码

 
9. 在Visual Studio 2022的菜单栏上，找到“调试-->开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器使用Rest调试插件，对api/auth/login接口进行调试，只要登入成功就可以取得token。如下图。

 

 

10.我们在用户名输入框中输入用户名"admin"，在密码输入框中输入密码"111111"，点击“登录”按钮，进行登录。我们进入了系统。如下图。

 

来源:https://www.cnblogs.com/chillsrc/archive/2023/03/12/17207969.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！