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


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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 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/10/11 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python的词法分析与语法分析
2013/05/18 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python聊天室程序(基础版)
2018/04/01 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python实现的config文件读写功能示例
2019/09/24 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Python如何实现定时器功能
2020/05/28 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
服务生自我鉴定
2014/01/22 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
生物工程专业求职信
2014/09/03 职场文书
教师师德工作总结2015
2015/07/22 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
python缺失值的解决方法总结
2021/06/09 Python
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers