zoukankan      html  css  js  c++  java
  • 微信小程序获取登录手机号

    小程序获取登录用户手机号。

    因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发。

    首先,放置一个 button 按钮,将 buttonopen-type 的属性值设为 getPhoneNumber 

    当用户点击并通过之后,通过绑定的事件获取微信服务器返回过来的加密数据,再根据 session_key 和 app_id 通过后台解密就可以获取手机号啦。

    说到这,就上码吧!!!

     1 <!--index.wxml-->
     2 <view class="container">
     3   <view class="userinfo">
     4     <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
     5     <block wx:else>
     6       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
     7       <text class="userinfo-nickname">{{userInfo.nickName}}</text>
     8     </block>
     9   </view>
    10   <view class="usermotto">
    11     <text class="user-motto">{{motto}}</text>
    12   </view>
    13   <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
    14 </view>
     js
     1  //index.js
     2  //获取应用实例
     3  const app = getApp()
     4  
     5  Page({
     6    data: {
     7      motto: 'Hello World',
     8      userInfo: {},
     9      hasUserInfo: false,
    10      canIUse: wx.canIUse('button.open-type.getUserInfo')
    11    },
    12    onLoad: function() {
    13      
    14    },
    15    getPhoneNumber: function(e) {
    16      console.log(e);
    17      wx.request({
    18        url:'http://host:port/local',//此处Ip就不暴露咯
    19        data: {
    20          "tel": e.detail,//微信小程序服务器返回的信息
    21          "openId":"openId" //openId  注意此处的openId 是我们通过 code(用户登录凭证) 去后台获取到的 openId
    22        },
    23        method: "GET",
    24        dataType: "json",
    25        success: function(result) {
    26          //无区号的手机号
    27          console.log(result.data+"-------手机号");
    28        }
    29      })
    30    }
    31  })
    package cn.byzt.controller;
    
    import cn.byzt.service.impl.WeChatService;
    import cn.byzt.util.Constants;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiOperation;
    import io.swagger.annotations.ApiParam;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    
    /************************
     *author : Damon
     *createTime : 2018/12/11
     *微信相关操作
     ************************/
    @Api(tags = "微信相关操作")
    @RestController
    @RequestMapping("/we/chat")
    public class WeChatController {
    
        @Autowired
        private WeChatService service;
    
        @ApiOperation("将微信获取的加密手机号解密")
        @GetMapping("/decrypt/tel")
        public String decryptTel(@ApiParam("微信小程序授权之后获取电话(加密字符串,json对象)") @RequestParam("tel") String tel,
                                 @ApiParam("openid") @RequestParam("openId") String openId) {
            return service.decryptTel(tel, openId);
        }
    
    
    
    }
    package cn.byzt.service.impl;
    
    import cn.byzt.util.AesUtil;
    import cn.byzt.util.Constants;
    import cn.byzt.util.HttpUtil;
    import com.alibaba.fastjson.JSONObject;
    import com.google.gson.Gson;
    import org.apache.http.HttpEntity;
    import org.apache.http.client.methods.CloseableHttpResponse;
    import org.apache.http.client.methods.HttpPost;
    import org.apache.http.impl.client.CloseableHttpClient;
    import org.apache.http.impl.client.HttpClients;
    import org.apache.http.util.EntityUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.data.redis.core.StringRedisTemplate;
    import org.springframework.http.MediaType;
    import org.springframework.stereotype.Service;
    
    import java.io.*;
    import java.net.HttpURLConnection;
    import java.net.URL;
    import java.util.Base64;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.concurrent.TimeUnit;
    
    /************************
     *author : Damon
     *createTime : 2018/12/11
     *微信相关操作业务实现
     ************************/
    @Service
    public class WeChatService {
    
        @Autowired
        private Gson gson;
       @Autowired
       private StringRedisTemplate redisTemplate;
    /** * 解密手机号(微信返回的) * * @param tel * @return */ 
      public String decryptTel(String tel, String openId) {
        Map
    <String, String> map = gson.fromJson(tel, Map.class);
        map
    = gson.fromJson(AesUtil.aes_decrypt_cbc(Base64.getDecoder().decode(map.get("encryptedData")), Base64.getDecoder().decode(redisTemplate.opsForHash().get(openId, "session_key").toString()), Base64.getDecoder().decode(map.get("iv"))), Map.class); return map.get("purePhoneNumber");
      }
    }

    小编温馨提示,获取微信绑定手机号时需要通过短信验证,不然是拿不到的!!

    但是验证之后如何取消授权,小编还未搞明白!!还请大神指教下

    完美。

  • 相关阅读:
    demo04-默认标签
    demo03-段落标签
    demo02-标题标签
    demo01-注释标签
    前端基础介绍
    xadmin的详细使用
    设置Linux环境变量中文显示乱码
    ES应用
    HTTP协议
    jboss
  • 原文地址:https://www.cnblogs.com/chbyiming-bky/p/10111063.html
Copyright © 2011-2022 走看看