微信小程序开发之获取用户手机号码(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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 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会员权限控制实现原理分析
2011/05/29 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
JS实现分页导航效果
2020/02/19 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python字符串处理实例详解
2017/05/18 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
洗煤厂厂长岗位职责
2014/01/03 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
建议书格式
2015/02/04 职场文书
初中教师个人工作总结
2015/02/10 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
Hive HQL支持2种查询语句风格
2022/06/25 数据库