逍遥云天 微信小程序开发之获取用户手机号码——使用简单php接口demo进行加密数据解密
后边要做一个微信小程序,并要能获取用户微信绑定的手机号码。而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如既往的乱,如果没有对小程序开发文档有一个整体的了解,搞懂解密流程还是有点难的。这里把小程序从请求用户授权获取手机号码直至获取到手机号码明文的整个流程串了起来,方便迅速了解,如下:
一. 前端相关操作:
1. 请求用户授权获取手机号码:
因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button>
组件的点击来触发,如下:
wxml:
<button wx:if="{{!phone}}" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 获取手机号码</button>
js:
1 Page({
2 getPhoneNumber: function(e) {
3 if(e.detail.errMsg == "getPhoneNumber:fail user deny") return; //用户允许授权
4 console.log("lv", e.detail.iv); //包括敏感数据在内的完整用户信息的加密数据,需要解密
5 console.log(e.detail.encryptedData); //加密算法的初始向量,解密需要用到
6 ......
7 }
8 })
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进行改造:
<?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文件上传虚拟主机:
然后就可以直接访问demo.php文件作为接口了。
三. 容易出现的异常:
1. 访问微信的登录凭证校验接口获取session_key时,如果报出如下错误,则需清除全部缓存,重新编译(应该是更改过appid,开发工具的坑,不清除全部缓存,会出现这个错误):
invalid code, hints: [ req_id: CPAsWa0325ha57 ]
2. 解密接口返回-41003,则检查接口参数:
逍遥云天 微信小程序开发之获取用户手机号码——使用简单php接口demo进行加密数据解密的更多相关文章
- 微信小程序开发之获取用户手机号码——使用简单php接口demo进行加密数据解密
后边要做一个微信小程序,并要能获取用户微信绑定的手机号码.而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如 ...
- 微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
- C#微信小程序服务端获取用户解密信息
using AIOWeb.Models; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.C ...
- [小程序]微信小程序登陆并获取用户信息
1.小程序js端调用框架登陆API,获取到一个临时code,拿着这个code去调用自己的服务端接口 2.在自己的服务器端,使用app_id app_secrect code可以获取到用户的openid ...
- 微信小程序开发之获取openid及用户信息
1. 获取openid 1.1 获取code 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的会话密钥(session_key).用户数据的加解 ...
- 【微信小程序】如何获取用户绑定手机号
用户调用wx.login()方法,获取登录用户凭证code wx.login({ success: function(res) { console.log('loginCode', res.code) ...
- 微信小程序开发总结(一)
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...
- 微信小程序案例:获取微信访问用户的openid
在微信开发项目中,获取openid是项目常遇的问题,本文通过主要讲解实现在微信小程序中如何获取用户的openid,案例实现非常简单 具体实现方法是通过登录接口获取登录凭证,然后通过request请求微 ...
- 支付宝小程序与微信小程序开发功能和语法糖不同
最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...
随机推荐
- css-flex布局知识梳理
一.传统的布局 布局的传统解决方案,基于盒装模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 二. Flex的 ...
- 20个实用javascript技巧及实践(二)
21. 使用逻辑AND/OR来处理条件语句 var foo =10; foo ==10&& doSomething();// is the same thing as if (foo ...
- Python入门-函数进阶
昨天我们简单的了解了函数的定义,调用,以及传参,其实还有一个更重要的传参:动态传参,让我们继续昨天没有说完的,以及今天我要分享的东西. 一.动态传参 之前我们说过了传参,如果我们需要给一个函数传参,而 ...
- css3+javascript旋转的3d盒子
今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来 今天带了css3新属性3d <!DOCTYPE html> <html> <head ...
- 001Java锁之synchronized
01.synchronized & Lock synchronized锁同步 软件层面依赖JVM Lock锁同步 硬件层面依赖cpu指令 02.synchronized作用域 方法:锁住对象实 ...
- 【Web crawler】simulated DFS web crawler
Finish crawl web learned from udacity 提示:在某些时候,你必须在page上调用get_page.这似乎违反直觉,但是我们用 page 这个词时,指的网页的网址 ( ...
- JS复制DOM元素文字内容
要实现的效果:将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制. 实现过程如下: <html> <head> <title>Copy text De ...
- DevExpress 中 GridControl 的数据源DataTable 内容改变后 重新绑定
1.datatable dt=new datatable(); 2.dt 内容改变 dt.columns.add("col1"); dt.columns.add("col ...
- VS2015配置Entity Framework Power Tools Bate4,还有一些使用与注意的地方
今天使用vs2015重新安装了这个名为Entity Framework Power Tools的插件,由于它只支持到2013,因此需要进行一些操作方能使用 下面是一些参考文档 http://www.c ...
- 在ubuntu16.04上安装eclipse
在ubuntu16.04上安装eclipse 一.下载 首先我们需要安装jdk1.8及其以上,然后从官网:https://www.eclipse.org/downloads/上下载,需要注意 ...