小程序填坑：2018最新getPhoneNumber功能詳解

本篇博客主要詳解getPhoneNumber組件的功能，填補網上那些到處是漏洞的博客。加上小程序官方本身也是滿滿的漏洞。
慣例先上總綱：

##主要內容
1.前端頁面組件書寫
2.JS內組件用法
3.接口文件內容
4.效果圖

##先上成功後的結果圖

##以下是具體步驟

##第一步：組件引用

現在小程序的getPhoneNumber功能必須綁定在button事件上了。所以要按照button的正確寫法來寫：

<button class=''   open-type="getPhoneNumber"> bindgetphonenumber="getPhoneNumber">開始</button>

這個是官方給的組件開放功能寫法，無需修改，直接引用即可。

##第二步：JS內getPhoneNumbe組件函數

該事件中最重要的就是在wx.login登錄後發起接口請求，這裏需要配置參數來給接口，和第三步的demo.php的參數是一一對應的，所以需要認真對待。

appid: “你的小程序APPID”,
secret: “你的小程序appsecret”,
code: res.code,
encryptedData: telObj,
iv: ivObj

這些是必不可少的參數，就想你上網需要的身份證上提供的信息一樣。appid相當於姓名， secret相當於性別，code相當於身份證號碼，encryptedData相當於家庭住址，iv相當於給你辦證的公安局。這些齊備才能算一個合法的請求。


//通過綁定手機號登錄
    getPhoneNumber: function (e) {
      var ivObj = e.detail.iv
      var telObj = e.detail.encryptedData
      var codeObj = "";
      var that = this;
      //------執行Login
      wx.login({
        success: res => {
          console.log('code轉換', res.code); //用code傳給服務器調換session_key

          wx.request({
            url: 'https://你的接口文件路徑', //接口地址
            data: {
              appid: "你的小程序APPID",
              secret: "你的小程序appsecret",
              code: res.code,
              encryptedData: telObj,
              iv: ivObj
            },
            header: {
              'content-type': 'application/json' // 默認值
            },
            success: function (res) {
              phoneObj = res.data.phoneNumber;
              console.log("手機號=", phoneObj)
              wx.setStorage({   //存儲數據並準備發送給下一頁使用
                key: "phoneObj",
                data: res.data.phoneNumber,
              })
            }
          })

          //-----------------是否授權，授權通過進入主頁面，授權拒絕則停留在登陸界面
          if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用戶點擊拒絕
            wx.navigateTo({
              url: '../index/index',
            })
          } else { //授權通過執行跳轉
            
            wx.navigateTo({
              url: '../test/test',
            })
          }
        }
      });

      //---------登錄有效期檢查
      wx.checkSession({
        success: function () {
          //session_key 未過期，並且在本生命週期一直有效
        },
        fail: function () {
          // session_key 已經失效，需要重新執行登錄流程
          wx.login() //重新登錄
        }
      });
    },

注意要在data中配置變量,這裏的變量可根據個人不同需求來命名。這些變量用來存儲手機號信息發送給不同頁面做不同需求的使用，因人而異。

var app = getApp();
var phoneObj = "";
page({
    data: {
        tokenobj:'',
        phoneObj:''
    },
    ....

##第三步：接口文件內容

這一步是最重要的，官方給的下載文件是沒錯的，但是少了個原有的文件pkcs7Encoder.php。其他三個文件均是官方給的，自己結合自己在index.js中的參數寫法，做出匹配修改即可。
下面我貼出代碼：
1.demo.php

最重要的東西都在demo.php中，這裏面的首先參數是一個不能少了的。參數來源是該url內的所有參數

http_curl("https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$js_code&grant_type=$grant_type")

所以要在demo.php中全部列出：

$appid =$ _GET[‘appid’];
$secret =$ _GET[‘secret’];
$js_code=$ _GET[‘code’];
$iv = ($ _GET[‘iv’]);
$encryptedData=($ _GET[‘encryptedData’]);
$grant_type=‘authorization_code’;

然後通過自命名objSession變量來組合所有參數給微信服務器，獲取到我們所需要的session_key，最後將數據**$decodeData發給wxBizDataCrypt.php**來解析

<?php
include_once "wxBizDataCrypt.php";
$appid =$_GET['appid'];
$secret =$_GET['secret'];
$js_code=$_GET['code'];
$iv = ($_GET['iv']);
$encryptedData=($_GET['encryptedData']);
$grant_type='authorization_code';

$objSession=http_curl("https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$js_code&grant_type=$grant_type");
$session_key = json_decode($objSession)->session_key;

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

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

function http_curl($url){
    $curl = curl_init();
    curl_setopt($curl,CURLOPT_URL,$url);
    curl_setopt($curl,CURLOPT_CONNECTTIMEOUT,30);
    curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
    $response=curl_exec($curl);
    curl_close($curl);
    return $response;
}

2.errorCode.php，這是官方源文檔，無需任何修改。

<?php
/**
 * error code 說明.
 * <ul>
 *    <li>-41001: encodingAesKey 非法</li>
 *    <li>-41003: aes 解密失敗</li>
 *    <li>-41004: 解密後得到的buffer非法</li>
 *    <li>-41005: base64加密失敗</li>
 *    <li>-41016: base64解密失敗</li>
 * </ul>
 */
class ErrorCode
{
    public static $OK = 0;
    public static $IllegalAesKey = -41001;  //非法密鑰
    public static $IllegalIv = -41002;      //非法初始向量
    public static $IllegalBuffer = -41003;  //非法密文
    public static $DecodeBase64Error = -41004;  //解碼錯誤
}
?>

3.pkcs7Encoder.php，這是官方在更新後刪去的原文檔，估計官方也是吃錯藥了，挖了這麼大一個坑。這個文檔也是解析過程中必不可少的。

<?php
include_once "errorCode.php";
/**【填充】**（全過程沒用到）
 * 用於AES的PKCS#7填充
 * 提供基於PKCS#7算法(加解密接口)
 * 對稱解密使用的算法爲 AES-128-CBC，數據採用PKCS#7填充。
 */
class PKCS7Encoder
{   
    //塊大小爲16個字節
    public static $block_size = 16;
    /**
     * 對需要加密的明文進行填充補位
     * @param $text 需要進行填充補位操作的明文
     * @return 補齊明文字符串
     */
    function encode( $text )
    {
        $block_size = PKCS7Encoder::$block_size;
        $text_length = strlen( $text );
        //計算需要填充的位數
        $amount_to_pad = PKCS7Encoder::$block_size - ( $text_length % PKCS7Encoder::$block_size );
        if ( $amount_to_pad == 0 ) {
            $amount_to_pad = PKCS7Encoder::block_size;
        }
        //獲得補位所用的字符
        $pad_chr = chr( $amount_to_pad );
        $tmp = "";
        for ( $index = 0; $index < $amount_to_pad; $index++ ) {
            $tmp .= $pad_chr;
        }
        return $text . $tmp;
    }
    /**【去除填充】**
     * 對解密後的明文進行補位刪除
     * @param decrypted 解密後的明文
     * @return 刪除填充補位後的明文
     */
    function decode($text)
    {
        $pad = ord(substr($text, -1));
        if ($pad < 1 || $pad > 32) {
            $pad = 0;
        }
        return substr($text, 0, (strlen($text) - $pad));
    }
}
/**
 * AES的解密**********************
 *
 * 用於encryptedData
 *  
 **********************************/
class Prpcrypt
{
    public $key;
    //構造函數，用密鑰初始化
    function Prpcrypt( $k )
    {
        $this->key = $k;
    }
    /**
     * 對密文進行解密
     * @param string $aesCipher 需要解密的密文
     * @param string $aesIV 解密的初始向量
     * @return string 解密得到的明文
     */
    public function decrypt( $aesCipher, $aesIV )
    {
        try {
            //設置爲“128位、CBC模式的AES解密”
            $module = mcrypt_module_open(MCRYPT_RIJNDAEL_128, '', MCRYPT_MODE_CBC, '');
            //用密鑰key、初始化向量初始化
            mcrypt_generic_init($module, $this->key, $aesIV);
            //**執行解密**（得到帶有PKCS#7填充的半原文，所以要去除填充）
            $decrypted = mdecrypt_generic($module, $aesCipher);
            //清理工作與關閉解密
            mcrypt_generic_deinit($module);
            mcrypt_module_close($module);
        } catch (Exception $e) {
            return array(ErrorCode::$IllegalBuffer, null);
        }
        try {
            //去除補位字符（對半原文去除PKCS#7填充）
            $pkc_encoder = new PKCS7Encoder;
            //最終得到結果$result
            $result = $pkc_encoder->decode($decrypted);
        } catch (Exception $e) {
            //print $e;
            return array(ErrorCode::$IllegalBuffer, null);
        }
        return array(0, $result);
    }
}
?>

4.wxBizDataCrypt.php，官方解密的源文檔，無需修改的。

<?php
/**
 * 對微信小程序用戶加密數據的解密示例代碼.
 *
 * @copyright Copyright (c) 1998-2014 Tencent Inc.
 */
//pkcs#7填充方法類
include_once "pkcs7Encoder.php";
//錯誤代碼定義
include_once "errorCode.php";
//解密處理類
class WXBizDataCrypt
{
    private $appid;
    private $sessionKey;
    /**
     * 構造函數
     * @param $sessionKey string 用戶在小程序登錄後獲取的會話密鑰
     * @param $appid string 小程序的appid
     */
    public function WXBizDataCrypt( $appid, $sessionKey)
    {
        $this->sessionKey = $sessionKey;
        $this->appid = $appid;
    }
    /**
     * 檢驗數據的真實性，並且獲取解密後的明文.
     * @param $encryptedData string 加密的用戶數據
     * @param $iv string 與用戶數據一同返回的初始向量
     * @param $data string 解密後的原文
     *
     * @return int 成功0，失敗返回對應的錯誤碼
     */
    public function decryptData( $encryptedData, $iv, &$data )
    {
        //如果不是24位，就是非法
        if (strlen($this->sessionKey) != 24) {
            return ErrorCode::$IllegalAesKey;
        }
        //sessionKey在傳輸前base64加密，所以要base64解密
        $aesKey=base64_decode($this->sessionKey);
        //如果不是24位，就是非法
        if (strlen($iv) != 24) {
            return ErrorCode::$IllegalIv;
        }
        //IV在傳輸前base64加密，所以要base64解密
        $aesIV=base64_decode($iv);
        //encryptedData在傳輸前base64加密，所以要base64解密
        $aesCipher=base64_decode($encryptedData);
        //用密鑰aesKey,初始化AES類
        $pc = new Prpcrypt($aesKey);
        //用密文、初始向量執行解密，得到原文
        $result = $pc->decrypt($aesCipher,$aesIV);
        //如果結果不是0，表示不正常，返回錯誤代碼
        if ($result[0] != 0) {
            return $result[0];
        }
        //把結果轉換爲數據對象
        $dataObj=json_decode( $result[1] );
        //如果錯誤結果爲空，返回非法密文
        if( $dataObj  == NULL )
        {
            return ErrorCode::$IllegalBuffer;
        }
        //如果數據對象的appid不對，返回非法密文
        if( $dataObj->watermark->appid != $this->appid )
        {
            return ErrorCode::$IllegalBuffer;
        }
        //指針$data獲取值
        $data = $result[1];
        //返回正確代碼
        return ErrorCode::$OK;
    }
}

##最後貼出結果：

發起手機號驗證界面：

這裏驗證點允許後有兩種結果：

第一種手機號顯示爲undefined,如果是小程序第一次驗證，是需要使用手機掃碼體驗小程序並在手機微信端進行發送驗證碼給微信官方的，這個是首先驗證該手機號是否是在用存在的手機號。每個用戶只會在初次打開該小程序時候收到驗證提示，後續都是授權提示。

以上這種情況需要清理小程序開發者工具所有緩存，重新打開即可。

第二種就是正常結果了

至此就算完結了getPhoneNumber功能。如有不懂可在本文下評論回覆。

貼上兩個個人小程序，歡迎訪問並討論

小程序填坑：2018最新getPhoneNumber功能詳解

至此就算完結了getPhoneNumber功能。如有不懂可在本文下評論回覆。

VUE簡單解決控制檯打印數組爲空，但是展開有數據

安利一個工具大全小程序（包含小程序模板+源碼）

vue開發web端實現列表左右聯動效果

VUE中post給接口傳遞參數異常的解決辦法（持續更新）

解決小程序多層嵌套點擊事件重複或者失效問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結