Vue项目如何实现rsa加密

目录
  • 如何实现rsa加密
    • 安装jsencrypt
    • 引入jsencrypt
    • 获取公钥(调接口)
    • 引入getPubKey
  • 使用rsa加密,解密,加签,解签
    • 安装
    • 引js

如何实现rsa加密

引言

客户端初始化访问登录服务时,需要以账号和密码作为参数请求后台接口,此时后台响应会展示出详细的账号和密码,为了提高安全性,一般需要对响应中的密码进行加密处理。在这里主要是总结了rsa加密方法。

安装jsencrypt

npm i jsencrypt

引入jsencrypt

在 main.js 文件中引入 jsencrypt

import JSEncrypt from "jsencrypt"; //引入模块
Vue.prototype.$jsEncrypt = JSEncrypt; //配置全局变量

获取公钥(调接口)

export function getPubKey(data) {
  return http({
    url: "/index/pub-key", //每个项目的接口url不一样 根据实际情况修改
    method: "GET", // 同理
    data
  });
}

引入getPubKey

在需要加密的组件中引入getPubKey接口,然后进行账号或者密码加密。下面是以登录页面账号、密码加密为例。

1、在login.vue文件中引入getPubKey

import { getPubKey } from "@/api"; //每个项目路径都会有区别

2、登陆时加密

 getPubKey().then(({ result, data: keyData }) => { // getPubKey---获取公钥接口
        if (result) {
          const jse = new this.$jsEncrypt(); // 实例化一个 jsEncrypt 对象
          jse.setPublicKey(keyData); //配置公钥
          let userAccount = jse.encrypt(this.loginForm.user); //加密账号
          let passWord = jse.encrypt(this.loginForm.password); //加密密码
          login({
            userAccount: userAccount,
            passWord: passWord,
          }).then(({ result, message }) => {
            if (result) {
              console.log("登录成功");
              // 登录成功后的操作
            } else {
              // 登录失败操作
              this.loginTextError = message;
            }
          });
        }
      });

使用rsa加密,解密,加签,解签

vue中使用RSA加密,解密,加签,验签 安装引js加密解密加签,验签测试

安装

  • 一个是进行加密,解密的: npm install jsencrypt --save
  • 如果加密过长使用 npm i encryptlong --save
  • 一个是进行签名验证的: npm install jsrsasign --save

引js

/* 产引入jsencrypt实现数据RSA加密 /
import JSEncrypt from ‘jsencrypt' // 处理长文本数据时报错 jsencrypt.js Message too long for RSA
/ 产引入encryptlong实现数据RSA加密 */
import Encrypt from ‘encryptlong' // encryptlong是基于jsencrypt扩展的长文本分段加解密功能。

加密解密

/* JSEncrypt加密 /
rsaPublicData(data) {
var jsencrypt = new JSEncrypt()
jsencrypt.setPublicKey(publicKey)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
var result = jsencrypt.encrypt(data)
return result
},
/ JSEncrypt解密 */
rsaPrivateData(data) {
var jsencrypt = new JSEncrypt()
jsencrypt.setPrivateKey(privateKey)
// 如果是对象/数组的话,需要先JSON.stringify转换成字符串
var result = jsencrypt.encrypt(data)
return result
},
/* Encrypt 加密*/
function getEncrypt(data) {
let encrypt = new Encrypt();
encrypt.setPublicKey(“你的公钥”);
let info = encrypt.encryptLong(JSON.stringify(data))
return info
}
/* Encrypt 解密*/
function getDecrypt(data) {
let decrypt = new Encrypt();
decrypt.setPrivateKey(“你的私钥”);
let info = decrypt.decryptLong(data)
return info
}

加签,验签

在main.js中引入

import jsrsasign from 'jsrsasign'

挂载在main.js中

Vue.prototype.$getSign = function (signData) {
    var priK = "-----BEGIN PRIVATE KEY-----你的私钥-----END PRIVATE KEY-----";
    //创建rsa实例
    var rsa = new jsrsasign.RSAKey();
    //因为后端提供的是pck#8的密钥对,所以这里使用 KEYUTIL.getKey来解析密钥
    rsa = jsrsasign.KEYUTIL.getKey(priK);
    // rsa.readPrivateKeyFromPEMString(priK);
    let sig = new jsrsasign.KJUR.crypto.Signature({"alg": "SHA256withRSA"});
    // 初始化
    sig.init(rsa)
    // 传入待加密字符串
    sig.updateString(signData)
    // 生成密文
    let sign = jsrsasign.hextob64(sig.sign());
    // 对加密后内容进行URI编码
    // sign = encodeURIComponent(sign);
    console.log(sign);
}
Vue.prototype.$getSignCode = function (strIng) {
    // 创建RSAKey对象
    var rsa = new jsrsasign.RSAKey();
    //因为后端提供的是pck#8的秘钥对,所以这里使用 KEYUTIL.getKey来解析秘钥
    var signPrivateKey = `-----BEGIN PRIVATE KEY-----
		你的公钥
		-----END PRIVATE KEY-----`
    // 将密钥转码,其实就是将头部尾部默认字符串去掉
    signPrivateKey = jsrsasign.KEYUTIL.getKey(signPrivateKey );
    // 创建Signature对象,设置签名编码算法
    // alg:对应的是规则 需要和后端统一
    var sig = new jsrsasign.KJUR.crypto.Signature({
        "alg": "SHA256withRSA",
        "prov": "cryptojs/jsrsa",
        "prvkeypem": signPrivateKey
    });
    // 初始化
    sig.init(signPrivateKey )
    // 传入待加密字符串
    sig.updateString(strIng);
    // 生成密文
    var sign = jsrsasign.hextob64(sig.sign());
    console.log(sign)
    // 对加密后内容进行URI编码
    // sign = encodeURIComponent(sign);
    //把参数与密文拼接好,返回
    var params = 'Str=' + strIng + '&sign=' + sign;
    return sign;
}

测试

	//参数 req
    var req = {};
    req["equipmentType"]='00';
    req["equipmentIp"] = '192.168.3.23';
    //JSON.stringify(req) 转成json字符串
    console.log(JSON.stringify(req))

    var r = this.$getSignCode(JSON.stringify(req));
    var e = this.$attestationCode(JSON.stringify(req), r);
    console.log(e);

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue使用JSEncrypt实现rsa加密及挂载方法

    挂载全局方法 使用jsencrypt进行rsa加密 原文链接:Js参数RSA加密传输,jsencrypt.js的使用 * https://www.jb51.net/article/179813.htm (原文处有一个地方不对,不需要转换+,rsa已经做过base64转码了) 1.安装依赖 npm install jsencrypt 2.在main.js引入 import { JSEncrypt } from 'jsencrypt' 3.挂载全局方法 //JSEncrypt加密方法 Vue.pro

  • vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)

    vue项目中使用AES实现密码加密解密 区别 ECB:是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文. CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度.(不容易主动攻击,安全性好于ECB,是SSL.IPSec的标准) 代码实现 先安装 crypto-js npm install crypto-js --save-dev ECB模式: import CryptoJS from "cryp

  • Vue中使用jsencrypt进行RSA非对称加密的操作方法

    在线生成生成RSA密钥对:http://web.chacuo.net/netrsakeypair 下载jsencrypt cnpm i -S jsencrypt 引入 import { JSEncrypt } from "jsencrypt"; 基本使用 注意:要加密的数据必须是字符串!! 提示:给公钥直接用双引号“”引起来后可能要手动删掉每行末尾多余的空格,有点麻烦,此时可以直接用``来引.只是这样可能排版显示不太好看 testRSA() { let publicKey = &quo

  • Vue项目如何实现rsa加密

    目录 如何实现rsa加密 安装jsencrypt 引入jsencrypt 获取公钥(调接口) 引入getPubKey 使用rsa加密,解密,加签,解签 安装 引js 如何实现rsa加密 引言 客户端初始化访问登录服务时,需要以账号和密码作为参数请求后台接口,此时后台响应会展示出详细的账号和密码,为了提高安全性,一般需要对响应中的密码进行加密处理.在这里主要是总结了rsa加密方法. 安装jsencrypt npm i jsencrypt 引入jsencrypt 在 main.js 文件中引入 js

  • 在vue项目中使用md5加密的方法

    npm安装: npm install --save js-md5 1.在需要使用的项目文件中引入: import md5 from 'js-md5'; 使用: md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3 2.或者在main.js文件中将md5转换成vue原型: import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 使用: this.$md5('hello world') // 5

  • 在vue项目如何使用base64加密

    目录 vue项目使用base64加密 方法一 方法二 vue项目对路由参数进行base64加密 加密 解密 vue项目使用base64加密 1.vue-cli 脚手架搭建前端项目中,使用base64加密传输数据 方法一 1.安装依赖 npm install --save js-base64 2.在main.js中引入 import Base64 from 'js-base64' Vue.use(Base64) 3.使用 Base64.encode(this.pwd);//加密 Base64.de

  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

    项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

  • vue项目中 使用 pako.js 解密 gzip加密字符串的代码详解

    前言 今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了 实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from 'pako' // 一个是加密:window.btoa(),一个是解密:window.atob() function decode(e

  • vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

    背景 公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是通过使用 webpack-obfuscator 通过增加随机废代码段.字符编码转义等方法可以使构建代码完全混淆,达到无法恢复源码甚至无法阅读的目的. 安装 webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator npm install --save-dev webpack-obfuscator 配置

  • 如何在vuejs项目中使用md5加密密码的实现

    目录 1.NPM 安装: 2.全局用法 3.局部用法 概念 MD5加密有什么用?为什么要使用MD5加密? MD5算法的用途是什么? 具体使用步骤: 1.NPM 安装: npm install --save js-md5 2.全局用法 2.1.全局引用 import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 2.2.全局使用 将您需要加密的信息放进去: this.$md5('This is encrypted content') // 6f43dd5

  • Android数据加密之Rsa加密的简单实现

    最近无意中和同事交流数据安全传输的问题,想起自己曾经使用过的Rsa非对称加密算法,闲下来总结一下. 什么是Rsa加密? RSA算法是最流行的公钥密码算法,使用长度可以变化的密钥.RSA是第一个既能用于数据加密也能用于数字签名的算法. RSA算法原理如下: 1.随机选择两个大质数p和q,p不等于q,计算N=pq: 2.选择一个大于1小于N的自然数e,e必须与(p-1)(q-1)互素. 3.用公式计算出d:d×e = 1 (mod (p-1)(q-1)) . 4.销毁p和q. 最终得到的N和e就是"

随机推荐