微信小程序如何通过用户授权获取手机号(getPhoneNumber)

2024-09-30 07:47:00

这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

小程序有一个获取用户很便捷的api，就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意，现在微信和注重用户体验，有些方法都是需要用户主动去触发才能调用的，比如getPhoneNumber。

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

实现思路：

直接上干货：

1、

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

2、JS内getPhoneNumbe组件函数（该事件中最重要的就是在wx.login登录后发起接口请求），这里需要配置参数来给接口：

这些是必不可少的参数，这些齐备才能算一个合法的请求。

appid: “你的小程序APPID”,
secret: “你的小程序appsecret”,
code: res.code,
encryptedData: telObj,
iv: ivObj

//通过绑定手机号登录
　　getPhoneNumber: function (e) {
   var ivObj = e.detail.iv
   var telObj = e.detail.encryptedData
   var codeObj = "";
   var that = this;
   //------执行Login---------
   wx.login({
    success: res => {
     console.log('code转换', res.code);

　　　　　　//用code传给服务器调换session_key
     wx.request({
      url: 'https://你的接口文件路径', //接口地址
      data: {
       appid: "你的小程序APPID",
       secret: "你的小程序appsecret",
       code: res.code,
       encryptedData: telObj,
       iv: ivObj
      },
      success: function (res) {
       phoneObj = res.data.phoneNumber;
       console.log("手机号=", phoneObj)
       wx.setStorage({  //存储数据并准备发送给下一页使用
        key: "phoneObj",
        data: res.data.phoneNumber,
       })
      }
     })

     //-----------------是否授权，授权通过进入主页面，授权拒绝则停留在登陆界面
     if (e.detail.errMsg == 'getPhoneNumber:user deny') { //用户点击拒绝
      wx.navigateTo({
       url: '../index/index',
      })
     } else { //允许授权执行跳转
      wx.navigateTo({
       url: '../test/test',
      })
     }
    }
   });
},

最终结果展示：

点击"拒绝"，开发者能捕捉到该事件，此时getPhoneNumber 函数返回 e.detail.errMsg 为 getPhoneNumber:user deny

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序功能函数小结(手机号验证*、密码验证*、获取验证码*)

下面一小段代码给大家介绍微信小程序功能函数密码验证*,具体代码如下所示: //登录输入密码 userPasswordInput: function (e) { var that = this; this.setData({ userPassword: e.detail.value }) // console.log(e.detail.value.length) // console.log(e.detail.value); var value = e.detail.value var str
Java解密微信小程序手机号的方法

本文实例为大家分享了Java解密微信小程序手机号的具体代码,供大家参考,具体内容如下第一步:创建AES解密工具类:代码如下 import org.apache.commons.codec.binary.Base64; import javax.crypto.Cipher; import javax.crypto.KeyGenerator; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySp
微信小程序获取用户绑定手机号方法示例

用户调用wx.login()方法,获取登录用户凭证code wx.login({ success: function(res) { console.log('loginCode', res.code) } }); code传给后台,凭证code获取session_key和openid https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=aut
微信小程序如何获取用户手机号

最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: public class MyHttpUrlConnection { private final i
微信小程序用户授权、位置授权及获取微信绑定手机号

1.位置授权位置授权相对简单,可以直接调用方法wx.getLocation()就可以弹出授权框, 在调用前需要在app.json中设置用途说明 Page({ "permission": { "scope.userLocation": { "desc": "你的位置信息将用于xxx" } } }) 授权框但是存在不少用户会拒绝授权,如果拒绝授权就不会再弹窗,而是直接进入接口 fail 回调,就要手动授权,我们可以通过自定义弹
微信小程序绑定手机号获取验证码功能

微信小程序验证码获取方式,代码如下所示:  <view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> <input name="phone" type='number' placeholder=&quo
微信小程序获取用户信息及手机号（后端TP5.0）

本文实例为大家分享了微信小程序获取用户信息及手机号的具体代码,供大家参考,具体内容如下 wxml页面 <view wx:if="{{config.tipsshow1}}" class='dialog-container'> <view class='dialog-mask'></view> <view class='dialog-info'> <view class='dialog-title'>login prompt<
微信小程序利用云函数获取手机号码

小程序获取手机号码方式一.取到加密数据,然后提交到服务器解密, 二.获取到 cloudID,用云函数, 优点:直接获取原始数据,节省服务器资源 1.xml <button class="gettel" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> 快捷获取</button> 2. 点击按钮调用云函数,将cloudID传给云函数 getPho
微信小程序如何通过用户授权获取手机号(getPhoneNumber)

这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber. 官方文档:https://developers.weixin.qq.com/minipr
微信小程序用户授权获取手机号（getPhoneNumber）

前言小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber. 实现思路: 1.通过wx.login获取code,从而获取到用户的openID和sessionKey 2.通过getPhoneNumber获取encryptedData,iv 3.通过参数[encryptedData] .[iv] .[sessionKey] 请求后
微信小程序登录方法之授权登陆及获取微信用户手机号

目录先看一下小程序的登陆流程第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器. 第二步,获取用户信息,点击事件,获取用户授权,用户同意后然后返回信息第三步,获取用户手机号结束语先看一下小程序的登陆流程使用说明注意: 调用 auth.code2Session 接口,换取用户唯一标识 OpenID . 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和会话密钥 session_k
微信小程序后台解密用户数据实例详解

微信小程序后台解密用户数据实例详解微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html openId : 用户在当前小程序的唯一标识因为最近根据API调用https://api.weixin.qq.com/sns/jscode2session所以需要配置以下服务,但是官方是不赞成这种做法的, 而且最近把在服务器配置的方法给关闭了.也就是说要获取用户openid,地区等信息只能在后台获取. 一下是官方的
微信小程序使用form表单获取输入框数据的实例代码

本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng
微信小程序扫描二维码获取信息实例详解

1.最简单的扫二维码获得信息. 首先,在网上找一个二维码生成网站,生成一个二维码,我用的是草料二维码,随便生成了一个二维码做测试. 就这个. 我搭建的界面如下: 如图可见,点击1中的"点我扫一扫",可以扫二维码,扫错了如2所示,扫对了如3所示."你傻不傻啊?"就是上图的二维码内容. 嗯,大家都不傻. 4是小程序的结构,就是快速模板建立的,index页面里的内容都删空了,替换了新的代码,其中wxss文件没有东西,因为并没有对界面进行设计. 其中index.wxml的代
微信小程序mpvue点击按钮获取button值的方法

在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法方式一:数据绑定这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能.分享给大家供大家参考,具体如下: 效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city 指定位置的天气数据. WXML <view class="map-weather"> <view><text>城市:</text&
微信小程序实现限制用户转发功能的实例代码

在上篇文章给大家提到微信小程序实现禁止分享代码实例,感兴趣的朋友可以点击查阅.今天继续给大家分享微信小程序实现限制用户转发功能,一起看看吧! 在小程序的开发过程,你是不是也经常遇到这么一个需求,用户希望某个页面只能自己转发分享,不希望被别人再次分享出去,接下来我们聊聊如何实现这个功能. 限制用户转发需要解决两个问题: 关闭系统右上角菜单栏中的转发功能隐藏群聊会话中长按转发分享的功能 1.关闭系统右上角菜单栏中的转发功能通过调用微信 API:wx.hideShareMenu({ }) 关闭当前
微信小程序实现基于三元运算验证手机号/姓名功能示例

本文实例讲述了微信小程序实现基于三元运算验证手机号/姓名功能.分享给大家供大家参考,具体如下: wxml部分: <view class="fl_form" style="position:relative;padding-top:20rpx;"> <text><text style="color:red;padding-right:10rpx">*</text>您的姓名</text> &

微信小程序如何通过用户授权获取手机号(getPhoneNumber)

相关推荐

随机推荐