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


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 31 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Python 数据结构之旋转链表
2017/02/25 Python
python3大文件解压和基本操作
2017/12/15 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
土地租赁意向书
2014/07/30 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年财务部工作总结
2015/04/10 职场文书
第一军规观后感
2015/06/12 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
一文带你探究MySQL中的NULL
2021/11/11 MySQL
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers