快捷導(dǎo)航

微信小程序開發(fā)之獲取用戶手機號碼(php接口解密)

更新時間：2020年05月17日 16:33:10 作者：逍遙云天

這篇文章主要介紹了微信小程序開發(fā)之獲取用戶手機號碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

一. 前端相關(guān)操作：

1. 請求用戶授權(quán)獲取手機號碼:

因為需要用戶主動觸發(fā)才能發(fā)起獲取手機號接口，所以該功能不由 API 來調(diào)用，需用<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;　　 //用戶允許授權(quán) 　　
 console.log("lv", e.detail.iv); //包括敏感數(shù)據(jù)在內(nèi)的完整用戶信息的加密數(shù)據(jù),需要解密 　　
 console.log(e.detail.encryptedData); //加密算法的初始向量，解密需要用到 　　
 ......
 }
})

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

小程序調(diào)用wx.login()獲取臨時登錄憑證code,并傳到開發(fā)者服務(wù)器。

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

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

注：官方推薦放到服務(wù)器端進(jìn)行，這里為了方便，就放在前端請求了。

這里要注意傳入?yún)?shù)：

appid		小程序唯一標(biāo)識
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'
  }, // 設(shè)置請求的 header
  success: function(data) {
  console.log("data", data.data.session_key)
  },
  fail: function(err) {
  console.log(err);
  }
 })

4. 自己的服務(wù)器端進(jìn)行解密

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

//3. 解密
 wx.request({
  url: 'http://xxxxx.com/demo/demo.php',//騰訊官方demo改造的接口頁面
  data: {
  'encryptedData': encodeURIComponent(e.detail.encryptedData),//需要進(jìn)行編碼
  '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'
  }, // 設(shè)置請求的 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;
 //用戶允許授權(quán)
 console.log("lv", e.detail.iv);
 console.log(e.detail.encryptedData);
 wx.showLoading()
 var self=this
 //1. 調(diào)用登錄接口獲取臨時登錄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'
  }, // 設(shè)置請求的 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'
   }, // 設(shè)置請求的 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);
  }
  }) 
 }
  
 }
 })
 }

二. 后端接口：

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

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

官方demo下載后結(jié)構(gòu)如下：

對demo.php進(jìn)行改造：

<?php

include_once "wxBizDataCrypt.php";

/**
 * sessionKey/encryptedData/iv參數(shù)均從url中獲取，并賦給相應(yīng)變量
 */
$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文件上傳虛擬主機：