微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)
先看一下小程序的登陸流程

使用說(shuō)明注意:
調(diào)用 auth.code2Session 接口,換取 用戶唯一標(biāo)識(shí) OpenID 、 用戶在微信開(kāi)放平臺(tái)帳號(hào)下的唯一標(biāo)識(shí)UnionID(若當(dāng)前小程序已綁定到微信開(kāi)放平臺(tái)帳號(hào)) 和 會(huì)話密鑰 session_key。
之后開(kāi)發(fā)者服務(wù)器可以根據(jù)用戶標(biāo)識(shí)來(lái)生成自定義登錄態(tài),用于后續(xù)業(yè)務(wù)邏輯中前后端交互時(shí)識(shí)別用戶身份。
注意事項(xiàng)
會(huì)話密鑰 session_key 是對(duì)用戶數(shù)據(jù)進(jìn)行 加密簽名 的密鑰。為了應(yīng)用自身的數(shù)據(jù)安全,開(kāi)發(fā)者服務(wù)器不應(yīng)該把會(huì)話密鑰下發(fā)到小程序,也不應(yīng)該對(duì)外提供這個(gè)密鑰。
臨時(shí)登錄憑證 code 只能使用一次
第一步, 調(diào)用微信登陸方法 wx.login() 獲取臨時(shí)登錄憑證code ,并回傳到開(kāi)發(fā)者服務(wù)器。
//微信登錄方法 wx.login()
//調(diào)用微信登錄方法 wx.login() 獲取臨時(shí)登錄憑證code ,并回傳到開(kāi)發(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)前小程序已綁定到微信開(kāi)放平臺(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ù) | 類型 | 說(shuō)明 |
|---|---|---|
| phoneNumber | String | 用戶綁定的手機(jī)號(hào)(國(guó)外手機(jī)號(hào)會(huì)有區(qū)號(hào)) |
| purePhoneNumber | String | 沒(méi)有區(qū)號(hào)的手機(jī)號(hào) |
| countryCode | String | 區(qū)號(hào) |
后端返回的數(shù)據(jù)
獲取得到的開(kāi)放數(shù)據(jù)為以下 json 結(jié)構(gòu):
{
"phoneNumber": "13580006666",
"purePhoneNumber": "13580006666",
"countryCode": "86",
"watermark":
{
"appid":"APPID",
"timestamp": TIMESTAMP
}
}結(jié)束語(yǔ)
到此這篇關(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)效果【附代碼】。小編覺(jué)得挺不錯(cuò)。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-03-03
基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果
setinterval()與clearInterval()JS函數(shù)的調(diào)用方法
js/jQuery對(duì)象互轉(zhuǎn)(快速操作dom元素)
解決layui頁(yè)面按鈕點(diǎn)擊無(wú)反應(yīng),也不報(bào)錯(cuò)的問(wèn)題
詳解JavaScript中精度失準(zhǔn)問(wèn)題及解決方法
JavaScript判斷變量是否為undefined的兩種寫法區(qū)別

