微信小程序开发之获取用户手机号码(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 相关文章推荐
js获取指定的cookie的具体实现
Feb 20 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
用VsCode编辑TypeScript的实现方法
May 07 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
python中import学习备忘笔记
2017/01/24 Python
python for 循环获取index索引的方法
2019/02/01 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
机械专业应届生求职信
2013/09/21 职场文书
企业项目策划书
2014/01/11 职场文书
《菜园里》教学反思
2014/04/17 职场文书
安全口号大全
2014/06/21 职场文书
建设工程授权委托书
2014/09/22 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
关于Redis的主从复制及哨兵问题
2022/06/16 Redis