服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 微信小程序用户授权获取手机号(getPhoneNumber)

微信小程序用户授权获取手机号(getPhoneNumber)

2022-02-16 17:37chen_pan_pan js教程

这篇文章主要给大家介绍了关于微信小程序用户授权获取手机号的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

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

实现思路:

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

2、通过getPhoneNumber获取encryptedData,iv

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

直接上干货:

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

?
1
2
3
<button class='pop_btn' plain="true"
 
open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">获取用户手机号</button>

2、弹出授权图片:

微信小程序用户授权获取手机号(getPhoneNumber)

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

微信小程序用户授权获取手机号(getPhoneNumber)

直接上代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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(); //重新登录
    }
  });
}

后台代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
* 解密并且获取用户手机号码
* @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");
  }

总结

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

原文链接:https://blog.csdn.net/chen_pan_pan/article/details/80606658

延伸 · 阅读

精彩推荐
  • js教程基于JavaScript实现轮播图效果

    基于JavaScript实现轮播图效果

    这篇文章主要为大家详细介绍了基于JavaScript实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    努力学习中.....5712021-12-24
  • js教程详解 TypeScript 函数声明和重载

    详解 TypeScript 函数声明和重载

    在 JavaScript 中,函数是构建应用的一块基石,我们可以使用函数抽离可复用的逻辑、抽象模型、封装过程。在TypeScript中,函数仍然是最基本、最重要的概念...

    前端充电宝7142022-01-05
  • js教程js定时器出现第一次延迟的原因及解决方法

    js定时器出现第一次延迟的原因及解决方法

    在本篇文章里小编给大家整理的是一篇关于js定时器出现第一次延迟的原因及解决方法,对此有需要的朋友们可以学习下。...

    宋宋大人5002021-12-24
  • js教程JavaScript 生成唯一ID的几种方式

    JavaScript 生成唯一ID的几种方式

    这篇文章主要介绍了JavaScript 生成唯一ID的几种方式,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    specialCoder5022022-01-21
  • js教程Strve.js开发一个属于自己的库或框架

    Strve.js开发一个属于自己的库或框架

    Strve.js是一个可以将字符串转换为视图的JS库。这里的字符串指的是模板字符串,所以你仅需要在JavaScript中开发视图。Strve.js不仅易于上手,还便于灵活拆装...

    前端历劫之路5992021-12-23
  • js教程前端经常会用到的JavaScript方法封装

    前端经常会用到的JavaScript方法封装

    前端经常会用到的JavaScript方法封装都有哪些呢?我们一起来看一下吧!...

    Find一只程序猿11412021-12-30
  • js教程JS中循环遍历数组的四种方式总结

    JS中循环遍历数组的四种方式总结

    这篇文章主要给大家总结介绍了关于JS中循环遍历数组的四种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    前端小混混5492022-01-06
  • js教程JavaScript 中的六种循环方法

    JavaScript 中的六种循环方法

    这篇文章主要介绍了JavaScript 中的六种循环方法,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下...

    Saku8752021-12-27