微信小程序获取手机号授权完整实现

2020/9/11 19:23:20 人评论 次浏览 分类:开发资料

一.app.js配置

App({
  onLaunch: function () {
    
  },
  onShow: function () {
    
  },
  onHide: function () {
    //	console.log(getCurrentPages())
  },
  onError: function (msg) {
    //console.log(msg)
  },

  globalData: {
    userInfo: null,
    appid: "",
    appsecret: "",
    phoneNumber: '',
    getSessionKeyUrl: 'http://localhost:8888/test/getsessionkey',
    getPhoneUrl: 'http://localhost:8888/test/getphone',
    orderHomeUrl: 'http://localhost:8888/login?phone=',
    driverLoginUrl: 'http://localhost:8888/driver/login'
  }
});

二.app.json配置

{
  "pages": [
    "pages/login/login",
    "pages/main/main",
    "pages/driverlogin/driverlogin"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F8F8F8",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

三.微信授权

1.页面

<view wx:if="{{isShow}}" >
    <view class="container" style="padding:0rpx">
        <image src='./login.png' style="z-index:-99;width:100%;height:100%;" mode="widthFix"></image>
        <view style="margin-top:10rpx; width: 98%;" >
            <button class="show" type="primary" lang="zh_CN" open-type='getPhoneNumber'  bindgetphonenumber="getPhoneNumber">{{wechat}}</button>
        </view>
    </view>
</view> 
<view class="container" wx:else></view>

2.页面样式

.show{
  display: block;
  border-radius: 8rpx;
  margin: 20rpx 20rpx 20rpx 20rpx;
  font-size: 35rpx;
}

.container{
  position: fixed;  /*关键属性,设置为fixed*/
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

3.json

{
  "usingComponents": {}
}
  • 1
  • 2
  • 3

4.js

const app = getApp();
Page({
  data: {
    // 判断小程序的API,回调,参数,组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getPhoneNumber'),
    wechat: '微信快捷登录',
    isShow: false
  },
  onLoad: function() {
    // 从缓存中取手机号
    console.log("获取手机号!")
    try {
      var value = wx.getStorageSync('phoneNumber')
      if (value) { // 说明已登录 跳转 页面
        console.log("获取缓存:"+value)
        wx.navigateTo({
          url: '../main?param=' + value
        })
      }else{// 未登录 显示 微信授权页面
        this.setData({
          isShow: true
        })
      }
    } catch (e) {

    }
    // 解决第一次获取手机号失败问题
    wx.login({
      success: res => {
        if(res.code){
          console.log("code->", res.code)
        }
      }
    })
  },
  // 0.获取手机号授权
  getPhoneNumber: function(e) {
    // 用户拒绝授权
    if(e.detail.errMsg == "getPhoneNumber:fail user deny") {
      wx.showToast({
        icon: "none",
        title: '请允许获取手机号,否则功能不可用!',
      })
      return
    }
   
    /// 用户允许授权
    console.log("iv->", e.detail.iv); //包括敏感数据在内的完整用户信息的加密数据,需要解密
    console.log("encryptedData->", e.detail.encryptedData); //加密算法的初始向量,解密需要用到

    /// 获取手机号
    // 1.获取临时登录凭证code
    wx.login({
      success: res => {
        if(res.code){
          this.code = res.code;
          console.log("code->", res.code)
          this.getSessionKey(res.code, e.detail.encryptedData, e.detail.iv);
        }
      }
    })
    },
  // 2.访问登录凭证校验接口获取session_key(后续改成后台实现)
  getSessionKey: function(js_code, encryptedData, iv) {
    wx.request({
      url: app.globalData.getSessionKeyUrl,
      data: {
          'jscode': js_code,
          'sign': 'sign'
      },
      method: 'GET', 
      header: {
          'content-type': 'application/json'
      }, // 设置请求的 header
      success: function(data) {
        console.log("session_key->", data.data)
        if(data.data==undefined){
          wx.showToast({
            icon: "none",
            title: 'session_key获取失败,请重新登录!',
          })
          return
        }
        // 3. 解密获取手机号
        wx.request({
          url: app.globalData.getPhoneUrl,
          data: {
              'encryptedData': encodeURIComponent(encryptedData),//需要进行编码
              'iv': iv,
              'sessionKey': data.data,
              'sign': 'sign',
          },
          method: 'GET', 
          header: {
              'content-type': 'application/json'
          }, // 设置请求的 header
          success: function(data2) {
              console.log(data2.data.phoneNumber)
              if(data2.statusCode == 200) { 
                if(data2.data.phoneNumber==undefined){
                  // 获取手机号失败 跳转到 常规 用户登录页面(通过webview)
                  wx.navigateTo({
                    url: '../driverlogin/driverlogin'
                  })
                  return
                }
                // 存储数据到缓存
                wx.setStorage({
                  key:"phoneNumber",
                  data:data2.data.phoneNumber
                })
                // 4.跳转web-view页面
                wx.navigateTo({
                  url: '../main?param=' + data2.data.phoneNumber
                }) // 4
              }
          },
          fail: function(err) {
              console.log(err);
              wx.showToast({
                icon: "none",
                title: '获获取手机号失败,请重试!',
              })
          }
        })// 3
      },
      fail: function(err) {
          console.log(err);
          wx.showToast({
            icon: "none",
            title: 'session_key获取失败,请重新登录!',
          })
          return
      }
    })
  }// 2
})

4.后端实现

1)获取sessionkey
@GetMapping("getsessionkey")
@ResponseBody
public synchronized Object getSessionKey(String jscode,String sign) {
	MyResult res = new MyResult();
	if(StringUtils.isBlank(checkcode)) {
		res.setCode(-1);
		res.setMsg("鉴权失败!");
		return res;
	}
	
	if(!checkcode.equals("sign")) {
		res.setCode(-1);
		res.setMsg("鉴权失败!");
		return res;
	}
	
	if(StringUtils.isBlank(sign)||checkcode.equals("undefined")) {
		res.setCode(-1);
		res.setMsg("无效参数!");
		return res;
	}
	
	OkHttpClient client = new OkHttpClient().newBuilder()
			  .build();
	String requestStr = miniProgramConfig.getSessionkeyurl()
			  +"?appid="+miniProgramConfig.getAppid()
			+"&secret="+miniProgramConfig.getSecret()
			  +"&js_code="+jscode
			  +"&grant_type=authorization_code";
	Request request = new Request.Builder()
	  .url(requestStr)
	  .method("GET", null)
	  .build();
	try {
		Response response = client.newCall(request).execute();
		String responseStr = response.body().string();
		JSONObject jsonObject = JSONObject.parseObject(responseStr);
		// 获取到session_key
		String session_key = jsonObject.getString("session_key");
		
		if(StringUtils.isBlank(session_key)) {
			res.setCode(-1);
			res.setMsg("获取sessionkey失败!");
			return res;
		}
		return session_key;
	} catch (IOException e) {
		logger.error("encryptedData,decode失败!", e);
		res.setCode(-1);
		res.setMsg("获取sessionkey失败!");
		return res;
	}
}
2)获取解密手机号
@GetMapping("getphone")
	@ResponseBody
	public synchronized Object getPhone(String encryptedData, String iv, String sessionKey,String sign) {
		MyResult res = new MyResult();
		if(StringUtils.isBlank(sign)) {
			res.setCode(-1);
			res.setMsg("鉴权失败!");
			return res;
		}
		
		if(!sign.equals("sign")) {
			res.setCode(-1);
			res.setMsg("鉴权失败!");
			return res;
		}
		
		if(StringUtils.isBlank(encryptedData)
				||encryptedData.equals("undefined")
				||StringUtils.isBlank(iv)
				||iv.equals("undefined")
				||StringUtils.isBlank(sessionKey)
				||sessionKey.equals("undefined")) {
			res.setCode(-1);
			res.setMsg("参数错误!");
			return res;
		}
		
		// 解码
		try {
			encryptedData = URLDecoder.decode(encryptedData,"UTF-8");
		} catch (UnsupportedEncodingException e) {
			res.setCode(-1);
			res.setMsg("encryptedData,decode失败!");
			logger.error("encryptedData,decode失败!", e);
			return res;
		}
		return WechatDecryptDataUtil.decryptData(encryptedData, sessionKey, iv);
		
	}
3)解密工具类
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.bouncycastle.jce.provider.BouncyCastleProvider;
import org.bouncycastle.util.Arrays;
import org.bouncycastle.util.encoders.Base64;

import com.zit.tis.wechat.miniproject.MiniProgramController;

import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import java.security.Key;
import java.security.Security;

/**
 * 微信工具类
 */
public class WechatDecryptDataUtil {
	private static Logger logger = LogManager.getLogger(WechatDecryptDataUtil.class);

    public static void main(String[] args) {
        String result = decryptData(
                "BLY05rL1qLzGdqn+m4s4KfnM9CbMCm2sTZmgIcUJUpoOVeZkKKYh06ATVm2BgX8HUsH1a93811fhwr70MTh2Pk2qw9rPBzvos3husUJdVfaZgBk3Afp6wNFS0/kcoyt+7q2eMrIHMe6wkc4J0hgbbkxdUwZag/pyKXwe4pUzSQfta7dfBHy3DLu+REvwHiDNfvI3KJbZ0l8/9vRjfSmT4Q==",
                "C9Z59YjFkCDT8+9NQ3OxcA==",
                "oOWTpbZ80evG/GQqRdUu3w=="
        );
        System.out.println("result = " + result);
    }

    public synchronized static String decryptData(String encryptDataB64, String sessionKeyB64, String ivB64) {
    	String res = null;
    	try {
    		res = new String(
                    decryptOfDiyIV(
                            Base64.decode(encryptDataB64),
                            Base64.decode(sessionKeyB64),
                            Base64.decode(ivB64)
                    )
            );
		} catch (Exception e) {
			logger.error("encryptDataB64:"+encryptDataB64+"\n"+"sessionKeyB64:"+sessionKeyB64+"\n"+"ivB64:"+ivB64);
		}
        
        return res;
    }

    private static final String KEY_ALGORITHM = "AES";
    private static final String ALGORITHM_STR = "AES/CBC/PKCS7Padding";
    private static Key key;
    private static Cipher cipher;

    private static void init(byte[] keyBytes) {
        // 如果密钥不足16位,那么就补足.  这个if 中的内容很重要
        int base = 16;
        if (keyBytes.length % base != 0) {
            int groups = keyBytes.length / base + (keyBytes.length % base != 0 ? 1 : 0);
            byte[] temp = new byte[groups * base];
            Arrays.fill(temp, (byte) 0);
            System.arraycopy(keyBytes, 0, temp, 0, keyBytes.length);
            keyBytes = temp;
        }
        // 初始化
        Security.addProvider(new BouncyCastleProvider());
        // 转化成JAVA的密钥格式
        key = new SecretKeySpec(keyBytes, KEY_ALGORITHM);
        try {
            // 初始化cipher
            cipher = Cipher.getInstance(ALGORITHM_STR, "BC");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 解密方法
     *
     * @param encryptedData 要解密的字符串
     * @param keyBytes      解密密钥
     * @param ivs           自定义对称解密算法初始向量 iv
     * @return 解密后的字节数组
     */
    private static byte[] decryptOfDiyIV(byte[] encryptedData, byte[] keyBytes, byte[] ivs) {
        byte[] encryptedText = null;
        init(keyBytes);
        try {
            cipher.init(Cipher.DECRYPT_MODE, key, new IvParameterSpec(ivs));
            encryptedText = cipher.doFinal(encryptedData);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return encryptedText;
    }

}
赞赏

相关教程

  • 微信小程序卡券开发(亲测)

    提示:小程序卡券和公众平台调用基本一致,请先查看公众平台卡券文档一、公众帐号/小程序绑定由于微信卡券用的是一套逻辑。所以小程序需要先和公众账号绑定,才能在小程序中调起公众平台卡券登录微信公众平台:https://open.weixin.qq.com/ 进行绑定操作二、公众号卡券添加小……

    2017/6/3 18:45:01

共有访客发表了评论 网友评论

验证码: 看不清楚?