微信小程序获取手机号授权用户登录功能


Posted in Javascript onNovember 09, 2017

小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写。

1.getPhoneNumber这个组件通过button来实现(别的标签无效)。将button中的open-type=“getPhoneNumber”,并且绑定bindgetphonenumber事件获取回调。

<span style="font-size:14px;"><button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button></span>

2.在使用这个组件之前必须先调用login接口,如果没有调用login点击button时会提示先调用login。

App({  
  onLaunch: function () {  
    wx.login({  
      success: function (res) {  
        if (res.code) {  
          //发起网络请求  
          console.log(res.code)  
        } else {  
          console.log('获取用户登录态失败!' + res.errMsg)  
        }  
      }  
    });  
  }  
})

3.通过bindgetphonenumber绑定的事件来获取回调。回调的参数有三个,

errMsg:用户点击取消或授权的信息回调。

iv:加密算法的初始向量(如果用户没有同意授权则为undefined)。

encryptedData: 用户信息的加密数据(如果用户没有同意授权同样返回undefined)

微信小程序获取手机号授权用户登录功能

getPhoneNumber: function(e) {   
  console.log(e.detail.errMsg)   
  console.log(e.detail.iv)   
  console.log(e.detail.encryptedData)   
  if (e.detail.errMsg == 'getPhoneNumber:fail user deny'){  
   wx.showModal({  
     title: '提示',  
     showCancel: false,  
     content: '未授权',  
     success: function (res) { }  
   })  
  } else {  
   wx.showModal({  
     title: '提示',  
     showCancel: false,  
     content: '同意授权',  
     success: function (res) { }  
   })  
  }  
 }

4.最后我们需要根据自己的业务逻辑来进行处理,如果用户不同意授权的话可能我们会有一个让他手动输入的界面,如果不是强制获取手机号的话可以直接跳转页面进行下一步。(用户不同意授权errMsg返回‘getPhoneNumber:fail user deny')

5.用户同意授权,我们可以根据login时获取到的code来通过后台以及微信处理拿到session_key,最后通过app_id,session_key,iv,encryptedData(用户同意授权errMsg返回‘getPhoneNumber:ok')

总结

以上所述是小编给大家介绍的微信小程序获取手机号授权用户登录功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 #jQuery
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 #Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 #Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 #Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
基于Datatables跳转到指定页的简单实例
Nov 09 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python切割图片的示例
2020/11/12 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
城市创卫标语
2014/06/17 职场文书
班主任工作实习计划
2015/01/16 职场文书
我的中国梦主题班会
2015/08/14 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis