From 8b87fe8ec7daa954d4a8370269dfee1aa8d0fe84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Fri, 20 Dec 2019 17:45:36 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0crypto;=E4=BC=98=E5=8C=96laye?= =?UTF-8?q?r.toast?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/crypto/Readme.md | 47 ++++++++++++++++++ src/crypto/index.js | 77 +++++++++++++++++++++++++++++ src/{md5/index.js => crypto/md5.js} | 40 +++++++++------ src/layer/index.wc | 10 +++- src/md5/Readme.md | 25 ---------- 5 files changed, 159 insertions(+), 40 deletions(-) create mode 100644 src/crypto/Readme.md create mode 100644 src/crypto/index.js rename src/{md5/index.js => crypto/md5.js} (96%) delete mode 100644 src/md5/Readme.md diff --git a/src/crypto/Readme.md b/src/crypto/Readme.md new file mode 100644 index 0000000..1875e2e --- /dev/null +++ b/src/crypto/Readme.md @@ -0,0 +1,47 @@ +# crypto & md5 加密组件 + + + + +## md5 +> 这里使用的是第三方的 SparkMD5 实现 + +```javascript + +import { md5, md5Sum } from 'crypto/md5' + +// 直接计算字段串的md5值 +console.log(md5('123456')) + + +// 计算该文件的md5签名 +var file = /*...*/ //文件表单获取 +var fs = new FileReader() +fs.onload = function(){ + console.log(md5Sum(this.result)) +} +fs.readAsBinaryString(file) + +``` + + +## crypto +> 这里使用的是浏览器内置的实现, 需要在https下或本地才能用。 +>> 返回值都是Promise对象 + +```javascript + +import hash, { sha1, sha256, sha512, hmac, base64encode, base64decode } from 'crypto/index' + + + +hash('sha-1', '123456') +// 等价于 +sha1('123456') + + +// hmac签名 +hmac('sha-1', '123456', 'a key', 'hex') + + +``` \ No newline at end of file diff --git a/src/crypto/index.js b/src/crypto/index.js new file mode 100644 index 0000000..e12c72e --- /dev/null +++ b/src/crypto/index.js @@ -0,0 +1,77 @@ +const encoder = new TextEncoder() +const subtle = window.crypto.subtle + +/** + * String 转 Uint8Array + */ +function str2uint(txt) { + return encoder.encode(txt) +} + +/** + * ArrayBuffer 转 hex + */ +function ab2hex(buf) { + var uint8 = new Uint8Array(buf) + return [...uint8].map(n => n.toString(16).padStart(2, '0')).join('') +} + +/** + * ArrayBuffer 转 Binary + */ +function ab2bin(buf) { + var bin = '' + var uint8 = new Uint8Array(buf) + for (var i = 0; i < uint8.length; i++) { + bin += String.fromCharCode(uint8[i]) + } + return bin +} + +/* ------------------------------------- */ + +export default function hash(type, str) { + return subtle.digest(type, str2uint(str)).then(buf => ab2hex(buf)) +} + +export function sha1(str) { + return hash('sha-1', str) +} + +export function sha256(str) { + return hash('sha-256', str) +} + +export function sha512(str) { + return hash('sha-512', str) +} + +export function hmac(mode, str, key, output) { + key = key === '' ? new Uint8Array(16) : str2uint(key) + return subtle + .importKey('raw', key, { name: 'HMAC', hash: { name: mode } }, true, [ + 'sign', + 'verify' + ]) + .then(cKey => { + return subtle.sign('HMAC', cKey, str2uint(str)).then(buf => { + if (output === 'binary') { + return ab2bin(buf) + } else if (output === 'hex') { + return ab2hex(buf) + } else if (output === 'base64') { + return window.btoa(ab2bin(buf)) + } + return new Uint8Array(buf) + }) + }) +} + +// 支持对中文的base64编码 +export function base64encode(str) { + return window.btoa(unescape(encodeURIComponent(str))) +} + +export function base64decode(str) { + return decodeURIComponent(escape(window.atob(str))) +} diff --git a/src/md5/index.js b/src/crypto/md5.js similarity index 96% rename from src/md5/index.js rename to src/crypto/md5.js index a4d8c2b..04bd4ef 100644 --- a/src/md5/index.js +++ b/src/crypto/md5.js @@ -1,10 +1,10 @@ /* - * Fastest md5 implementation around (JKM md5). - * Credits: Joseph Myers - * - * @see http://www.myersdaily.org/joseph/javascript/md5-text.html - * @see http://jsperf.com/md5-shootout/7 - */ + * Fastest md5 implementation around (JKM md5). + * Credits: Joseph Myers + * + * @see http://www.myersdaily.org/joseph/javascript/md5-text.html + * @see http://jsperf.com/md5-shootout/7 + */ /* this function is much faster, so if possible we use it. Some IEs @@ -224,9 +224,9 @@ function md51(s) { length = s.length tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] for (i = 0; i < length; i += 1) { - tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) << 3) + tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3) } - tail[i >> 2] |= 0x80 << ((i % 4) << 3) + tail[i >> 2] |= 0x80 << (i % 4 << 3) if (i > 55) { md5cycle(state, tail) for (i = 0; i < 16; i += 1) { @@ -270,10 +270,10 @@ function md51_array(a) { length = a.length tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] for (i = 0; i < length; i += 1) { - tail[i >> 2] |= a[i] << ((i % 4) << 3) + tail[i >> 2] |= a[i] << (i % 4 << 3) } - tail[i >> 2] |= 0x80 << ((i % 4) << 3) + tail[i >> 2] |= 0x80 << (i % 4 << 3) if (i > 55) { md5cycle(state, tail) for (i = 0; i < 16; i += 1) { @@ -492,7 +492,7 @@ SparkMD5.prototype.end = function(raw) { ret for (i = 0; i < length; i += 1) { - tail[i >> 2] |= buff.charCodeAt(i) << ((i % 4) << 3) + tail[i >> 2] |= buff.charCodeAt(i) << (i % 4 << 3) } this._finish(tail, length) @@ -570,7 +570,7 @@ SparkMD5.prototype._finish = function(tail, length) { lo, hi - tail[i >> 2] |= 0x80 << ((i % 4) << 3) + tail[i >> 2] |= 0x80 << (i % 4 << 3) if (i > 55) { md5cycle(this._hash, tail) for (i = 0; i < 16; i += 1) { @@ -674,7 +674,7 @@ SparkMD5.ArrayBuffer.prototype.end = function(raw) { ret for (i = 0; i < length; i += 1) { - tail[i >> 2] |= buff[i] << ((i % 4) << 3) + tail[i >> 2] |= buff[i] << (i % 4 << 3) } this._finish(tail, length) @@ -749,4 +749,16 @@ SparkMD5.ArrayBuffer.hash = function(arr, raw) { return raw ? hexToBinaryString(ret) : ret } -export default new SparkMD5() +var _sparkIns = new SparkMD5() + +export function md5(str) { + _sparkIns.append(str) + return _sparkIns.end() +} + +export function md5Sum(binStr) { + _sparkIns.appendBinary(binStr) + return _sparkIns.end() +} + +export default _sparkIns diff --git a/src/layer/index.wc b/src/layer/index.wc index eccfc90..98f5519 100644 --- a/src/layer/index.wc +++ b/src/layer/index.wc @@ -123,9 +123,14 @@ ::slotted(&__toast.style-info) { border: 1px solid nth($cp, 3); - background: nth($cp, 2); + background: nth($cp, 1); color: nth($cgr, 3); } + ::slotted(&__toast.style-success) { + border: 1px solid #b3e19d; + background: #f0f9eb; + color: nth($ct, 1); + } ::slotted(&__toast.style-warn) { border: 1px solid #faebb4; background: #fffbed; @@ -763,6 +768,9 @@ Object.assign(_layer, { case 'error': ico = 'deny' break + case 'success': + ico = 'get' + break default: ico = 'info' } diff --git a/src/md5/Readme.md b/src/md5/Readme.md deleted file mode 100644 index 7e27c8e..0000000 --- a/src/md5/Readme.md +++ /dev/null @@ -1,25 +0,0 @@ -# md5 加密组件 - -可对普通字符串和文件计算其对应的 md5 值。 - -组件符合 AMD 规范, 可使用 require 引入 - -### demo: - -```javascript -require(['./md5/main'], function(spark){ - - var md5 = function(buf){ - spark.appendBinary(buf) - return spark.end() - } - - var file = /*...*/ //文件表单获取 - var fs = new FileReader() // Chrome, IE9+, FF, Safari - fs.readAsBinaryString(file) - - fs.onload = function(){ // 计算该文件的md5签名 - var sign = md5(this.result) - } -}) -```