前言

小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber。

实现思路:

1、通过wx.login获取code,从而获取到用户的openID和sessionKey

2、通过getPhoneNumber获取encryptedData,iv

3、通过参数【encryptedData】 、【iv】 、【sessionKey】  请求后台解密获取用户手机号

直接上干货:

1、用户点击获取用户手机号码按钮

<button class='pop_btn' plain="true"

open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">获取用户手机号</button>

2、弹出授权图片:

3、通过解密获取手机号码

直接上代码:

wxlogin: function() { //获取用户的openID和sessionKey
  var that = this;
  wx.login({
    //获取code 使用wx.login得到的登陆凭证,用于换取openid
    success: (res) = >{
      wx.request({
        method: "GET",
        url: 'https://xxxwx/wxlogin.do',
        data: {
          code: res.code,
          appId: "appIdSbcx",
          appKey: "appKeySbcx"

        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: (res) = >{
          console.log(res);
          that.setData({
            sessionKey: res.data.session_key

          });
        }
      });
    }
  });
}

getPhoneNumber: function(e) { //点击获取手机号码按钮
  var that = this;
  wx.checkSession({
    success: function() {
      console.log(e.detail.errMsg)
      console.log(e.detail.iv)
      console.log(e.detail.encryptedData)
      var ency = e.detail.encryptedData;
      var iv = e.detail.iv;
      var sessionk = that.data.sessionKey;
      if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
        that.setData({
          modalstatus: true
        });

      } else { //同意授权
        wx.request({
          method: "GET",
url: 'https://xxx/wx/deciphering.do',
          data: {
            encrypdata: ency,
            ivdata: iv,
            sessionkey: sessionk
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: (res) = >{
            console.log("解密成功~~~~~~~将解密的号码保存到本地~~~~~~~~");
            console.log(res);
            var phone = res.data.phoneNumber;
            console.log(phone);
          },
          fail: function(res) {
            console.log("解密失败~~~~~~~~~~~~~");
            console.log(res);
          }
        });
      }

    },

    fail: function() {
      console.log("session_key 已经失效,需要重新执行登录流程");
      that.wxlogin(); //重新登录
    }
  });
}

后台代码:

/**
* 解密并且获取用户手机号码
* @param encrypdata
* @param ivdata
* @param sessionkey
* @param request
* @return
* @throws Exception 
*/
@RequestMapping(value = "deciphering", method = RequestMethod.GET)
public @ResponseBody String deciphering(String encrypdata, 
String ivdata, String sessionkey,
HttpServletRequest request) {

    byte[] encrypData = Base64.decode(encrypdata); 
    byte[] ivData = Base64.decode(ivdata); 
    byte[] sessionKey = Base64.decode(sessionkey); 
    String str="";
try {
str = decrypt(sessionKey,ivData,encrypData);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
    System.out.println(str); 
    return str;

}
public static String decrypt(byte[] key, byte[] iv, byte[] encData) throws Exception { 
    AlgorithmParameterSpec ivSpec = new IvParameterSpec(iv); 
    Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding"); 
    SecretKeySpec keySpec = new SecretKeySpec(key, "AES"); 
    cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec); 
    //解析解密后的字符串 
    return new String(cipher.doFinal(encData),"UTF-8"); 
  }

总结

到此这篇关于微信小程序用户授权获取手机号的文章就介绍到这了,更多相关小程序授权获取手机号内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

微信小程序用户授权获取手机号(getPhoneNumber)的更多相关文章

  1. 微信小程序“圣诞帽”的实现思路详解

    这两天朋友圈被圣诞帽刷屏,下面通过本文给大家分享微信小程序“圣诞帽”的实现思路详解,需要的朋友参考下吧

  2. 小程序实现图片裁剪上传

    这篇文章主要为大家详细介绍了小程序实现图片裁剪上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. php实现小程序支付完整版

    这篇文章主要为大家详细介绍了php实现小程序支付完整版,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 微信小程序的宿主环境实现代码

    这篇文章主要介绍了微信小程序的宿主环境,包括scroll-view 组件的基本使用,text 组件的基本使用及rich-text 组件的基本使用,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下

  5. PHP Oauth授权和本地加密实现方法

    下面小编就为大家带来一篇PHP Oauth授权和本地加密实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  6. 微信小程序使用ucharts在小程序中加入横屏展示功能的全过程

    这篇文章主要给大家介绍了关于微信小程序使用ucharts在小程序中加入横屏展示功能的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下

  7. 微信小程序实现页面导航的方法详解

    这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握如何使用页面之间的导航跳转,感兴趣的可以了解一下

  8. 微信小程序开发WXML模板语法基础教程

    这篇文章主要介绍了微信小程序模板语法,WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构,需要的朋友们下面随着小编来一起学习学习吧

  9. 微信小程序访问mysql数据库流程详解

    日常我们在开发小程序的时候,总是希望把数据提交回数据库进行存储,那在小程序中该如何访问数据库呢?本篇我们就介绍一下具体的思路

  10. 微信小程序视频弹幕发送功能的实现

    这篇文章主要介绍了微信小程序视频弹幕发送功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部