微信小程序开发之获取用户手机号码(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 模式实例 观察者模式
Oct 24 Javascript
HTML上传控件取消选择
Mar 06 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
php创建类并调用的实例方法
2019/09/25 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
React 源码中的依赖注入方法
2018/11/07 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
使用python3实现操作串口详解
2019/01/01 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Python实现序列化及csv文件读取
2020/01/19 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
一个SQL面试题
2014/08/21 面试题
幼儿园课题方案
2014/06/09 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
学习教师法的心得体会
2014/09/03 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
小学生暑假生活总结
2015/07/13 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL