微信小程序開發之獲取用戶手機號碼——使用簡單php接口demo進行加密數據解密

后邊要做一個微信小程序，並要能獲取用戶微信綁定的手機號碼。而小程序開發文檔上邊提供的獲取手機號碼的接口（getPhoneNumber()）返回的是密文，需要服務器端進行解密，但是官方提供的開發文檔一如既往的亂，如果沒有對小程序開發文檔有一個整體的了解，搞懂解密流程還是有點難的。這里把小程序從請求用戶授權獲取手機號碼直至獲取到手機號碼明文的整個流程串了起來，方便迅速了解,如下：

一. 前端相關操作：

1. 請求用戶授權獲取手機號碼:

因為需要用戶主動觸發才能發起獲取手機號接口，所以該功能不由 API 來調用，需用 <button> 組件的點擊來觸發，如下：

wxml:

<button wx:if="{{!phone}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 獲取手機號碼</button>

js:

Page({
    getPhoneNumber: function(e) {　　　　
        if(e.detail.errMsg == "getPhoneNumber:fail user deny") return;　　 //用戶允許授權        　　
        console.log("lv", e.detail.iv); //包括敏感數據在內的完整用戶信息的加密數據,需要解密        　　
        console.log(e.detail.encryptedData); //加密算法的初始向量，解密需要用到        　　
        ......
    }
})

 

2. 訪問小程序登錄接口:

小程序調用wx.login()獲取臨時登錄憑證code,並傳到開發者服務器。

Page({ 
    getPhoneNumber: function(e) { 
        console.log(e.detail.errMsg) 
        console.log(e.detail.iv) //包括敏感數據在內的完整用戶信息的加密數據,需要解密
        console.log(e.detail.encryptedData) //加密算法的初始向量，解密需要用到
        wx.login({
              success: res => {
                if(res.code){
                    console.log(res.code)
                }
            }
        })
    } 
})

3. 訪問騰訊服務器的登錄憑證校驗接口:

注：官方推薦放到服務器端進行，這里為了方便，就放在前端請求了。

這里要注意傳入參數：

appid		小程序唯一標識
secret		小程序的 app secret
js_code		登錄時獲取的 code
grant_type		填寫為 authorization_code

 

 

 

 

        //2. 訪問登錄憑證校驗接口獲取session_key
        wx.request({
            url: "https://api.weixin.qq.com/sns/jscode2session",
            data: {
                'appid': "xxxxxxxx",
                'secret': "xxxxxxxx",
                'js_code': res.code,
                'grant_type': "authorization_code"
            },
            method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            header: {
                'content-type': 'application/json'
            }, // 設置請求的 header
            success: function(data) {
                console.log("data", data.data.session_key)
            },
            fail: function(err) {
                console.log(err);
            }
        })

4. 自己的服務器端進行解密

注：解密接口可以使用騰訊官方的demo進行改造，具體改造會在后面說明。

        //3. 解密
        wx.request({
            url: 'http://xxxxx.com/demo/demo.php',//騰訊官方demo改造的接口頁面
            data: {
                'encryptedData': encodeURIComponent(e.detail.encryptedData),//需要進行編碼
                'iv': e.detail.iv,
                'session_key': data.data.session_key
            },
            method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            header: {
                'content-type': 'application/json'
            }, // 設置請求的 header
            success: function(data2) {
                console.log(data2.data.phoneNumber)
                if(data2.statusCode == 200) { 
                    self.setData({
                        phone: data2.data.phoneNumber
                    })
                }
            },
            fail: function(err) {
                console.log(err);
            }
        })

js部分整體代碼如下：

getPhoneNumber: function (e) {
    if (e.detail.errMsg == "getPhoneNumber:fail user deny") return;
    //用戶允許授權
    console.log("lv", e.detail.iv);
    console.log(e.detail.encryptedData);
    wx.showLoading()
    var self=this
    //1. 調用登錄接口獲取臨時登錄code
    wx.login({
      success: res => {
        if(res.code){
          //2. 訪問登錄憑證校驗接口獲取session_key、openid
          wx.request({
            url: "https://api.weixin.qq.com/sns/jscode2session",
            data: {
              'appid': "wxcc41e47562b08129",
              'secret': "50e4379d67a6860d18157c53dc6ac3c2",
              'js_code': res.code,
              'grant_type': "authorization_code"
            },
            method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
            header: {
              'content-type': 'application/json'
            }, // 設置請求的 header
            success: function (data) {
              console.log("data", data)
              if(data.statusCode==200){
                  //3. 解密
                wx.request({
                  url: 'http://qdy8.gotoip4.com/demo/demo.php',
                  data: {
                    'encryptedData': e.detail.encryptedData,
                    'iv': e.detail.iv,
                    'session_key': data.data.session_key
                  },
                  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
                  header: {
                    'content-type': 'application/json'
                  }, // 設置請求的 header
                  success: function (data2) {
                    wx.hideLoading()
                    console.log(data2.data.phoneNumber)
                    if (data2.statusCode == 200 && data2.data.phoneNumber) {
                      self.setData({ 
                        phone: data2.data.phoneNumber
                      })
                    }
                  },
                  fail: function (err) {
                    console.log(err);
                  }
                })
              }
            },
            fail: function (err) {
              console.log(err);
            }
          })    
        }
            
      }
    })
  }

 

二. 后端接口：

微信官方提供了多種編程語言的示例代碼（點擊下載）。每種語言類型的接口名字均一致，調用方式可以參照示例。

如果只是學習研究，可以買個經濟型的虛擬主機，一年才幾十塊錢，不過這種虛擬主機以php居多，所以這里以php為例進行改造，接收前端請求。

官方demo下載后結構如下：

對demo.php進行改造：

<?php

include_once "wxBizDataCrypt.php";

/**
 * sessionKey/encryptedData/iv參數均從url中獲取，並賦給相應變量
 */
$appid = 'xxxxxxxx';
$sessionKey = $_REQUEST['session_key'];
$encryptedData=$_REQUEST['encryptedData'];
$iv = $_REQUEST['iv'];

$pc = new WXBizDataCrypt($appid, $sessionKey);
$errCode = $pc->decryptData($encryptedData, $iv, $data );

if ($errCode == 0) {
    print($data . "\n");
} else {
    print($errCode . "\n");
}
?>

將php的三個demo文件上傳虛擬主機：

然后就可以直接訪問demo.php文件作為接口了。

三. 容易出現的異常：

1. 訪問微信的登錄憑證校驗接口獲取session_key時，如果報出如下錯誤，則需清除全部緩存，重新編譯（應該是更改過appid，開發工具的坑，不清除全部緩存，會出現這個錯誤）：

invalid code, hints: [ req_id: CPAsWa0325ha57 ]

2. 解密接口返回-41003,則檢查接口參數: