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


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 相关文章推荐
文字幻灯片
Jun 26 Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
js实现图片360度旋转
Jan 22 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
推荐几个开源的微信开发项目
2014/12/28 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
jquery.validate分组验证代码
2011/03/17 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python实现dict版图遍历示例
2014/02/19 Python
Python编程之多态用法实例详解
2015/05/19 Python
python 调用HBase的简单实例
2016/12/18 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
售后服务经理岗位职责范本
2014/02/22 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
理发店策划方案
2014/06/05 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
杭白菊导游词
2015/02/10 职场文书
廉政承诺书范文
2015/04/28 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
go语言中http超时引发的事故解决
2021/06/02 Golang
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python