微信小程序获取微信绑定授权手机号

news/2024/7/20 4:33:56 标签: 小程序, 手机号

方法:

1、使用<button>组件,并将该组件的open-type的属性值设置为getPhoneNumber,绑定bindgetphonenumber事件
2、当用户点击允许时,可以通过绑定事件的回调获取到微信服务返回的加密数据
3、调用login接口,获取到用户的code
4、将获取手机号事件返回的加密数据结合sessionkey、appid以及login接口返回的code传给后端提供的接口进行解密获取手机号

示例:

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> </button>
Page({ 
    getPhoneNumber: function(e) { 
        console.log(e.detail.errMsg) 
        console.log(e.detail.iv) 
        console.log(e.detail.encryptedData) 
    } 
})

返回参数说明:

encryptedData(String):包括敏感数据在内的完整用户信息的加密数据
iv(String):加密算法的初始向量
errMsg(String):信息

敏感数据的获取大多都是将以上返回的除errMsg之外参数以及code传给后端提供的接口,由后端进行解密后返回解密后的数据,获取到的解密数据如下:

{
	"code":200,
    "phoneNumber": "xxxxx",  
    "purePhoneNumber": "xxxxx", 
    "countryCode": "86",
    "msg": "请求成功",
    "time": "1590486884",
    "watermark":
    {
        "appid":"APPID",
        "timestamp":"1590486884"
    }
}

具体示例:

getPhoneNumber: function (e) {
    console.log(e.detail.iv);
    console.log(e.detail.encryptedData);
    wx.login({
        success: res => {
            console.log(res.code);
            if(res.code){
              wx.request({
                 url: '解密地址',
                 data: {
                     'encryptedData': encodeURIComponent(e.detail.encryptedData),
                     'iv': e.detail.iv,
                     'code': res.code
                 },
                 method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
                 header: {
                     'content-type':'application/json'
                 }, // 设置请求的 header
                 success: function (res) {
                     if (res.status == 200 ) {//我后台设置的返回值为200时为成功
                     	//do something
                     }
                 },
                 fail: function (err) {
                     //do something
                 }
             })
            }
        }
    })
}

在用户允许获取手机号之后,有时还会调用checkSession接口来判断用户是否是在登录状态下允许获取手机号


http://www.niftyadmin.cn/n/1202696.html

相关文章

vue项目中使用http-proxy-middleware解决前端开发中跨域的问题

使用方式&#xff1a; 1、安装 npm install http-proxy-middleware --save-dev2、使用 一般的使用 新建js文件&#xff0c;在此小编命名为proxy.js const proxy require("http-proxy-middleware");module.exports {entry:{index:"./index.js"},outpu…

Struts 2读书笔记-----使用Action的动态方法调用

struts 2提供了包含处理多个逻辑的Action&#xff0c;从而允许一个Action内包含多个控制处理逻辑。例如一个页面中存在多个按钮&#xff0c;用户通过不同的按钮提交同一个表单时&#xff0c;可以使用Action的不同的方法来处理用户的请求。如下图页面 页面中有两个提交按钮&…

详解JavaScript原型

JavaScript语言与传统的面向对象语言&#xff08;如Java&#xff09;有点不一样&#xff0c;js语言设计的简单灵活&#xff0c;没有class、namespace等相关概念&#xff0c;而是万物皆对象。虽然js不是一个纯正的面向对象语言&#xff0c;但依然可以对js面向对象编程。java语言…

H5 将html页面内容生成图片并上传至七牛

小编最近在做项目时遇到一个问题&#xff0c;那就是&#xff0c;需要将html页面生成图片后并传给app客户端&#xff0c;至于为什么要传给客户端&#xff0c;自然是因为小编的这个项目是客户端中嵌入h5页面&#xff0c;故而需要和客户端内部交互。那么问题就来了&#xff0c;怎么…

Python虚拟环境指南2019版

这是一篇旧文&#xff0c;编写于2017年&#xff0c;用于公司内部交流。整理更新后于2019年04月06日重发&#xff0c;内容有效期乐观估计半年&#xff0c;阅读请注意保质期。 为什么用python虚拟环境 python版本差异 python当前主要有2个release版本 Python 2.7.16 和 Python 3.…

Struts 2读书笔记-----Action访问Servlet API

Action访问Servlet API Struts2中的Action并没有和任何Servlet API耦合&#xff0c;这样框架更具灵活性&#xff0c;更易测试。 对于Web应用的控制器而言&#xff0c;不访问ServletAPI是几乎不可能的。Web应用中通常需要访问的ServletAPI就是HttpServletRequest、HttpSessio…

Taro开发遇到的坑总结

1. 涉及到开发框架 ①语言框架&#xff1a; 目前使用到的开发框架主要以Vue为主&#xff0c;Taro开发提供了多种语言和框架&#xff0c;其中就有Vue&#xff0c;既然对Vue较为熟悉&#xff0c;那是否可以使用Vue为开发语言基础进行小程序的开发&#xff1f;可以是可以&#xf…

C语言之printf函数

printf() : 格式化输出,即按照某种特定格式输出特定为本基本用法(输出普通文本):printf("文本");输出变量:printf("普通文本 % 变量类型",变量);指定为宽(即指定输出文本占位列数):格式一:printf("普通文本 %[填充值]m变量类型",变量); // m指…