uni-app 微信小程序获取手机号并解密

Posted 2023-02-24

参考技术A 1、 点击某个按钮，弹出请求微信授权界面。
2、点击允许按钮，获取用户微信绑定的手机号与openId
3、 请求后端接口，实现登录。

微信公众平台--->登陆--->开发--->开发管理--->开发设置 查看APPID、secret

在把上面获取的appid session_key encryptedData iv传入以下方法中，得到最后解密的信息

解密后的信息

微信小程序获取手机号并解密

开发微信小程序的时候经常会遇到要  绑定用户手机号的需求   这里我们就要首先获取用户信息中的手机号 :

 

首先是 页面上的做法 (只需一句话)   wxml:

    <button class="btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" >手机号认证</button>

　　

然后就是  js(wx) :

里面有好多调试代码   这里我就不清理了 (嘻嘻嘻)

 

 /**
   * 授权手机号
   * @param {*} e 
   */
  getPhoneNumber: function(e) { 
    console.log("手机号iv");
    console.log(e.detail.iv) 
    console.log("手机号encryptedData");
    console.log(e.detail.encryptedData)
    // var session_key = wx.getStorageSync(‘session_key‘);
    // console.log(‘session_key‘);
    // console.log(session_key);

    console.log("config appid");
    console.log(site.AppID);
    var that=this;

    wx.login({
      success: res => {
        console.log("手机号rescode");
        console.log(res.code);
        console.log(res);
        /**
         * 这里重新获取session_key 的请求放到后台去因为如果放在小程序中的话  还需要端口认证
         */
        // wx.request({
        //   url: ‘https://api.weixin.qq.com/sns/jscode2session?appid=wxe1bd8e4045ad80ba&secret=9fbf669bb61ddfdd2d455eebe1d6fdf5&js_code=‘+res.code+‘&grant_type=authorization_code‘,
        //   success:function(resc){
        //   console.log(‘哈哈哈哈‘)
        //   console.log(resc)

          wx.request({
            url: decode,
            data:{
              data:e.detail.encryptedData,
              iv: e.detail.iv,
              code:res.code
            },
            success:function(res){
                console.log("解密之后");
                console.log(res);
                console.log("返回手机号");
                console.log(res.data.data.data.phoneNumber);
                
               
                var timestamp=new Date().getTime()
                var data = {
                  "timestamp":timestamp,
                  "url":(checkphone+"").replace(config.baseUrl,""),
                  "user_id":userid,
                  ‘phone‘:res.data.data.data.phoneNumber,
                }
                var sign=utils.makeSign(site.siteTokenKey,data)
                var phone = res.data.data.data.phoneNumber;
                if(res.data.data.flag==1){

                  wx.request({
                    url: checkphone,
                    method: "POST",
                    data:data,
                    header: {
                      "Content-Type": "application/x-www-form-urlencoded",
                      "sign":sign,
                      ‘timestamp‘:timestamp
                    },
                    success: function (res) {
                      console.log(res);
                      if(res.data.data.flag == 1){
                        wx.navigateBack({
                          delta: 1
                        })
                      }
                      if(res.data.data.status == 0){
                        wx.showToast({
                          title: ‘保存失败‘,
                          icon: ‘none‘,
                          duration: 2000
                         })
                      }
                    },
                  })
                }else{
                  wx.navigateBack({
                    delta: 1
                  })
                }
            }
          })

          // }
        // })

    
       
      }
    })
  
}

　　

接下来就是 后端解密以及将手机号更新到数据库的主程序了(php 版本): 　　

　　

  /**
     * 解密
     */
    public function decode(){

        //siteconfig读取类
        $siteConfigObj = new Config("site_config");
        $site_config   = $siteConfigObj->getInfo();

        $data=IFilter::act(IReq::get(‘data‘));
        $iv=IFilter::act(IReq::get(‘iv‘));
//      $sessionkey=IFilter::act(IReq::get(‘sessionkey‘));
        $code=IFilter::act(IReq::get(‘code‘));
        $decrypt = new WxServerApi();

        //siteconfig中记录的appid以及secret
        $appid=$site_config[‘wechat_AppID‘];
        $secret=$site_config[‘wechat_AppSecret‘];

        //生成一个新的session_key
        $ccc="https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";

        $content=$this->curl($ccc);
        $content=json_decode($content);

        $sessionkey=$content->session_key;

        $config=new Config(‘site_config‘);
        $appid=$config->wechat_AppID;
        if (strlen($sessionkey) != 24) {
            Block::sendRseult(200,‘goods detail success‘,[
                ‘flag‘=>0,
                ‘data‘=>‘false1‘,
            ]);
        }
        $aesKey=base64_decode($sessionkey);


        if (strlen($iv) != 24) {
            Block::sendRseult(200,‘goods detail success‘,[
                ‘flag‘=>0,
                ‘data‘=>‘false2‘,
            ]);
        }
        $aesIV=base64_decode($iv);

        $aesCipher=base64_decode($data);

        $result=openssl_decrypt( $aesCipher, "AES-128-CBC", $aesKey, 1, $aesIV);
        /**
         * 这里再次判断一次的原因是因为  重新生成的session_key  第一次解密会出现返回false的情况  第二次就正常  so.....
         */
        if($result==false){
            $result=openssl_decrypt( $aesCipher, "AES-128-CBC", $aesKey, 1, $aesIV);
        }

        $dataObj=json_decode( $result );
        if( $dataObj  == NULL )
        {
            Block::sendRseult(200,‘goods detail success‘,[
                ‘flag‘=>0,
                ‘data‘=>‘false3‘,
            ]);
        }
        if( $dataObj->watermark->appid != $appid )
        {
            Block::sendRseult(200,‘goods detail success‘,[
                ‘flag‘=>0,
                ‘data‘=>‘false4‘,
            ]);
        }

        Block::sendRseult(200,‘goods detail success‘,[
            ‘flag‘=>1,
            ‘data‘=>$dataObj,
        ]);

    }

　　

这里值得一提的就是重新生成了session_key  去做解密操作 

$result=openssl_decrypt( $aesCipher, "AES-128-CBC", $aesKey, 1, $aesIV);

的时候  第一次总是会会出现返回false的情况 第二次就正常了  所以需要判断false  然后在执行一遍  (虽然办法有点笨  但是很有效 如果有更好的办法  请在评论区中留言   欢迎欢迎!!!)

到这里基本上就结束了手机认证  感谢您的耐心阅读  希望可以帮到您!   bingo!!