微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之前)

这篇具有很好参考价值的文章主要介绍了微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之前)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前言

微信小程序开发笔记——导读

  • 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码
  • 但是,因为小程序用户的手机号码属于重要信息,为了安全,所以需要如下一系列较为复杂的方法和步骤。
  • 我前期主要通过小程序云的方法获取用户手机号码,后面因为微信政策变更,小程序云不再提供免费版本,最低每月也要收费19元
  • 所以,我才转用方法二和方法三。否则方法一小程序云的方法是最简单的。

微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码(小程序云)
微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之前)
微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之后)

  • 首先确保基础库版本在2.21.2之前

微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之前)

二、前端代码wxml

  • 必须要有这个button,并且用户点击了,才能有下一步
<button type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" class="weui-vcode-btn" wx:else>获取手机号</button>

微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之前)

三、前端代码js

  • 定义一个code全局变量
var code = ""
  • 该界面onShow的时候,调用wx.login函数获取code
  • 这边这里有个风险,这个code存在有效期,到你用的时候可能会过期

onShow() {        
    wx.login({
        success: function (res) {
            console.log("wx.login success", res)
            if (res.code) {    
                code = res.code
            } else {
                _this.showToast('失败!' + res.errMsg)
            }
        },
        fail: function (res) {
            console.log('wx.login fail' + res)
        }
    })
},
  • bindgetphonenumber="getPhoneNumber"按钮的回调函数
getPhoneNumber(e) {
    var _this = this
    console.log("getPhoneNumber", e)
    
    keyueliSdk.getPhoneNumber({
        code: code,
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv,
        appId: app.globalData.appId,
    },
    (res) => {
        console.log("getPhoneNumber", "success", res)
        _this.setData({
            mobile: res.data.data.phoneNumber
        })
    },
    (res) => {
        console.log("getPhoneNumber", "fail", res)
    })
},
  • keyueliSdk.js接口工具类
//获取用户手机号码
const getPhoneNumber = (data, success, fail) => {
  console.log("getPhoneNumber", data)
  request(
    endpoint + "/v1/app/user/getPhoneNumber", {
      // 'content-type': 'application/x-www-form-urlencoded'
      'content-type': 'application/json'
    },
    data,
    "POST",
    success, fail
  )
}

module.exports = {
  getPhoneNumber: getPhoneNumber,
}

四、后端java

  • controller.java
@ApiOperation("查询用户手机号码")
@PostMapping("/getPhoneNumber")
public AjaxResult getPhoneNumber(@ApiParam() @RequestBody AppCode appCode)
{
    log.info(appCode.toString());
    return AjaxResult.success(loginService.getPhoneNumber(appCode));
}
  • loginService.java
public JSONObject getPhoneNumber(AppCode appCode){
    if(!WXUtils.checkAppId(appCode.getAppId())){
        log.error("appId异常: "+ appCode.toString());
        throw new CustomException("AppId 异常");
    }

    JSONObject codeData = WXUtils.codeAnalysis(appCode.getCode(), appCode.getAppId());
    if(ObjectUtil.isNull(codeData)){
        log.error("code异常: "+ appCode.toString());
        throw new CustomException("code 异常");
    }
    String sessionKey = codeData.getString("session_key");
    String openId = codeData.getString("openid");
    String unionId = codeData.getString("unionid");

    JSONObject decryptObject = WXUtils.decrypt(appCode.getAppId(), appCode.getEncryptedData(), sessionKey, appCode.getIv());
    if(ObjectUtil.isNull(decryptObject)){
        log.error("encryptedData异常: "+ appCode.toString());
        throw new CustomException("encryptedData 异常");
    }
    log.info(decryptObject.toJSONString());

    return decryptObject;
}
  • WXUtils.java
/**
 * 解密数据
 * @return
 * @throws Exception
 */
public static JSONObject decrypt(String appId, String encryptedData, String sessionKey, String iv){
    try {
        byte[] resultByte = AESUtils.decrypt(Base64.decodeBase64(encryptedData),Base64.decodeBase64(sessionKey),Base64.decodeBase64(iv));
        if(null != resultByte && resultByte.length > 0){
            String result = new String(WxPKCS7Encoder.decode(resultByte));
            JSONObject jsonObject = JSONObject.parseObject(result);
            String decryptAppId = jsonObject.getJSONObject("watermark").getString("appid");
            if(!appId.equals(decryptAppId)){
                return null;
            }
            return jsonObject;
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}

/**
 * 获取session_key
 * @return
 * @throws Exception
 */
public static JSONObject codeAnalysis(String code, String appId) {
    try {
        String objectStr = HttpUtil.get(String.format("https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code",
                appId, getAppSecret(appId), code));
        log.info(objectStr);
        JSONObject jsonObject = JSON.parseObject(objectStr);
        return jsonObject;
    }catch (Exception e){
        e.printStackTrace();
        log.error("微信code解析异常", e.getMessage());
    }
    return null;
}
  • AESUtils.java
/**
 * AES解密
 *
 * @param content
 *            密文
 * @return
 * @throws InvalidAlgorithmParameterException
 * @throws NoSuchProviderException
 */
public static byte[] decrypt(byte[] content, byte[] keyByte, byte[] ivByte) throws InvalidAlgorithmParameterException {
    initialize();
    try {
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding");
        Key sKeySpec = new SecretKeySpec(keyByte, "AES");
        cipher.init(Cipher.DECRYPT_MODE, sKeySpec, generateIV(ivByte));// 初始化
        byte[] result = cipher.doFinal(content);
        return result;
    } catch (NoSuchAlgorithmException e) {
        e.printStackTrace();
    } catch (NoSuchPaddingException e) {
        e.printStackTrace();
    } catch (InvalidKeyException e) {
        e.printStackTrace();
    } catch (IllegalBlockSizeException e) {
        e.printStackTrace();
    } catch (BadPaddingException e) {
        e.printStackTrace();
    } catch (NoSuchProviderException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (Exception e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return null;
}

五、程序流程

六、参考

  • auth.code2Session
  • 开放数据校验与解密
  • 高端帖:手机号解密失败?扫盲帖+解决方案

觉得好,就一键三连呗(点赞+收藏+关注)文章来源地址https://www.toymoban.com/news/detail-493559.html

到了这里,关于微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之前)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序开发踩坑日记:获取用户头像并持久化存储到后端服务器

    原来获取用户头像和昵称调用的是uni.getUserInfo(OBJECT)接口,但是2021年4月28日24时后发布的小程序新版本,无法通过uni.getUserInfo与button open-type=\\\"getUserInfo\\\"/获取用户个人信息(头像、昵称、性别与地区) 详细情况见官方文档:小程序登录、用户信息相关接口调整说明 | 微信开放社

    2024年04月14日
    浏览(42)
  • 微信小程序 - 2023 年最新授权获取用户手机号详细教程,完美解决 getPhoneNumber 获取不到 code 的问题(老项目使用手机号快速验证组件,打印授权后没有code字段,拿不到cod)

    由于官方修改了 “获取用户手机号” 规则,导致网上几乎所有教程全部失效,本文来做最新详细教程。 2023年8月往后(官方废弃了原来 “免费” 获取用户手机号的相关方法 API,导致了大量小程序原获取手机号的方式失效报错),本文是最新微信小程序 “收费” 获取用户手

    2024年02月17日
    浏览(97)
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)

    🥳🥳Welcome Huihui\\\'s Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welcome Huihui\\\'s Code World ! !🥳🥳 授权流程讲解 一.用户信息授权登录 1.wx.login 2.wx.getUserProfile 3.代码 WXML JS 二.用户信息授权登录之后台交互 前期准备 ①准备数据接口 ②密钥以及

    2024年02月08日
    浏览(45)
  • 微信小程序开发-云数据库添加及获取显示

    全国的疫情一个是东北一个是上海两个重灾区。被关在家里10天了,看了一下B站,看到了一个微信小程序开发的视频教程感觉不错,闲来无事就自己实践一下。 微信小程序出来已经好几年了,原来玩过一段时间,最后由于微信小程序开发的不断迭代,以后域名必须使用https,

    2024年02月09日
    浏览(48)
  • 微信小程序开发笔记

    详情参考: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html 详情参考: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html 详情参考: https://developers.weixin.qq.com/miniprogram/dev/component/button.html 按钮css样式参考: https://www.runoob.com/css3/css3-buttons.html 详情参考: https://w

    2024年02月09日
    浏览(58)
  • 微信小程序获取手机号getPhoneNumber接口报错41001

    在使用 postman / apifox 调试微信小程序获取手机号接口时,微信报错 41001 : 该接口的请求报文其实是 表单参数 和 JSON参数 的集合体; 整个接口的请求需要 code 和 access_token 两个请求参数,接口的URL里边包含了 access_token : 但是没有包含 code ,也就意味着 access_token 是需要作为

    2024年02月11日
    浏览(40)
  • 微信小程序开发学习笔记

    Color: red Color: rgb(255, 99, 71) Color: rgba(red, green, blue, alpha) Color: #ff6347 background-color:指定元素的背景色 opacity:指定元素的透明度,取值在0~1之间 background-image:指定元素的背景图像,在水平和垂直方向上都会重复图像 background-repeat:配合background-image使用,指定图像重复方向或者

    2024年02月09日
    浏览(46)
  • 微信小程序开发 获取手机 体验版获取不到code,需打开调试器才行?

    最近开发遇到问题: 小程序开发,获取手机号时候,调用接口需要 code,但是体验版始终获取不到,只有在打开小程序调试器的时候才能获取到code.这么奇葩的问题原因竟然是小程序后台没有配置服务器域名,把相关域名在小程序后台配置下 就可以正常了。 点击允许后会调接

    2024年02月08日
    浏览(48)
  • 微信小程序获取手机号码 phonenumber.getPhoneNumber 提示47001错误

    微信小程序获取手机号码 phonenumber.getPhoneNumber 提示47001错误 经过测试, 文档说的是body 类型 实际却是json类型 正确代码如下:

    2024年02月06日
    浏览(50)
  • 微信小程序定位开发 逆地理位置查询 经纬度获取位置名称

    一. 微信小程序获取用户定位==经纬度(官方) (1)官方方法:wx.getLocation(Object object) (2)官方链接:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html (3)关键点: 申请权限 :在小程序管理后台,「开发」-「开发管理」-「接口设置」中申请开通该接口权限。

    2024年02月16日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包