国密SM2前端加密解密示例-Toy模板网

这篇具有很好参考价值的文章主要介绍了国密SM2前端加密解密示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、安装sm2依赖

二、编写代码

1、data中绑定数据

2、公钥加密

3、私钥解密

4、按钮绑定一下，数据可见一下

三、完整代码

一、安装sm2依赖

npm install --save sm-crypto

二、编写代码

1、data中绑定数据

要改变的数据phone和过程数据copyphone，公钥publicKey和私钥privateKey

具体生成测试公钥私钥可参照SM2加解密

C1为65字节第1字节为压缩标识，这里固定为0x04

publicKey是'04'+公钥X+公钥Y

privateKey直接复制粘贴

实际运行情况下可参考RuoYi前后端分离（登录密码加密）更改为SM2加密，密钥由后端传输

export default {
    data() {
        return {
            copyphone: '',
            phone: '',
            publicKey: "",
            privateKey: "",
        }
    },

2、公钥加密

    getphone() {
            const sm2 = require('sm-crypto').sm2;
            var publicKey = this.publicKey;//加密使用
            var encrText = this.phone;//例如var enxrText = this.phone;
            const cipherMode = 1;
            let encryptData = sm2.doEncrypt(encrText, publicKey, cipherMode) // 加密结果
            this.copyphone = encryptData;
            return '04' + encryptData;//04可不要具体看后端要求
        },

3、私钥解密

returnphone() {
            const sm2 = require('sm-crypto').sm2;
            var privateKey = this.privateKey;
            var encrText = this.copyphone;
            const cipherMode = 1
            let decryptData = sm2.doDecrypt(encrText, privateKey, cipherMode) // 解密结果
            this.copyphone = decryptData;//赋值方便处理
            return decryptData;
        }

4、按钮绑定一下，数据可见一下

<template>
    <div>
        <navigation_bar></navigation_bar>
        <el-tag>原始数据</el-tag><el-input v-model="phone" placeholder="请输入待转换数据"> 
        </el-input>
        <el-tag>过程数据</el-tag><el-input v-model="copyphone"></el-input>
        <el-tag>公钥</el-tag><el-input v-model="publicKey"></el-input>
        <el-tag>私钥</el-tag><el-input v-model="privateKey"></el-input>
        <el-button type="primary" @click="getphone()">sm2加密按钮</el-button>
        <el-button type="primary" @click="returnphone()">sm2解密按钮</el-button>
    </div>
</template>

三、完整代码

请放在Vue项目下运行文章来源地址https://www.toymoban.com/news/detail-769138.html

<template>
    <div>
        <el-tag>原始数据</el-tag><el-input v-model="phone" placeholder="请输入待转换数据"></el-input>
        <el-tag>过程数据</el-tag><el-input v-model="copyphone"></el-input>
        <el-tag>公钥</el-tag><el-input v-model="publicKey"></el-input>
        <el-tag>私钥</el-tag><el-input v-model="privateKey"></el-input>
        <el-button type="primary" @click="getphone()">sm2加密按钮</el-button>
        <el-button type="primary" @click="returnphone()">sm2解密按钮</el-button>
    </div>
</template>
<script>
// npm install --save sm-crypto
// 第一步就是安装依赖
//解密使用 var privateKey = "私钥";
//加密使用 var publicKey  = "公钥"; 
export default {
    data() {
        return {
            copyphone: '',
            phone: '',
            publicKey: "自己生成好的填进来",
            privateKey: "自己生成好的填进来",
        }
    },
    methods: {
        getphone() {
            const sm2 = require('sm-crypto').sm2;
            //C1为65字节第1字节为压缩标识，这里固定为0x04
            //publicKey是'04'+公钥X+公钥Y
            //密钥对生成https://i.goto327.top/CryptTools/SM2.aspx
            var publicKey = this.publicKey;//加密使用
            var encrText = this.phone;//例如var enxrText = this.phone;
            const cipherMode = 1;
            let encryptData = sm2.doEncrypt(encrText, publicKey, cipherMode) // 加密结果
            this.copyphone = encryptData;
            return '04' + encryptData;//04可不要具体看后端要求
        },
        returnphone() {
            const sm2 = require('sm-crypto').sm2;
            var privateKey = this.privateKey;
            var encrText = this.copyphone;
            const cipherMode = 1
            let decryptData = sm2.doDecrypt(encrText, privateKey, cipherMode) // 解密结果
            this.copyphone = decryptData;//赋值方便处理
            return decryptData;
        }
    }
}
</script>

到了这里，关于国密SM2前端加密解密示例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！