前端js sm2实现加密简单代码举例

 更新时间:2024年09月26日 10:43:17   作者:luquinn  
在Vue项目中实现数据加密,首先需要安装SM2加密库,如js-sm2或sm-crypto,通过npm或yarn进行安装后,在Vue组件或文件中引入该库,并使用其提供的加密、解密功能,文中通过代码介绍的非常详细,需要的朋友可以参考下

vue3

1. 安装 SM2 加密库

首先,你需要安装适合的 SM2 加密库。在前面的讨论中提到了 js-sm2 这个 JavaScript 实现的 SM2 加密算法库,你可以使用 npm 或者 yarn 进行安装

npm install sm-crypto # 或者 yarn add sm-crypto或者pnpm install sm-crypto

2. 引入 SM2 库并使用

在 Vue 3 的项目中,一般来说你会在需要加密的组件或者文件中引入 SM2 库,并使用其提供的加密、解密等功能。以下是一个简单的示例:

// 在需要加密的组件或者文件中引入
import smcrypto from 'sm-crypto'

const signIn = async () => {
  const userlogin = {
    username: formData.username,
    password: '04' + smcrypto.sm2.doEncrypt(formData.password, publicKey.value),
    code: code.value,
    captcha: formData.captcha,
    publicKey: publicKey.value
  }
 loginApi(userlogin)
    .then(async (res) => {
...})
}

这里是直接使用加密,也可以封装成函数

vue2

安装 sm-crypto

你可以通过 npm 安装 sm-crypto

npm install sm-crypto --save

封装 utils

'@/utils/smcrypto.js'

// utils.js

import smcrypto from 'sm-crypto';

    // SM2 加密
  export function  encrypt (plaintext, publicKey) {
        try {
            const cipherMode = 1; // 1 - C1C3C2,0 - C1C2C3
            const cipherText = smcrypto.sm2.doEncrypt(plaintext, publicKey, cipherMode);
            return cipherText;
        } catch (error) {
            console.error('SM2 encryption error:', error);
            return null;
        }
    }


在 Vue 组件中使用

在你的 Vue 组件中引入 smcrypto.js 并使用 encrypt方法:

import { encrypt } from '@/utils/smcrypto.js';

        // 获取加密私钥
        getPublicKey() {
            api.publicKey().then((res) => {
                this.param.rsaToken = res.data.rsaToken;
                this.rsaKey = res.data.rsaKey;
            });
        },

//登录请求参数

      let data = {
                        password: this.param.password,
                        username: this.param.username,
                        captchaCode: this.param.captchaCode,
                        captchaId: this.param.captchaId,
                        rsaToken: this.param.rsaToken,
                        // authCode: this.param.authCode,
                        checked: this.param.checked
                    };
                    data.password = encrypt(this.param.password, this.rsaKey);
//发起登录请求
//...

总结 

到此这篇关于前端js sm2实现加密的文章就介绍到这了,更多相关前端 js sm2加密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript检测flash插件是否被禁用的方法

    javascript检测flash插件是否被禁用的方法

    这篇文章主要介绍了javascript检测flash插件是否被禁用的方法,涉及JavaScript调用ActiveXObject组件操作flash插件的相关技巧,需要的朋友可以参考下
    2016-01-01
  • escape编码与unescape解码汉字出现乱码的解决方法

    escape编码与unescape解码汉字出现乱码的解决方法

    这篇文章主要介绍了escape编码与unescape解码汉字出现乱码的解决方法,需要的朋友可以参考下
    2014-07-07
  • JavaScript手写九宫格抽奖demo

    JavaScript手写九宫格抽奖demo

    这篇文章主要为大家介绍了JavaScript 手写九宫格抽奖demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • [js高手之路]从原型链开始图解继承到组合继承的产生详解

    [js高手之路]从原型链开始图解继承到组合继承的产生详解

    下面小编就为大家带来一篇[js高手之路]从原型链开始图解继承到组合继承的产生详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Javascript iframe交互并兼容各种浏览器的解决方法

    Javascript iframe交互并兼容各种浏览器的解决方法

    这篇文章主要介绍了Javascript iframe交互并兼容各种浏览器的解决方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • 详解小程序横屏方案对比

    详解小程序横屏方案对比

    这篇文章主要介绍了小程序横屏方案对比,实现横屏的方案也有多种,但是每种方案都有一定的缺陷,恰巧最近也在横屏方案上踩了不少坑,本文就一起来介绍一下吧
    2020-06-06
  • uniapp添加操作日志的方法(uniapp、日志、文件、html5+)

    uniapp添加操作日志的方法(uniapp、日志、文件、html5+)

    近期一直在写微信小程序,有一个问题一直没有解决,就是在测试环境中调试代码会打印很多日志,方便看到问题所在,这篇文章主要给大家介绍了关于uniapp添加操作日志(uniapp、日志、文件、html5+)的相关资料,需要的朋友可以参考下
    2023-11-11
  • 微信小程序接入腾讯云验证码的方法步骤

    微信小程序接入腾讯云验证码的方法步骤

    这篇文章主要介绍了微信小程序接入腾讯云验证码的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 如何在现代JavaScript中编写异步任务

    如何在现代JavaScript中编写异步任务

    这篇文章主要给大家介绍了关于如何在现代JavaScript中编写异步任务的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • javascript引用类型之时间Date和数组Array

    javascript引用类型之时间Date和数组Array

    引用类型的值(对象)其实就是引用类型的一个实例,接下来,通过本篇文章给大家介绍javascript引用类型之时间Date和数组Array,需要的朋友可以参考下
    2015-08-08

最新评论