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

客官°小女子只卖身不卖艺 2024-03-16 14:14 24阅读 0赞

接上文[学习ASP.NET Core Blazor编程系列二十七——JWT登录（1） ][ASP.NET Core Blazor_JWT_1_]，我们继续实现功能。

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

![6ff8aae540bd1b885cefd2064a64455f.gif][]

using Microsoft.IdentityModel.Tokens;
    using System.Security.Claims;
     
    
    namespace BlazorAppDemo.Utils
    {
    
        public interface IJWTHelper
    
        {
    
            string CreateJwtToken<T>(T user);
    
            T GetToken<T>(string Token);
    
            IEnumerable<Claim> ParseToken(string token);
    
            string? ValidateJwtToken(IEnumerable<Claim> jwtToken);
    
            TokenValidationParameters ValidParameters();
    
        }
    }

![c0a460f6ccfa661add5104ce3d854d74.gif][]

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

![f8ae8daa783e216077af774631567aeb.gif][]

using BlazorAppDemo.Models;
    using Microsoft.IdentityModel.Tokens;
    using System.IdentityModel.Tokens.Jwt;
    using System.Reflection;
    using System.Security.Claims;
    using System.Text;
     
    namespace BlazorAppDemo.Utils
    {
    
        public class JWTHelper : IJWTHelper
        {
            private readonly IConfiguration _configuration;
            private readonly JwtSecurityTokenHandler _jwtSecurityTokenHandler;
    
            public JWTHelper(IConfiguration configuration, 
    JwtSecurityTokenHandler jwtSecurityTokenHandler)
            {
                _configuration = configuration;
                _jwtSecurityTokenHandler = jwtSecurityTokenHandler;
    
            }
            /// <summary>
            /// 创建加密JwtToken
            /// </summary>
            /// <param name="user"></param>
            /// <returns></returns>
    
            public string CreateJwtToken<T>(T user)
            {
                var signingAlogorithm = SecurityAlgorithms.HmacSha256;
    
                var claimList = this.CreateClaimList(user);
                //Signature
    
                //取出私钥并以utf8编码字节输出
                var secretByte = Encoding.UTF8.GetBytes(_configuration["Authentication:SecretKey"]);
                //使用非对称算法对私钥进行加密
                var signingKey = new SymmetricSecurityKey(secretByte);
                //使用HmacSha256来验证加密后的私钥生成数字签名
    
                var signingCredentials = new SigningCredentials(signingKey, signingAlogorithm);
                //在 RFC 7519 规范中(Section#4)，一共定义了 7 个预设的 Claims。
                //生成Token
                var Token = new JwtSecurityToken(
              issuer: _configuration["Authentication:Issuer"], //发布者
                audience: _configuration["Authentication:Audience"], //接收者
                claims: claimList, //存放的用户信息
                notBefore: DateTime.UtcNow, //发布时间
                expires: DateTime.UtcNow.AddDays(1), //有效期设置为1天
                signingCredentials //数字签名
    
                );
    
                //生成字符串token
                var TokenStr = new JwtSecurityTokenHandler().WriteToken(Token);
                return TokenStr;
            }
     
            public T GetToken<T>(string Token)
            {
                Type t = typeof(T);
     
                object objA = Activator.CreateInstance(t);
                var b = _jwtSecurityTokenHandler.ReadJwtToken(Token);
                foreach (var item in b.Claims)
                {
                    PropertyInfo _Property = t.GetProperty(item.Type);
                    if (_Property != null && _Property.CanRead)
                    {
                        _Property.SetValue(objA, item.Value, null);
                    }
     
                }
                return (T)objA;
            }
    
            /// <summary>
            /// 创建包含用户信息的CalimList
            /// </summary>
            /// <param name="authUser"></param>
            /// <returns></returns>
    
            private List<Claim> CreateClaimList<T>(T authUser)
            {
    
                var Class = typeof(UserInfo);
                List<Claim> claimList = new List<Claim>();
    
                foreach (var item in Class.GetProperties())
                {
    
                    if (item.Name == "Password")
                    {
    
                        continue;
                    }
    
                    claimList.Add(new Claim(ClaimTypes.Name, 
    Convert.ToString(item.GetValue(authUser))));
                }
    
                return claimList;
            }
        
    
            /// /// <summary>
            /// 从令牌中获取数据声明
            /// </summary>
            /// <param name="token">令牌</param>
            /// <returns></returns>
            public IEnumerable<Claim> ParseToken(string token)
            {
                var tokenHandler = new JwtSecurityTokenHandler();
                var validateParameter = ValidParameters();
                token = token.Replace("Bearer ", "");
                try
                {
                    tokenHandler.ValidateToken(token, validateParameter,
     out SecurityToken validatedToken);
                    var jwtToken = tokenHandler.ReadJwtToken(token);
                    return jwtToken.Claims;
                }
                catch (Exception ex)
                {
                    Console.WriteLine(ex.Message);
                    return null;
                }
            }
    }
    }

![6bbdd00420e64ce48992e811b227e90c.gif][]

7. 在Visual Studio 2022的解决方案资源管理器中，使用鼠标左键双击“Auth”文件夹中的“ImitateAuthStateProvider.cs”文件，在文本编辑器中打开，对代码进行修改。具体代码如下：

![8528e932981a9606bfbee4f5ffe81e3c.gif][]

using BlazorAppDemo.Models;
    using BlazorAppDemo.Utils;
    using Microsoft.AspNetCore.Components.Authorization;
    using System.Security.Claims;
    
    
    namespace BlazorAppDemo.Auth
    {
        public class ImitateAuthStateProvider : AuthenticationStateProvider
        {
    
            private readonly IJWTHelper jwt;
            public ImitateAuthStateProvider(IJWTHelper _jwt) => jwt = _jwt; //DI
    
            bool isLogin = false;
            string token = string.Empty;
            public override Task<AuthenticationState> GetAuthenticationStateAsync()
            {
    
                if (isLogin)
                {
     
                    var claims = new List<Claim>()
                {
    
                    new Claim(ClaimTypes.Name,"user"),
                    new Claim(ClaimTypes.Role, "admin")
                };
    
                    var anonymous = new ClaimsIdentity(claims, "testAuthType");
                    return Task.FromResult(new AuthenticationState(new ClaimsPrincipal(anonymous)));
    
                }
                else
    
                {
    
                var anonymous = new ClaimsIdentity();
     
                return Task.FromResult(new AuthenticationState(new ClaimsPrincipal(anonymous)));
            }
    
            }
            public void Login(UserInfo request)
            {
     
                //1.验证用户账号密码是否正确
                if (request == null)
    
                {
                    isLogin=false;
                }
    
    
    
                if (request.UserName == "user" && request.Password == "111111")
                {
    
                    isLogin = true;
                   token= jwt.CreateJwtToken<UserInfo>(request);
    
                    Console.WriteLine($"JWT Token={token}");
                }
    
                NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
            }
        }
    }

![7beb276dcc2861129b1dc7f275d56c28.gif][]

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

![b436815178bd286104c6dc4d02e6c2df.gif][]

using BlazorAppDemo.Data;
    using BlazorAppDemo.Models;
    using Microsoft.AspNetCore.Components;
    
    using Microsoft.AspNetCore.Components.Web;
    using Microsoft.Extensions.Configuration;
    using Microsoft.EntityFrameworkCore;
    using Microsoft.Extensions.Hosting;
    using Microsoft.AspNetCore.Components.Authorization;
    
    using BlazorAppDemo.Auth;
    using Microsoft.AspNetCore.Authentication.JwtBearer;
    
    using Microsoft.IdentityModel.Tokens;
    using System.Text;
    using System.IdentityModel.Tokens.Jwt;
    using BlazorAppDemo.Utils;
    
     
    
    var builder = WebApplication.CreateBuilder(args);
     
    
    // Add services to the container.
    
    builder.Services.AddRazorPages();
    
    builder.Services.AddServerSideBlazor();
    
    builder.Services.AddSingleton<WeatherForecastService>();
    
    System.Console.WriteLine(ConfigHelper.Configuration["ConnectionStrings:BookContext"]);
    builder.Services.AddDbContextFactory<BookContext>(opt =>
     opt.UseSqlServer(ConfigHelper.Configuration["ConnectionStrings:BookContext"]));
    
    //builder.Services.AddScoped<AuthenticationStateProvider, ImitateAuthStateProvider>();
    
    builder.Services.AddScoped<ImitateAuthStateProvider>();
    builder.Services.AddScoped<AuthenticationStateProvider>(implementationFactory =>
    
    implementationFactory.GetRequiredService<ImitateAuthStateProvider>());
    builder.Services.AddScoped<JwtSecurityTokenHandler>();
     
    //JWT
    //JWT认证
    
    builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme).AddJwtBearer(options =>
    {
    
        //取出私钥
        var secretByte = Encoding.UTF8.GetBytes(builder.Configuration["Authentication:SecretKey"]);
        options.TokenValidationParameters = new TokenValidationParameters()
    
        {
            //验证发布者
            ValidateIssuer = true,
            ValidIssuer = builder.Configuration["Authentication:Issuer"],
            //验证接收者
            ValidateAudience = true,
    
            ValidAudience = builder.Configuration["Authentication:Audience"],
            //验证是否过期
            ValidateLifetime = true,
            //验证私钥
            IssuerSigningKey = new SymmetricSecurityKey(secretByte)
        };
    
    });
    //自己写的Jwt 扩展
    builder.Services.AddScoped<IJWTHelper,JWTHelper>();
     
     
    var app = builder.Build();
    
    
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
     
    
    using (var scope = app.Services.CreateScope())
    {
    
        var services = scope.ServiceProvider;
        try
        {
    
            Console.WriteLine("数据库开始初始化。");
            var context = services.GetRequiredService<BookContext>();
            // requires using Microsoft.EntityFrameworkCore;
    
            context.Database.Migrate();
    
            // Requires using RazorPagesMovie.Models;
            SeedData.Initialize(services);
            Console.WriteLine("数据库初始化结束。");
        } 
    
        catch (Exception ex)
    
        {
            var logger = services.GetRequiredService<ILogger<Program>>();
            logger.LogError(ex, "数据库数据初始化错误.");
    
        }
    }
    
    
    app.UseHttpsRedirection();
     
    app.UseStaticFiles();
    
     
    app.UseRouting();
    
    
    app.MapBlazorHub();
    app.MapFallbackToPage("/_Host");
    app.UseAuthentication();
    app.UseAuthorization();
    
     
    
    app.Run();

![8581ad7845331e4d643d4167b52d2fa5.gif][]

9.在Visual Studio 2022的菜单栏上，找到“调试-->开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，浏览器中会Login登录页面。

10.我们在用户名输入框中输入用户名，在密码输入框中输入密码，点击“登录”按钮，进行模拟登录。我们进入了系统。并且生成了JWT Token。如下图。

![25cba48b3c214aaf52fa7fc6dc0a96e0.png][]

[ASP.NET Core Blazor_JWT_1_]: https://www.cnblogs.com/chillsrc/p/17156513.html
[6ff8aae540bd1b885cefd2064a64455f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ca1e0786a8d34f23beae528d6229fbed.png
[c0a460f6ccfa661add5104ce3d854d74.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1ecfbbc6c9074c3e916028cc78173072.png
[f8ae8daa783e216077af774631567aeb.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1aaed32c567142f7a70533156bab1de3.png
[6bbdd00420e64ce48992e811b227e90c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/583f49adbefe4df187c13a5ac4a9e703.png
[8528e932981a9606bfbee4f5ffe81e3c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/789bc8e4170742459092833511f5a35b.png
[7beb276dcc2861129b1dc7f275d56c28.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6aa4d545a03749ab9b248f27cd7fa88d.png
[b436815178bd286104c6dc4d02e6c2df.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2818caab775145ffa1b92ea2358145d3.png
[8581ad7845331e4d643d4167b52d2fa5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d924264b04d746c0a3b84c2bc364d2ea.png
[25cba48b3c214aaf52fa7fc6dc0a96e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9d504fbd3b21486d917cfe9b8eab9c37.png