nodejs+koa+uniapp實作微信小程式登陸擷取使用者手機号及openId
前言:
我準備用nodejs+koa+uniapp實作一款餐飲點單小程式,以及nodejs+koa+vue實作後端管理平台,目前用nodejs+koa已經搭建好服務,并使用了連結池以及pm2程序守護來保護服務端接口調用,小程式涉及使用者登入+支付+下單+訂單管理+資訊管理等,後端管理設計登陸+商品添加編輯删除+使用者管理等功能,準備在此部落格記錄我開發過程中遇到的問題以及解決的技術難點,想要學習的關注我一起學習進步吧!
微信小程式登陸擷取使用者手機号及openId 後端基于nodejs+koa 流程:
- 注冊小程式,獲得小程式appId以及appSecret(小程式密鑰)
- 調用uni.login擷取使用者的臨時code
- 根據getPhoneNumber擷取到使用者的iv以及encryptedData
- 根據擷取到的iv和code和encryptedData請求後段接口換取使用者的手機号以及openId
- 後端根據接口傳過來的code+iv+encryptedData換取使用者的session_key和openid
- 根據換取得到的session_key使用WXBizDataCrypt換取使用者的手機号
一.擷取使用者臨時code
先上截圖:

此code即為我們擷取到的使用者臨時code,需要注意的是隻有幾分鐘的有效時間
上代碼:
1 wx.login({
2 success: (res) => {
3 console.log(res)
4 },
5 fail: (err) => {
6
7 }
8 })
二.根據getPhoneNumber擷取到使用者的iv以及encryptedData
先上圖:
此資料即為我們擷取到的使用者加密iv以及encryptedData,我們将會用此資料以及code給後端換取手機号以及oppenid
1 //html
2 <button open-type="getPhoneNumber" class="btns" @getphonenumber="getPhoneNumber" :disabled="!checked">微信使用者一鍵登入</button>
js代碼:
1 async getPhoneNumber(e) {
2 console.log(e)
3 if (e.detail.errMsg !== 'getPhoneNumber:fail user deny') {
4 const obj = {
5 code: this.code,
6 encryptedData: e.detail.encryptedData,
7 iv: e.detail.iv
8 }
9 pageFun.getToken(obj, (res) => {//調用後端換取手機号以及oppenid
10 console.log(res)
11 if(res.data.state==200){
12 uni.showToast({
13 title: res.data.message,
14 duration: 2000,
15 icon: true
16 });23 }
24 })
25 } else {
26 await this.login()
27 }
28 },
三.後端根據接口傳過來的code+iv+encryptedData換取使用者的session_key和openid
此參數即為我們根據code+iv+encryptedData換取得到的session_key以及openid
換取接口為https://api.weixin.qq.com/sns/jscode2session參數我們就拼接到位址後邊
1 /* 擷取小程式session_key */
2 getSessionKey(params) {
3 return new Promise((resolve, reject) => {
4 axios.get('https://api.weixin.qq.com/sns/jscode2session?grant_type=authorization_code&appid=' + params.appid + '&secret=' + params.secret + '&js_code=' + params.code)
5 .then(response => {
6 console.log(response.data)
7 resolve(response.data)
8 })
9 .catch(error => {
10 console.log(error);
11 });
12 })
13
14 }
四.根據換取得到的session_key使用WXBizDataCrypt換取使用者的手機号
此資料即為我們擷取到的使用者手機号,至此大功告成。
1 /* 小程式擷取使用者手機号 */
2 router.post('/token', async (ctx, next) => {
3 let params = ctx.request.body;
4 let sessionKey = '';
5 let encryptedData = params.encryptedData;
6 let iv = params.iv
7 /* 擷取使用者 sessionKey*/
8 let userKey = await utils.getSessionKey({appid:appId,secret:AppSecret,code:params.code});
9 sessionKey = userKey.session_key;
10 let pc = new WXBizDataCrypt(appId, sessionKey)
11
12 let data = pc.decryptData(encryptedData, iv)//此方法即為擷取使用者手機号的方法,是微信的官方js庫
13 console.log(data)
14 data.sessionKey = userKey.session_key;
15 data.openid = userKey.openid;
16 data.iv = iv;
17 data.encryptedData = encryptedData;
18 ctx.body = {
19 state: 200,
20 message: '登陸成功!',
21 data:data
22 };
23 })
五.注意事項
- appid也就是小程式必須是商戶或者是企業個人小程式是沒有權限擷取使用者手機号的
-
WXBizDataCrypt是微信官方的js庫裡邊有多種語言,我用的是nodejs版本下載下傳位址
- 擷取appSecret(小程式密鑰)在微信公衆平台>開發管理>開發設定擷取
另外擷取微信使用者昵稱頭像的API也更新了,之前已經啟用
1 uni.getUserProfile({
2 desc: 'Wexin', // 這個參數是必須的
3 success: res => {
4 console.log('213',res)
5 },
6 fail: err => {
7 console.log(err)
8 }
9 })
結束語:
這篇文章就到這裡吧,主要是講了擷取使用者手機号以及oppenid的所使用到的一些具體方法,但是具體的代碼并沒有,以及後端nodejs是如何搭建項目連結mysql建立路由接口也是沒有講到的後續我會持續更新項目的進展狀态,也會單獨的寫一篇文章給大家介紹如何部署伺服器,如何建立nodejs+koa項目,如果大家感興趣的話可以關注我,或者是加我wx:18237266724大家一起學習!