依稀記得小程序剛出來(lái)那會(huì)的轟動(dòng)景象妄痪，回首再看泌参，小程序現(xiàn)在已經(jīng)發(fā)展到方方面面了喉镰，遍及生活，作為一個(gè)前端人員甚是欣慰产园！
廢話不多說(shuō)，直接上代碼：
wxml：
<button id='login' open-type='getUserInfo' bindgetuserinfo="getUserInfo"></button>
js：
login: function (fn) {
? ? var that = this;
? ? wx.getUserInfo({//早先此方法可以直接調(diào)起用戶授權(quán)彈窗夜郁，后來(lái)機(jī)制更改需要配合button open-type='getUserInfo'來(lái)調(diào)起授權(quán)
? ? ? ? success: res => {
? ? ? ? ? ? //拿到部分用戶未加密數(shù)據(jù)
? ? ? ? ? ? that.globalData.loginsatus = true;
? ? ? ? ? ? var imgurl = encodeURIComponent(res.userInfo.avatarUrl),//傳給后臺(tái)什燕，后臺(tái)要求轉(zhuǎn)碼
? ? ? ? ? ? ? ? iv = res.iv,//加密算法的初始向量
? ? ? ? ? ? ? ? encryptedData = res.encryptedData;//完整用戶信息的加密數(shù)據(jù)
? ? ? ? ? ? res.userInfo.avatarUrl = imgurl;
? ? ? ? ? ? that.globalData.userInfo = res.userInfo;//用戶信息對(duì)象，不包含 openid 等敏感信息
? ? ? ? ? ? wx.setStorageSync('userInfo', res.userInfo);
? ? ? ? ? ? // 登錄
? ? ? ? ? ? wx.login({
? ? ? ? ? ? ? ? success: res => {
? ? ? ? ? ? ? ? ? ? if (res.code) {
? ? ? ? ? ? ? ? ? ? ? ? //請(qǐng)求登陸接口
? ? ? ? ? ? ? ? ? ? ? ? wx.request({
? ? ? ? ? ? ? ? ? ? ? ? ? ? url: that.globalData.weachLoginApi,//調(diào)取后臺(tái)解密登錄接口
? ? ? ? ? ? ? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? code: res.code,//獲取到的用戶登錄憑證
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? encryptedData: encryptedData,//getUserInfo拿到的加密串
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? iv: iv,//加密算法的初始向量
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? user: JSON.stringify(that.globalData.userInfo),//用戶信息對(duì)象竞端，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? softName: "duiduinongzhuang"http://后臺(tái)定義的登錄小程序名
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? method: 'POST',
? ? ? ? ? ? ? ? ? ? ? ? ? ? header: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? success: function (res) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //返回的用戶數(shù)據(jù) -- 具體怎么操作屎即，看后臺(tái)回傳值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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)，無(wú)法使用此功能事富。如想正常使用剑勾，請(qǐng)點(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ā)給后臺(tái)解密捂刺，返回openid谣拣，token，userdata族展，unionid等其他關(guān)鍵用戶數(shù)據(jù)森缠，有的后臺(tái)會(huì)讓前端自己解密，就更惡心了仪缸，不過(guò)還好有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，而這兩個(gè)數(shù)據(jù)前者暴露風(fēng)險(xiǎn)不大片林，后者暴露風(fēng)險(xiǎn)極高端盆！
所有開發(fā)小程序登錄的前端同仁，盡量進(jìn)行后臺(tái)解密费封，要是后臺(tái)NB的天老大焕妙，他老二，就是讓你解密弓摘，那你就和直系領(lǐng)導(dǎo)匯報(bào)風(fēng)險(xiǎn)焚鹊，API里寫的風(fēng)險(xiǎn)很明確，領(lǐng)導(dǎo)同意前端解密衣盾，直接擼代碼寺旺，不同意的話爷抓，讓后臺(tái)做老大[Smart][Smart][Smart]
