本篇博客主要详解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. IDEA中打war 包

    把war 放入tomcat 的 webapps 目录下,重启tomcat即可自动解压war包跑起来 (最好是,解压完成后,关闭tomcat,把war包拷贝出去,再启动,不然每次启动tomcat都会自动 ...

  2. Flask - 闪现flash

    1. 像snap一样阅后即焚,在服务器端临时存储数据的地方,如显示错误信息.(也可以用session实现) 2. Flash的底层是session做的,所以要secret_key.可以看源码 3. f ...

  3. Java垃圾回收机制详解和调优

    gc即垃圾收集机制是指jvm用于释放那些不再使用的对象所占用的内存.java语言并不要求jvm有gc,也没有规定gc如何工作.不过常用的jvm都有gc,而且大多数gc都使用类似的算法管理内存和执行收集 ...

  4. 牛客NOIPtg day5 B-demo的gcd

    一句话题意:给定长度为n的序列,求任意两两之间gcd的积mod 998244353的值. 好像是莫比乌斯反演板子题???(反正noip估计不考这种毒瘤 考场上想到一个类似正解的思路 好像摊下来最多处理 ...

  5. ExpandableListActivity的基本使用方法 ,SimpleExpandableListAdapter的基本使用方法

    activity_main.xml: <ExpandableListView android:id="@id/android:list" android:layout_wid ...

  6. ch8 faux列

    在一个布局中,假设有导航元素和内容元素,切给他们都分别应用了背景,理想情况下,背景应该拉长到整个布局的最大高度,从而形成列的效果,但是实际上,因为导航元素没有扩展到最大高度,所以它们的背景不会拉长,如 ...

  7. 修剪草坪 HYSBZ - 2442

    在一年前赢得了小镇的最佳草坪比赛后,FJ变得很懒,再也没有修剪过草坪.现在,新一轮的最佳草坪比赛又开始了,FJ希望能够再次夺冠. 然而,FJ的草坪非常脏乱,因此,FJ只能够让他的奶牛来完成这项工作.F ...

  8. 关闭Hyper-V后,天翼校园宽带(Netkeeper)依旧显示Sorry, this application cannot run under a Virtual Machin的解决方法

    环境: win10专业版,版本1909 经过: 尝试了一下win10 更新后的沙盒系统,当时开启了沙盒,但是未打开Hyper-V,沙盒正常运行. 第二次开机后天翼校园宽带(Netkeeper)显示So ...

  9. SciPy 统计

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  10. 密码学概述&置换密码

    密码学 概述 如何将信息进行加密,传送到接收方,接收方在进行解密获取信息,中间即使有窃听者窃听到信息也可解密破解. 密码学分类 密码编辑学(保密) 密码分析学(破译) 该破译与传统的黑客技术有一定的区 ...