RSA加密---前端---后端解密

简介: RSA加密---前端加---后端解密

前端使用vue

RSA

准备工作

官网

jsencrypt :http://travistidwell.com/jsencrypt/

encryptlong:https://www.npmjs.com/package/encryptlong

1,安装

1.1 安装jsencrypt,执行以下命令

npm install jsencrypt

1.2 安装encryptlong,执行以下命令:

npm i  encryptlong  -S

2、开始--在导入包后在前端的工具库中直接封装RSA方法

代码

importJSEncryptfrom'jsencrypt';
/** * RSA公共加密方法-----单体版本 * @param value * @returns {string | false} * @constructor */exportfunctionRSA(value) {
constpublicKey="密钥";
constencrypt=newJSEncrypt();
encrypt.setPublicKey(publicKey);
consttest=encrypt.encrypt(value);
returntest}
/** * RSA公共加密方法-------数组+单体版本 * @param value * @returns {string | false} * @constructor */exportfunctionRSA(value) {
// RSA公钥constpublicKey="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqAc0oxV0IW8wTjKVd/bI"+"IvI2/o9c12ACq9FceDI8t5Z0GYOL7rAoL9/v6ev6MwzFzLyLaQhAGR6qV8AFQu1s"+"mwIDAQAB";
constencryptor=newJSEncrypt();
encryptor.setPublicKey(publicKey);
// 如果传入的值是数组,则对数组中的每个元素进行加密if (Array.isArray(value)) {
constencryptedArray= [];
value.forEach((item) => {
constencryptedValue=encryptor.encrypt(item);
encryptedArray.push(encryptedValue);
    });
returnencryptedArray;
  } else {
// 如果传入的值是单个值,则直接对其进行加密constencryptedValue=encryptor.encrypt(value);
returnencryptedValue;
  }
}

在封装完成方法之后在前端的main方法中直接注入!注入后直接可在前端任意方法中调用这个共有的方法。

注入!!!!!

//自定义RSA加密
import {RSA} from "./utils/index";
Vue.prototype.RSA = RSA

3、使用实例

submit() {
constencryptedPhone=this.RSA(ts.ruleForm.phone);
constencryptedPersonNo=this.RSA(ts.ruleForm.personNo);
constencryptedPassword=this.RSA(ts.ruleForm.collectionPassword);
letapiUrl="";
letparam= {
authorizedPerson: ts.ruleForm.authorizedPerson,
personNo: encryptedPersonNo,
phone: encryptedPhone,
departmentId: ts.ruleForm.departmentId,
educationDegree: ts.ruleForm.educationDegree,
qualificationNo: ts.ruleForm.qualificationNo,
certificateValidity: ts.ruleForm.certificateValidity,
authorizationValidity: ts.ruleForm.authorizationValidity,
collectionPassword: encryptedPassword,
annexFormId: ts.ruleForm.annexFormId,
authTypes: ts.ruleForm.authTypes,
rpAuthType: ts.ruleForm.rpAuthType,
trainScore: ts.ruleForm.trainScore,
      };
if (this.addFlg==0) {
apiUrl="application/ca/add";
      } else {
apiUrl="application/ca/edit";
param.id=this.formId;
      }
this.appHttp({
url: this.appHttp.adornAppRequestUrl(apiUrl),
method: "post",
data: this.appHttp.adornData(param),
headers: {
"Content-Type": "application/json", // 添加请求头,明确指定请求体为 JSON 格式        },
      }).then(({data}) => {
if (data.code==40000) {
ts.$message({
message: data.msg,
type: "success",
          });
this.processShell.reloadPage({
flowCode: "collection.authorization",
formId: data.id,
          });
        } else {
ts.$message.error(data.msg);
        }
      });
    },

4、Java后端代码

在Java中封装解密工具类RsaUtil后直接调用就可

importjava.nio.charset.StandardCharsets;
importjava.security.KeyFactory;
importjava.security.PrivateKey;
importjava.security.spec.PKCS8EncodedKeySpec;
importjava.util.Base64;
/*** @Author 薛千凝* @Date 2023/8/16 17:24*/publicclassRsaUtil {
// 解密密码字段publicstaticStringdecryptPassword(StringcollectionPassword) {
try {
// 获取私钥字符串,这里假设私钥存在 privateKeyStr 变量中StringprivateKeyStr="密钥";
// 解码私钥字符串为字节数组byte[] privateKeyBytes=Base64.getDecoder().decode(privateKeyStr);
// 构造 PKCS8EncodedKeySpec 对象PKCS8EncodedKeySpeckeySpec=newPKCS8EncodedKeySpec(privateKeyBytes);
// 获取 RSA 密钥工厂实例KeyFactorykeyFactory=KeyFactory.getInstance("RSA");
// 生成私钥对象PrivateKeyprivateKey=keyFactory.generatePrivate(keySpec);
// 创建解密器Ciphercipher=Cipher.getInstance("RSA/ECB/PKCS1Padding");
cipher.init(Cipher.DECRYPT_MODE, privateKey);
// 解密byte[] decryptedPasswordBytes=cipher.doFinal(Base64.getDecoder().decode(collectionPassword));
// 转换为字符串StringdecryptedPassword=newString(decryptedPasswordBytes, StandardCharsets.UTF_8);
returndecryptedPassword;
        } catch (Exceptione) {
e.printStackTrace();
returnnull;
        }
    }
}
目录
相关文章
|
10天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
11天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
28 0
|
28天前
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
24 0
|
1月前
|
前端开发
前端接受后端文件流并下载到本地的方法
前端接受后端文件流并下载到本地的方法
56 0
|
30天前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
|
6天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
8天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
9天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
28天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。
|
29天前
|
前端开发 JavaScript Java
从前端到后端:构建高效的全栈开发环境
本文将探讨如何在全栈开发中构建高效的开发环境,包括前端和后端技术栈的整合与优化,以及如何利用最新的工具和框架提升开发效率。