本篇博客主要详解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 =appid=_GET[‘appid’];

secret=secret =secret=_GET[‘secret’];

jscode=js_code=jsc​ode=_GET[‘code’];

iv=(iv = (iv=(_GET[‘iv’]);

encryptedData=(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功能。如有不懂可在本文下评论回复。

贴上两个个人小程序,欢迎访问并讨论

小程序填坑:2018最新getPhoneNumber功能详解的更多相关文章

  1. 在ASP.NET 5应用程序中的跨域请求功能详解

    在ASP.NET 5应用程序中的跨域请求功能详解 浏览器安全阻止了一个网页中向另外一个域提交请求,这个限制叫做同域策咯(same-origin policy),这组织了一个恶意网站从另外一个网站读取敏 ...

  2. Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解

    Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解 说明:Java生鲜电商平台-APP/小程序接口传输常见的加密算法及详解,加密算法,是现在每个软件项目里必须用到的内容. 广泛应用在包括 ...

  3. 微信小程序填坑之路其一:wx.request发送与服务端接受

    一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入 ...

  4. 微信小程序填坑之旅一(接入)

    一.小程序简介 小程序是什么? 首先“程序”这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为它嵌入在微信中,受微 ...

  5. 微信小程序填坑---小程序支付

    因为公司刚刚重新做了网站,所以也吧公众号和小程序提上了日程,在公众号里面没有什么问题,直接按照官方文档进行代码编写.调试,然后就解决了公众号内支付的问题. 因为小程序提供了<webview> ...

  6. 小程序填坑之路(二):cover-view

    https://blog.csdn.net/mr_chen95/article/details/79261987 在一些情况下,我们需要对map.video.canvas.camera这些微信小程序的 ...

  7. 微信小程序填坑之旅

    一.解决scroll-view的滚动条问题 1.出现场景css. 有些场景下scroll-view是不需要滚动条的,比如顶部导航栏的横向滑动.而在单页的css样式中加入特定代码不能影响到全局的样式 2 ...

  8. 微信小程序填坑之路(三):布局适配方案(rpx、px、vw、vh)

    因为小程序是以微信为平台运行的,可以同时运行在android与ios的设备上,所以不可避免的会遇到布局适配问题,特别是在iphone5上,因为屏幕尺寸小的缘故,也是适配问题最多的机型,下面就简单介绍几 ...

  9. 微信小程序填坑之旅(1)-app.js中用云开发获取openid,在其他页上用app.globaldata.openid获取为空

    参考:小程序如何在其他页面监听globalData中值的变化?https://www.jianshu.com/p/8d1c4626f9a3 原因就是:app.js没执行完时,其他页已经onload了, ...

随机推荐

  1. 算法设计与分析 - AC 题目 - 第 2 弹

    PTA-算法设计与分析-AC原题7-1 最大子列和问题 (20分)给定K个整数组成的序列{ N1, N2, ..., NK },“连续子列”被定义为{ Ni, Ni+1, ..., Nj },其中 1 ...

  2. 网易云信-新增自定义消息(iOS版)

    https://www.jianshu.com/p/2bfb1c4e9f21 前言 公司业务需要,PC端,移动端都用到了第三方 网易云信 IM来实现在线客服咨询.在这当中难免遇到一些需求是网易云信没有 ...

  3. MySQL实现主从复制功能

    环境说明         centos7.3.MySQL5.7 前言         MySQL安装参考之前的文章https://www.jianshu.com/p/452aa99c7476有讲解. ...

  4. mysql 通过localhost可以连接IP连接不上

    因为MySQL默认没开 所以需要手动设置 开MySQL启远程连接的功能,在MySQL服务器控制台上执行以下命令: 设置权限: grant all privileges on *.* to 用户名@&q ...

  5. vscode git 提交数据到分支

        1.vscode菜单--终端--新建终端   git config --global user.name "your name"   git config --global ...

  6. 一套完整的javascript面试题(转)

    一.单选题1.以下哪条语句会产生运行错误:(a)A.var obj = ();//语法错误B.var obj = [];//创建数组C.var obj = {};//创建对象D.var obj = / ...

  7. Bootstrap入门(一)准备

    Bootstrap入门(一)准备         网页的样式化与布局展示是很多开发者要面对的问题,目前有多的框架和工具包,可以使网页设计的任务变得更加简单.轻松.方便.快捷一些,其中,bootstra ...

  8. 《C Primer Plus(第6版)(中文版)》普拉达(作者)epub+mobi+azw3

    内容简介 <C Primer Plus(第6版)中文版>详细讲解了C语言的基本概念和编程技巧. <C Primer Plus(第6版)中文版>共17章.第1.2章介绍了C语言编 ...

  9. 1-2SpringBoot项目属性配置

    前面我们讲解了SpringBoot HelloWorld实现 今天具体来讲解上那个application.properties项目配置文件 打开是空白 里面可以配置项目,所以配置项目我们 alt+/ ...

  10. 使用 MYSQLBINLOG 来恢复数据

    使用 MYSQLBINLOG 来恢复数据 2009-04-05 12:47:05 标签:mysql mysqlbinlog 恢复 数据库 数据 原创作品,允许转载,转载时请务必以超链接形式标明文章 原 ...