依稀記得小程序剛出來那會的轟動景象，回首再看，小程序現(xiàn)在已經(jīng)發(fā)展到方方面面了，遍及生活，作為一個前端人員甚是欣慰！
廢話不多說，直接上代碼：
wxml：
<button id='login' open-type='getUserInfo' bindgetuserinfo="getUserInfo"></button>
js：
login: function (fn) {
? ? var that = this;
? ? wx.getUserInfo({//早先此方法可以直接調(diào)起用戶授權(quán)彈窗，后來機(jī)制更改需要配合button open-type='getUserInfo'來調(diào)起授權(quán)
? ? ? ? success: res => {
? ? ? ? ? ? //拿到部分用戶未加密數(shù)據(jù)
? ? ? ? ? ? that.globalData.loginsatus = true;
? ? ? ? ? ? var imgurl = encodeURIComponent(res.userInfo.avatarUrl),//傳給后臺，后臺要求轉(zhuǎn)碼
? ? ? ? ? ? ? ? iv = res.iv,//加密算法的初始向量
? ? ? ? ? ? ? ? encryptedData = res.encryptedData;//完整用戶信息的加密數(shù)據(jù)
? ? ? ? ? ? res.userInfo.avatarUrl = imgurl;
? ? ? ? ? ? that.globalData.userInfo = res.userInfo;//用戶信息對象，不包含 openid 等敏感信息
? ? ? ? ? ? wx.setStorageSync('userInfo', res.userInfo);
? ? ? ? ? ? // 登錄
? ? ? ? ? ? wx.login({
? ? ? ? ? ? ? ? success: res => {
? ? ? ? ? ? ? ? ? ? if (res.code) {
? ? ? ? ? ? ? ? ? ? ? ? //請求登陸接口
? ? ? ? ? ? ? ? ? ? ? ? wx.request({
? ? ? ? ? ? ? ? ? ? ? ? ? ? url: that.globalData.weachLoginApi,//調(diào)取后臺解密登錄接口
? ? ? ? ? ? ? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? code: res.code,//獲取到的用戶登錄憑證
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? encryptedData: encryptedData,//getUserInfo拿到的加密串
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? iv: iv,//加密算法的初始向量
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? user: JSON.stringify(that.globalData.userInfo),//用戶信息對象，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? softName: "duiduinongzhuang"http://后臺定義的登錄小程序名
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? method: 'POST',
? ? ? ? ? ? ? ? ? ? ? ? ? ? header: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? success: function (res) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //返回的用戶數(shù)據(jù) -- 具體怎么操作，看后臺回傳值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (res.data.error_code== 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? wx.setStorageSync('loginsatus', true);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? wx.setStorageSync('userData', res.data.user);
}
}
})
}
},
? ? ? ? ? ? ? ? fail: res => {
}
})
},
? ? ? ? fail: res => {
? ? ? ? ? ? wx.showModal({
? ? ? ? ? ? ? ? title: '警告',
? ? ? ? ? ? ? ? content: '您點(diǎn)擊了拒絕授權(quán)，無法使用此功能。如想正常使用，請點(diǎn)授權(quán)按鈕重新授權(quán)',
? ? ? ? ? ? ? ? showCancel: false,
? ? ? ? ? ? ? ? success: function (res) {
? ? ? ? ? ? ? ? ? ? if (res.confirm) {
? ? ? ? ? ? ? ? ? ? ? ? console.log('用戶點(diǎn)擊確定')
}
}
})
}
})
},
退格什么的自己IDE格式化一下，登錄邏輯就是用戶點(diǎn)擊button按鈕，調(diào)起授權(quán)，getUserInfo拿到用戶加密數(shù)據(jù)，login獲取用戶登錄碼，然后發(fā)給后臺解密，返回openid，token，userdata，unionid等其他關(guān)鍵用戶數(shù)據(jù)，有的后臺會讓前端自己解密，就更惡心了，不過還好有nodejs方法，可以前端自行解密，但要考慮到前端數(shù)據(jù)暴露的風(fēng)險(xiǎn)！
具體解密方法在此：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#method-decode
自己下載解壓，然后找到nodejs的代碼，直接es6方法引入，調(diào)用，但是需要調(diào)用小程序的appid和小程序的session_key，而這兩個數(shù)據(jù)前者暴露風(fēng)險(xiǎn)不大，后者暴露風(fēng)險(xiǎn)極高！
所有開發(fā)小程序登錄的前端同仁，盡量進(jìn)行后臺解密，要是后臺NB的天老大，他老二，就是讓你解密，那你就和直系領(lǐng)導(dǎo)匯報(bào)風(fēng)險(xiǎn)，API里寫的風(fēng)險(xiǎn)很明確，領(lǐng)導(dǎo)同意前端解密，直接擼代碼，不同意的話，讓后臺做老大[Smart][Smart][Smart]
