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


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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
jquery自定义表格样式
Nov 23 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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类的使用 实例代码讲解
2009/12/28 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
js静态作用域的功能。
2006/12/25 Javascript
jquery插件之easing使用
2010/08/19 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
js图片预加载示例
2014/04/30 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
python魔法方法-自定义序列详解
2016/07/21 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
教育见习报告范文
2014/11/03 职场文书
教师节主持词开场白
2015/05/29 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB