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


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焦点图切换特效插件封装实例
Aug 18 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
vue中render函数的使用详解
Oct 12 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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 函数使用方法与函数定义方法
2010/05/09 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
Python实现查找系统盘中需要找的字符
2015/07/14 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
查看Django和flask版本的方法
2018/05/14 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
园林施工员岗位职责
2013/12/11 职场文书
我未来的职业规划范文
2014/01/11 职场文书
产品质量承诺书
2014/03/27 职场文书
文化产业实施方案
2014/06/07 职场文书
推广普通话标语
2014/06/27 职场文书
2014年仓库工作总结
2014/11/20 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
预备党员群众意见
2015/06/01 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL