微信小程序开发之获取用户手机号码(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 相关文章推荐
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
js实现移动端轮播图滑动切换
Dec 21 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python中sys.argv参数用法实例分析
2015/05/20 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
在django模板中实现超链接配置
2019/08/21 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
文员个人求职自荐信
2013/09/21 职场文书
最新的大学生找工作自我评价
2013/09/29 职场文书
医学生自我评价
2014/01/27 职场文书
报效祖国演讲稿
2014/09/15 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android