微信小程序登录注册流程(获取手机号)
手機(jī)號(hào)
這是采用微信小程序 靜默登陸 無需用戶手動(dòng)輸入 信息 只需點(diǎn)擊按鈕進(jìn)行授權(quán),便可獲取到相關(guān)信息 進(jìn)行一個(gè)用戶的注冊(cè)和登錄
其實(shí)在這些登錄流程中,前端能做的是比較少的,提供一個(gè)按鈕去觸發(fā)獲取手機(jī)號(hào) 和用戶信息 這里要分 兩步授權(quán)
如果想要獲取到用戶手機(jī)號(hào) 和用戶信息 這里是隔離操作 相當(dāng)于 不能一個(gè)按鈕就完成
業(yè)務(wù)需求是這樣的:小程序點(diǎn)進(jìn)來之后,需要獲取手機(jī)號(hào),發(fā)送到后臺(tái),再通過授權(quán)獲取用戶信息(頭像和昵稱),保存登錄態(tài)
其實(shí)對(duì)登錄態(tài)尚存在一些不理解之處 后面再補(bǔ)充
// 獲取手機(jī)號(hào)getPhoneNumber(e) {var codeObj = e.detail.code;// 以下請(qǐng)求應(yīng)該放在服務(wù)端,但是前端可以先進(jìn)行初步測(cè)試wx.request({url: 'https://api.weixin.qq.com/cgi-bin/token', //接口地址data: {appid: "appid", //需要開通企業(yè)賬號(hào)權(quán)限 用測(cè)試號(hào)也行secret: "secret", // 這個(gè)測(cè)試號(hào)也有grant_type: "client_credential",//這個(gè)寫死的},success: (obj) => {//會(huì)獲取到tokenlet token = obj.data.access_tokenwx.request({url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${token}`,method:"post",data: {code:codeObj,},success:(phone)=>{let phoneObj = phone.data.phone_info.phoneNumber;console.log("手機(jī)號(hào)=", phoneObj)wx.setStorage({ //存儲(chǔ)數(shù)據(jù)并準(zhǔn)備發(fā)送給下一頁使用key: "userPhone",data: phoneObj,})}})},fail: failObj => {console.log('獲取手機(jī)號(hào)失敗', failObj);}})},獲取手機(jī)號(hào)后 進(jìn)入登錄流程
上面只是單純的拿到用戶在微信端的手機(jī)號(hào),并還沒有進(jìn)入到微信定義的“靜默登錄態(tài)”流程,傳統(tǒng)的登錄是由后端給的token去維護(hù)用戶的登錄態(tài),微信小程序是微信根據(jù)用戶使用時(shí)長去返回隨機(jī)的token,這個(gè)目前對(duì)業(yè)務(wù)影響不大
// 獲取用戶頭像login() {// 獲取用戶頭像信息wx.getUserProfile({desc: '用于完善用戶資料',success: (res) => {this.setData({userInfo: res.userInfo,})wx.setStorageSync("userInfo", res.userInfo)// 確認(rèn)同意獲取用戶頭像之后 才會(huì)進(jìn)入登錄態(tài)wx.login({// 要改成箭頭函數(shù) 不然沒有thissuccess: (loginRes) => {let code = loginRes.codeconsole.log(loginRes);if (code) {this.getToken(code)}}});}})},// 獲取token 獲取到token之后 每次向后端發(fā)送請(qǐng)求都攜帶這個(gè)token就能知道這個(gè)用是誰 進(jìn)行了哪些操作getToken(code) {wx.request({url: 'https://api.weixin.qq.com/sns/jscode2session',data: {appid: appid,secret: appSecret,js_code: code,grant_type: "authorization_code",},success: (res) => {try {if (res.data.ret) {wx.setStorageSync('token', res.data.token)}} catch (e) {wx.showToast({title: '登錄失敗',})}}})},補(bǔ)充 : 獲取手機(jī)號(hào)的code和登錄的code是兩碼事 官網(wǎng)也有說明
總結(jié)
以上是生活随笔為你收集整理的微信小程序登录注册流程(获取手机号)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 菜刀php后门,关于菜刀后门排查
- 下一篇: [BZOJ3790]神奇项链