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


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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
新闻编辑自荐信
2013/11/03 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
工程总经理工作职责
2013/12/09 职场文书
教育孩子心得体会
2014/01/01 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
庆祝教师节标语
2014/10/09 职场文书
党员检讨书
2014/10/13 职场文书
童年读书笔记
2015/06/26 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python