.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问

这篇具有很好参考价值的文章主要介绍了.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

后端生成公钥私钥

使用RSA.ToXmlString(Boolean) 方法生成公钥以及私钥。

RSACryptoServiceProvider rSA = new();
string pubKey = rSA.ToXmlString(false);//公钥
string priKey = rSA.ToXmlString(true);//私钥

后端将生成的公钥发送给前端 

创建一个get请求,将后端生成的公钥发送给前端,需要注意,这里生成的公钥是XML格式需要转换为pkcs8格式,前端JS只能处理pkcs8格式,私钥不能发给前端!!!!

这里需要安装一个包XC.RSAUtil用于转换格式。

Install-Package XC.RSAUtil -Version 1.3.6

[HttpGet]
public object Edd()
{
    var keyList = RsaKeyConvert.PublicKeyXmlToPem(pubKey);//将xml格式转换为Pkcs8
    return keyList;
}

前端使用公钥加密密码 

 使用的加密库为JSEncrypt库,安装JSEncrypt库。

npm install jsencrypt -D

页面引用 

import {JSEncrypt} from 'jsencrypt'

 界面

<div id="JWT">
	<div>
		账号:<input type="text" v-model="MyName"/>
	</div>
	<div>
		密码:<input type="text" v-model="MyPassword"/>
	</div>
	<button @click="Myinput">登录</button>
</div>

 保存账号密码以及后端发送过来的公钥。

data() {
	return {
		MyName: null,//账号
		MyPassword: null,//密码
		pubKey:null,//公钥
        JWTkey:null//JWT令牌
	}
}

 在使用登录界面时调用函数接收公钥并且保存。

created() {
	PostJwtEdd().then(res=>{
		this.pubKey=res
	}).catch(err => {
		console.log(err)
	})
}

 前端在输入账号密码后,对密码进行加密,将加密后的密码发送请求给后端,对比成功后前端将JWT令牌保存。

methods:{
	Myinput(){
		var encryptor = new JSEncrypt()
		encryptor.setPublicKey(this.pubKey)
		var rsaPassWord = encryptor.encrypt(this.MyPassword)//加密密码
		PostJwtDdd(this.MyName, rsaPassWord).then(res => {
			this.JWTkey=res//将后端生成的JWT令牌保存
		}).catch(err => {
			console.log(err)
		})
	}
}

发送密码的axio请求部分

export function PostJwtDdd(MyName,MyPassword){
	return request({
		method: 'post',
		url: '/JWTS/Ddd',
		data:{
			MyName,
			MyPassword
		}
	})
}

 这是发送的账号以及密码密文。

.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问,状态模式,vue.js,.net,javascript,ajax,前端

 后端接收参数对比

 后端接收得到参数,将密码密文进行解密。

创建一个类用于接收账号和加密后的密文。

public class RsaKey
{
   public string MyName { get; set; }
   public string MyPassword { get; set; }
}

 接收参数开始解密对比账号密码。

[HttpPost]
public object Ddd([FromBody] RsaKey rsaKey)
{
    rsa.FromXmlString(priKey);//传入私钥进行解密
    byte[] cipherbytex;
    cipherbytex = rsa.Decrypt(Convert.FromBase64String(rsaKey.MyPassword), false);
    var c = Encoding.UTF8.GetString(cipherbytex);//转换为string类型
    MyDbContext md = new MyDbContext();//对数据库表创建实体类
    var user = md.MyIntroductions.Where(x => x.MyName == rsaKey.MyName).Select(x => x.MyPassword);//数据库中寻找该账号对应的密码
    string users = null;
    foreach (var v in user)
    {
        users = v;
    }
    if (user == null)
    {
        return new { err = "账号错误" };
    }
    else
    {
        if (users == c)
        {
            //登录成功
        }
        else
        {
            return new { err = "密码错误" };
        }
    }
}

 生成JWT令牌

登录成功之后开始生成JWT令牌并且返回给前端,在登录成功哪里生成。

需要安装两个包。

包1:System.IdentityModel.Tokens.Jwt

Install-Package System.IdentityModel.Tokens.Jwt

包2:Microsoft.AspNetCore.Authentication.JwtBearer

Install-Package Microsoft.AspNetCore.Authentication.JwtBearer

List<Claim> claims = new List<Claim>();
claims.Add(new Claim("MyName", rsaKey.MyName));
claims.Add(new Claim(ClaimTypes.Role, rsaKey.MyName));//颁发管理员角色
string key = jwtSettingsOpt.Value.SecKey;
DateTime expire = DateTime.Now.AddSeconds(jwtSettingsOpt.Value.ExpireSeconds);
byte[] secBytes = Encoding.UTF8.GetBytes(key);
var seckey = new SymmetricSecurityKey(secBytes);
var credentials = new SigningCredentials(seckey, SecurityAlgorithms.HmacSha256Signature);
var tokenDescriptor = new JwtSecurityToken(claims: claims, expires: expire, signingCredentials: credentials);
string jwt = new JwtSecurityTokenHandler().WriteToken(tokenDescriptor);
return jwt;

这是前端接收到的JWT令牌

.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问,状态模式,vue.js,.net,javascript,ajax,前端

 后端权限访问

 后端创建一个post请求,该请求带有[Authorize]

[Authorize]是一个用于处理权限的,在这里的作用就是对没有JWT令牌的请求返回401错误,也就是我们可以利用这一点来对登录的用户开放一些权限,如果没有JWT令牌那么就无法请求到数据。

该post请求会返回请求人的账号。

[Authorize]
[HttpPost]
public object Bdd()
{
    return this.User.FindFirst("MyName")!.Value;
}

 前端带JWT令牌进行访问

需要注意的是JWT令牌是通过'Authorization'的一个请求头发送过去,格式必须为:

Authorization:Bearer+一个空格+后端生成的JWT令牌

前端界面

<button @click="MyJwt">查看权限</button>
MyJwt(){
	var JwtKey='Bearer '+this.JWTkey
	console.log(JwtKey)
	PostJwtBdd(JwtKey).then(res=>{
		console.log(res)
	}).catch(err=>{
		console.log(err)
	})
}

axios请求部分

export function PostJwtBdd(JwtKey){
	return request({
		method: 'post',
		url: '/JWTS/Cdd',
		headers: {
			'Authorization': JwtKey
		}
	})
}

在后端请求中配置了[Authorize(Roles ="admin")]后,只有在Roles指定的用户才能对其接口进行访问,一般可以用于对管理员的访问,在生成JWT令牌的时候,

通过claims.Add(new Claim(ClaimTypes.Role, '用户'));来进行匹配,管理员用户。

 该post请求只有用户为admin的才能请求

[Authorize(Roles ="admin")]//配置只有管理员角色才能请求
[HttpPost]
public object Cdd()
{
      return this.User.FindFirst("MyName")!.Value;
}

 前端界面

<button @click="OneJwt">管理员权限</button>
OneJwt(){
	var JwtKey='Bearer '+this.JWTkey
	console.log(JwtKey)
	PostJwtCdd(JwtKey).then(res=>{
	console.log(res)
	}).catch(err=>{
	console.log(err)
	})
}

axios请求部分,同样请求也只能通过'Authorization': 请求头进行发送。

Authorization+"空格"+生成的JWT令牌

export function PostJwtCdd(JwtKey){
	return request({
		method: 'post',
		url: '/JWTS/Cdd',
		headers: {
			'Authorization': JwtKey
		}
	})
}

如果带有的是错误的JWT令牌,那么后端会返回401错误,如图所示:

.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问,状态模式,vue.js,.net,javascript,ajax,前端

并且不会返回任何的对象。

.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问,状态模式,vue.js,.net,javascript,ajax,前端文章来源地址https://www.toymoban.com/news/detail-715956.html

到了这里,关于.NET、VUE利用RSA加密完成登录并且发放JWT令牌设置权限访问的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JWT加密解密登录鉴权逻辑是什么?

    JWT(JSON Web Token)是一种用于进行认证和授权的开放标准,它可以安全地传输信息,通常用于实现身份验证和鉴权逻辑。 以下是使用JWT进行登录鉴权的一般逻辑: 1:用户登录: 用户提供用户名和密码进行登录。 服务器验证用户提供的凭据是否有效。 2:生成JWT: 服务器验证

    2024年02月06日
    浏览(36)
  • C#.NET Framework RSA 公钥加密 私钥解密 ver:20230609

    C#.NET Framework RSA 公钥加密 私钥解密 ver:20230609   环境说明: .NET Framework 4.6 的控制台程序 。   .NET Framework 对于RSA的支持: 1. .NET Framework 内置只支持XML格式的私钥/公钥。如果要用PKCS1,PKCS8格式的,要用到三方库BouncyCastle。 2. .NET 中默认加密算法为“RSA/ECB/PKCS1Padding” ,要和

    2024年02月08日
    浏览(72)
  • Django用RSA实现Web登录加密传输,预防抓包泄漏密码,解决ModelForm无法实现传输加密问题

    问题:         在使用Django学习制作网站时候,以为后端钩子处理使用了md5加密,数据库中也同样以md5的方式存储,这样就解决了密码泄漏问题,因为对前端没有足够的了解所以枉下次定论。         在测试爬取自己的网站时候发现,登录页面控制台能抓包看见密码明

    2024年02月01日
    浏览(79)
  • app与后台的token、sessionId、RSA加密登录认证与安全解决方案

    1.1.2 登录状态token 再仔细核对上述登录流程, 我们发现服务器判断用户是否登录, 完全依赖于sessionId, 一旦其被截获, 黑客就能够模拟出用户的请求。于是我们需要引入token的概念: 用户登录成功后, 服务器不但为其分配了sessionId, 还分配了token, token是维持登录状态的关键

    2024年04月13日
    浏览(47)
  • Django使用DRF + Simple JWT 完成小程序使用自定义用户的注册、登录和认证

    在已经配置好djangorestframework-simplejwt的前提下进行 小程序用户模型类 这里的模型类并未继承django自带的用户模型类,好处是后面小程序用户也是没法进行admin端的,缺点是可能会对django自带的权限管理有影响,如果只有小程序端的用户的话没问题,但是如果还有其它用户的话

    2024年02月10日
    浏览(49)
  • vue前端对密码进行Rsa加密

    在信息技术发达的信息化世界,我们的敏感信息在各个平台都已进行注册使用。例如我们支付宝的支付密码、微信的支付密码、电子银行的登陆密码、我们的个人身份信息等等都会被不法分子利用。为了保障我们的身份不被暴露以及账户财产安全,研发人员使用了很多加密算

    2024年02月13日
    浏览(65)
  • vue使用jsencrypt实现rsa前端加密

    介绍 vue 完成 rsa 加密传输, jsencrypt 实现参数的前端加密 在 utils 文件夹中新建 jsencrypt.js 文件,内容如下: 注意点:一般公钥都是后端生成好的,之间给到前端,需要注意的需要让后端把生成的公钥放入 .txt 文件中。把 .txt 文件给前端,否则可能会出现无法使用的可能

    2024年02月09日
    浏览(57)
  • ASP.NET CORE WEBAPI 登录 JWT 鉴权 ,接口权限验证

    介绍 当今Web开发中,API的使用越来越广泛,而API的安全性也变得越来越重要。其中,JWT(JSON Web Token)鉴权和授权是一种常见的解决方案。 本篇文章将会介绍JWT鉴权和授权的原理、实现方式以及注意事项。 什么是JWT? JWT是一种基于JSON格式的开放标准(RFC7519),用于在网络

    2023年04月21日
    浏览(67)
  • ASP.NET Core使用JWT+标识框架(identity)实现登录验证

    最近阅读了《ASP.NET Core 技术内幕与项目实战——基于DDD与前后端分离》(作者杨中科)的第八章,对于Core入门的我来说体会颇深,整理相关笔记。 JWT:全称“JSON web toke”,目前流行的跨域身份验证解决方案; 标识框架(identity):由ASP.NET Core提供的框架,它采用RBAC(role

    2024年02月11日
    浏览(45)
  • ASP.NET Core 8.0 WebApi 从零开始学习JWT登录认证

    我一起写后端Api我都是直接裸连的,但是现在为了规范一些,我还是打算上一个JWT功能 ASP.NET Web API 2系列(四):基于JWT的token身份认证方案 Jwt-dotnet github 选好了模板,就进去看看号了,42M的下载量已经很高了,一般来说,只要超过500k的下载量,基本就是一个稳定的代码仓库了

    2024年04月09日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包