小程序填坑：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=appid =_GET[‘appid’];
secret=secret =_GET[‘secret’];
jscode=js_code=_GET[‘code’];
iv=(iv = (_GET[‘iv’]);
encryptedData=(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功能。如有不懂可在本文下评论回复。

贴上两个个人小程序，欢迎访问并讨论
在这里插入图片描述在这里插入图片描述

posted @ 2018-08-03 10:04  沉默的小猴子  阅读(3866)  评论(0)  编辑  收藏  举报