小程序 获取手机号

 【参考小程序开发文档:开发-指南-开放能力-用户信息-获取手机号】 

  1. 地理位置 wx.getLocation(Object object) | 微信开放文档

  2. 手机号 获取手机号 | 微信开放文档

  3. 微信信息 小程序与小游戏获取用户信息接口调整,请开发者注意升级。 | 微信开放社区


目录

1. 介绍

2. 使用方法:

 3. 手机号解密

3.1 解密需要的数据

3.2 准备解码包

3.3 全部代码


1. 介绍

 从基础库 2.21.2 开始,对获取手机号的接口进行了安全升级,以下是新版本接口使用指南。(旧版本接口目前可以继续使用,但建议开发者使用新版本接口,以增强小程序安全性)

因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发。另外,新版本接口不再需要提前调用 wx.login 进行登录。

注意:目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。

: 小程序需要认证,个人小程序无法获取。

微信小程序获取手机号提示appId没有权限? | 微信开放社区

小程序微信认证认证审核问题汇总 | 微信开放社区https://developers.weixin.qq.com/community/develop/doc/000c06209dc0b0fff579159dd56c09

2. 使用方法:

需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到动态令牌code,然后把code传到开发者后台,并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口,消费code来换取用户手机号。每个code有效期为5分钟,且只能消费一次

注:getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的,不能混用。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">读取用户手机号</button>Page({getPhoneNumber (e) {console.log(e)}
})

通过上面代码,就可以弹出获取手机号的对话框:

点击 手机号 button 获取到的返回值
用户点击同意后,button 获取到的返回值 e 打印结果

 3. 手机号解密

微信小程序获取手机号并解密详解_a_115098的博客-CSDN博客_微信小程序获取手机号解密微信小程序获取手机号并解密1 获取手机号2 解密2.1 获取所需数据2.2 解密返回数据1 获取手机号获取手机号的过程官方文档有详细的介绍。参考官方链接要注意的是,此功能只对非个人且完成认证的开发者开发,个人开发者无法使用该功能。获取微信用户绑定的手机号,需先调用wx.login接口。//wxml文件使用button按钮触发获取手机号事件,open-type="getPhoneNumber" 不能少<button open-type="getPhoneNumber" bindgetphonehttps://blog.csdn.net/a_115098/article/details/108491494微信小程序:40029错误(invalid code) - 简书做小程序授权登录获取openid时遇到以下错误: {"errcode":40029,"errmsg":"invalid code, hints: [ req_id: m3yw...https://www.jianshu.com/p/a73c7afddb77

https://www.jianshu.com/p/e67c1c741a92icon-default.png?t=M85Bhttps://www.jianshu.com/p/e67c1c741a92 微信小程序获取用户openid(详解)_老张在线敲代码的博客-CSDN博客_微信小程序获取openid获取openid首先需要调用小程序的login方法获取小程序的登录凭证code,然后使用code向微信换取登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)我这里是用一个点击事件来触发一个函数wx.getUserInfo 会获取到你的一些信息 比如名字打印结果wx.login 可以获取到你的code值打印结果通过wx.request 来让code换取openid这个地址可以在开发文档=>服务器=>登录中 找到这段链接中有三处地方需要改动(每个人https://blog.csdn.net/qq_47272950/article/details/125762901

        根据官方最新文档描述,可以通过 bindgetphonenumber 事件回调获取到动态令牌code,但是在上面打印结果中,并没有返回 code ,所以我们仍然采用旧版接口指南。

1. 介绍

获取微信用户绑定的手机号,需先调用wx.login接口。

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

2. 使用方法

需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调 获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号

3. 注意事项

在回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。

3.1 解密所需数据

         了解了上面所说,手机号码解密主要使用到的数据为:

  • appId(AppID,微信公众平台官网-开发-开发管理-开发设置);
  • session_key( 需要先通过 wx.login 接口获得临时登录凭证 code,再用 wx.request 请求,这个过程还需要 appSecret【微信公众平台官网-开发-开发管理-开发设置】);
  • encryptedData(上面获取的e.detail.encryptedData);
  • iv(上面获取的e.detail.iv)。

获取 session_key 整个过程的代码:

//wx.login获取 code, 再通过wx.request获取 session_key
wxLogin(callback){var that = this;wx.login({success (res) {wx.request({url: 'https://api.weixin.qq.com/sns/jscode2session?appid='+app.appId+'&secret='+app.appSecret+'&js_code=' + res.code + '&grant_type=authorization_code',method: 'POST',header: { 'content-type': 'application/json' },success: function (obj) {//获取openid, session_keythat.setData({"sessionKey": obj.data.session_key});}})}}); //wx.login 结束
}

        该官方接口只推荐在测试过程中使用,使用该接口需开启微信开发者工具-详情-本地设置-不校验合法域名…,投入使用时需在服务器端进行配置,具体方法可参考最下方文章链接。

3.2 准备解码包

手机号码解密主要使用的是 CryptoJS 包,点击下载。微信官方提供了多种编程语言的示例代码,(点击下载)但是没有js包,这里根据参考进行了稍微修改。

下面是一篇比较详细的文章,值得一看。

https://www.jb51.net/article/186483.htmhttps://www.jb51.net/article/186483.htm

  1. 下载上面的压缩包,整个压缩包解压到 utils文件夹下;
  2. 在 utils 文件夹下新建 WXBizDataCrypt.js 文件
    /*** Created by rd on 2017/5/4.*/
    // 引入CryptoJS  路径依个人导入情况变动
    var Crypto = require('./cryptojs-master/cryptojs').Crypto;
    var app = getApp();function RdWXBizDataCrypt(appId, sessionKey) {this.appId = appIdthis.sessionKey = sessionKey
    }RdWXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {// base64 decode :使用 CryptoJS 中 Crypto.util.base64ToBytes()进行 base64解码var encryptedData = Crypto.util.base64ToBytes(encryptedData)var key = Crypto.util.base64ToBytes(this.sessionKey);var iv = Crypto.util.base64ToBytes(iv);// 对称解密使用的算法为 AES-128-CBC,数据采用PKCS#7填充var mode = new Crypto.mode.CBC(Crypto.pad.pkcs7);try {// 解密var bytes = Crypto.AES.decrypt(encryptedData, key, {asBpytes:true,iv: iv,mode: mode});var decryptResult = JSON.parse(bytes);} catch (err) {console.log(err)}return decryptResult
    }module.exports = RdWXBizDataCrypt
    
  3. 使用:
    var WXBizDataCrypt = require('../../../utils/WXBizDataCrypt');var pc = new WXBizDataCrypt(appId, sessionKey);
    var data = pc.decryptData(encryptedData , iv);
    console.log('解密后 data: ', data)

3.3 全部代码

<button open-type="getPhoneNumber" bind:getphonenumber="getPhoneNumber">读取用户手机号</button>
// pages/onePages/userInfo/userInfo.js
const app = getApp();
var WXBizDataCrypt = require('../../../utils/WXBizDataCrypt');
Page({//页面的初始数据data: {encryptedData: "", //手机号的加密数据iv: "",sessionKey: "", //wx.login,获取session_keyphone: "",nick: "",},//生命周期函数--监听页面显示onShow: function () {     this.wxLogin();},//通过绑定手机号登录getPhoneNumber: function (e) {var that = this;console.log("点击按钮获取手机号",e); //获取encryptedData、iv,encryptedData就是加密的数据if(e.detail.errMsg == 'getPhoneNumber:fail no permission'){app.utils.showToast("小程序未认证", "none", 1000);return false;} else if(e.detail.iv == undefined || !e.detail.iv){app.utils.showToast("授权失败", "none", 1000);return false;} else if(e.detail.errMsg == 'getPhoneNumber:user deny'){//用户拒绝授权,停留在当前页} else {  that.setData({ "encryptedData": e.detail.encryptedData, "iv": e.detail.iv });//检查session_key 是否失效,失效会导致手机号获取两次的问题   wx.checkSession({success: (res) => { console.log("未失效", res)var pc = new WXBizDataCrypt(app.appId, that.data.sessionKey);var data = pc.decryptData(that.data.encryptedData, that.data.iv);console.log("解密后Data",data);wx.setStorageSync('phone', data.phoneNumber);wx.redirectTo({ url: '/pages/onePages/home/home' });},fail: (err)=>{ console.log("失效 重新wx.login")that.wxLogin(function(){var pc = new WXBizDataCrypt(app.appId, that.data.session_key);var data = pc.decryptData(that.data.encryptedData, that.data.iv);wx.setStorageSync('phone', data.phoneNumber); //将手机号存storagewx.redirectTo({ url: '/pages/onePages/home/home' });}) }})}}, //获取手机号//手机号解码:wx.login获取 code, 再通过wx.request获取 session_keywxLogin(callback){var that = this;wx.login({success (res) {// console.log("wx.login",res)  //wx.login获取 codewx.request({url: 'https://api.weixin.qq.com/sns/jscode2session?appid='+app.appId+'&secret='+app.appSecret+'&js_code=' + res.code + '&grant_type=authorization_code',method: 'POST',header: { 'content-type': 'application/json' },success: function (obj) {// console.log("解密",obj); //获取openid, session_keythat.setData({"sessionKey": obj.data.session_key});if(callback) callback();}})}}); //wx.login 结束}}) 

对小程序开发还不太熟悉, 有问题欢迎指出


        今天打开小程序看了一下,发现获取手机号不成功,这是因为 在2022.4.22 微信官方修复了前端解密手机号的漏洞:安全课堂|关于小程序session_key泄露漏洞 | 微信开放社区。关于安全性的东西,还是得走后台呐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

1、代码 &#xff08;1&#xff09;示例代码1 <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><meta http-e…

小程序 获取当前城市位置-高德地图

微信小程序 wx.getLocation 只能获取到经纬度&#xff0c;想要获取具体城市信息&#xff0c;需要使用地图插件。公司要求使用 高德地图&#xff0c;在使用上&#xff0c;几个地图的代码步骤都差不多。 目录 1. 查看官方文档 1.1 申请高德地图Key&#xff0c;点击查看申请key…

网页端调用企业微信扫一扫 详细过程

效果展示&#xff08;需要使用微信内置浏览器打开&#xff09;&#xff1a; 目录 1. 快速集成H5开发应用 1.1 开始 1.2 创建应用 1.2.1 登录管理后台 1.2.2 添加自建应用 1.2.3 配置应用 1.2.4 获取应用的 AgentID 与 Secret 1.3 配置应用 1.3.1 配置应用主页 1.3.2 配置…

获取ip地址

代码 ///<summary>///取得客户端真实IP。如果有代理则取第一个非内网地址 ///</summary>publicstringIPAddress { get{ stringresult String.Empty; result HttpContext.Current.Request.ServerVariables["HTTP_X_FORWAR…

微信小程序 监听位置信息

wx.onLocationChange(function callback) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.onLocationChange.html 小程序 获取当前城市位置-高德地图_Start2019-CSDN博客小程序获取位置信息&#xff0c;包括省市区、用户…

通过构建Cocoapods私有库进行组件化开发探索

专题一 一、创建私有索引库 选Github或者码云都可以&#xff0c;本例以Github为例。创建私有索引库用来作为自己组件库的索引&#xff1a; 二、本地添加私有索引库 添加&#xff1a;pod repo add 索引库名称 索引库地址 例&#xff1a;pod repo add ZYHModule https://github.c…

layui 父页面弹框中获取子页面的内容

layer弹层组件开发文档 - Layuihttps://www.layui.site/doc/modules/layer.html#layer.getChildFrame 需求及代码分析 如上图&#xff0c;原来是点击一个按钮跳转到子页面&#xff0c;现在想改为&#xff1a;点击按钮&#xff0c;在当前页打开。因为不想要重写子页面的样式及内…

在JBoss Fuse / Fabric8 / Karaf中使用Byteman

您是否曾经尝试过了解一些非常简单的方法不起作用的过程&#xff1f; 您正在任何众所周知的上下文中编写代码&#xff0c;无论出于何种原因它都无法正常工作。 而且您信任您的平台&#xff0c;因此您认真阅读了所有日志。 而且&#xff0c;您仍然不知道为什么某些行为不符合预…

个人作业——Alpha项目测试

一、 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/ 这个作业要求在哪里 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/3338 团队名称 西柚皇家编程团队&#xff1a;https://www.cnblogs.com/TakeRa…

Windows7下Docker的安装

转自 https://blog.csdn.net/xiangxiezhuren/article/details/79698913 无法打开图3&#xff0c;打开属性。给其添加git路径 无法使用图2下载 https://www.cnblogs.com/huang-yc/p/10350408.html 转载于:https://www.cnblogs.com/shufeiyang/p/11016177.html

简而言之,JUnit:单元测试断言

简而言之&#xff0c;本章涵盖了各种单元测试断言技术。 它详细说明了内置机制&#xff0c; Hamcrest匹配器和AssertJ断言的优缺点 。 正在进行的示例扩大了该主题&#xff0c;并说明了如何创建和使用自定义匹配器/断言。 单元测试断言 信任但要验证 罗纳德里根&#xff08;R…

vue 安装使用mockjs

使用 mockjs 的案例过程&#xff1a; 1. 安装 npm install axios -S npm install mockjs --save-dev npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置_jwl_willon的博客-CSDN博客_npm save备注&#xff1a;<> 意为等价于&#xff1b;1、npm install …

大数据学习——SparkStreaming整合Kafka完成网站点击流实时统计

1.安装并配置zk 2.安装并配置Kafka 3.启动zk 4.启动Kafka 5.创建topic [rootmini3 kafka]# bin/kafka-console-producer.sh --broker-list mini1:9092 --topic cyf-test 程序代码 package org.apache.sparkimport java.net.InetSocketAddressimport org.apache.spark.HashParti…

日期/时间格式/解析,Java 8样式

自Java 几乎 开始以来&#xff0c;Java开发人员就通过java.util.Date类&#xff08;自JDK 1.0起&#xff09;和java.util.Calendar类&#xff08;自JDK 1.1起 &#xff09;来处理日期和时间。 在这段时间内&#xff0c;成千上万&#xff08;甚至可能数百万&#xff09;的Java开…

无废话WPF系列5:控件派生图

1. WPF类控件的派生关系图&#xff0c;紫色的部分开始才算是进入WPF的框架里。 2. WPF控件图 WPF的UI控件主要有以下类型&#xff0c;ContentControl, HeaderedContentControl, ItemsControl, HeaderedItemsControl, Panel, Adorner(文字点缀元素), Flow Text(流式文本元素), T…

安装ipython和jupyter

本节内容&#xff1b; 安装ipython安装jupyterPycharm介绍 Python软件包管理一、安装ipython 1. python的交互式环境2. 安装ipython 可以使用pip命令安装。如果你是用pyenv安装的python的话&#xff0c;pip命令已经有了。 当需要安装包的时候&#xff0c;最好进入虚拟环境&…

vue 图片资源应该如何存放并引入(public、assets)?

全局cli配置&#xff1a;vue.config.js 之前写项目就想着怎么简单怎么来&#xff0c;图片要用了&#xff0c;就直接在要用图片的页面&#xff0c;新建一个跟页面同等级的 imgs 文件夹&#xff0c;然后在页面中直接 “./imgs/图片.png”&#xff0c;不得不说这样写很方便。 但是…

layui 树形组件下拉框

采用 layui 树形组件&#xff0c;版本&#xff1a;V2.6.8。只需要更新layui版本&#xff0c;不需要下载tableSelect。 原作者博客&#xff1a;https://blog.csdn.net/m0_67402588/article/details/123526860。 从 官网 更新日志可以看到&#xff0c;树形组件在2.5.7版本还在更新…

layui table表格的复选框checkbox设置部分为不可选

需求&#xff1a;如上图&#xff0c;某些数据禁用删除功能&#xff0c;那么全选时&#xff0c;这些数据前面的复选框也不能选。 实现&#xff1a;在layui数据表格中设置了字段为 type:checkbox 但是想要实现部分不显示&#xff0c;不可选的功能。layui内置没有该功能&#xff…

layui upload阻止文件上传问题,及多选文件上传

1、效果展示&#xff1a; 2、需求&#xff1a; 下拉框及月份都为不空&#xff0c;且有文件数据才能提交上传。 3、环境&#xff1a; 目前项目中引用的 layui 版本是 2.4.5。在 before 中进行判断&#xff0c;使用 return false 想要阻止文件上传没反应&#xff0c;文件仍然会…