前端RSA加密

JAY.LIN 收录于前端

2024-11-29 约 1234 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=131392687

前端RSA加密

第一次用到RSA加密，做篇文章记录一下

1、什么是RSA加密（原理）？

首先就是前端会有一个公钥，后端会有一个私钥，公钥和私钥都是后端生成的，例如前端要加密一个‘hi’ 这个字符串，假设a=1，往后数那h就是8，i就是9。再假设公钥是（3,33），私钥是（7,33）

前端加密之前‘hi’是（8,9）,加密：8的E次方=8的3次方=512,512%N=512%33=17，9的E次方=9的3次方=729,729%E=729%33=3，所以加密后，‘hi’的值就从（8,9,）变成了（17,3）

后端拿到（17,3）之后，进行解密：17的D次方=17的7次方=410338673，410338673%33=8,

3的D次方=3的7次方=2187，2187%33=9,所以加密的（8,9）根据排序规律就知道（8,9）是‘hi’了，神奇吧。

知道这么神奇之后，我们就会想知道，公钥和私钥怎么得来的？

1、随机选两个质数，这里我选了3,11

2、求N，N等于两个质数相乘，33，N=33

3、求T，T是用来筛选公钥的，利用传说的欧拉公式，（p-1）（q-1）=（3-1）（11-1）=20，T=20

4、求公钥E，E要满足1<E<T,也就是1<E<20,我选了最小的3，E=3

5、私钥D要满足（D*E）%T=1,求得D=7

以上就是公钥和私钥的计算过程啦，只要第一步选的质数足够大，目前的电脑是很难计算的出来的。但是后端传来的公钥和私钥都是一串经过加密的字符串，前端其实也不知道公钥的具体数值，只需要拿着这个公钥加密再讲加密后的数据传给后端就行了。

2、前端代码实现

1.安装依赖

npm install jsencrypt 

2.代码实现

<template>
  <div class="">
    <button @click="encrypt" >加密</button>
    <button @click="decrypt" >解密</button>
  </div>
</template>

<script>
  import { JSEncrypt } from 'jsencrypt';
export default {
  name: "test",
  data() {
    return {
      keyword: 0,
       publicKey:"-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4aWAgASppilGGGPv6wdCp4AqTRbQPEMxU1mNwBXmP6v0hp2eHo8LMhjjM4IwzdzOnwyTR6v5YlznBb90cWKsr/DP1IdSI9ox7M7FCHGfURfLp/mGRvNLnJ5ds7YD+35rP0wLMZhNbkXHs3HMYOY96XnSE7bfcWkLiRrwiCrqLdQIDAQAB-----END PUBLIC KEY-----",
       encrypt_data:0
    };
  },
  
  methods: {
  
       // 1获取公钥
    //    getRsaKey() {
    //   后端接口请求.then(res => {
    //       if (res.data.code === 0) {
    //         this.updatePassword(res.data.data.publicKey);
    //       } else {
    //         this.$message.error(res.data.msg);
    //         throw new Error(res.data.msg);
    //       }
    //     })
    // },
   
    // 2.拿到公钥进行加密
     encrypt(){
      // 新建JESencrypt对象
      const encryptor = new JSEncrypt();
      //   设置公钥
      encryptor.setPublicKey(this.publicKey); // publicKey为公钥
      // return encryptor.encrypt(pwd);
      let data=JSON.stringify({username:'张三',password:'6666'})
      console.log('加密前',data);
       this.encrypt_data=encryptor.encrypt(data)
      console.log('加密后',this.encrypt_data);
    },

    decrypt(){
      let privateKey =
        "-----BEGIN PRIVATE KEY-----MIICeQIBADANBgkqhkiG9w0BAQEFAASCAmMwggJfAgEAAoGBALhpYCABKmmKUYYY+/rB0KngCpNFtA8QzFTWY3AFeY/q/SGnZ4ejwsyGOMzgjDN3M6fDJNHq/liXOcFv3RxYqyv8M/Uh1Ij2jHszsUIcZ9RF8un+YZG80ucnl2ztgP7fms/TAsxmE1uRcezccxg5j3pedITtt9xaQuJGvCIKuot1AgMBAAECgYEAti7cWSHtrZCJk6oRHhzlsT12FSKSjSOyScn3OM8f1i933gyNOjJtmzKq4LShraKAtKcUNBItLoZP96s0zPFIQCGjON0d3XyRxoGK2h3nEZT8NTqEcQVI2sbOy5PvJHAKT/Vrcqdkt/U9YteLWAKGZ5A8Ie8NZEjh0botUwIrOIECQQDd+Qv8IYiDSugZcOPEz/ijCR4Jg011X9/bqXVIEiqkIZ+8QToKCBuGt0EejhAzs0acni1XLPwBeDmAsmg8MmpVAkEA1K5NL3ZwuLjz4vs8EfF3BfscPTQZ9PRBhzGC9iqP7TyzMRyZjGpWfycOjki8isRzR3iNoFPIyLZfe5Wf4vL8oQJBALHia6BanzPYS7hXp7CJmg/NtqyY9PIjKxq16q8fH9z4tTIAc6qmZKjJIv6Biqpj+Sp5+IvsGOh0mGBymOXk4SECQQDDxSYbeGTORMGKwERNJ/2trbYSyHDUQDpJXdP1ELynXeZ8YJ0e2YuBQ8xsQJv9CFQtB9UmLbl2uBkwQ0yHta/BAkEAoKN1vdqkDTwAkSRpvFUOHkc7E6nEYdXwM+hhKnmQLCQb2aP8zW9GI2Q7EWPDEwN92TK30k1VSzpquSU7SUA32g==-----END PRIVATE KEY-----";

      const decryptor = new JSEncrypt();
      decryptor.setPrivateKey(privateKey)
      let data=decryptor.decrypt(this.encrypt_data)
      console.log('解密后',data)
    }

  // // let data=JSON.stringify({username:'张三',password:'6666'})
  // let encrypt_data= encrypt(publicKey,data)
  // console.log(encrypt)
  },
  //   watch: {
  //     keyword(newVal, oldVal) {
  //       console.log(newVal);
  //     },
  //   },
};
</script>

<style scoped></style>

3.运行结果

以上就是我对RSA前端加密的理解啦，不对之处尽情指教~~~

目录

前端RSA加密

前端RSA加密

1、什么是RSA加密（原理）？

2、前端代码实现