前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序-系统登陆

微信小程序-系统登陆

作者头像
零式的天空
发布2022-03-25 15:13:14
2.7K0
发布2022-03-25 15:13:14
举报
文章被收录于专栏:零域Blog

微信小程序中系统登录的简单实现

新建目录/pages/login

1 登录界面 login.wxml

代码语言:javascript
复制
<view class="login-from"> 
<view class="inputView">
<image class="nameImage" src="../images/name.png"></image> 
<label class='loginLab'>帐号</label>
<input class='inputText' placeholder='请输入帐号' bindinput="phoneInput" ></input>
</view>
<view class="line"></view> 
<view class='inputView'>
<image class="keyImage" src="../images/key.png"></image> 
<label class='loginLab'>密码</label>
<input class='inputText' password='true' placeholder='请输入密码' 
bindinput="passwordInput"></input>
</view>
<view class='loginBtnView'>
<button class='loginBtn' type='primary'
size='{{primarySize}}' loading='{{loading}}'
plain='{{plain}}' disabled='{{disabled}}' bindtap='login'>
登录
</button>
</view>

2 登录js实现 login.js

代码语言:javascript
复制
//index.js
var md5 = require('../util/md5.js') 
var util = require('../util/util.js') 
//获取应用实例
const app = getApp()

Page({
data: {
motto: '设备远程运维管理系统',
mottoChild: '西安陕鼓动力股份有限公司',
userInfo: {},
hasUserInfo: false,
phone: '',
password: '',
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
// 获取输入账号 
phoneInput: function (e) {
this.setData({
phone: e.detail.value
})
},

// 获取输入密码 
passwordInput: function (e) {
this.setData({
password: e.detail.value
})
}, 
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
// 登录 
login: function () {
if (this.data.phone.length == 0 || this.data.password.length == 0) {
wx.showToast({
title: '用户名和密码不能为空',
icon: 'loading',
duration: 2000
})
} else {
var that = this;
var password = md5.hexMD5(this.data.password); //md5加密
//登录
wx.request({
url: "https://www.xxx.com/login",  // 系统的登录api
header: {
'content-type': 'application/x-www-form-urlencoded' // 不要写 application/json
},
method: 'POST', 
data: { username: this.data.phone, password: password }, 
success: function (res) {
if (res.data.code == 400102) {
wx.showToast({
title: 'token无效',
icon: 'loading',
duration: 2000
})
}
if(res.data.code == 400103) {
wx.showToast({
title: '用户名或密码不正确',
icon: 'loading',
duration: 2000
})
}
if (res.data.code == 400104) {
wx.showToast({
title: '用户没有登录权限',
icon: 'loading',
duration: 2000
})
}
if (res.data.code == 200000) {
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
// 全局变量存储token和userId信息
getApp().globalData.header.XAuth = res.data.result.accessToken;
getApp().globalData.userId = res.data.result.userId;
// 这里修改成跳转的页面 
wx.switchTab({
url: '../main/main', 
})
}
}
}) 
}
},
onLoad: function () {
// 查看全局变量中是否存在token,存在则直接登录到主界面
if (app.globalData.header.XAuth != '') {
wx.switchTab({
url: '../main/main',
})
}
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

3 添加全局变量 app.js

代码语言:javascript
复制
globalData: {
userInfo: null, //系统用户信息
userId: null, //系统用户id
header: {'XAuth':''} // token
}

4 md5 密码加密

先介绍小程序模块化 我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。需要注意的是: (1)、 exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。 (2)、小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

md5.js程序如下:

代码语言:javascript
复制
/*  
 * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message  
 * Digest Algorithm, as defined in RFC 1321.  
 * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002.  
 * Code also contributed by Greg Holt  
 * See http://pajhome.org.uk/site/legal.html for details.  
 */    
    
/*  
 * Add integers, wrapping at 2^32. This uses 16-bit operations internally  
 * to work around bugs in some JS interpreters.  
 */    
function safe_add(x, y)    
{    
  var lsw = (x & 0xFFFF) + (y & 0xFFFF)    
  var msw = (x >> 16) + (y >> 16) + (lsw >> 16)    
  return (msw << 16) | (lsw & 0xFFFF)    
}    
    
/*  
 * Bitwise rotate a 32-bit number to the left.  
 */    
function rol(num, cnt)    
{    
  return (num << cnt) | (num >>> (32 - cnt))    
}    
    
/*  
 * These functions implement the four basic operations the algorithm uses.  
 */    
function cmn(q, a, b, x, s, t)    
{    
  return safe_add(rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)    
}    
function ff(a, b, c, d, x, s, t)    
{    
  return cmn((b & c) | ((~b) & d), a, b, x, s, t)    
}    
function gg(a, b, c, d, x, s, t)    
{    
  return cmn((b & d) | (c & (~d)), a, b, x, s, t)    
}    
function hh(a, b, c, d, x, s, t)    
{    
  return cmn(b ^ c ^ d, a, b, x, s, t)    
}    
function ii(a, b, c, d, x, s, t)    
{    
  return cmn(c ^ (b | (~d)), a, b, x, s, t)    
}    
    
/*  
 * Calculate the MD5 of an array of little-endian words, producing an array  
 * of little-endian words.  
 */    
function coreMD5(x)    
{    
  var a =  1732584193    
  var b = -271733879    
  var c = -1732584194    
  var d =  271733878    
    
  for(var i = 0; i < x.length; i += 16)    
  {    
    var olda = a    
    var oldb = b    
    var oldc = c    
    var oldd = d    
    
    a = ff(a, b, c, d, x[i+ 0], 7 , -680876936)    
    d = ff(d, a, b, c, x[i+ 1], 12, -389564586)    
    c = ff(c, d, a, b, x[i+ 2], 17,  606105819)    
    b = ff(b, c, d, a, x[i+ 3], 22, -1044525330)    
    a = ff(a, b, c, d, x[i+ 4], 7 , -176418897)    
    d = ff(d, a, b, c, x[i+ 5], 12,  1200080426)    
    c = ff(c, d, a, b, x[i+ 6], 17, -1473231341)    
    b = ff(b, c, d, a, x[i+ 7], 22, -45705983)    
    a = ff(a, b, c, d, x[i+ 8], 7 ,  1770035416)    
    d = ff(d, a, b, c, x[i+ 9], 12, -1958414417)    
    c = ff(c, d, a, b, x[i+10], 17, -42063)    
    b = ff(b, c, d, a, x[i+11], 22, -1990404162)    
    a = ff(a, b, c, d, x[i+12], 7 ,  1804603682)    
    d = ff(d, a, b, c, x[i+13], 12, -40341101)    
    c = ff(c, d, a, b, x[i+14], 17, -1502002290)    
    b = ff(b, c, d, a, x[i+15], 22,  1236535329)    
    
    a = gg(a, b, c, d, x[i+ 1], 5 , -165796510)    
    d = gg(d, a, b, c, x[i+ 6], 9 , -1069501632)    
    c = gg(c, d, a, b, x[i+11], 14,  643717713)    
    b = gg(b, c, d, a, x[i+ 0], 20, -373897302)    
    a = gg(a, b, c, d, x[i+ 5], 5 , -701558691)    
    d = gg(d, a, b, c, x[i+10], 9 ,  38016083)    
    c = gg(c, d, a, b, x[i+15], 14, -660478335)    
    b = gg(b, c, d, a, x[i+ 4], 20, -405537848)    
    a = gg(a, b, c, d, x[i+ 9], 5 ,  568446438)    
    d = gg(d, a, b, c, x[i+14], 9 , -1019803690)    
    c = gg(c, d, a, b, x[i+ 3], 14, -187363961)    
    b = gg(b, c, d, a, x[i+ 8], 20,  1163531501)    
    a = gg(a, b, c, d, x[i+13], 5 , -1444681467)    
    d = gg(d, a, b, c, x[i+ 2], 9 , -51403784)    
    c = gg(c, d, a, b, x[i+ 7], 14,  1735328473)    
    b = gg(b, c, d, a, x[i+12], 20, -1926607734)    
    
    a = hh(a, b, c, d, x[i+ 5], 4 , -378558)    
    d = hh(d, a, b, c, x[i+ 8], 11, -2022574463)    
    c = hh(c, d, a, b, x[i+11], 16,  1839030562)    
    b = hh(b, c, d, a, x[i+14], 23, -35309556)    
    a = hh(a, b, c, d, x[i+ 1], 4 , -1530992060)    
    d = hh(d, a, b, c, x[i+ 4], 11,  1272893353)    
    c = hh(c, d, a, b, x[i+ 7], 16, -155497632)    
    b = hh(b, c, d, a, x[i+10], 23, -1094730640)    
    a = hh(a, b, c, d, x[i+13], 4 ,  681279174)    
    d = hh(d, a, b, c, x[i+ 0], 11, -358537222)    
    c = hh(c, d, a, b, x[i+ 3], 16, -722521979)    
    b = hh(b, c, d, a, x[i+ 6], 23,  76029189)    
    a = hh(a, b, c, d, x[i+ 9], 4 , -640364487)    
    d = hh(d, a, b, c, x[i+12], 11, -421815835)    
    c = hh(c, d, a, b, x[i+15], 16,  530742520)    
    b = hh(b, c, d, a, x[i+ 2], 23, -995338651)    
    
    a = ii(a, b, c, d, x[i+ 0], 6 , -198630844)    
    d = ii(d, a, b, c, x[i+ 7], 10,  1126891415)    
    c = ii(c, d, a, b, x[i+14], 15, -1416354905)    
    b = ii(b, c, d, a, x[i+ 5], 21, -57434055)    
    a = ii(a, b, c, d, x[i+12], 6 ,  1700485571)    
    d = ii(d, a, b, c, x[i+ 3], 10, -1894986606)    
    c = ii(c, d, a, b, x[i+10], 15, -1051523)    
    b = ii(b, c, d, a, x[i+ 1], 21, -2054922799)    
    a = ii(a, b, c, d, x[i+ 8], 6 ,  1873313359)    
    d = ii(d, a, b, c, x[i+15], 10, -30611744)    
    c = ii(c, d, a, b, x[i+ 6], 15, -1560198380)    
    b = ii(b, c, d, a, x[i+13], 21,  1309151649)    
    a = ii(a, b, c, d, x[i+ 4], 6 , -145523070)    
    d = ii(d, a, b, c, x[i+11], 10, -1120210379)    
    c = ii(c, d, a, b, x[i+ 2], 15,  718787259)    
    b = ii(b, c, d, a, x[i+ 9], 21, -343485551)    
    
    a = safe_add(a, olda)    
    b = safe_add(b, oldb)    
    c = safe_add(c, oldc)    
    d = safe_add(d, oldd)    
  }    
  return [a, b, c, d]    
}    
    
/*  
 * Convert an array of little-endian words to a hex string.  
 */    
function binl2hex(binarray)    
{    
  var hex_tab = "0123456789abcdef"    
  var str = ""    
  for(var i = 0; i < binarray.length * 4; i++)    
  {    
    str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +    
           hex_tab.charAt((binarray[i>>2] >> ((i%4)*8)) & 0xF)    
  }    
  return str    
}    
    
/*  
 * Convert an array of little-endian words to a base64 encoded string.  
 */    
function binl2b64(binarray)    
{    
  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"    
  var str = ""    
  for(var i = 0; i < binarray.length * 32; i += 6)    
  {    
    str += tab.charAt(((binarray[i>>5] << (i%32)) & 0x3F) |    
                      ((binarray[i>>5+1] >> (32-i%32)) & 0x3F))    
  }    
  return str    
}    
    
/*  
 * Convert an 8-bit character string to a sequence of 16-word blocks, stored  
 * as an array, and append appropriate padding for MD4/5 calculation.  
 * If any of the characters are >255, the high byte is silently ignored.  
 */    
function str2binl(str)    
{    
  var nblk = ((str.length + 8) >> 6) + 1 // number of 16-word blocks    
  var blks = new Array(nblk * 16)    
  for(var i = 0; i < nblk * 16; i++) blks[i] = 0    
  for(var i = 0; i < str.length; i++)    
    blks[i>>2] |= (str.charCodeAt(i) & 0xFF) << ((i%4) * 8)    
  blks[i>>2] |= 0x80 << ((i%4) * 8)    
  blks[nblk*16-2] = str.length * 8    
  return blks    
}    
    
/*  
 * Convert a wide-character string to a sequence of 16-word blocks, stored as  
 * an array, and append appropriate padding for MD4/5 calculation.  
 */    
function strw2binl(str)    
{    
  var nblk = ((str.length + 4) >> 5) + 1 // number of 16-word blocks    
  var blks = new Array(nblk * 16)    
  for(var i = 0; i < nblk * 16; i++) blks[i] = 0    
  for(var i = 0; i < str.length; i++)    
    blks[i>>1] |= str.charCodeAt(i) << ((i%2) * 16)    
  blks[i>>1] |= 0x80 << ((i%2) * 16)    
  blks[nblk*16-2] = str.length * 16    
  return blks    
}    
    
/*  
 * External interface  
 */    
function hexMD5 (str) { return binl2hex(coreMD5( str2binl(str))) }    
function hexMD5w(str) { return binl2hex(coreMD5(strw2binl(str))) }    
function b64MD5 (str) { return binl2b64(coreMD5( str2binl(str))) }    
function b64MD5w(str) { return binl2b64(coreMD5(strw2binl(str))) }    
/* Backward compatibility */    
function calcMD5(str) { return binl2hex(coreMD5( str2binl(str))) }    
module.exports = {    
  hexMD5: hexMD5    
}    

使用时引入脚本

代码语言:javascript
复制
var md5 = require('../util/md5.js') 
代码语言:javascript
复制
  password=md5.hexMD5(password);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-03-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 微信小程序中系统登录的简单实现
    • 1 登录界面 login.wxml
      • 2 登录js实现 login.js
        • 3 添加全局变量 app.js
          • 4 md5 密码加密
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档