微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)
先看一下小程序的登陸流程
使用說明注意:
調(diào)用 auth.code2Session 接口,換取 用戶唯一標(biāo)識(shí) OpenID 、 用戶在微信開放平臺(tái)帳號(hào)下的唯一標(biāo)識(shí)UnionID(若當(dāng)前小程序已綁定到微信開放平臺(tái)帳號(hào)) 和 會(huì)話密鑰 session_key。
之后開發(fā)者服務(wù)器可以根據(jù)用戶標(biāo)識(shí)來生成自定義登錄態(tài),用于后續(xù)業(yè)務(wù)邏輯中前后端交互時(shí)識(shí)別用戶身份。
注意事項(xiàng)
會(huì)話密鑰 session_key 是對(duì)用戶數(shù)據(jù)進(jìn)行 加密簽名 的密鑰。為了應(yīng)用自身的數(shù)據(jù)安全,開發(fā)者服務(wù)器不應(yīng)該把會(huì)話密鑰下發(fā)到小程序,也不應(yīng)該對(duì)外提供這個(gè)密鑰。
臨時(shí)登錄憑證 code 只能使用一次
第一步, 調(diào)用微信登陸方法 wx.login() 獲取臨時(shí)登錄憑證code ,并回傳到開發(fā)者服務(wù)器。
//微信登錄方法 wx.login() //調(diào)用微信登錄方法 wx.login() 獲取臨時(shí)登錄憑證code ,并回傳到開發(fā)者服務(wù)器。 login() { wx.login({ success: (ress) => { wx.request({ url: '服務(wù)器后端接口', data: { code: ress.code }, success: (result) => { console.log(result.data.openId); //獲取到openid } }) }, fail: (error) => { console.log('登錄失??!' + error); } }) }
微信登錄的一些參數(shù)
?????第二步,獲取用戶信息,點(diǎn)擊事件,獲取用戶授權(quán),用戶同意后然后返回信息
//利用后端接口獲取openid,獲取到自己系統(tǒng)賬號(hào)的id,當(dāng)前小程序已綁定到微信開放平臺(tái)帳號(hào),與微信號(hào)綁定,使得下次登錄微信賬號(hào)就跟小程序系統(tǒng)的賬號(hào)綁定。 //getUserProfile 方法 getUserProfile() { var that = this wx.getUserProfile({ desc: '用于獲取用戶微信個(gè)人信息',// 聲明獲取用戶個(gè)人信息后的用途,后續(xù)會(huì)展示在彈窗中,請(qǐng)謹(jǐn)慎填寫 success: (res) => { wx.login({ success: (ress) => { wx.request({ url: '服務(wù)器后端接口', data:{ code:ress.code, }, success: (result) => { console.log(result.data.openId); //獲取到openid wx.request({ url: '服務(wù)器后端接口', data:{ openId:result.data.openId, }, success: (results) => { console.log(results.data.session_key);//拿到自己的系統(tǒng)賬號(hào) }, fail: (errors) => { console.log(errors); } }) }, fail: (error) => { console.log(error); } }) } }) }, fail: (err) => { console.log(err) } }) }
??第三步,獲取用戶手機(jī)號(hào)
獲取用戶手機(jī)號(hào)流程如下:
wx.Login()方法 → 獲取登錄憑證(code)→將code發(fā)送到后端 → 后端拿到openid和session_key → 調(diào)用getPhoneNumber 方法 → 將 encryptedData 和 iv 傳給后端 → 后端獲得json
下面是官方獲取手機(jī)號(hào)介紹截圖
//獲取手機(jī)號(hào) html代碼 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> //獲取微信用戶手機(jī)號(hào)方法 getPhoneNumber (e) { console.log(e.detail.code) console.log(e.detail.errMsg) console.log(e.detail.iv) wx.login({ success:res =>{ console.log(res.code); wx.request({ url:'服務(wù)器后端接口', data:{ 'encryptedData':e.detail.encryptedData, 'iv':e.detail.iv, 'codes':e.detail.code }, method:'GET', header:{ 'content-type':'application/json' }, success:function(res){ wx.setStorageSync('PhoneNumber',res.data.phoneNumber); console.log("手機(jī)號(hào)為" + res.data.phoneNumber) }, fail:function(err){ console.log(err); } }) }) }
獲取手機(jī)號(hào)方法可選參數(shù)
參數(shù) | 類型 | 說明 |
---|---|---|
phoneNumber | String | 用戶綁定的手機(jī)號(hào)(國(guó)外手機(jī)號(hào)會(huì)有區(qū)號(hào)) |
purePhoneNumber | String | 沒有區(qū)號(hào)的手機(jī)號(hào) |
countryCode | String | 區(qū)號(hào) |
后端返回的數(shù)據(jù)
獲取得到的開放數(shù)據(jù)為以下 json 結(jié)構(gòu):
{ "phoneNumber": "13580006666", "purePhoneNumber": "13580006666", "countryCode": "86", "watermark": { "appid":"APPID", "timestamp": TIMESTAMP } }
結(jié)束語
到此這篇關(guān)于微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)的文章就介紹到這了,更多相關(guān)微信小程序授權(quán)登陸及獲取手機(jī)號(hào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- uniapp抖音小程序一鍵獲取用戶手機(jī)號(hào)的示例代碼
- UNIAPP實(shí)現(xiàn)微信小程序登錄授權(quán)和手機(jī)號(hào)授權(quán)功能(uniapp做微信小程序)
- 微信小程序獲取用戶手機(jī)號(hào)碼詳細(xì)教程(前端+后端)
- 微信小程序中獲取用戶手機(jī)號(hào)授權(quán)登錄詳細(xì)步驟
- uniapp微信小程序授權(quán)登錄并獲取手機(jī)號(hào)的方法
- uniapp+.net?core實(shí)現(xiàn)微信小程序獲取手機(jī)號(hào)功能
- PHP配合微信小程序?qū)崿F(xiàn)獲取手機(jī)號(hào)碼詳解
- 微信小程序獲取用戶手機(jī)號(hào)碼的詳細(xì)步驟
- 微信小程序?qū)崿F(xiàn)手機(jī)號(hào)碼驗(yàn)證
- 抖音小程序一鍵獲取手機(jī)號(hào)的實(shí)現(xiàn)思路
相關(guān)文章
Bootstrap~多級(jí)導(dǎo)航(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)效果【附代碼】
下面小編就為大家分享一篇Bootstrap~多級(jí)導(dǎo)航(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)效果【附代碼】。小編覺得挺不錯(cuò)。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2016-03-03

基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果

setinterval()與clearInterval()JS函數(shù)的調(diào)用方法

js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)

解決layui頁面按鈕點(diǎn)擊無反應(yīng),也不報(bào)錯(cuò)的問題

詳解JavaScript中精度失準(zhǔn)問題及解決方法

JavaScript判斷變量是否為undefined的兩種寫法區(qū)別