微信小程序开发之获取用户手机号码(php接口解密)


Posted in Javascript onMay 17, 2020

后边要做一个微信小程序,并要能获取用户微信绑定的手机号码。而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如既往的乱,如果没有对小程序开发文档有一个整体的了解,搞懂解密流程还是有点难的。这里把小程序从请求用户授权获取手机号码直至获取到手机号码明文的整个流程串了起来,方便迅速了解,如下:

一. 前端相关操作:

1. 请求用户授权获取手机号码:

因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用<button>组件的点击来触发,如下:

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;
 //用户允许授权 

 console.log("lv", e.detail.iv); //包括敏感数据在内的完整用户信息的加密数据,需要解密 

 console.log(e.detail.encryptedData); //加密算法的初始向量,解密需要用到 

 ......
 }
})

2. 访问小程序登录接口:

小程序调用wx.login()获取临时登录凭证code,并传到开发者服务器。

Page({ 
 getPhoneNumber: function(e) { 
 console.log(e.detail.errMsg) 
 console.log(e.detail.iv) //包括敏感数据在内的完整用户信息的加密数据,需要解密
 console.log(e.detail.encryptedData) //加密算法的初始向量,解密需要用到
 wx.login({
  success: res => {
  if(res.code){
   console.log(res.code)
  }
  }
 })
 } 
})

3. 访问腾讯服务器的登录凭证校验接口:

注:官方推荐放到服务器端进行,这里为了方便,就放在前端请求了。

这里要注意传入参数:

appid   小程序唯一标识
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'
  }, // 设置请求的 header
  success: function(data) {
  console.log("data", data.data.session_key)
  },
  fail: function(err) {
  console.log(err);
  }
 })

4. 自己的服务器端进行解密

注:解密接口可以使用腾讯官方的demo进行改造,具体改造会在后面说明。

//3. 解密
 wx.request({
  url: 'http://xxxxx.com/demo/demo.php',//腾讯官方demo改造的接口页面
  data: {
  'encryptedData': encodeURIComponent(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'
  }, // 设置请求的 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;
 //用户允许授权
 console.log("lv", e.detail.iv);
 console.log(e.detail.encryptedData);
 wx.showLoading()
 var self=this
 //1. 调用登录接口获取临时登录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'
  }, // 设置请求的 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'
   }, // 设置请求的 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);
  }
  }) 
 }
  
 }
 })
 }

二. 后端接口:

微信官方提供了多种编程语言的示例代码(示例代码)。每种语言类型的接口名字均一致,调用方式可以参照示例。

如果只是学习研究,可以买个经济型的虚拟主机,一年才几十块钱,不过这种虚拟主机以php居多,所以这里以php为例进行改造,接收前端请求。

官方demo下载后结构如下:

微信小程序开发之获取用户手机号码(php接口解密)

对demo.php进行改造:

<?php

include_once "wxBizDataCrypt.php";

/**
 * sessionKey/encryptedData/iv参数均从url中获取,并赋给相应变量
 */
$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文件上传虚拟主机:

微信小程序开发之获取用户手机号码(php接口解密)

然后就可以直接访问demo.php文件作为接口了。

三. 容易出现的异常:

1. 访问微信的登录凭证校验接口获取session_key时,如果报出如下错误,则需清除全部缓存,重新编译(应该是更改过appid,开发工具的坑,不清除全部缓存,会出现这个错误):

invalid code, hints: [ req_id: CPAsWa0325ha57 ]

2.解密接口返回-41003,则检查接口参数:

微信小程序开发之获取用户手机号码(php接口解密)

到此这篇关于微信小程序开发之获取用户手机号码(php接口解密)的文章就介绍到这了,更多相关小程序获取用户手机号码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
关于AngularJS中几种Providers的区别总结
May 17 #Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 #Javascript
JavaScript链式调用原理与实现方法详解
May 16 #Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 #Javascript
JavaScript接口实现方法实例分析
May 16 #Javascript
JavaScript 类的封装操作示例详解
May 16 #Javascript
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
详解Python中的strftime()方法的使用
2015/05/22 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
学前教育专业毕业生自荐信
2013/10/03 职场文书
初一体育教学反思
2014/01/29 职场文书
服务理念口号
2014/06/11 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python