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

来源:脚本之家  责任编辑:小易  

最近在做一款微信小程序,需要获取用户手机号,具体步骤如下:流程1、首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥)。2、拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkeywww.zgxue.com防采集请勿采集本网。

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

以下摘录自微信小程序官方文档的Q&A章节- 网络请求的 referer 网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的

一. 前端相关操作:

微信小程序出来有一段时间了,大家都知道小程序开发过程中需要有APPID来在微信上测试,官方文档都是默认你已经有了微信小程序的APPID,但是如何能获取到微信小程序确实是个技术活,下面就来讲讲

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

2、选择微信小程序。3、使用一个没有注册过公众平台的邮箱来注册小程序,填写邮箱,填写完后,点击:“注册”按钮 4、邮箱会收到验证链接,登录邮箱点击邮件里面的验证链接。5、接下来是

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

这个是不可以的 根据用户的id是不能查出用户的微信号和手机号的,这是为了保护用户的隐私 如果想获取用户的手机号,需要弹出授权界面,用户才可以将手机号授权给该应用。

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下载后结构如下:

对demo.php进行改造:

<?phpinclude_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文件上传虚拟主机:

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

三. 容易出现的异常:

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

invalid code, hints: [ req_id: CPAsWa0325ha57 ]

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

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

自己开发是非常困难的,需要掌握的专业只是非常多;可以试试第三方平台,一键搭建小程序,获取手机号这些都是最基础的功能内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信小程序利用云函数获取手机号码
  • 微信小程序手机号码验证功能的实例代码
  • react+redux实现简单的待办事项列表todolist
  • javascript解析xml字符串的函数
  • javascript结合cookies实现浏览记录历史
  • js代码判断浏览器种类ie、ff、opera、safari、chrome及版本
  • javascript array.prototype.slice的使用示例
  • 微信小程序异步api为promise简化异步编程的操作方法
  • 如何丰富alt属性的显示效果
  • js简单获得节点元素的方法示例
  • 判断输入的字符串是否是日期格式的简单方法
  • javascript全排列的六种算法 具体实现
  • 如何开发微信小程序的获取用户手机号功能
  • 怎么开发微信小程序的获取用户手机号功能
  • 微信小程序怎么获取用户的手机号
  • 微信小程序开发的时候要怎么实现手机号注册功能
  • 微信小程序获取用户ip
  • 微信小程序如何获取用户ip?
  • 个人如何免费申请一个微信小程序账号进行开发
  • 微信小程序可以通过用户id查的出微信号和手机号么?
  • 微信小程序如何获取用户硬件设备唯一识别号
  • 百度小程序有授权获取手机号的功能或者接口吗?还是只能通过用户自己填入手机号接收验证码?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧微信小程序利用云函数获取手机号码微信小程序手机号码验证功能的实例代码react+redux实现简单的待办事项列表todolistjavascript解析xml字符串的函数javascript结合cookies实现浏览记录历史js代码判断浏览器种类ie、ff、opera、safari、chrome及版本javascript array.prototype.slice的使用示例微信小程序异步api为promise简化异步编程的操作方法如何丰富alt属性的显示效果js简单获得节点元素的方法示例判断输入的字符串是否是日期格式的简单方法javascript全排列的六种算法 具体实现js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包微信小程序开发注意指南和优化实践(小结)self.attachevent is not a function的解取消bootstrap的dropdown-menu点击默认关重学js之显示强制类型转换详解javascript不使用prototype和new实现继承ie与firefox在javascript上的7个不同句法js实现可编辑的后台管理菜单功能【附demo利用js编写响应式侧边栏微信公众号服务器验证token步骤图解发表文章时自动保存到剪贴板
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved