小程序前端获取手机号码

正常开发中，前端通过getUserInfo来获取用户的code，并且在用户点击授权获取手机号码的按钮后，将encryptedData提交给后端，后端通过openid及encryptedData来解密手机号码信息。
因为本项目无后端的特殊开发情况，现在这部分工作在前端完成。
注：前端使用uni-app框架，如果使用小程序原生开发，则将代码中的方法替换为原生方法。

1.页面onload时获取code，并通过code请求微信api获取openid及session_key，在解密手机号码中会使用到。

onLoad() {//一打开就请求codevar that = this;uni.login({provider: 'weixin',success(res) {that.code = res.code;that.getOpenid(false);}})
},
methods: {// 获取openidgetOpenid(callBackfn,obj){uni.request({url: 'https://api.weixin.qq.com/sns/jscode2session',method: 'GET',data: {appid: this.$appid, //你的小程序的APPID  secret: this.$secret, //你的小程序的secret,  js_code: this.code, //wx.login 登录成功后的code  grant_type: 'authorization_code',},success: (cts) => { // 换取成功后 暂存这些数据 留作后续操作  this.openId = cts.data.openid //openid 用户唯一标识  this.session_key = cts.data.session_key //session_key  会话密钥  if(callBackfn && obj){callBackfn(obj);}}})},
}

2.用户点击获取手机号码按钮，拿到encryptedData，在这块需要注意一下，code的获取一定要在getphone之前，要不可能会解密报错。

按钮：
<buttonopen-type="getPhoneNumber"@getphonenumber="getphone"
>一键获取</button>方法：
//获取手机号
getphone(e) {if (!e.detail.iv) {uni.showToast({title: '获取手机号失败',icon: 'none'})return;}var that = this;//验证code值是否过期uni.checkSession({success(val) {if (val.errMsg == 'checkSession:ok') {var obj = {code: that.code,iv: e.detail.iv,encryptedData: e.detail.encryptedData}that.decryptPhone(obj);} else {uni.login({provider: 'weixin',success(res) {let code = res.code;var obj = {code,iv: e.detail.iv,encryptedData: e.detail.encryptedData}that.getOpenid(that.decryptPhone,obj);}})}}})},

3.解密手机号码需要解密文件WXBizDataCrypt，下载地址：服务端获取开放数据

import WXBizDataCrypt from '@/util/WXBizDataCrypt.js'
//解密手机号
decryptPhone(obj) {let pc = new WXBizDataCrypt(this.$appid, this.session_key);let data = pc.decryptData(obj.encryptedData, obj.iv);console.log('data:',data);
},

小程序前端获取手机号码相关推荐

小程序之获取手机号码
一.问题(业务描述). 在做小程序开发中,获取用户的信息是基本操作,需要获取到用户手机等信息.而手机号码则不能直接从小程序的getUserInfo这个api直接获得,需要后端配合解密才能获取. 二.实 ...
微信小程序-前端获取当前小程序APP-ID
微信小程序:wx.getAccountInfoSync().miniProgram.appId uni-app:uni.getAccountInfoSync().miniProgram.appId 获 ...
Java-(二)微信小程序授权获取用户信息和手机号码
第一篇我们已经知道了微信小程序怎么授权登录获取用户信息. openId 和 unionId .下面将高速告诉大家,微信小程序如何授权获取用户信息和手机号码. 微信官方文档:https://develo ...
微信小程序前端解密获取手机号
微信小程序在获取用户手机号时安全正确的做法是把获取的iv等信息传递给后端,让后端解密,再提供接口返回给前端:这个是正规的流程. 但要是遇到一个比较一般的后端或者懒的后端的话,前端也可以考自己完成手机号 ...
微信小程序授权获取用户信息和手机号码
微信小程序授权获取用户信息和手机号码 1.微信官方文档登录:https://developers.weixin.qq.com/miniprogram/dev/framework/open-abili ...
微信小程序班级小管家前端获取
大家好,我是哈哈哥.前段时间写了一篇关于微信小程序前端的反编译教程,然后就有很多人找到我问:你那套脚本是真的吗?真的可以反编译大部分的小程序前端吗?那么耳听为虚,眼见为实.今天哈哈哥就拿最近很火的小程 ...
小程序登录状态/手机号码获取
前言:微信敏感数据需要加解密小程序调用wx.login() 获取临时登录凭证code ,并回传到开发者服务器. 开发者服务器以code换取用户唯一标识openid 和会话密钥session_k ...
微信小程序搜索功能！附：小程序前端+PHP后端
开发需求微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路. 流程 1.表单(输入框.提交按钮.提交的name值) 2.接收 ...
微信小程序框架——微信小程序前端开发工具
微信小程序框架框架小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 Java ...

小程序前端获取手机号码

小程序前端获取手机号码

小程序前端获取手机号码相关推荐

最新文章

热门文章