美文网首页
微信小程序获取手机号并解密(前端)

微信小程序获取手机号并解密(前端)

作者: 糊凃虫虫 | 来源:发表于2021-02-25 15:24 被阅读0次

    1 获取手机号

    获取手机号的过程官方文档有详细的介绍。参考官方链接

    要注意的是,此功能只对非个人且完成认证的开发者开发,个人开发者无法使用该功能。获取微信用户绑定的手机号,需先调用wx.login接口

    //wxml文件使用button按钮触发获取手机号事件,open-type="getPhoneNumber" 不能少<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>//js文件调用获取事件Page({ getPhoneNumber (e) { console.log(e.detail.errMsg) console.log(e.detail.iv) console.log(e.detail.encryptedData) }})

    这里主要使用到的数据为e.detail.iv和e.detail.encryptedData。此时返回的数据为加密过的手机号码数据,若想显示或者进行验证则需进行数据解密。

    2 解密

    2.1获取所需数据

    手机号码解密主要使用到的数据为:appId(开发者appid), session_key, encryptedData(上边方法中获取的e.detail.encryptedData),iv(上边方法getPhoneNumber中获取的e.detail.iv)。

    所以在所需数据方面主要要获取的就是session_key。参考官方链接

    获取session_key所需的主要参数为:appid、secret(这两个参数都可以在小程序官方-开发-开发设置中获取)、js_code。

    //获取js_code

    wx.login({

        provider: 'weixin',

        success (res) {

            console.log(res.code);

        }

    })

    最终获取session_key。

    uni.request({

    url: 'https://api.weixin.qq.com/sns/jscode2session',

    method:'GET',

        data: {

        appid: '你的小程序的APPID',        //你的小程序的APPID

        secret: '你的小程序秘钥secret',    //你的小程序秘钥secret,

        js_code: res.code,    //wx.login 登录成功后的code

        grant_type:'authorization_code'

    },

    success: (cts) => {

            console.log('获取信息',cts);  // 换取成功后 暂存这些数据 留作后续操作

            this.openid=cts.data.openid    //openid 用户唯一标识

            this.session_key=cts.data.session_key    //session_key  会话密钥

    }

    });

    该官方接口只推荐在测试过程中使用,使用该接口需开启微信开发者工具-详情-本地设置-不校验合法域名…,投入使用时需在服务器端进行配置,具体方法可参考最下方文章链接。

    2.2 解密返回数据

    手机号码解密主要使用的是 CryptoJS 包,点击下载

    微信官方提供了多种编程语言的示例代码,(点击下载)但是没有js包,这里根据参考进行了稍微修改。

    WXBizDataCrypt.js文件:

    var crypto = require('crypto')

    function WXBizDataCrypt(appId, sessionKey) {

    this.appId = appId

      this.sessionKey = sessionKey

    }

    WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {

      // base64 decode

      var sessionKey = new Buffer(this.sessionKey, 'base64')

      encryptedData = new Buffer(encryptedData, 'base64')

      iv = new Buffer(iv, 'base64')

      try {

        // 解密

        var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)

        // 设置自动 padding 为 true,删除填充补位

        decipher.setAutoPadding(true)

        var decoded = decipher.update(encryptedData, 'binary', 'utf8')

        decoded += decipher.final('utf8')

        decoded = JSON.parse(decoded)

      } catch (err) {

        throw new Error('Illegal Buffer')

      }

      if (decoded.watermark.appid !== this.appId) {

        throw new Error('Illegal Buffer')

      }

      return decoded

    }

    module.exports = WXBizDataCrypt

    在页面引入文件  import WXBizDataCrypt from "@/common/WXBizDataCrypt.js";

    let pc = new WXBizDataCrypt('appid','填写session_key');

    let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);

    console.log(data)      //data就是最终解密的用户信息

    参考文档

    相关文章

      网友评论

          本文标题:微信小程序获取手机号并解密(前端)

          本文链接:https://www.haomeiwen.com/subject/eghufltx.html