微信小程序開發(fā)之獲取用戶手機號碼(php接口解密)
后邊要做一個微信小程序,并要能獲取用戶微信綁定的手機號碼。而小程序開發(fā)文檔上邊提供的獲取手機號碼的接口(getPhoneNumber())返回的是密文,需要服務器端進行解密,但是官方提供的開發(fā)文檔一如既往的亂,如果沒有對小程序開發(fā)文檔有一個整體的了解,搞懂解密流程還是有點難的。這里把小程序從請求用戶授權獲取手機號碼直至獲取到手機號碼明文的整個流程串了起來,方便迅速了解,如下:
一. 前端相關操作:
1. 請求用戶授權獲取手機號碼:
因為需要用戶主動觸發(fā)才能發(fā)起獲取手機號接口,所以該功能不由 API 來調用,需用<button>
組件的點擊來觸發(fā),如下:
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); //包括敏感數(shù)據(jù)在內的完整用戶信息的加密數(shù)據(jù),需要解密 console.log(e.detail.encryptedData); //加密算法的初始向量,解密需要用到 ...... } })
2. 訪問小程序登錄接口:
小程序調用wx.login()獲取臨時登錄憑證code,并傳到開發(fā)者服務器。
Page({ getPhoneNumber: function(e) { console.log(e.detail.errMsg) console.log(e.detail.iv) //包括敏感數(shù)據(jù)在內的完整用戶信息的加密數(shù)據(jù),需要解密 console.log(e.detail.encryptedData) //加密算法的初始向量,解密需要用到 wx.login({ success: res => { if(res.code){ console.log(res.code) } } }) } })
3. 訪問騰訊服務器的登錄憑證校驗接口:
注:官方推薦放到服務器端進行,這里為了方便,就放在前端請求了。
這里要注意傳入?yún)?shù):
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); } }) } } }) }
二. 后端接口:
微信官方提供了多種編程語言的示例代碼(示例代碼)。每種語言類型的接口名字均一致,調用方式可以參照示例。
如果只是學習研究,可以買個經(jīng)濟型的虛擬主機,一年才幾十塊錢,不過這種虛擬主機以php居多,所以這里以php為例進行改造,接收前端請求。
官方demo下載后結構如下:
對demo.php進行改造:
<?php include_once "wxBizDataCrypt.php"; /** * sessionKey/encryptedData/iv參數(shù)均從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文件作為接口了。
三. 容易出現(xiàn)的異常:
1. 訪問微信的登錄憑證校驗接口獲取session_key時,如果報出如下錯誤,則需清除全部緩存,重新編譯(應該是更改過appid,開發(fā)工具的坑,不清除全部緩存,會出現(xiàn)這個錯誤):
invalid code, hints: [ req_id: CPAsWa0325ha57 ]
2.解密接口返回-41003,則檢查接口參數(shù):
到此這篇關于微信小程序開發(fā)之獲取用戶手機號碼(php接口解密)的文章就介紹到這了,更多相關小程序獲取用戶手機號碼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript eval() 函數(shù)介紹及應用示例
eval(String) 函數(shù)可計算某個字符串,并執(zhí)行其中的的 JavaScript 代碼,該方法只接受原始字符串作為參數(shù)2014-07-07小程序組件傳值和引入sass的方法(使用vant Weapp組件庫)
這篇文章主要介紹了小程序組件傳值和引入sass使用vant Weapp組件庫,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11js中for...in循環(huán)對象時輸出key值順序混亂問題解決
很久之前就有前輩告訴我用for...in循環(huán)對象屬性的順序不是固定的,xiam?這篇文章主要給大家介紹了關于js中for...in循環(huán)對象時輸出key值順序混亂問題解決方法,需要的朋友可以參考下2023-11-11