小程序手机号验证码登录
生活随笔
收集整理的這篇文章主要介紹了
小程序手机号验证码登录
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這是我最近的一個(gè)項(xiàng)目——微信小程序 實(shí)現(xiàn)手機(jī)號(hào)- -驗(yàn)證碼登錄,涉及到了提交參數(shù)時(shí)需要加密。加密所采用的方式也是按照要求,嚴(yán)格采用16位小加密的MD5的加密形式。
login.wxml
<view class="container"><view class="title">登錄</view><form catchsubmit="login"><view class="inputView"><input class="inputText" placeholder="請(qǐng)輸入手機(jī)號(hào)" maxlength="11" name="phone" bindblur="phone" /></view><view class="inputView"><input class="inputText" placeholder="請(qǐng)輸入驗(yàn)證碼" maxlength="6" name="code" /><button class="line" disabled="{{disabled}}" size="mini" bindtap="sendcode">{{codebtn}}</button></view><view class="loginBtnView"><button class="loginBtn" formType="submit">登錄</button></view></form> </view>login.wx
.container{display:flex;flex-direction:column;padding:0;height:100%;align-items:center;justify-content:space-between;box-sizing:border-box;padding-top: 100rpx;} .inputView{line-height:45px;border-bottom:1px solid #999} .title{width:80%;font-weight:700;font-size:30px;text-align: center;padding-bottom: 100rpx;} .inputText{display:inline-block;line-height:45px;padding-left:10px;margin-top:11px;color:#888;font-size:14px} .line{border:1px solid #ccc;border-radius:20px;float:right;margin-top:9px;color:#888;background: #ffc66c;} .loginBtn{margin-top:40px;border-radius:10px;color: #888; border:1px solid #ccc;background: #ffc66c;}login.js
var md5 = require('../../js/md5') Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {phone: '', //手機(jī)號(hào)初始值code: '', //驗(yàn)證碼初始值codebtn: '發(fā)送驗(yàn)證碼',disabled: false, //按鈕初始值可用},/*** 生命周期函數(shù)--監(jiān)聽頁(yè)面加載*/onLoad: function (options) {var phone = wx.getStorageSync('phone');console.log(phone);if (phone) {this.setData({phone: phone});}},// 獲取輸入賬號(hào) phone: function (e) {let phone = e.detail.value;let reg = /^[1][3,4,5,7,8][0-9]{9}$/;if (!reg.test(phone)) {wx.showToast({title: '手機(jī)號(hào)碼格式不正確',icon: "none",duration: 2000})return false;}this.setData({phone: e.detail.value,})},//發(fā)送驗(yàn)證碼sendcode() {let that = this;var phone = this.data.phone;//時(shí)間開始var now = new Date();var yy = now.getFullYear(); //年var mm = now.getMonth() + 1; //月var dd = now.getDate(); //日var hh = now.getHours(); //時(shí)var ii = now.getMinutes(); //分var ss = now.getSeconds(); //秒var time = yyif (mm < 10) time += "0";time += mmif (dd < 10) time += "0";time += ddif (hh < 10) time += "0";time += hhif (ii < 10) time += '0';time += iiif (ss < 10) time += '0';time += ss;//時(shí)間結(jié)束let tokenday = time;var md32 = md5.hex_md5(tokenday + '#$@!*&^.www.xingyizhijiao.com/api/loginc/phonecode');console.log(md32)console.log(tokenday);var token = md32.substr(8, 16)wx.request({url: '(寫你自己需要請(qǐng)求的接口)',method: 'post',data: {tel: phone, //手機(jī)號(hào)token: token, //加密tokenday: tokenday, //獲取當(dāng)前時(shí)間},header: {'content-type': 'application/x-www-form-urlencoded' // 默認(rèn)值},success(res) {console.log(res);if (res.data.code == "1") {wx.showToast({title: '驗(yàn)證碼已發(fā)送.請(qǐng)注意接收',icon: "success"})let time = 60;var timers = setInterval(function () {time--;if (time > 0) {that.setData({codebtn: time,disabled: true});} else {that.setData({codebtn: '發(fā)送驗(yàn)證碼',disabled: false});clearInterval(timers)}}, 1000)}}})},// 登錄處理login: function (evt) {// console.log(evt);console.log(evt.detail.value);//獲得表單數(shù)據(jù)var objData = evt.detail.value;if (objData.phone) {// 同步方式存儲(chǔ)表單數(shù)據(jù)wx.setStorageSync('phone', objData.phone);//跳轉(zhuǎn)到成功頁(yè)面// wx.navigateTo({// url: '../index/index'// })}var that = this;let val = evt.detail.value;console.log(val)if (val.phone == "") {wx.showToast({title: '請(qǐng)?zhí)顚懯謾C(jī)號(hào)碼',icon: 'none',duration: 2000})return false;}if (val.code == "" || isNaN(val.code) || val.code.length > 6) {wx.showToast({title: '驗(yàn)證碼格式不正確',icon: 'none',duration: 2000})return false;} else {wx.request({url: '(寫你自己需要請(qǐng)求的接口)',method: 'post',data: {number: val.code, //獲取input中的驗(yàn)證碼tel: val.phone, //獲取input中的手機(jī)號(hào)},header: {'content-type': 'application/x-www-form-urlencoded' // 默認(rèn)值},success(res) {console.log(res);if (res.data.code == "1") {wx.switchTab({url: '/pages/index/index',})} else {wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})}}})}} })MD5.js
//MD5加密 var hexcase = 0; var b64pad = ""; var chrsz = 8; function hex_md5(s) {return binl2hex(core_md5(str2binl(s), s.length * chrsz)) } function b64_md5(s) {return binl2b64(core_md5(str2binl(s), s.length * chrsz)) } function str_md5(s) {return binl2str(core_md5(str2binl(s), s.length * chrsz)) } function hex_hmac_md5(a, b) {return binl2hex(core_hmac_md5(a, b)) } function b64_hmac_md5(a, b) {return binl2b64(core_hmac_md5(a, b)) } function str_hmac_md5(a, b) {return binl2str(core_hmac_md5(a, b)) } function md5_vm_test() {return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72" } function core_md5(x, e) {x[e >> 5] |= 0x80 << ((e) % 32);x[(((e + 64) >>> 9) << 4) + 14] = e;var a = 1732584193;var b = -271733879;var c = -1732584194;var d = 271733878;for (var i = 0; i < x.length; i += 16) {var f = a;var g = b;var h = c;var j = d;a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936);d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302);a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222);c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844);d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);a = safe_add(a, f);b = safe_add(b, g);c = safe_add(c, h);d = safe_add(d, j)}return Array(a, b, c, d) } function md5_cmn(q, a, b, x, s, t) {return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b) } function md5_ff(a, b, c, d, x, s, t) {return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t) } function md5_gg(a, b, c, d, x, s, t) {return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t) } function md5_hh(a, b, c, d, x, s, t) {return md5_cmn(b ^ c ^ d, a, b, x, s, t) } function md5_ii(a, b, c, d, x, s, t) {return md5_cmn(c ^ (b | (~d)), a, b, x, s, t) } function core_hmac_md5(a, b) {var c = str2binl(a);if (c.length > 16) c = core_md5(c, a.length * chrsz);var d = Array(16),opad = Array(16);for (var i = 0; i < 16; i++) {d[i] = c[i] ^ 0x36363636;opad[i] = c[i] ^ 0x5C5C5C5C}var e = core_md5(d.concat(str2binl(b)), 512 + b.length * chrsz);return core_md5(opad.concat(e), 512 + 128) } function safe_add(x, y) {var a = (x & 0xFFFF) + (y & 0xFFFF);var b = (x >> 16) + (y >> 16) + (a >> 16);return (b << 16) | (a & 0xFFFF) } function bit_rol(a, b) {return (a << b) | (a >>> (32 - b)) } function str2binl(a) {var b = Array();var c = (1 << chrsz) - 1;for (var i = 0; i < a.length * chrsz; i += chrsz) b[i >> 5] |= (a.charCodeAt(i / chrsz) & c) << (i % 32);return b } function binl2str(a) {var b = "";var c = (1 << chrsz) - 1;for (var i = 0; i < a.length * 32; i += chrsz) b += String.fromCharCode((a[i >> 5] >>> (i % 32)) & c);return b } function binl2hex(a) {var b = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";var c = "";for (var i = 0; i < a.length * 4; i++) {c += b.charAt((a[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) + b.charAt((a[i >> 2] >> ((i % 4) * 8)) & 0xF)}return c } function binl2b64(a) {var b = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var c = "";for (var i = 0; i < a.length * 4; i += 3) {var d = (((a[i >> 2] >> 8 * (i % 4)) & 0xFF) << 16) | (((a[i + 1 >> 2] >> 8 * ((i + 1) % 4)) & 0xFF) << 8) | ((a[i + 2 >> 2] >> 8 * ((i + 2) % 4)) & 0xFF);for (var j = 0; j < 4; j++) {if (i * 8 + j * 6 > a.length * 32) c += b64pad;else c += b.charAt((d >> 6 * (3 - j)) & 0x3F)}}return c } String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g, "") } var lastInput;function md5(a) {a = a.trim();var b = /^[0-9a-f]{16}$|^[0-9a-f]{32}$/;b.ignoreCase = true;if (b.test(a.toLowerCase())) {ctl00_ContentPlaceHolder1_LabelResult.innerHTML = ''} else {var c = hex_md5(a);ctl00_ContentPlaceHolder1_LabelResult.innerHTML = 'MD5(' + a + ',32) = ' + c + '<br>';ctl00_ContentPlaceHolder1_LabelResult.innerHTML += 'MD5(' + a + ',16) = ' + c.substr(8, 16);lastInput = a} } function CheckInput() {var a = document.all["ctl00_ContentPlaceHolder1_TextBoxq"].value;a = a.trim();var b = /^[0-9a-f]{16}$|^[0-9a-f]{32}$/;if (b.test(a.toLowerCase())) {if (lastInput + "" != "undefined") {var c = hex_md5(lastInput);if (c.indexOf(a) >= 0) {ctl00_ContentPlaceHolder1_LabelResult.innerHTML = lastInput;return false}} else {var d = ctl00_ContentPlaceHolder1_LabelResult.innerHTML;var c = hex_md5(d);if (c.indexOf(a) >= 0) {ctl00_ContentPlaceHolder1_LabelResult.innerHTML = d;return false}}ctl00_ContentPlaceHolder1_LabelResult.innerHTML = "Wait.....";return true} else {md5(a);return false} } //生成一個(gè)輸出口(應(yīng)該是叫輸出口,大體意思就是形成一個(gè)可以輸出的地方) module.exports = {hex_md5: hex_md5, //需要輸出的加密算法,我這邊只寫了我用到的一種,如需用到多種可輸出多個(gè)}總結(jié)
以上是生活随笔為你收集整理的小程序手机号验证码登录的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: netty源码解读六(内存池相关)
- 下一篇: 解决外接显示屏后CPU占用率过高问题