微信小程序获取登录手机号

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

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

首先,放置一个 button 按钮,将 button 的 open-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");   } }

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

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

完美。

原文地址:https://www.cnblogs.com/chbyiming-bky/p/10111063.html

时间: 2024-10-02 17:36:55

微信小程序获取登录手机号的相关文章

微信小程序获取用户手机号详解

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

微信小程序获取用户手机号 记录 (PHP)

1. 用户登录时需要获取 openid ,同时可以获取 session_key, 二者同时返回, 此时我们要将二者存储在服务端. 2. 小程序端 button 按钮拉起授权, 向api 传递 iv 和 encryptedData . 3. api 接口 引入 下载的 类文件后, 通过以下两行代码(其中 $sessionKey 是 之前我们在用户登录时存储在服务端的 session_key) $pc = new \WXBizDataCrypt($APPID, $sessionKey); $errC

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

前端通过微信接口获取这三个参数 $code = input('post.code'); $encryptedData = urldecode(input('post.encryptedData')); $iv = input('post.iv'); 首先  我们拿code去curl获取到用户的信息 (openID,session_key) 然后  通过session_key,appid,encrypteData,iv 这几个参数 通过官方demo 的解密方式 获取到信息 最后  电话号入库就结束

php(ThinkPHP)实现微信小程序的登录过程

源码也在我的github中给出 https://github.com/wulongtao/think-wxminihelper 下面结合thinkPHP框架来实现以下微信小程序的登录流程,这些流程是结合了官网和github的一个网站综合实现的 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=2017112#wxloginobject https://github.com/cantoo/learning-wxapp/bl

完整微信小程序授权登录页面教程

完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方法.在参考了网路上各种方案之后,实现了用户在授权之后跳转到小程序首页的授权登录页面. 2.实现效果 3.实现思路 在进入小程序时先对授权情况进行判断,若已经过授权则直接跳转到首页,若还未经过授权则进入授权页面,点击页面的授权按钮会弹出选择框,选择"拒绝"则不进行跳转,选择"允许&

微信小程序获取输入框(input)内容

微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type="tel" bindinput="getInput" /> js Page({ data:{ getInput: null }, getInput:function(){//方法1 this.data.getInput = e.detail.value; }, /

微信小程序-获取用户信息和openid,session_key,

1:微信小程序获取用户信息:比如常用的 avatarUrl (用户头像),nickName (用户名称) 等等, (1):获取用户信息调用 wx.getUserInfo 代码如下: 直接请求接口就可以了,随后把数据存放到storage中,下次直接取 就不用再请求接口,, 2:获取 openid (1):请求wx.login 接口,代码如下: url:是微信提供的 appid:是小程序的appid secret:是小程序开发设置的 AppSecret 只要获取到这两项,用户信息可以用于页面,ope

微信小程序-获取当前位置和城市名

微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数): 3,微信没有将经纬度直接转换为地理位置,借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API(返回信息中包括国家,省,市,区,经纬度等地理位置)步骤描述清楚以后,下面就开始按步骤操作了:(本文仅仅讲述如何获取用户地理位置的授权) 图示为获取用户地理位置授权弹窗 在用户首次进入某页面(

微信小程序 授权登录详解(附完整源码)

一.前言 由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发. 官方连接:https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二.实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口.在用户进入微信小程序的时候,判断用户是否