AntDesign Pro + .NET Core 实现基于JWT的登录认证功能

很多同学说AgileConfig的UI实在是太丑了。我想想也是的,本来这个项目是我自己使用的,一开始甚至连UI都没有,全靠手动在数据库里修改数据。后来加上了UI也是使用了老掉牙的bootstrap3做为基础样式。前台框架也是使用了angularjs,同样是老掉牙的东西。过年期间终于下决心翻新AgileConfig的前端UI。最后选择的前端UI框架为AntDesign Pro + React。至于为啥选Ant-Design Pro是因为他好看,而且流行,选择React是因为VUE跟Angular我都略知一二,干脆趁此机会学一学React为何物,为何这么流行。
登录的认证方案为JWT,其实本人对JWT不太感冒(请看这里《我们真的需要jwt吗?》),无奈大家都喜欢,那我也只能随大流。
其实基于ant-design pro的界面我已经翻的差不多了,因为它支持mock数据,所以我一行后台代码都没修改,已经把界面快写完了。从现在开始要真正的跟后端代码进行联调了。那么我们先从登录开始吧。先看看后端asp.net core方面会如何进行修改。

修改ASP.NET Core后端代码

 "JwtSetting": {
 "SecurityKey": "xxxxxxxxxxxx", // 密钥
 "Issuer": "agileconfig.admin", // 颁发者
 "Audience": "agileconfig.admin", // 接收者
 "ExpireSeconds": 20 // 过期时间 s
 }

在appsettings.json文件添加jwt相关配置。

 public class JwtSetting
 {
  static JwtSetting()
  {
   Instance = new JwtSetting();
   Instance.Audience = Global.Config["JwtSetting:Audience"];
   Instance.SecurityKey = Global.Config["JwtSetting:SecurityKey"];
   Instance.Issuer = Global.Config["JwtSetting:Issuer"];
   Instance.ExpireSeconds = int.Parse(Global.Config["JwtSetting:ExpireSeconds"]);
  }

  public string SecurityKey { get; set; }

  public string Issuer { get; set; }

  public string Audience { get; set; }

  public int ExpireSeconds { get; set; }

  public static JwtSetting Instance
  {
   get;
  }
 }

定义一个JwtSetting类,用来读取配置。

 public void ConfigureServices(IServiceCollection services)
  {
   services.AddMemoryCache();
   services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
      .AddJwtBearer(options =>
      {
       options.TokenValidationParameters = new TokenValidationParameters
       {
        ValidIssuer = JwtSetting.Instance.Issuer,
        ValidAudience = JwtSetting.Instance.Audience,
        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(JwtSetting.Instance.SecurityKey)),
       };
      });
   services.AddCors();
   services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_3_0).AddRazorRuntimeCompilation();
   services.AddFreeSqlDbContext();
   services.AddBusinessServices();
   services.AddAntiforgery(o => o.SuppressXFrameOptionsHeader = true);
  }

修改Startup文件的ConfigureServices方法,修改认证Scheme为JwtBearerDefaults.AuthenticationScheme,在AddJwtBearer方法内配置jwt相关配置信息。因为前后端分离项目所以有可能api跟ui部署在不同的域名下,所以开启Cors。

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
  public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IServiceProvider serviceProvider)
  {
   if (env.IsDevelopment())
   {
    app.UseDeveloperExceptionPage();
   }
   else
   {
    app.UseMiddleware<ExceptionHandlerMiddleware>();
   }
   app.UseCors(op=> {
    op.AllowAnyOrigin();
    op.AllowAnyMethod();
    op.AllowAnyHeader();
   });
   app.UseWebSockets(new WebSocketOptions()
   {
    KeepAliveInterval = TimeSpan.FromSeconds(60),
    ReceiveBufferSize = 2 * 1024
   });
   app.UseMiddleware<WebsocketHandlerMiddleware>();
   app.UseStaticFiles();
   app.UseRouting();
   app.UseAuthentication();
   app.UseAuthorization();
   app.UseEndpoints(endpoints =>
   {
    endpoints.MapDefaultControllerRoute();
   });
  }

修改Startup的Configure方法,配置Cors为Any。

 public class JWT
 {
  public static string GetToken()
  {
   //创建用户身份标识,可按需要添加更多信息
   var claims = new Claim[]
   {
 new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
 new Claim("id", "admin", ClaimValueTypes.String), // 用户id
 new Claim("name", "admin"), // 用户名
 new Claim("admin", true.ToString() ,ClaimValueTypes.Boolean) // 是否是管理员
   };
   var key = Encoding.UTF8.GetBytes(JwtSetting.Instance.SecurityKey);
   //创建令牌
   var token = new JwtSecurityToken(
    issuer: JwtSetting.Instance.Issuer,
    audience: JwtSetting.Instance.Audience,
    signingCredentials: new SigningCredentials(new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature),
    claims: claims,
    notBefore: DateTime.Now,
    expires: DateTime.Now.AddSeconds(JwtSetting.Instance.ExpireSeconds)
   );

   string jwtToken = new JwtSecurityTokenHandler().WriteToken(token);

   return jwtToken;
  }
 }

添加一个JWT静态类用来生成jwt的token。因为agileconfig的用户只有admin一个所以这里用户名,ID都直接写死。

[HttpPost("admin/jwt/login")]
  public async Task<IActionResult> Login4AntdPro([FromBody] LoginVM model)
  {
   string password = model.password;
   if (string.IsNullOrEmpty(password))
   {
    return Json(new
    {
     status = "error",
     message = "密码不能为空"
    });
   }

   var result = await _settingService.ValidateAdminPassword(password);
   if (result)
   {

    var jwt = JWT.GetToken();

    return Json(new {
     status="ok",
     token=jwt,
     type= "Bearer",
     currentAuthority = "admin"
    });
   }

   return Json(new
   {
    status = "error",
    message = "密码错误"
   });
  }

新增一个Action方法做为登录的入口。在这里验证完密码后生成token,并且返回到前端。
到这里.net core这边后端代码改动的差不多了。主要是添加jwt相关的东西,这些内容网上已经写了很多了,不在赘述。
下面开始修改前端代码。

修改AntDesign Pro的代码

AntDesign Pro已经为我们生成好了登录页面,登录的逻辑等,但是原来的登录是假的,也不支持jwt token做为登录凭证,下面我们要修改多个文件来完善这个登录。

export function setToken(token:string): void {
 localStorage.setItem('token', token);
}

export function getToken(): string {
 var tk = localStorage.getItem('token');
 if (tk) {
 return tk as string;
 }

 return '';
}

在utils/authority.ts文件内新增2个方法,用来存储跟获取token。我们的jwt token存储在localStorage里。

/** 配置request请求时的默认参数 */
const request = extend({
 prefix: 'http://localhost:5000',
 errorHandler, // 默认错误处理
 credentials: 'same-origin', // 默认请求是否带上cookie,
});
const authHeaderInterceptor = (url: string, options: RequestOptionsInit) => {
 const authHeader = { Authorization: 'Bearer ' + getToken() };
 return {
 url: `${url}`,
 options: { ...options, interceptors: true, headers: authHeader },
 };
};

request.interceptors.request.use(authHeaderInterceptor);

修改utils/request.ts文件,定义一个添加Authorization头部的拦截器,并且使用这个拦截器,这有每次请求的时候自动会带上这个头部,把jwt token传送到后台。
设置prefix为http://localhost:5000这是我们的后端api的服务地址,真正生产的时候会替换为正式地址。
设置credentials为same-origin。

export async function accountLogin(params: LoginParamsType) {
 return request('/admin/jwt/login', {
 method: 'POST',
 data: params,
 });
}

在services/login.ts文件内新增发起登录请求的方法。

 effects: {
 *login({ payload }, { call, put }) {
  const response = yield call(accountLogin, payload);
  yield put({
  type: 'changeLoginStatus',
  payload: response,
  });
  // Login successfully
  if (response.status === 'ok') {
  const urlParams = new URL(window.location.href);
  const params = getPageQuery();
  message.success('🎉 🎉 🎉 登录成功!');
  let { redirect } = params as { redirect: string };
  if (redirect) {
   console.log('redirect url ' , redirect);
   const redirectUrlParams = new URL(redirect);
   if (redirectUrlParams.origin === urlParams.origin) {
   redirect = redirect.substr(urlParams.origin.length);
   if (redirect.match(/^\/.*#/)) {
    redirect = redirect.substr(redirect.indexOf('#') + 1);
   }
   } else {
   window.location.href = '/';
   return;
   }
  }
  history.replace(redirect || '/');
  }
 },

  reducers: {
 changeLoginStatus(state, { payload }) {
  setAuthority(payload.currentAuthority);
  setToken(payload.token)
  return {
  ...state,
  status: payload.status,
  type: payload.type,
  };
 },
 },

修改models/login.ts文件,修改effects的login方法,在内部替换原来的fakeAccountLogin为accountLogin。同时修改reducers内部的changeLoginStatus方法,添加setToken的代码,这有修改后登录成功后token就会被存储起来。

 effects: {
 *fetch(_, { call, put }) {
  const response = yield call(queryUsers);
  yield put({
  type: 'save',
  payload: response,
  });
 },
 *fetchCurrent(_, { call, put }) {
  const response = {
  name: '管理员',
  userid: 'admin'
  };
  yield put({
  type: 'saveCurrentUser',
  payload: response,
  });
 },
 },

修改models/user.ts文件,修改effects的fetchCurrent方法为直接返回response。本来fetchCurrent是会去后台拉当前用户信息的,因为agileconfig的用户就admin一个,所以我直接写死了。

让我们试一下登录吧:)
源码在这:https://github.com/kklldog/AgileConfig/tree/react_ui 🌟🌟🌟

到此这篇关于AntDesign Pro + .NET Core 实现基于JWT的登录认证的文章就介绍到这了,更多相关.NET Core 登录认证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • ASP.Net Core3.0中使用JWT认证的实现

    JWT认证简单介绍 关于Jwt的介绍网上很多,此处不在赘述,我们主要看看jwt的结构. JWT主要由三部分组成,如下: HEADER.PAYLOAD.SIGNATURE HEADER 包含token的元数据,主要是加密算法,和签名的类型,如下面的信息,说明了 加密的对象类型是JWT,加密算法是HMAC SHA-256 {"alg":"HS256","typ":"JWT"} 然后需要通过BASE64编码后存入token中 eyJ

  • asp.net基于JWT的web api身份验证及跨域调用实践

    随着多终端的出现,越来越多的站点通过web api restful的形式对外提供服务,很多网站也采用了前后端分离模式进行开发,因而在身份验证的方式上可能与传统的基于cookie的Session Id的做法有所不同,除了面临跨域提交cookie的烦人问题外,更重要的是,有些终端可能根本不支持cookie. Json Web Token(jwt)是一种不错的身份验证及授权方案,简单的说就是调用端调用api时,附带上一个由api端颁发的token,以此来验证调用者的授权信息. 但由于时间关系,不对jw

  • asp net core 2.1中如何使用jwt(从原理到精通)

    为什么使用 Jwt 最近,移动开发的劲头越来越足,学校搞的各种比赛都需要用手机 APP 来撑场面,所以,作为写后端的,很有必要改进一下以往的基于 Session 的身份认证方式了,理由如下: 移动端经常要保持长时间(1 到 2 星期)在线,但是 Session 却不好在服务端保存这么久,虽然可以持久化到数据库,但是还是挺费资源 移动端往往不是使用的网页技术,所以藏在 Cookie 里面的 SessionId 不是很方便的传递给服务端 服务端暴露给客户端的接口往往是 RESTful 风格的,这是一

  • JWT + ASP.NET MVC时间戳防止重放攻击详解

    时间戳作用 客户端在向服务端接口进行请求,如果请求信息进行了加密处理,被第三方截取到请求包,可以使用该请求包进行重复请求操作.如果服务端不进行防重放攻击,就会服务器压力增大,而使用时间戳的方式可以解决这一问题. 上一篇讲到JWT安全验证操作,现在结合时间戳进行防重复攻击和被第三方抓包工具截取到Headers中token,进行模拟请求操作. 防篡改 一般使用的方式就是把参数拼接,当前项目AppKey,双方约定的"密钥",加入到Dictionary字典集中,按ABCD顺序进行排序,最后在M

  • asp.net core集成JWT的步骤记录

    [什么是JWT] JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案. JWT的官网地址:https://jwt.io/ 通俗地来讲,JWT是能代表用户身份的令牌,可以使用JWT令牌在api接口中校验用户的身份以确认用户是否有访问api的权限. JWT中包含了身份认证必须的参数以及用户自定义的参数,JWT可以使用秘密(使用HMAC算法)或使用RSA或ECDSA的公钥/私钥对进行签名. [什么时候应该使用JSON Web令牌?] 授权:这是使用JWT的最常见方案.一旦用户登录

  • AntDesign Pro + .NET Core 实现基于JWT的登录认证功能

    很多同学说AgileConfig的UI实在是太丑了.我想想也是的,本来这个项目是我自己使用的,一开始甚至连UI都没有,全靠手动在数据库里修改数据.后来加上了UI也是使用了老掉牙的bootstrap3做为基础样式.前台框架也是使用了angularjs,同样是老掉牙的东西.过年期间终于下决心翻新AgileConfig的前端UI.最后选择的前端UI框架为AntDesign Pro + React.至于为啥选Ant-Design Pro是因为他好看,而且流行,选择React是因为VUE跟Angular我

  • SpringSecurity构建基于JWT的登录认证实现

    最近项目的登录验证部分,采用了 JWT 验证的方式.并且既然采用了 Spring Boot 框架,验证和权限管理这部分,就自然用了 Spring Security.这里记录一下具体实现. 在项目采用 JWT 方案前,有必要先了解它的特性和适用场景,毕竟软件工程里,没有银弹.只有合适的场景,没有万精油的方案. 一言以蔽之,JWT 可以携带非敏感信息,并具有不可篡改性.可以通过验证是否被篡改,以及读取信息内容,完成网络认证的三个问题:"你是谁"."你有哪些权限".&qu

  • Java SpringSecurity+JWT实现登录认证

    目录 整合步骤 实现原理 目录结构 做了哪些变化 前言: 学习过我的mall项目的应该知道,mall-admin模块是使用SpringSecurity+JWT来实现登录认证的,而mall-portal模块是使用的SpringSecurity基于Session的默认机制来实现登陆认证的.很多小伙伴都找不到mall-portal的登录接口,最近我把这两个模块的登录认证给统一了,都使用SpringSecurity+JWT的形式实现.主要是通过把登录认证的通用逻辑抽取到了mall-security模块来

  • 基于Spring5实现登录注册功能

    本文实例为大家分享了Spring5实现登录注册功能的具体代码,供大家参考,具体内容如下 准备: 根据分析用户注册登录都需要的信息为①username(String)②userid(Int)③userpassword(String)④useremail(String) 1.生成数据库.表 2.编写实体类 import org.springframework.stereotype.Component; @Component public class User {     private String

  • ASP.NET Core应用JWT进行用户认证及Token的刷新方案

    目录 一.什么是JWT? 为什么要使用JWT? 二.JWT的组成: Header Payload Signature 三.认证流程 四.应用实例 认证服务 User相关: TokenHelper: 应用服务 五.Token的刷新 本文将通过实际的例子来演示如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新方案 一.什么是JWT? JWT(json web token)基于开放标准(RFC 7519),是一种无状态的分布式的身份验证方式,主要用于在网络应用环境间安全地传递声

  • .NET 6实现基于JWT的Identity功能方法详解

    目录 需求 目标 原理与思路 实现 引入Identity组件 添加认证服务 使用JWT认证和定义授权方式 引入认证授权中间件 添加JWT配置 增加认证用户Model 实现认证服务CreateToken方法 添加认证接口 保护API资源 验证 验证1: 验证直接访问创建TodoList接口 验证2: 获取Token 验证3: 携带Token访问创建TodoList接口 验证4: 更换Policy 一点扩展 总结 参考资料 需求 在.NET Web API开发中还有一个很重要的需求是关于身份认证和授

  • Asp.Net Core基于JWT认证的数据接口网关实例代码

    前言 近日,应一位朋友的邀请写了个Asp.Net Core基于JWT认证的数据接口网关Demo.朋友自己开了个公司,接到的一个升级项目,客户要求用Aps.Net Core做数据网关服务且基于JWT认证实现对前后端分离的数据服务支持,于是想到我一直做.Net开发,问我是否对.Net Core有所了解?能不能做个简单Demo出来看看?我说,分道扬镳之后我不是调用别人的接口就是提供接口给别人调用,于是便有了以下示例代码. 示例要求能演示获取Token及如何使用该Token访问数据资源,在Demo中实现

  • SpringCloud+Tornado基于jwt实现请求安全校验功能

    项目背景 在实际项目中,Tornado项目作为一个微服务纳入SpringCloud体系,该过程中涉及到Tornado与Spring体系的安全验证,也就是权限调用校验,在该项目中Tornado是通过SpringCloud中的Feign调用的,经过一系列实验,最后选用jwt来实现这个权限效验的过程. 实现思路 用户进行登陆认证(后台微服务),认证成功后调用Tornado项目的认证接口生成token,该值返回到后台微服务保存在会话中,下一次请求时带上该token值让服务器进行校验,校验成功则返回正常的

  • C#基于jwt实现分布式登录

    一.传统的session登录 在服务器存储一份用户登录的信息,这份登录信息会在响应时传递给浏览器,告诉其保存为cookie,以便下次请求时发送给我们的应用,这样我们的应用就能识别请求来自哪个用户了,这就是传统的基于session认证. 在asp.net core中可以简单实现: // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void

  • 基于JWT.NET的使用(详解)

    JWT是什么 JWT全称是Json Web Token,是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准( RFC 7519 ),定义了一种简洁的,自包含的方法用于通信双方之间以Json对象的形式安全的传递信息.因为数字签名的存在,这些信息是可信的,JWT可以使用HMAC算法或者是RSA的公私秘钥对进行签名. JWT的结构 JWT一般由三段构成,用.号分隔开,第一段是header,第二段是payload,第三段是signature,例如: eyJ0eX

随机推荐