微信小程序获取用户手机号码的详细步骤

目录
  • 前言
  • 接下来我们通过服务器获取授权
  • deciphering解密方法
  • 总结

前言

我们在做小程序开发的过程中,经常会涉及到用户身份的问题,最普遍的就是我们要获取用户的手机号码,通过微信获取手机号码后可以减少很多操作,比如用户手机号码验证等,我们还可以给用户发送提示短信,那么本文主要讲解如何获取用户手机号码。

获取用户手机号码 分为以下几步:

第一点击页面获取授权按钮

第二获取用户授权参数

第三根据加解密算法解密手机号码

接下来我们来实现以上三步

先看前端页面

<!--index.wxml-->
<view class="container">
  <view >
    <button class="authbtn" type="primary" open-type="getUserInfo" lang="zh_CN"
      bindgetuserinfo="getUserProfile" bindtap="getUserProfile">获取用户信息</button>
    <button class="authbtn"  open-type="getPhoneNumber" type="primary"
      bindgetphonenumber="onGetPhoneNumber">获取手机号码</button>
    <view class="userinfo">
      <block>
        <view class="userinfo-avatar" bindtap="bindViewTap">
          <image class="userinfo-avatar" type="userAvatarUrl" src="{{userInfo.avatarUrl}}" mode="cover" ></image>
        </view>
        <Text class="userinfo-nickname" >{{userInfo.nickName}}</Text>
        <text class="userinfo-phone" >{{userInfo.phone}}</text>
        <text class="userinfo-phone" wx:if="{{userInfo.gender==0}}">男</text>
        <text class="userinfo-phone" wx:if="{{userInfo.gender==1}}">女</text>
        <picker bindchange="bindPickerLingyuChange" value="{{index}}" range="{{array}}">
          <view  wx:if="{{showLingyu==true}}" class="tips">选择职业 </view>
            <text  class="tips"> {{array[index]}}</text>
          </picker>

          <picker bindchange="bindPickerAearaChange" value="{{i}}" range="{{items}}" range-key="name">
            <view wx:if="{{showAeara==true}}"class="tips">选择地区 </view>
            <text  class="tips">{{items[i].name}}</text>
          </picker>
          <button class="authbtn" type="primary" bindtap="bindViewTap">注册</button>
      </block>
    </view>
  </view>
</view>

大概长这样

获取用户头像的我就直接略过了,网上资料也比较多

接下来我们看关键代码

 此处定义

getPhoneNumber是微信官方要求,获取用户手机号码授权

onGetPhoneNumber是回调函数,获取授权后会回调到该方法,也就是获取的电话号码就在这个函数的返回值里面。当然这个函数是自定义的,名字大家可以随便起,上面的getPhoneNumber可不能随便修改。

接下来我们通过服务器获取授权

上代码:这里是js调用我们自己的后台,我们的后台再调用微信服务端

onGetPhoneNumber(e) {
    var that = this;
    wx.login({
      success (res) {
        if (res.code) {
          console.log('步骤2获检查用户登录状态,获取用户电话号码!', res)
          wx.request({
            url: '这里写自己的获取授权的服务器地址',
            data: {code: res.code},
            header: {'content-type': 'application/json'},
            success: function(res) {
              console.log("步骤三获取授权码,获取授权openid,session_key",res);
              var userphone=res.data.data;
              wx.setStorageSync('userphoneKey',userphone);
              //解密手机号
              var msg = e.detail.errMsg;
              var sessionID=wx.getStorageSync("userphoneKey").session_key;
              var encryptedData=e.detail.encryptedData;
              var iv=e.detail.iv;
              if (msg == 'getPhoneNumber:ok') {//这里表示获取授权成功
                wx.checkSession({
                  success:function(){
                        //这里进行请求服务端解密手机号
                    that.deciyption(sessionID,encryptedData,iv);
                  },
                  fail:function(){
                    // that.userlogin()
                  }
                })
              }

            },fail:function(res){
                console.log("fail",res);
            }
          })
        } else {
          console.log('登录失败!' + res.errMsg)
        }
      }
    })

后台调用微信获取授权码

下面是我通过自己写的框架调用的,不用关心注解内容,大家只关注自己的框架注解即可,不管是spring还是servlet只要请求能进到该方法即可,所以重点关注中间部分,把参数值传正确即可

    /**
     *  回调微信登录信息
     * @param request
     * @param response
     */
    @MethodAnnotation(method="miniGetAuth",methoddes="小程序授权",methodWay="ALL")
    public void miniGetAuth(HttpServletRequest request, HttpServletResponse response) throws Exception{
    	 	   String url="https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code";
               String code= request.getParameter("code");
                if(empty(code))return;
    	 		url=url.replaceAll("APPID", PropertiesUtil.wx_appid)
    	 				.replaceAll("SECRET",  PropertiesUtil.wx_appsecret)
    	 				.replaceAll("JSCODE", code);
    	 		qury(request, response, WeixinUtil.doGetStr(url), false, 0);

    }

下面是工具类方法 WeixinUtil.doGetStr(url)

	/**
	 * get请求
	 * @param url
	 * @return
	 * @throws ParseException
	 * @throws IOException
	 */
	public static JSONObject doGetStr(String url) throws ParseException, IOException{
		DefaultHttpClient client = new DefaultHttpClient();
		HttpGet httpGet = new HttpGet(url);
		JSONObject jsonObject = null;
		HttpResponse httpResponse = client.execute(httpGet);
		HttpEntity entity = httpResponse.getEntity();
		if(entity != null){
			String result = EntityUtils.toString(entity,"UTF-8");
			jsonObject = JSONObject.fromObject(result);
		}
		return jsonObject;
	}

这个值可以返回给前端,前端可以收到如下参数

接着我们通过授权之后,获取第三个参数iv,调用下面方法进行服务端解密

that.deciyption(sessionID,encryptedData,iv);

deciyption(sessionID,encryptedData,iv){
    var that = this;

    console.log("步骤4根据秘钥解密手机号码sessionID:",sessionID);
    wx.request({
      url: '解密地址',
      data: {
        sessionID: sessionID,
        encryptedData:encryptedData,
        iv: iv
      },
      header: {'content-type': 'application/json'},
      success: function(res) {
        console.log("79",(res.data.code==20001));
        if(res.data.code==20001){//这里不用管,可以删掉,我的框架里返回值20001是授权失败,可按照自己逻辑处理
          console.log("获取失败,重新获取",res);
          that.setData({
            showPhone:true,
           })
        }else{
          console.log("line 79", JSON.parse(res.data.data));
          var json= JSON.parse(res.data.data);
          wx.setStorageSync('userphone', JSON.parse(res.data.data).phoneNumber);
          console.log("步骤5解密成功",res.data.data);
          that.setData({
            showPhone:false,
            "userInfo.phone":wx.getStorageSync('userphone')
           })
        }

      },fail:function(res){
          console.log("fail",res);
      }
    })
  }

服务端解密代码

 /**
     *
     * @param request
     * @param response
     * @throws Exception
     */
    @MethodAnnotation(method="miniGetPhone",methoddes="小程序解密手机号",methodWay="ALL")
    public void miniGetPhone(HttpServletRequest request, HttpServletResponse response) throws Exception{
               String encrypdata= request.getParameter("encryptedData");
               String ivdata= request.getParameter("iv");
               String sessionkey= request.getParameter("sessionID");
                if(empty(encrypdata,ivdata,sessionkey))return;
    	 		qury(request, response, deciphering(encrypdata, ivdata, sessionkey), false, 0);

    }

deciphering解密方法

  public static String deciphering(String encrypdata,String ivdata, String sessionkey) {
            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();
            }
            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");
    }

最终效果

总结

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

(0)

相关推荐

  • 微信小程序获取用户绑定手机号方法示例

    用户调用wx.login()方法,获取登录用户凭证code wx.login({ success: function(res) { console.log('loginCode', res.code) } }); code传给后台,凭证code获取session_key和openid https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=aut

  • 微信小程序如何获取用户手机号

    最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: public class MyHttpUrlConnection { private final i

  • 微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

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

    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNumber. 实现思路: 1.通过wx.login获取code,从而获取到用户的openID和sessionKey 2.通过getPhoneNumber获取encryptedData,iv 3.通过参数[encryptedData] .[iv] .[sessionKey]  请求后

  • 微信小程序如何同时获取用户信息和用户手机号

    今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆??? 索性就写了一个mask层,去引导用户授权手机号. 1. 当我点击快捷登录的 微信登录时,首先触发的是 微信原生的 获取用户信息userInfo 的方法,再它的 success 回调里面去打开 mask 层..... 2. mask 层里面 有一个按钮,这个按钮是去触发 微信原生的 获取用户手机号的 getPhoneNumber 的方法,接下来就不用我多说了吧.... 直接甩代码 <!--快

  • 微信小程序获取用户手机号码的详细步骤

    目录 前言 接下来我们通过服务器获取授权 deciphering解密方法 总结 前言 我们在做小程序开发的过程中,经常会涉及到用户身份的问题,最普遍的就是我们要获取用户的手机号码,通过微信获取手机号码后可以减少很多操作,比如用户手机号码验证等,我们还可以给用户发送提示短信,那么本文主要讲解如何获取用户手机号码. 获取用户手机号码 分为以下几步: 第一点击页面获取授权按钮 第二获取用户授权参数 第三根据加解密算法解密手机号码 接下来我们来实现以上三步 先看前端页面 <!--index.wxml--

  • 微信小程序获取当前位置的详细步骤

    目录 1 腾讯位置开发基本步骤 1.1 申请开发者密钥(key) 1.2 下载微信小程序JavaScriptSDK 1.3 安全域名设置 1.4 微信小程序设置隐私权限 2 获取位置信息 3 权限问题 总结 微信小程序获取位置信息的方式有两种,一种是调用微信官方的接口来获取,如getLocation,这种方式只能获取经纬度微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

  • 微信小程序获取用户openId的实现方法

    微信小程序获取用户openId的实现方法 前端: wx.login({ success: function (res) { res.code }) 获取到code后,传到后台, 然后请求微信接口 https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 把参数替换为自己的参数,这个接口就直接返回openId了

  • Thinkphp5微信小程序获取用户信息接口的实例详解

    Thinkphp5微信小程序获取用户信息接口的实例详解 首先在官网下载示例代码, 选php的, 这里有个坑 官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le

  • 详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs

    微信小程序-获取用户session_key,openid,unionid - 后端为nodejs8.0+ 步骤: 1.通过wx.login接口获取code既jscode,传递到后端: 2.后端请求 https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 地址,就能获取到openid和unionid. 小程序接

  • 微信小程序--获取用户地理位置名称(无须用户授权)的方法

    在本文 微信小程序--获取用户地理位置名称(无须用户授权) 之前需要先看看 微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. 准备 1.在http://lbs.qq.com/网站申请key 2.在微信小程序后台把apis.map.qq.com添加进request合法域名 效果 添加封装 /** * 发起网络请求 * @param {string} url * @param {object} params * @return

  • 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data.分享给大家供大家参考,具体如下: 在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如: onLoad: function (options) { var that = this; //获取用户信息 wx.getUserInfo({ success: function (res) { console.log(res); that.data.userInfo

  • 微信小程序获取用户信息并保存登录状态详解

    前言 微信小程序的运行环境不是在浏览器下运行的.所以不能以cookie来维护登录态.下面我就来说说我根据官方给出的方法来写出的维护登录态的方法吧. 一.登录态维护 官方的文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject 通过 wx.login() 获取到用户登录态之后,需要维护登录态.开发者要注意不应该直接把 session_key.openid 等字段作为用户的标识或者 session

  • 微信小程序获取用户信息及手机号(后端TP5.0)

    本文实例为大家分享了微信小程序获取用户信息及手机号的具体代码,供大家参考,具体内容如下 wxml页面 <view wx:if="{{config.tipsshow1}}" class='dialog-container'> <view class='dialog-mask'></view> <view class='dialog-info'> <view class='dialog-title'>login prompt<

  • 微信小程序获取用户openid的方法详解

    目录 获取openid的思路 需要修改的地方 完整代码 总结 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系 然而因为小程序中的openid不可以直接使用需要用code(登录凭证)去换取openid 获取openid的思路 获取openid首先需要调用小程序的login方法获取小程序的登录凭证code,然后使用code向微信换取登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key) 我这里是用一个点击事件来触

随机推荐