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


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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
JQuery this 和 $(this) 的区别
Aug 23 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
React服务端渲染原理解析与实践
Mar 04 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
JS获取整个页面文档的实现代码
2011/12/15 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
北京银河万佳Java面试题
2012/03/21 面试题
就业表自我评价分享
2014/02/06 职场文书
说明书怎么写
2014/05/06 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
优秀党员个人总结
2015/02/14 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python