增加crypto;优化layer.toast
parent
5a508d3356
commit
8b87fe8ec7
|
@ -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')
|
||||||
|
|
||||||
|
|
||||||
|
```
|
|
@ -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)))
|
||||||
|
}
|
|
@ -1,10 +1,10 @@
|
||||||
/*
|
/*
|
||||||
* Fastest md5 implementation around (JKM md5).
|
* Fastest md5 implementation around (JKM md5).
|
||||||
* Credits: Joseph Myers
|
* Credits: Joseph Myers
|
||||||
*
|
*
|
||||||
* @see http://www.myersdaily.org/joseph/javascript/md5-text.html
|
* @see http://www.myersdaily.org/joseph/javascript/md5-text.html
|
||||||
* @see http://jsperf.com/md5-shootout/7
|
* @see http://jsperf.com/md5-shootout/7
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* this function is much faster,
|
/* this function is much faster,
|
||||||
so if possible we use it. Some IEs
|
so if possible we use it. Some IEs
|
||||||
|
@ -224,9 +224,9 @@ function md51(s) {
|
||||||
length = s.length
|
length = s.length
|
||||||
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||||
for (i = 0; i < length; i += 1) {
|
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) {
|
if (i > 55) {
|
||||||
md5cycle(state, tail)
|
md5cycle(state, tail)
|
||||||
for (i = 0; i < 16; i += 1) {
|
for (i = 0; i < 16; i += 1) {
|
||||||
|
@ -270,10 +270,10 @@ function md51_array(a) {
|
||||||
length = a.length
|
length = a.length
|
||||||
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||||
for (i = 0; i < length; i += 1) {
|
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) {
|
if (i > 55) {
|
||||||
md5cycle(state, tail)
|
md5cycle(state, tail)
|
||||||
for (i = 0; i < 16; i += 1) {
|
for (i = 0; i < 16; i += 1) {
|
||||||
|
@ -492,7 +492,7 @@ SparkMD5.prototype.end = function(raw) {
|
||||||
ret
|
ret
|
||||||
|
|
||||||
for (i = 0; i < length; i += 1) {
|
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)
|
this._finish(tail, length)
|
||||||
|
@ -570,7 +570,7 @@ SparkMD5.prototype._finish = function(tail, length) {
|
||||||
lo,
|
lo,
|
||||||
hi
|
hi
|
||||||
|
|
||||||
tail[i >> 2] |= 0x80 << ((i % 4) << 3)
|
tail[i >> 2] |= 0x80 << (i % 4 << 3)
|
||||||
if (i > 55) {
|
if (i > 55) {
|
||||||
md5cycle(this._hash, tail)
|
md5cycle(this._hash, tail)
|
||||||
for (i = 0; i < 16; i += 1) {
|
for (i = 0; i < 16; i += 1) {
|
||||||
|
@ -674,7 +674,7 @@ SparkMD5.ArrayBuffer.prototype.end = function(raw) {
|
||||||
ret
|
ret
|
||||||
|
|
||||||
for (i = 0; i < length; i += 1) {
|
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)
|
this._finish(tail, length)
|
||||||
|
@ -749,4 +749,16 @@ SparkMD5.ArrayBuffer.hash = function(arr, raw) {
|
||||||
return raw ? hexToBinaryString(ret) : ret
|
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
|
|
@ -123,9 +123,14 @@
|
||||||
|
|
||||||
::slotted(&__toast.style-info) {
|
::slotted(&__toast.style-info) {
|
||||||
border: 1px solid nth($cp, 3);
|
border: 1px solid nth($cp, 3);
|
||||||
background: nth($cp, 2);
|
background: nth($cp, 1);
|
||||||
color: nth($cgr, 3);
|
color: nth($cgr, 3);
|
||||||
}
|
}
|
||||||
|
::slotted(&__toast.style-success) {
|
||||||
|
border: 1px solid #b3e19d;
|
||||||
|
background: #f0f9eb;
|
||||||
|
color: nth($ct, 1);
|
||||||
|
}
|
||||||
::slotted(&__toast.style-warn) {
|
::slotted(&__toast.style-warn) {
|
||||||
border: 1px solid #faebb4;
|
border: 1px solid #faebb4;
|
||||||
background: #fffbed;
|
background: #fffbed;
|
||||||
|
@ -763,6 +768,9 @@ Object.assign(_layer, {
|
||||||
case 'error':
|
case 'error':
|
||||||
ico = 'deny'
|
ico = 'deny'
|
||||||
break
|
break
|
||||||
|
case 'success':
|
||||||
|
ico = 'get'
|
||||||
|
break
|
||||||
default:
|
default:
|
||||||
ico = 'info'
|
ico = 'info'
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
|
Reference in New Issue