Vue和Springboot实现SM4加密和解密(前端可加密,后端可加解密,MD5同理)

Vue和Springboot实现SM4加密和解密(前端可加密,后端可加解密,MD5同理)Vue和Springboot实现SM4加密和解密(前端可加密,后端可加解密,MD5同理)前言一、前端加密输入的密码前置检测粘贴我的SM4.js代码在组件中调用加密结果二、Springboot后端进行SM4的解密和加密引入库复制我的SM4加解密代码调用方法总结前言网站配置https比较麻烦,所以为了我们的用户账户安全,密码在从前端传输到后端的过程中,最好加密一下,选用SM4有两个原因,一是国产加密算法,二是这个国密算法是对称的,只要加密和解密的key和vi相同,可以很容易的

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用


前言

网站配置 https 比较麻烦,所以为了我们的用户账户安全,密码在从前端传输到后端的过程中,最好加密一下,选用 SM4 有两个原因,一是国产加密算法,二是这个国密算法是对称的,只要加密和解密的 key 和 vi 相同,可以很容易的解密,同时需要匹配 key 和 vi 又兼顾了安全。

我下面会提供前端的 SM4 加密 js 文件,vue 项目也可以使用,还有 Java 的 SM4 加密和解密文件。可实现前端加密传输到后端解密,存到数据库,后端也可以解密传输到前端进行明文的显示。

加密源代码由中科软提供,但是用的 jar 包太老,已经无法找到;以及 js 使用的语法太旧,导致 Vue 编译不通过(即使不使用 ESLint也不通过),所以我做了修改,后端只需引入一个依赖,前端语法已经规范修改,而且可通过 ESLint 的检测。


一、前端加密输入的密码

前置检测

我使用 Vue 项目做示范吧,一个很重要的事情,如果的项目有 ESLint ,或者你使用的是 Vue3 或者 Vue-cli3 以上的项目,ESLint 应该都会默认开启,如果没有这个更好。

看一看你的项目根目录,应该会有一个 .eslintrc.js 文件,添加 rules 和 ‘globals’,即使我已经很努力的修改代码了,但是还是有一个方法 “base64js” 会报错,所以我们把这个方法忽略掉。

在这里插入图片描述

rules: { 
   
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  "globals":{ 
   
    "base64js": true,
  }

粘贴我的 SM4.js 代码

这个 sm4.js就是加密用的 ,位置随意放,代码太长了,我上传到文件了,前后端的文件给你们放一起了,不需要积分。

SM4前后端加解密下载链接
有很多用户反映CSDN这个资源要什么下载码,我下面放一个github的仓库,里面有文件和演示demo
Github地址

在这里插入图片描述

在组件中调用

如图,引入 import {SM4Util} from '@/utils/sm4'; from后面的路径自己调整
在这里插入图片描述

如图,开始加密输入框的密码,并传输到后端,mounted 这样写可以在控制台直接输出 123456 的加密结果。传输到后端我就不演示了。

<template>
	<div>
		<input v-model="mobilePhone" placeholder="请输入手机号">
		<input v-model="password" placeholder="请输入密码">
	</div>
</template>
<script> import { 
     SM4Util} from '@/utils/sm4'; import { 
     Notify} from "vant"; export default { 
      name: "Register", data(){ 
      return{ 
      username: '', mobilePhone: '', password: '', rePassword: '' } }, mounted() { 
      const sm4 = new SM4Util(); const test = sm4.encryptData_CBC('123456') console.log('123456的加密结果:' + test) }, methods:{ 
      register(){ 
      // sm4加密 const sm4 = new SM4Util(); this.$axios .post("/user/register", { 
      mobilePhone: this.mobilePhone.trim(), password: sm4.encryptData_CBC(this.password.trim()), }) } } } </script>

加密结果

在这里插入图片描述


二、Springboot 后端进行 SM4 的解密和加密

引入库

需要引入一个依赖

<dependency>
  <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.10</version>
</dependency>

复制我的 SM4 加解密代码

一共有 4 个文件,我直接给你们下载吧,不需要积分,下载后在项目里放在一起
在这里插入图片描述

SM4前后端加解密下载链接
有很多用户反映CSDN这个资源要什么下载码,我下面放一个github的仓库,里面有文件和演示demo
Github地址


调用方法

SM4Utils 那个文件里面有一个 main 方法,我写好了,运行

在这里插入图片描述

看,和,和前端的加密结果一样,也可以解密出来,秘诀就是前面说的前后端的“钥匙要一样”
在这里插入图片描述

ECB 和 CBC 的区别你们可以自己了解一些,反正用 CBC 就完事了,据说更安全


总结

这是一个总结

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/189064.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【Javascript】【WebRTC】WebRTC从原理到实现(四):ICE服务器

    【Javascript】【WebRTC】WebRTC从原理到实现(四):ICE服务器ICE全称InteractiveConnectivityEstablishment,翻译成中文就是“交互式连通建立方式”它通过综合利用现有STUN,TURN等协议,有效地穿透各种NAT,以更有效的方式来建立会话…

    2022年5月2日
    40
  • Android界面设计适配不同屏幕的尺寸和密度解读[通俗易懂]

    Android界面设计适配不同屏幕的尺寸和密度解读[通俗易懂]Android是运行在各种提供不同的屏幕尺寸和密度的设备。Android系统提供跨设备的统一开发环境和处理大部分的工作,以调整每个应用程序的用户界面,以在其上显示的画面。 同时,该系统提供了API,允许您控制您的应用程序的UI特定的屏幕尺寸和密度,以优化你的用户界面设计,不同的屏幕配置。作为设计师也要最大程度地为所有设备的体现良好的用户体验或是方便使用阅读,而不是简单地拉伸以适应屏幕上的设备。

    2022年6月17日
    27
  • Java、Go、Rust大比拼,高并发时代谁能称雄?

    Java、Go、Rust大比拼,高并发时代谁能称雄?作者|马超出品|CSDN(ID:CSDNnews)互联网时代流量的大起大落,很多科技巨头在面对流量的冲击时也都败下阵来,XXX崩了的新闻热搜不断,而Serverless凭借快速伸缩的自动弹性特点,可以从容应对类似的冲击,这也让这种新技术出尽的风头。在Serverless的喧嚣背后,Rust看似牢牢占据了C位,但其实在高并发这个话题下要总结的模式与套路其实很多,尤其是像Tokio、RxJava等专业的编程框架,对于程序员编写高性能程序的帮助很大。为了深入讨论高并发这个话题,本文还是将目光集中.

    2022年5月31日
    38
  • SpringMVC 处理器适配器详解[通俗易懂]

    SpringMVC 处理器适配器详解[通俗易懂]0x00:介绍处理器适配器HandlerAdapter:作用是根据映射器找到的处理器Handler信息,按照特定的规则去执行相关的处理器Handler。其配置方式有两种,一种是基于xml的资源配置,也就是非注解的配置方式。另外一种就是基于Annotation注解的配置。其注解在代码中做上特殊标记,这些标记就可以编译、类加载、运行时被读取,然后去执行相应的处理。0x01:…

    2022年6月8日
    62
  • 夜深人静学算法_写夜深人静的句子

    夜深人静学算法_写夜深人静的句子一种处理单调性问题的数据结构—单调栈

    2022年9月22日
    0
  • 那些强悍的PHP一句话后门

    那些强悍的PHP一句话后门以一个学习的心态来对待PHP后门程序,很多PHP后门代码让我们看到程序员们是多么的用心良苦。强悍的PHP一句话后门这类后门让网站、服务器管理员很是头疼,经常要换着方法进行各种检测,而很多新出现的编写技术,用普通的检测方法是没法发现并处理的。今天我们细数一些有意思的PHP一句话木马。利用404页面隐藏PHP小马 PHP  1 2 3 4…

    2022年5月11日
    45

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号