优化签名验签 #84

README.md

@@ -78,6 +78,7 @@ npm run build -adapter=[chrome|edge|utools|firefox|web]
 |Hex/String转换|`hex to string`, `string to hex`, `十六进制转字符串`, `字符串转十六进制`|√|
 |文本处理|`大小写转换`, `中英文标点转换`, `简繁转换`, `替换`, `字符统计`, `行去重`, `添加行号`, `行排序`, `过滤行首尾不可见字符`,`过滤空行`|√|
 |html编码|`html编码`|√|
+|签名/验签|`签名`,`验签`,`RSA`|√|
 
 ## 第三方开源库
 
@@ -118,5 +119,6 @@ npm run build -adapter=[chrome|edge|utools|firefox|web]
 - [axios](https://www.npmjs.com/package/axios)
 - [monaco-editor](https://www.npmjs.com/package/monaco-editor)
 - [js-htmlencode](https://www.npmjs.com/package/js-htmlencode)
+- [jsrsasign](https://www.npmjs.com/package/jsrsasign)
 
 > 当然项目中还使用很多不知道姓名的大神的代码, 在这里就不一一感谢

package-lock.json

@@ -1025,17 +1025,17 @@
       "dev": true
     },
     "@typescript-eslint/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-sEwNINVxcB4ZgC6Fe6rUyMlvsB2jvVdgxjZEjQUQVlaSPMNamDOwO6/TB98kFt4sYYfNhdhTPBEQqNQZjMMswA=="
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.2.0.tgz",
+      "integrity": "sha512-cTk6x08qqosps6sPyP2j7NxyFPlCNsJwSDasqPNjEQ8JMD5xxj2NHxcLin5AJQ8pAVwpQ8BMI3bTxR0zxmK9qQ=="
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.1.0.tgz",
-      "integrity": "sha512-SSz+l9YrIIsW4s0ZqaEfnjl156XQ4VRmJsbA0ZE1XkXrD3cRpzuZSVCyqeCMR3EBjF27IisWakbBDGhGNIOvfQ==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.2.0.tgz",
+      "integrity": "sha512-RsdXq2XmVgKbm9nLsE3mjNUM7BTr/K4DYR9WfFVMUuozHWtH5gMpiNZmtrMG8GR385EOSQ3kC9HiEMJWimxd/g==",
       "requires": {
-        "@typescript-eslint/types": "5.1.0",
-        "@typescript-eslint/visitor-keys": "5.1.0",
+        "@typescript-eslint/types": "5.2.0",
+        "@typescript-eslint/visitor-keys": "5.2.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -1187,11 +1187,11 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.1.0.tgz",
-      "integrity": "sha512-uqNXepKBg81JVwjuqAxYrXa1Ql/YDzM+8g/pS+TCPxba0wZttl8m5DkrasbfnmJGHs4lQ2jTbcZ5azGhI7kK+w==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.2.0.tgz",
+      "integrity": "sha512-Nk7HizaXWWCUBfLA/rPNKMzXzWS8Wg9qHMuGtT+v2/YpPij4nVXrVJc24N/r5WrrmqK31jCrZxeHqIgqRzs0Xg==",
       "requires": {
-        "@typescript-eslint/types": "5.1.0",
+        "@typescript-eslint/types": "5.2.0",
         "eslint-visitor-keys": "^3.0.0"
       },
       "dependencies": {
@@ -12392,9 +12392,9 @@
       }
     },
     "vue-router": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
-      "integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ=="
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
+      "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
     },
     "vue-style-loader": {
       "version": "4.1.3",

package.json

@@ -11,7 +11,7 @@
         "@babel/parser": "^7.15.8",
         "@prettier/plugin-php": "^0.17.5",
         "@prettier/plugin-xml": "^1.1.0",
-        "@typescript-eslint/typescript-estree": "^5.1.0",
+        "@typescript-eslint/typescript-estree": "^5.2.0",
         "angular-html-parser": "^1.8.0",
         "axios": "^0.21.4",
         "babel-runtime": "^6.26.0",
@@ -55,7 +55,7 @@
         "uuid": "^8.3.2",
         "view-design": "^4.6.1",
         "vue": "^2.6.14",
-        "vue-router": "^3.5.2",
+        "vue-router": "^3.5.3",
         "x2js": "github:abdolence/x2js"
     },
     "devDependencies": {

src/config.js

@@ -78,6 +78,7 @@ const utools = {
         jwt: ['jwtDecode'],
         hexString: ['hex to string', 'string to hex', '十六进制转字符串', '字符串转十六机制'],
         text: ['文本处理', '大小写转换', '中英文标点转换', '简繁转换', '字符替换', '字符统计', '行去重', '添加行号', '行排序', '过滤行首尾不可见字符', '过滤空行'],
+        sign: ['签名', '验签', 'rsa'],
     },
     cmds: {
         timestamp: [

src/views/tool/sign.vue

 <template>
-  <div>
-    <Input v-model="current.signData" :rows="7" type="textarea" placeholder="待签名内容/验签数据"></Input>
-    <Input v-model="current.privateKey" :rows="7" type="textarea" placeholder="PEM格式私钥"></Input>
-    <option-block>
-      <FormItem>
-        <Select v-model="current.algorithm" style="width: 200px">
-          <Option v-for="v in algorithm" :value="v" :key="v">{{ v }}</Option>
-        </Select>
-      </FormItem>
-      <FormItem>
-        <ButtonGroup>
-          <Button type="primary" @click="sign()">签名</Button>
-          <Button type="primary" @click="verify()">验签</Button>
-        </ButtonGroup>
+    <div>
+        <Row :gutter="10">
+            <Col span="12">
+                <Card :padding="0">
+                    <p slot="title">PEM格式公钥</p>
+                    <Input v-model="current.publicKey" :rows="6" type="textarea" placeholder="PEM格式公钥"></Input>
+                </Card>
+            </Col>
+            <Col span="12">
+                <Card :padding="0">
+                    <p slot="title">PEM格式私钥</p>
+                    <Input v-model="current.privateKey" :rows="6" type="textarea" placeholder="PEM格式私钥"></Input>
+                </Card>
+            </Col>
+        </Row>
+        <Row :gutter="10" style="margin-top: 5px">
+            <Col span="12">
+                <Card :padding="0">
+                    <p slot="title">待签名内容/验签数据</p>
+                    <Input v-model="current.signData" :rows="6" type="textarea"></Input>
+                </Card>
+            </Col>
+            <Col span="12">
+                <Card :padding="0">
+                    <p slot="title">Base64编码后签名</p>
+                    <Input v-model="current.verifyCode" :rows="6" type="textarea"></Input>
+                </Card>
+            </Col>
+        </Row>
+        <option-block>
+            <FormItem>
+                <Select v-model="current.algorithm" style="width: 200px">
+                    <Option v-for="v in algorithm" :value="v" :key="v">{{ v }}</Option>
+                </Select>
+            </FormItem>
+            <FormItem>
+                <ButtonGroup>
+                    <Button type="primary" @click="sign()">签名</Button>
+                    <Button type="primary" @click="verify()">验签</Button>
 
-      </FormItem>
-    </option-block>
-    <Input v-model="current.publicKey" :rows="7" type="textarea" placeholder="PEM格式公钥"></Input>
-    <Input v-model="current.verifyCode" :rows="7" type="textarea" placeholder="Base64编码后签名"></Input>
-  </div>
+                </ButtonGroup>
+            </FormItem>
+            <FormItem>
+                <Button type="default" @click="openGenerateKeypairBloack()">生成公钥/私钥</Button>
+            </FormItem>
+        </option-block>
+        <Modal
+            v-model="generateKeypairData.show"
+            title="生成公钥/私钥"
+        >
+            <Form :label-width="80">
+                <FormItem label="密钥格式">
+                    <Select v-model="generateKeypairData.type">
+                        <Option value="PKCS8PRV">PKCS#8</Option>
+                        <Option value="PKCS1PRV">PKCS#1</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="密钥长度">
+                    <Select v-model="generateKeypairData.length">
+                        <Option :value="512">512 bit</Option>
+                        <Option :value="1024">1024 bit</Option>
+                        <Option :value="2048">2048 bit</Option>
+                        <Option :value="4096">4096 bit</Option>
+                    </Select>
+                </FormItem>
+            </Form>
+            <div slot="footer">
+                <Button type="text" @click="generateKeypairData.show = false">取消</Button>
+                <Button type="primary" disabled v-if="generateKeypairData.loading">生成中</Button>
+                <Button v-else type="primary" @click="generateKeypair()">生成</Button>
+            </div>
+        </Modal>
+    </div>
 </template>
-
 <script>
 import rs from "jsrsasign";
 
 export default {
-  created() {
-    this.current = Object.assign(this.current, this.$getToolData('input'))
-  },
-  methods: {
-    sign() {
-      let rs = require('jsrsasign')
-      if (this.current.signData && this.current.privateKey) {
-        let rsaPrivateKey
-        try {
-          rsaPrivateKey = rs.KEYUTIL.getKey(this.current.privateKey)
-        } catch (e) {
-          this.$Message.error("无效私钥"+e)
-        }
-        let sign
-        try {
-          sign = new rs.KJUR.crypto.Signature({alg: this.current.algorithm})
-        } catch (e) {
-          this.$Message.error("无效签名算法")
-        }
-        sign.init(rsaPrivateKey)
-        sign.updateString(this.current.signData)
-        let signResult
-        try {
-          signResult = sign.sign()
-        } catch (e) {
-          this.$Message.error("签名时出现异常" + e)
-        }
-        // 转为base64
-        this.current.verifyCode = rs.hex2b64(signResult)
-        // 自动复制签名结果到剪切板
-        this.$clipboardCopy(this.current.verifyCode);
-        // 保存历史记录
-        this.$saveToolData(this.current);
-      }
+    created() {
+        this.current = Object.assign(this.current, this.$getToolData())
     },
-    verify() {
-      if (this.current.verifyCode && this.current.publicKey) {
-        let rsaPublicKey
-        try {
-          rsaPublicKey = rs.KEYUTIL.getKey(this.current.publicKey)
-        } catch (e) {
-          this.$Message.error("无效公钥")
-        }
-        let sign
-        try {
-          sign = new rs.KJUR.crypto.Signature({alg: this.current.algorithm})
-        } catch (e) {
-          this.$Message.error("无效签名算法")
+    methods: {
+        sign() {
+            if (!this.current.signData || !this.current.privateKey){
+                return this.$Message.error('待签名内容/验签数据/PEM格式私钥 必填')
+            }
+            let rsaPrivateKey
+            try {
+                rsaPrivateKey = rs.KEYUTIL.getKey(this.current.privateKey)
+            } catch (e) {
+                return this.$Message.error("无效私钥" + e)
+            }
+            let sign
+            try {
+                sign = new rs.KJUR.crypto.Signature({alg: this.current.algorithm})
+            } catch (e) {
+                return this.$Message.error("无效签名算法")
+            }
+            sign.init(rsaPrivateKey)
+            sign.updateString(this.current.signData)
+            let signResult
+            try {
+                signResult = sign.sign()
+            } catch (e) {
+                return this.$Message.error("签名时出现异常" + e)
+            }
+            // 转为base64
+            this.current.verifyCode = rs.hex2b64(signResult)
+            // 自动复制签名结果到剪切板
+            this.$clipboardCopy(this.current.verifyCode);
+            // 保存历史记录
+            this.$saveToolData(this.current);
+        },
+        verify() {
+            if (!this.current.verifyCode || !this.current.publicKey){
+                return this.$Message.error('Base64编码后签名/PEM格式公钥 必填')
+            }
+            let rsaPublicKey
+            try {
+                rsaPublicKey = rs.KEYUTIL.getKey(this.current.publicKey)
+            } catch (e) {
+                return this.$Message.error("无效公钥")
+            }
+            let sign
+            try {
+                sign = new rs.KJUR.crypto.Signature({alg: this.current.algorithm})
+            } catch (e) {
+                return this.$Message.error("无效签名算法")
+            }
+            sign.init(rsaPublicKey)
+            sign.updateString(this.current.signData)
+            let hexData = rs.b64tohex(this.current.verifyCode)
+            let verifyResult = sign.verify(hexData)
+            if (verifyResult) {
+                return this.$Message.info("验签成功")
+            }
+            return this.$Message.error("验签失败")
+        },
+        generateKeypair() {
+            this.generateKeypairData.loading = true;
+            setTimeout(() => {
+                try {
+                    const rsaKeypair = rs.KEYUTIL.generateKeypair("RSA", this.generateKeypairData.length);
+                    this.current.privateKey = rs.KEYUTIL.getPEM(rsaKeypair.prvKeyObj, this.generateKeypairData.type)
+                    this.current.publicKey = rs.KEYUTIL.getPEM(rsaKeypair.pubKeyObj)
+                    this.generateKeypairData.show = false
+                } catch (e) {
+                    this.$Message.error("秘钥生成失败")
+                }
+                this.generateKeypairData.loading = false;
+            }, 500)
+        },
+        openGenerateKeypairBloack() {
+            this.generateKeypairData.show = true;
+            this.generateKeypairData.loading = false;
+            this.generateKeypairData.type = "PKCS8PRV";
+            this.generateKeypairData.length = 2048;
         }
-        sign.init(rsaPublicKey)
-        sign.updateString(this.current.signData)
-        let hexData = rs.b64tohex(this.current.verifyCode)
-        let verifyResult = sign.verify(hexData)
-        if (verifyResult) {
-          this.$Message.info("验签成功")
-        } else {
-          this.$Message.error("验签失败")
+    },
+    data() {
+        return {
+            current: {
+                signData: '',
+                privateKey: '',
+                publicKey: '',
+                verifyCode: '',
+                algorithm: 'MD5withRSA'
+            },
+            algorithm: ["MD5withRSA", "SHA1withRSA", "SHA256withRSA", "SHA512withRSA"],
+            generateKeypairData: {
+                show: false,
+                loading: false,
+                length: 2048,
+                type: "PKCS8PRV",
+            }
         }
-      }
-    }
-  },
-  data() {
-    return {
-      current: {
-        signData: '',
-        privateKey: '',
-        publicKey: '',
-        verifyCode: '',
-        algorithm: 'MD5withRSA'
-      },
-      algorithm: ["MD5withRSA", "SHA1withRSA", "SHA256withRSA", "SHA512withRSA"]
     }
-  }
 }
 </script>
-
-<style scoped>
-
-</style>
\ No newline at end of file