注意:沒有在微信開放平臺(不是公眾平臺)做開發(fā)者資質(zhì)認證的就不要浪費時間了,沒認證無法獲取unionId贸辈,認證費用300元/年,emmmm....
微信授權(quán)登錄流程
第一步:wx.login獲取 用戶臨時登錄憑證code
第二步:wx.getUserInfo獲取加密過的數(shù)據(jù)encryptedData和解密參數(shù)iv
第三步:把步驟一肠槽、二中的code裙椭、encryptedData、iv傳到開發(fā)者自己服務(wù)端
第三步:服務(wù)端獲取到code署浩、encryptedData揉燃、iv之后用get方法請求如下微信接口
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
appid:小程序appid
secret: 小程序密鑰
js_code: 第一步獲取的臨時登錄憑證code
grant_type:'authorization_code'
接口會返回 openid, session_key,注意:用戶已經(jīng)授權(quán)過的平臺還會返回unionId筋栋,如果你只是需要unionId炊汤,則到此為止
官方文檔說法如圖:
沒有授權(quán)過則用encryptedData、session_key弊攘、iv抢腐、appid、secret進行解密襟交,官方多語言解密示例下載鏈接:
包含c++ php python node
第四步:仿照示例解密后獲得unionId迈倍,想做什么就做什么了~
以下是授權(quán)登錄前端代碼
// 微信授權(quán)登錄
? authLogin () {
? ? wx.login({
? ? ? success: loginRes => {
? ? ? ? let code = loginRes.code??// 獲取用戶臨時code
? ? ? ? wx.getUserInfo({
? ? ? ? ? success: function (res) {
? ? ? ? ? ? let encryptedData = res.encryptedData??// 獲取加密數(shù)據(jù)
? ? ? ? ? ? let iv = res.iv? //??解密參數(shù)
? ? ? ? ? ? // 發(fā)送解密必要數(shù)據(jù)到服務(wù)端
? ? ? ? ? ? wx.request({
? ? ? ? ? ? ? url: 'http://localhost',
? ? ? ? ? ? ? methods: 'POST',
? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? code: code,
? ? ? ? ? ? ? ? encryptedData: encryptedData,
? ? ? ? ? ? ? ? iv: iv
? ? ? ? ? ? ? },
? ? ? ? ? ? ? succeess: res => {
? ? ? ? ? ? ? ? // 服務(wù)端首先調(diào)用微信接口獲取session_key
? ? ? ? ? ? ? ? // 用戶已經(jīng)授權(quán)過的平臺會直接返回unionId
? ? ? ? ? ? ? ? // 沒有授權(quán)過則用session_key進行解密
? ? ? ? ? ? ? ? // 解密成功后服務(wù)端根據(jù)邏輯返回自定義信息
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? })
? ? ? }
? ? })
? }
以上步驟可行,但是微信更改用戶授權(quán)方式
需用button組件調(diào)用getUserInfo捣域,所以在這之前無法調(diào)用wx.login啼染。解決辦法,在頁面的onLoad生命周期里調(diào)用wx.login焕梅,獲取的code存入data以備需要的時候使用迹鹅,但是code失效時間為5分鐘,如果用戶停留頁面時間過長后點擊授權(quán)登錄贞言,此時的code已經(jīng)過期了斜棚,所以,獲取code的函數(shù)應(yīng)該每4分鐘左右調(diào)用一次该窗。
獲取code代碼如下:
onLoad: function (options) {
? ? this.getCodeTimer()
? },
getCodeTimer () {
? ? wx.login({
? ? ? success: res => {
? ? ? ? this.data.code = res.code
? ? ? ? setTimeout(() => {
? ? ? ? ? this.getCodeTimer()
? ? ? ? }, 4 * 60 * 1000)
? ? ? }
? ? })
? }
wxml按鈕授權(quán):
<button class="primary-bg" open-type='getUserInfo' bindgetuserinfo="authLogin">微信登錄</button>
授權(quán)登錄:
// 授權(quán)登錄
? authLogin(event) {
? ? if (event.detail.errMsg == 'getUserInfo:ok') {
? ? ? wx.showLoading()
? ? ? let reqData = {
? ? ? ? code: this.data.code,
? ? ? ? encryptedData: event.detail.encryptedData,
? ? ? ? iv: event.detail.iv
? ? ? }
? ? ? wx.request({
? ? ? ? url: 'http://localhost:8080',
? ? ? ? methods: 'POST',
? ? ? ? data: reqData,
? ? ? ? success: (res) => {
? ? ? ? ? console.log(res)
? ? ? ? ? ? // 請求完成
? ? ? ? }
? ? ? })
? ? } else {
? ? ? console.log('用戶拒絕授權(quán)')
? ? }
? }
到此弟蚀,完。