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


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和frame)的技巧
Mar 08 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
Vue基础配置讲解
Nov 29 Javascript
Vue快速实现通用表单验证功能
Dec 05 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 curl使用实例
2015/07/02 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
使用console进行性能测试
2015/04/27 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
Python版微信红包分配算法
2015/05/04 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
详解Django中间件执行顺序
2018/07/16 Python
Python实现最常见加密方式详解
2019/07/13 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
药品开票员岗位职责
2015/04/15 职场文书
在校学生证明格式
2015/06/24 职场文书
志愿服务心得体会
2016/01/15 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server