返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS实现密码箱小程序帮你记住各种密码
  • 518
分享到

JS实现密码箱小程序帮你记住各种密码

2024-04-02 19:04:59 518人浏览 安东尼
摘要

目录说在前面设计思路1、进入密码箱前加密2、密码箱数据加密3、密码数据增删改查4、密码分类展示功能实现1、手势图案锁组件2、数据AES加密解密2.1 引入Cryptojs2.2 封装

在这里插入图片描述

说在前面

?大家现在都是怎么保存自己的各个软件应用的账号密码的呢?手写笔记本?手机备忘录?还是其他什么APP?或许很多人都有这样的烦恼吧,软件应用太多,账号密码相同害怕泄露一个就被’连根拔起’,账号密码不同又怕自己记不住,想记录起来却又不知道记录在哪里会比较安全,那么为什么不自己动手来设计一个属于自己的密码保险柜呢?

设计思路

对于该组件的设计我们主要从以下几个方面出发。

1、进入密码箱前加密

在这里插入图片描述

如上图,这里使用了大家非常熟悉的手势图案锁来作为密码箱的第一道防线,进入密码箱前我们需要先输入手势图案解锁,解锁成功后才可以进入密码列表页面。

2、密码箱数据加密

在这里插入图片描述

通过手势图案锁之后,我们可以进入到上面这个页面,这里我们可以看到明文的密码信息,但在数据库中其实都是通过aes加密过的数据,如下图:

在这里插入图片描述

我们在数据入库前进行加密,然后在查询到数据之后可以对数据进行解密展示,说到加密的话,那么我们是不是需要一个秘钥?秘钥该怎么管理呢?

在这里插入图片描述

如上图,页面的下方有一个设置按钮,我们可以在这里修改我们的秘钥。

3、密码数据增删改查

密码箱其实质上其实就是对数据进行存储和展示,所以究根到底还是对密码数据进行简单的增删改查,我们只需要实现这几个基本的功能即可,主要通过云函数进行数据交互。

4、密码分类展示

在这里插入图片描述

这里主要是页面的展示设计,如上图,我们将同一平台的账号数据归到同一组,可以对单个账号进行处理,也可以批量处理同一组的数据。

功能实现

1、手势图案锁组件

关于这个组件的实现,我前面其实已经和大家分享过了,分别实现了vue版本微信小程序版本这两个版本的手势图案锁组件,具体链接如下:

微信小程序实现一个手势图案锁组件

Vue封装一个图案手势锁组件

2、数据AES加密解密

2.1 引入CryptoJS


var CryptoJS=CryptoJS||function(u,p){var d={},l=d.lib={},s=function(){},t=l.Base={extend:function(a){s.prototype=this;var c=new s;a&&c.mixIn(a);c.hasOwnProperty("init")||(c.init=function(){c.$super.init.apply(this,arguments)});c.init.prototype=c;c.$super=this;return c},create:function(){var a=this.extend();a.init.apply(a,arguments);return a},init:function(){},mixIn:function(a){for(var c in a)a.hasOwnProperty(c)&&(this[c]=a[c]);a.hasOwnProperty("toString")&&(this.toString=a.toString)},clone:function(){return this.init.prototype.extend(this)}},
r=l.WordArray=t.extend({init:function(a,c){a=this.words=a||[];this.sigBytes=c!=p?c:4*a.length},toString:function(a){return(a||v).stringify(this)},concat:function(a){var c=this.words,e=a.words,j=this.sigBytes;a=a.sigBytes;this.clamp();if(j%4)for(var k=0;k<a;k++)c[j+k>>>2]|=(e[k>>>2]>>>24-8*(k%4)&255)<<24-8*((j+k)%4);else if(65535<e.length)for(k=0;k<a;k+=4)c[j+k>>>2]=e[k>>>2];else c.push.apply(c,e);this.sigBytes+=a;return this},clamp:function(){var a=this.words,c=this.sigBytes;a[c>>>2]&=4294967295<<
32-8*(c%4);a.length=u.ceil(c/4)},clone:function(){var a=t.clone.call(this);a.words=this.words.slice(0);return a},random:function(a){for(var c=[],e=0;e<a;e+=4)c.push(4294967296*u.random()|0);return new r.init(c,a)}}),w=d.enc={},v=w.Hex={stringify:function(a){var c=a.words;a=a.sigBytes;for(var e=[],j=0;j<a;j++){var k=c[j>>>2]>>>24-8*(j%4)&255;e.push((k>>>4).toString(16));e.push((k&15).toString(16))}return e.join("")},parse:function(a){for(var c=a.length,e=[],j=0;j<c;j+=2)e[j>>>3]|=parseInt(a.substr(j,
2),16)<<24-4*(j%8);return new r.init(e,c/2)}},b=w.Latin1={stringify:function(a){var c=a.words;a=a.sigBytes;for(var e=[],j=0;j<a;j++)e.push(String.fromCharCode(c[j>>>2]>>>24-8*(j%4)&255));return e.join("")},parse:function(a){for(var c=a.length,e=[],j=0;j<c;j++)e[j>>>2]|=(a.charCodeAt(j)&255)<<24-8*(j%4);return new r.init(e,c)}},x=w.Utf8={stringify:function(a){try{return decodeURIComponent(escape(b.stringify(a)))}catch(c){throw Error("MalfORMed UTF-8 data");}},parse:function(a){return b.parse(unescape(encodeURIComponent(a)))}},
q=l.BufferedBlockAlGorithm=t.extend({reset:function(){this._data=new r.init;this._nDataBytes=0},_append:function(a){"string"==typeof a&&(a=x.parse(a));this._data.concat(a);this._nDataBytes+=a.sigBytes},_process:function(a){var c=this._data,e=c.words,j=c.sigBytes,k=this.blockSize,b=j/(4*k),b=a?u.ceil(b):u.max((b|0)-this._minBufferSize,0);a=b*k;j=u.min(4*a,j);if(a){for(var q=0;q<a;q+=k)this._doProcessBlock(e,q);q=e.splice(0,a);c.sigBytes-=j}return new r.init(q,j)},clone:function(){var a=t.clone.call(this);
a._data=this._data.clone();return a},_minBufferSize:0});l.Hasher=q.extend({cfg:t.extend(),init:function(a){this.cfg=this.cfg.extend(a);this.reset()},reset:function(){q.reset.call(this);this._doReset()},update:function(a){this._append(a);this._process();return this},finalize:function(a){a&&this._append(a);return this._doFinalize()},blockSize:16,_createHelper:function(a){return function(b,e){return(new a.init(e)).finalize(b)}},_createHMacHelper:function(a){return function(b,e){return(new n.HMAC.init(a,
e)).finalize(b)}}});var n=d.algo={};return d}(Math);
(function(){var u=CryptoJS,p=u.lib.WordArray;u.enc.Base64={stringify:function(d){var l=d.words,p=d.sigBytes,t=this._map;d.clamp();d=[];for(var r=0;r<p;r+=3)for(var w=(l[r>>>2]>>>24-8*(r%4)&255)<<16|(l[r+1>>>2]>>>24-8*((r+1)%4)&255)<<8|l[r+2>>>2]>>>24-8*((r+2)%4)&255,v=0;4>v&&r+0.75*v<p;v++)d.push(t.charAt(w>>>6*(3-v)&63));if(l=t.charAt(64))for(;d.length%4;)d.push(l);return d.join("")},parse:function(d){var l=d.length,s=this._map,t=s.charAt(64);t&&(t=d.indexOf(t),-1!=t&&(l=t));for(var t=[],r=0,w=0;w<
l;w++)if(w%4){var v=s.indexOf(d.charAt(w-1))<<2*(w%4),b=s.indexOf(d.charAt(w))>>>6-2*(w%4);t[r>>>2]|=(v|b)<<24-8*(r%4);r++}return p.create(t,r)},_map:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="}})();
(function(u){function p(b,n,a,c,e,j,k){b=b+(n&a|~n&c)+e+k;return(b<<j|b>>>32-j)+n}function d(b,n,a,c,e,j,k){b=b+(n&c|a&~c)+e+k;return(b<<j|b>>>32-j)+n}function l(b,n,a,c,e,j,k){b=b+(n^a^c)+e+k;return(b<<j|b>>>32-j)+n}function s(b,n,a,c,e,j,k){b=b+(a^(n|~c))+e+k;return(b<<j|b>>>32-j)+n}for(var t=CryptoJS,r=t.lib,w=r.WordArray,v=r.Hasher,r=t.algo,b=[],x=0;64>x;x++)b[x]=4294967296*u.abs(u.sin(x+1))|0;r=r.MD5=v.extend({_doReset:function(){this._hash=new w.init([1732584193,4023233417,2562383102,271733878])},
_doProcessBlock:function(q,n){for(var a=0;16>a;a++){var c=n+a,e=q[c];q[c]=(e<<8|e>>>24)&16711935|(e<<24|e>>>8)&4278255360}var a=this._hash.words,c=q[n+0],e=q[n+1],j=q[n+2],k=q[n+3],z=q[n+4],r=q[n+5],t=q[n+6],w=q[n+7],v=q[n+8],A=q[n+9],B=q[n+10],C=q[n+11],u=q[n+12],D=q[n+13],E=q[n+14],x=q[n+15],f=a[0],m=a[1],g=a[2],h=a[3],f=p(f,m,g,h,c,7,b[0]),h=p(h,f,m,g,e,12,b[1]),g=p(g,h,f,m,j,17,b[2]),m=p(m,g,h,f,k,22,b[3]),f=p(f,m,g,h,z,7,b[4]),h=p(h,f,m,g,r,12,b[5]),g=p(g,h,f,m,t,17,b[6]),m=p(m,g,h,f,w,22,b[7]),
f=p(f,m,g,h,v,7,b[8]),h=p(h,f,m,g,A,12,b[9]),g=p(g,h,f,m,B,17,b[10]),m=p(m,g,h,f,C,22,b[11]),f=p(f,m,g,h,u,7,b[12]),h=p(h,f,m,g,D,12,b[13]),g=p(g,h,f,m,E,17,b[14]),m=p(m,g,h,f,x,22,b[15]),f=d(f,m,g,h,e,5,b[16]),h=d(h,f,m,g,t,9,b[17]),g=d(g,h,f,m,C,14,b[18]),m=d(m,g,h,f,c,20,b[19]),f=d(f,m,g,h,r,5,b[20]),h=d(h,f,m,g,B,9,b[21]),g=d(g,h,f,m,x,14,b[22]),m=d(m,g,h,f,z,20,b[23]),f=d(f,m,g,h,A,5,b[24]),h=d(h,f,m,g,E,9,b[25]),g=d(g,h,f,m,k,14,b[26]),m=d(m,g,h,f,v,20,b[27]),f=d(f,m,g,h,D,5,b[28]),h=d(h,f,
m,g,j,9,b[29]),g=d(g,h,f,m,w,14,b[30]),m=d(m,g,h,f,u,20,b[31]),f=l(f,m,g,h,r,4,b[32]),h=l(h,f,m,g,v,11,b[33]),g=l(g,h,f,m,C,16,b[34]),m=l(m,g,h,f,E,23,b[35]),f=l(f,m,g,h,e,4,b[36]),h=l(h,f,m,g,z,11,b[37]),g=l(g,h,f,m,w,16,b[38]),m=l(m,g,h,f,B,23,b[39]),f=l(f,m,g,h,D,4,b[40]),h=l(h,f,m,g,c,11,b[41]),g=l(g,h,f,m,k,16,b[42]),m=l(m,g,h,f,t,23,b[43]),f=l(f,m,g,h,A,4,b[44]),h=l(h,f,m,g,u,11,b[45]),g=l(g,h,f,m,x,16,b[46]),m=l(m,g,h,f,j,23,b[47]),f=s(f,m,g,h,c,6,b[48]),h=s(h,f,m,g,w,10,b[49]),g=s(g,h,f,m,
E,15,b[50]),m=s(m,g,h,f,r,21,b[51]),f=s(f,m,g,h,u,6,b[52]),h=s(h,f,m,g,k,10,b[53]),g=s(g,h,f,m,B,15,b[54]),m=s(m,g,h,f,e,21,b[55]),f=s(f,m,g,h,v,6,b[56]),h=s(h,f,m,g,x,10,b[57]),g=s(g,h,f,m,t,15,b[58]),m=s(m,g,h,f,D,21,b[59]),f=s(f,m,g,h,z,6,b[60]),h=s(h,f,m,g,C,10,b[61]),g=s(g,h,f,m,j,15,b[62]),m=s(m,g,h,f,A,21,b[63]);a[0]=a[0]+f|0;a[1]=a[1]+m|0;a[2]=a[2]+g|0;a[3]=a[3]+h|0},_doFinalize:function(){var b=this._data,n=b.words,a=8*this._nDataBytes,c=8*b.sigBytes;n[c>>>5]|=128<<24-c%32;var e=u.floor(a/
4294967296);n[(c+64>>>9<<4)+15]=(e<<8|e>>>24)&16711935|(e<<24|e>>>8)&4278255360;n[(c+64>>>9<<4)+14]=(a<<8|a>>>24)&16711935|(a<<24|a>>>8)&4278255360;b.sigBytes=4*(n.length+1);this._process();b=this._hash;n=b.words;for(a=0;4>a;a++)c=n[a],n[a]=(c<<8|c>>>24)&16711935|(c<<24|c>>>8)&4278255360;return b},clone:function(){var b=v.clone.call(this);b._hash=this._hash.clone();return b}});t.MD5=v._createHelper(r);t.HmacMD5=v._createHmacHelper(r)})(Math);
(function(){var u=CryptoJS,p=u.lib,d=p.Base,l=p.WordArray,p=u.algo,s=p.EvpKDF=d.extend({cfg:d.extend({keySize:4,hasher:p.MD5,iterations:1}),init:function(d){this.cfg=this.cfg.extend(d)},compute:function(d,r){for(var p=this.cfg,s=p.hasher.create(),b=l.create(),u=b.words,q=p.keySize,p=p.iterations;u.length<q;){n&&s.update(n);var n=s.update(d).finalize(r);s.reset();for(var a=1;a<p;a++)n=s.finalize(n),s.reset();b.concat(n)}b.sigBytes=4*q;return b}});u.EvpKDF=function(d,l,p){return s.create(p).compute(d,
l)}})();
CryptoJS.lib.Cipher||function(u){var p=CryptoJS,d=p.lib,l=d.Base,s=d.WordArray,t=d.BufferedBlockAlgorithm,r=p.enc.Base64,w=p.algo.EvpKDF,v=d.Cipher=t.extend({cfg:l.extend(),createEncryptor:function(e,a){return this.create(this._ENC_XFORM_MODE,e,a)},createDecryptor:function(e,a){return this.create(this._DEC_XFORM_MODE,e,a)},init:function(e,a,b){this.cfg=this.cfg.extend(b);this._xformMode=e;this._key=a;this.reset()},reset:function(){t.reset.call(this);this._doReset()},process:function(e){this._append(e);return this._process()},
finalize:function(e){e&&this._append(e);return this._doFinalize()},keySize:4,ivSize:4,_ENC_XFORM_MODE:1,_DEC_XFORM_MODE:2,_createHelper:function(e){return{encrypt:function(b,k,d){return("string"==typeof k?c:a).encrypt(e,b,k,d)},decrypt:function(b,k,d){return("string"==typeof k?c:a).decrypt(e,b,k,d)}}}});d.StreamCipher=v.extend({_doFinalize:function(){return this._process(!0)},blockSize:1});var b=p.mode={},x=function(e,a,b){var c=this._iv;c?this._iv=u:c=this._prevBlock;for(var d=0;d<b;d++)e[a+d]^=
c[d]},q=(d.BlockCipherMode=l.extend({createEncryptor:function(e,a){return this.Encryptor.create(e,a)},createDecryptor:function(e,a){return this.Decryptor.create(e,a)},init:function(e,a){this._cipher=e;this._iv=a}})).extend();q.Encryptor=q.extend({processBlock:function(e,a){var b=this._cipher,c=b.blockSize;x.call(this,e,a,c);b.encryptBlock(e,a);this._prevBlock=e.slice(a,a+c)}});q.Decryptor=q.extend({processBlock:function(e,a){var b=this._cipher,c=b.blockSize,d=e.slice(a,a+c);b.decryptBlock(e,a);x.call(this,
e,a,c);this._prevBlock=d}});b=b.CBC=q;q=(p.pad={}).Pkcs7={pad:function(a,b){for(var c=4*b,c=c-a.sigBytes%c,d=c<<24|c<<16|c<<8|c,l=[],n=0;n<c;n+=4)l.push(d);c=s.create(l,c);a.concat(c)},unpad:function(a){a.sigBytes-=a.words[a.sigBytes-1>>>2]&255}};d.BlockCipher=v.extend({cfg:v.cfg.extend({mode:b,padding:q}),reset:function(){v.reset.call(this);var a=this.cfg,b=a.iv,a=a.mode;if(this._xformMode==this._ENC_XFORM_MODE)var c=a.createEncryptor;else c=a.createDecryptor,this._minBufferSize=1;this._mode=c.call(a,
this,b&&b.words)},_doProcessBlock:function(a,b){this._mode.processBlock(a,b)},_doFinalize:function(){var a=this.cfg.padding;if(this._xformMode==this._ENC_XFORM_MODE){a.pad(this._data,this.blockSize);var b=this._process(!0)}else b=this._process(!0),a.unpad(b);return b},blockSize:4});var n=d.CipherParams=l.extend({init:function(a){this.mixIn(a)},toString:function(a){return(a||this.formatter).stringify(this)}}),b=(p.format={}).OpenSSL={stringify:function(a){var b=a.ciphertext;a=a.salt;return(a?s.create([1398893684,
1701076831]).concat(a).concat(b):b).toString(r)},parse:function(a){a=r.parse(a);var b=a.words;if(1398893684==b[0]&&1701076831==b[1]){var c=s.create(b.slice(2,4));b.splice(0,4);a.sigBytes-=16}return n.create({ciphertext:a,salt:c})}},a=d.SerializableCipher=l.extend({cfg:l.extend({format:b}),encrypt:function(a,b,c,d){d=this.cfg.extend(d);var l=a.createEncryptor(c,d);b=l.finalize(b);l=l.cfg;return n.create({ciphertext:b,key:c,iv:l.iv,algorithm:a,mode:l.mode,padding:l.padding,blockSize:a.blockSize,formatter:d.format})},
decrypt:function(a,b,c,d){d=this.cfg.extend(d);b=this._parse(b,d.format);return a.createDecryptor(c,d).finalize(b.ciphertext)},_parse:function(a,b){return"string"==typeof a?b.parse(a,this):a}}),p=(p.kdf={}).OpenSSL={execute:function(a,b,c,d){d||(d=s.random(8));a=w.create({keySize:b+c}).compute(a,d);c=s.create(a.words.slice(b),4*c);a.sigBytes=4*b;return n.create({key:a,iv:c,salt:d})}},c=d.PasswordBasedCipher=a.extend({cfg:a.cfg.extend({kdf:p}),encrypt:function(b,c,d,l){l=this.cfg.extend(l);d=l.kdf.execute(d,
b.keySize,b.ivSize);l.iv=d.iv;b=a.encrypt.call(this,b,c,d.key,l);b.mixIn(d);return b},decrypt:function(b,c,d,l){l=this.cfg.extend(l);c=this._parse(c,l.format);d=l.kdf.execute(d,b.keySize,b.ivSize,c.salt);l.iv=d.iv;return a.decrypt.call(this,b,c,d.key,l)}})}();
(function(){for(var u=CryptoJS,p=u.lib.BlockCipher,d=u.algo,l=[],s=[],t=[],r=[],w=[],v=[],b=[],x=[],q=[],n=[],a=[],c=0;256>c;c++)a[c]=128>c?c<<1:c<<1^283;for(var e=0,j=0,c=0;256>c;c++){var k=j^j<<1^j<<2^j<<3^j<<4,k=k>>>8^k&255^99;l[e]=k;s[k]=e;var z=a[e],F=a[z],G=a[F],y=257*a[k]^16843008*k;t[e]=y<<24|y>>>8;r[e]=y<<16|y>>>16;w[e]=y<<8|y>>>24;v[e]=y;y=16843009*G^65537*F^257*z^16843008*e;b[k]=y<<24|y>>>8;x[k]=y<<16|y>>>16;q[k]=y<<8|y>>>24;n[k]=y;e?(e=z^a[a[a[G^z]]],j^=a[a[j]]):e=j=1}var H=[0,1,2,4,8,
16,32,64,128,27,54],d=d.AES=p.extend({_doReset:function(){for(var a=this._key,c=a.words,d=a.sigBytes/4,a=4*((this._nRounds=d+6)+1),e=this._keySchedule=[],j=0;j<a;j++)if(j<d)e[j]=c[j];else{var k=e[j-1];j%d?6<d&&4==j%d&&(k=l[k>>>24]<<24|l[k>>>16&255]<<16|l[k>>>8&255]<<8|l[k&255]):(k=k<<8|k>>>24,k=l[k>>>24]<<24|l[k>>>16&255]<<16|l[k>>>8&255]<<8|l[k&255],k^=H[j/d|0]<<24);e[j]=e[j-d]^k}c=this._invKeySchedule=[];for(d=0;d<a;d++)j=a-d,k=d%4?e[j]:e[j-4],c[d]=4>d||4>=j?k:b[l[k>>>24]]^x[l[k>>>16&255]]^q[l[k>>>
8&255]]^n[l[k&255]]},encryptBlock:function(a,b){this._doCryptBlock(a,b,this._keySchedule,t,r,w,v,l)},decryptBlock:function(a,c){var d=a[c+1];a[c+1]=a[c+3];a[c+3]=d;this._doCryptBlock(a,c,this._invKeySchedule,b,x,q,n,s);d=a[c+1];a[c+1]=a[c+3];a[c+3]=d},_doCryptBlock:function(a,b,c,d,e,j,l,f){for(var m=this._nRounds,g=a[b]^c[0],h=a[b+1]^c[1],k=a[b+2]^c[2],n=a[b+3]^c[3],p=4,r=1;r<m;r++)var q=d[g>>>24]^e[h>>>16&255]^j[k>>>8&255]^l[n&255]^c[p++],s=d[h>>>24]^e[k>>>16&255]^j[n>>>8&255]^l[g&255]^c[p++],t=
d[k>>>24]^e[n>>>16&255]^j[g>>>8&255]^l[h&255]^c[p++],n=d[n>>>24]^e[g>>>16&255]^j[h>>>8&255]^l[k&255]^c[p++],g=q,h=s,k=t;q=(f[g>>>24]<<24|f[h>>>16&255]<<16|f[k>>>8&255]<<8|f[n&255])^c[p++];s=(f[h>>>24]<<24|f[k>>>16&255]<<16|f[n>>>8&255]<<8|f[g&255])^c[p++];t=(f[k>>>24]<<24|f[n>>>16&255]<<16|f[g>>>8&255]<<8|f[h&255])^c[p++];n=(f[n>>>24]<<24|f[g>>>16&255]<<16|f[h>>>8&255]<<8|f[k&255])^c[p++];a[b]=q;a[b+1]=s;a[b+2]=t;a[b+3]=n},keySize:8});u.AES=p._createHelper(d)})();

module.exports = CryptoJS;

2.2 封装加解密工具方法

将加解密方法封装成一个工具类方法,便于后面重复调用。

const CryptoJS = require('./CryptoJS');
const iv = CryptoJS.enc.Utf8.parse('十六位十六进制数作为秘钥偏移量');  
function Encrypt(word,key = "JYeontu666668888") {
  let srcs = CryptoJS.enc.Utf8.parse(word);
  key = CryptoJS.enc.Utf8.parse(key);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.ciphertext.toString().toUpperCase();
}

function Decrypt(word,key = "JYeontu666668888") {
  key = CryptoJS.enc.Utf8.parse(key);
  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr;
}
module.exports = {
  Encrypt,
  Decrypt
};

2.3 秘钥设置

每个用户的秘钥都可以自己设置,且不会存入数据库,所以用户需要记住自己设置的秘钥(一个秘钥代替多个密码,应该还算是比较划算的吧??)

在这里插入图片描述

这里我使用了本地缓存setStorageSync来对秘钥进行存储,便于下次进入页面时回填。

wx.setStorageSync('secreTKEy', secretKey);
wx.getStorageSync('secretKey');

3、数据增删改查

因为微信云空间的数据库是类似mongoDBJSON文档式结构存储,所以我们需要对键值进行设计,这里讲一下我自己的一个设计思路(当然肯定有更好的设计思路):

在这里插入图片描述

如上图:这里我使用用户名来作为数据的id,password存储的是手势图案锁的密码(这里漏加密了,觉得需要加密的同学也可以加密一下),其他字段存的就都是账号密码信息。

在这里插入图片描述

如上图,我们一个账号密码的信息主要包含四部分内容,分别是平台/软件、账号、密码、备注,这里我将其两两一组,通过特殊连接符连接后分别作为键和值保存到数据库中,如下图的数据信息在数据库中保存的格式应该是这样的:(解密后)

{
    "邮箱|@_@|JYeontu@163文字点com":我是密码111|@_@|我是备注111
}

不难看出我这里使用的特殊连接符为|@_@|,也有些眼尖的同学可能已经发现了,上面的图片中的账号明明是JYeontu@163.com,怎么我这里变成了JYeontu@163文字点com了呢?因为在对象中,. 是特殊符号,我们通常通过obj.key来读取对象的值,所以这里如果使用 . 的话,代码就会报错了。

在这里插入图片描述

源码地址

该组件是我在自己的一个开源项目中使用到的,源码可以到该项目查看具体代码,地址如下:

https://gitee.com/zheng_yongtao/me-and-my-doodle/tree/master/miniprogram/pages/index/passwordBox

以上就是JS实现密码箱小程序帮你记住各种密码的详细内容,更多关于JS密码箱小程序的资料请关注编程网其它相关文章!

--结束END--

本文标题: JS实现密码箱小程序帮你记住各种密码

本文链接: https://lsjlt.com/news/165104.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS实现密码箱小程序帮你记住各种密码
    目录说在前面设计思路1、进入密码箱前加密2、密码箱数据加密3、密码数据增删改查4、密码分类展示功能实现1、手势图案锁组件2、数据AES加密解密2.1 引入CryptoJS2.2 封装...
    99+
    2024-04-02
  • Android实现记住密码小功能
    本文实例为大家分享了Android实现记住密码小功能的具体代码,供大家参考,具体内容如下 以下有三个点 第一点是记住密码, 第二点是点击隐藏点击显示, 第三点是登录存储。 XML布...
    99+
    2024-04-02
  • 微信小程序记住密码的功能简单几步实现
    目录实现思路实现源码实现思路 其实实现的核心思路非常简单,就是通过 wx.setStorageSync() 与 wx.getStorageSync() 方法在登录后将登录的信息进行存...
    99+
    2023-01-28
    微信小程序记住密码 小程序记住密码
  • Android实现记住用户名和密码功能
    Android 实现记住用户名和密码的功能是通过SharedPreference 存储来实现的。创建一个复选按钮,通过按钮的否选取来进行事件处理。若按钮选中存储账号和密码的信息...
    99+
    2022-06-06
    用户名 Android
  • Vue如何实现记住账号密码功能
    这篇“Vue如何实现记住账号密码功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue如何实现记住账号密码功能”文章吧。实...
    99+
    2023-07-02
  • nodejs开发微信小程序实现密码加密
    微信小程序开发--实现密码加密具体步骤: 在utils中的util.js 文件中增加 函数 实现 字符串转换为16进制加密后的字符串: function encodeUTF8(s) { var i,...
    99+
    2022-06-04
    密码 程序 nodejs
  • 阿里云服务器忘记设置密码了?这4种方法帮你重置密码
    阿里云服务器是企业进行业务应用的重要平台,但有时会忘记设置的密码,这时应该如何处理呢?本文将介绍四种重置阿里云服务器密码的方法,希望能够帮助到你。 阿里云服务器是阿里云提供的一种计算服务,用户可以通过它搭建自己的网站、应用程序或者进行其他计...
    99+
    2023-10-30
    密码 帮你 阿里
  • Vue实现记住账号密码功能的操作过程
    目录实现思路:记住账号密码实现流程npm安装base64依赖实现思路:   用户登录时若勾选“记住我”功能选项,则将登录名和密码(加密后)存入本地缓存,下次登...
    99+
    2024-04-02
  • Android实现登录界面记住密码的存储
    Android存储方式有很多种,在这里所用的存储方式是SharedPreferrences, 其采用了Map数据结构来存储数据,以键值的方式存储,可以简单的读取与写入。所以比较...
    99+
    2022-06-06
    界面 存储 Android
  • LocalStorage如何实现记住用户和密码功能
    这篇文章主要介绍了LocalStorage如何实现记住用户和密码功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 随着HTML5...
    99+
    2024-04-02
  • Android实现登陆界面的记住密码功能
    本文实例为大家分享了Android实现登陆界面记住密码功能的具体代码,供大家参考,具体内容如下 所需工具 一、复选框控件:CheckBox,二、SharedPreferences用于...
    99+
    2024-04-02
  • JavaWeb 中Cookie实现记住密码的功能示例
    本文主要内容:•1、什么是Cookie•2、Cookie带来的好处•3、Cookie的主要方法 一、什么是Cookiecookie是一种WEB服务器通过浏览器在访问者的硬盘上存储信息的手段。Co...
    99+
    2023-05-31
    java web cookie
  • Mysql忘记密码怎么重置密码的几种实现方法
    目录一、使用 mysqladmin 重置密码二、使用 mysqld 重置密码三、使用 MySQL 安全性模式重置密码四、使用 my.cnf ...
    99+
    2023-10-18
    Mysql忘记密码 Mysql重置密码
  • Android SharedPreferences实现记住密码和自动登录界面
    SharedPreferences介绍: SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一些常用的配置参数,它是采用xml文件存放数据的...
    99+
    2022-06-06
    自动 界面 Android
  • html5中如何使用localStorage实现记住密码功能
    这篇文章给大家分享的是有关html5中如何使用localStorage实现记住密码功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。HTML5 提供了两种在客户端存储数据的新方法...
    99+
    2024-04-02
  • Vue如何实现登录记住账号密码功能
    本篇内容主要讲解“Vue如何实现登录记住账号密码功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue如何实现登录记住账号密码功能”吧!实现思路用户登录时若勾选“记住我”功能选项,则将登录名和...
    99+
    2023-06-21
  • Android中怎么使用SQLite实现记住密码功能
    这期内容当中小编将会给大家带来有关Android中怎么使用SQLite实现记住密码功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。具体内容如下package com.example.alimj...
    99+
    2023-05-31
    android sqlite
  • Android实现带有记住密码功能的登陆界面
    本文实例为大家分享了Android带有记住密码功能的登陆界面实现代码,供大家参考,具体内容如下 1、设计思路 主要采用SharedPreferences来保存用户数据,本Dem...
    99+
    2022-06-06
    登陆 界面 Android
  • Android如何实现登陆界面的记住密码功能
    这篇文章主要介绍“Android如何实现登陆界面的记住密码功能”,在日常操作中,相信很多人在Android如何实现登陆界面的记住密码功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Android如何实现登陆...
    99+
    2023-06-30
  • Android中怎么实现登录记住多个密码功能
    这篇文章将为大家详细讲解有关Android中怎么实现登录记住多个密码功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。在popouWindow里面加上ListView,数据是把List以字符...
    99+
    2023-05-31
    android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作