微信小程式開發之獲取使用者手機號碼(php介面解密)
後邊要做一個微信小程式，並要能獲取使用者微信繫結的手機號碼。而小程式開發文件上邊提供的獲取手機號碼的介面（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
},// 設定請求的 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",// 設定請求的 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
},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,則檢查介面引數:
到此這篇關於微信小程式開發之獲取使用者手機號碼(php介面解密)的文章就介紹到這了,更多相關小程式獲取使用者手機號碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！