微信小程序授權登錄（前端部分）
技術概述
微信小程序一般都需要用戶微信登錄，技術的難點在整個授權登錄流程步驟比較多，而且微信授權登錄使用的getUserInfo接口今年4月開始不能獲取用戶信息，所以舊的微信授權登錄教程不能直接參考。
技術詳述
整個流程參照官方時序圖
小程序授權登錄需要前后端配合，后端需要編寫授權和登錄兩個接口，我將詳細介紹我負責的前端部分，后端部分只介紹要做的事情而不介紹具體代碼。
小程序授權登錄分為以下幾個步驟：
1、前端調用wx.login()，獲取微信臨時登錄憑證code
//示例代碼
wx.login({
success (res) {
if (res.code) {
//發起網絡請求
wx.request({
url: 'https://example.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登錄失敗！' + res.errMsg)
}
}
})
注：臨時登錄憑證 code 只能使用一次，code生成以后5分鍾失效
2、把code傳給后端，后端調用auth.code2Session接口，換取微信用戶唯一標識OpenID和session_key
//請求地址
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
3、如果openid存在於數據庫當中，說明用戶以前已經授權登錄過了，直接根據openid查詢用戶的信息，返回信息和token
由后端完成。
4、如果openid不存在數據庫當中，把openid存到數據庫當中，相當於插入了user用戶，只不過昵稱、頭像都是空的，依然返回用戶信息和token
由后端完成。
5、前端獲取到用戶信息，如果用戶信息是空的，說明沒有授權登錄過，就要顯示授權按鈕，等待用戶授權
注：授權是指讓用戶同意把他的微信頭像、名稱等信息交給你，授權本身和登錄是不掛勾的，只是登錄要使用到授權提供的這些信息。
6、用戶同意授權之后，可以通過wx. getUserProfile()拿到用戶信息，把信息傳給后端，請求頭攜帶token
第5、6步合起來介紹，參考官方文檔寫法getUserProfile()
//在WXML中
<button class="btn" wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 微信登錄 </button>
//在JS中
getUserProfile(e) {
console.log("getUserProfile")
// let my_token = globalData.token
// 推薦使用wx.getUserProfile獲取用戶信息，開發者每次通過該接口獲取用戶個人信息均需用戶確認
// 開發者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
wx.getUserProfile({
desc: '用於登錄', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
success: (res) => {
console.log(res.userInfo)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
// 4 授權成功后，發送用戶信息(昵稱+頭像)給后端，返回完整的用戶信息
console.log("res.userInfo.nickName="+res.userInfo.nickName)
console.log("res.userInfo.avatarUrl="+res.userInfo.avatarUrl)
let session_id = wx.getStorageSync('sessionid');
// var header = { 'content-type': 'application/x-www-form-urlencoded', 'Cookie': session_id }
console.log('token='+app.globalData.token)
console.log("發起授權網絡請求")
wx.request({
url: 'https://fidle.shawnxixi.icu/login/userAuth',
// url: 'https://baidu.com',
method: 'POST',
data: {
nickname: res.userInfo.nickName,
avatar_url: res.userInfo.avatarUrl,
},
header: { 'content-type': 'application/x-www-form-urlencoded', 'Cookie': session_id ,
'token': app.globalData.token},
success (res) {
// console.log(res)
// console.log(res.data)
if(res.data.code == 200) {
console.log('授權成功，返回完整的用戶信息')
wx.setStorageSync('isLogin', true)
console.log("res=")
console.log(res)
console.log(res.data)
//把數據存在全局變量
app.globalData.user = res.data.data
console.log("res.data.data=")
console.log(res.data.data)
//打印出來看看，確認已經頭像和昵稱已經有了
console.log("app.globalData.user"+app.globalData.user)
//跳轉進入首頁
console.log("跳轉")
wx.switchTab({
url:'/pages/index/index'
})
}
else{
console.log("res.data.code="+res.data.code)
}
},
fail:function(err){
console.log("跳轉")
console.log(err)
},
complete:function(){
console.log("complete")
}
})
}
})
},
7、后端接收到請求之后，將信息更新到數據庫表，至此用戶授權登錄成功
前端在收到授權成功的信息后，進行頁面跳轉，代碼見上一條。
總結
小程序授權登錄雖然看起來沒有很復雜，但是我第一次寫時前前后后寫了三四天才完成。主要還是在實現步驟的理解和參考資料的查找上遇到了一些問題，所以在本篇博客中，我把小程序授權登錄的每一個步驟清楚地列了出來，並在一些當時我有疑惑的地方添加了解釋，也附上了步驟對應參考文檔的鏈接，希望可以幫助到大家。