【uni-app】uni-app 小程序获取手机号登录

具体业务

小程序使用手机号登录，需要绑定到当前业务系统。获取手机号时序图如下：

实现

前端 uni-app

我对 uni.request 进行了封装，可能请求方式有些不同

<template><view class="container"><view><image class="logoImg" src="@/static/img/logo.jpg"></image></view><button type="primary" shape="circle" class="loginButton" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button><!-- 底部信息 --><view class="footer"><text>登录代表您已阅读并接受</text><!-- 协议地址 --><navigator url="/pages/member/xieyi" open-type="navigate" style="color: #007AFF;">《用户协议》</navigator></view></view>
</template>
<script>export default {data() {return {code: '' // 登录凭证};},methods: {getPhoneNumber(e) {let that = this;// 不允许授权if (e.detail.errMsg !== "getPhoneNumber:ok") {return;}let encryptedData = e.detail.encryptedDatalet iv = e.detail.iv// 检查登录态是否过期uni.checkSession({success(res) {that.$api.request.wxlogin({code: that.code,encryptedData: encryptedData,iv: iv}, res => {console.log(res)uni.setStorageSync("x-access-token", res.result.token)uni.setStorageSync("userId", res.result.userInfo.id)// 进入首页uni.switchTab({url: '/pages/educational/educational'})});},fail(err) {uni.login({provider: 'weixin',success: res => {that.code = res.codeconsole.log(that.code)}})that.$api.request.wxlogin({code: that.code,encryptedData: encryptedData,iv: iv}, res => {console.log(res)uni.setStorageSync("x-access-token", res.result.token)uni.setStorageSync("userId", res.result.userInfo.id)// 进入首页uni.switchTab({url: '/pages/educational/educational'})});}})}},// 加载登录凭证onLoad: function (options) {let that = this;uni.login({provider: 'weixin',success: res => {that.code = res.codeconsole.log(that.code)}})}}
</script><style lang="scss">.logoImg {width: 250rpx;height: 250rpx;margin-top: 340rpx;border-radius:20upx}.loginButton {margin-top: 70%;background-color: #FF9900;width: 80%;}.footer {padding-left: 140upx;margin-top: 5%;font-size: 30rpx;color: #999999;text-align: center;display: flex}page {background: #fff;}.container {top: 0;padding-top: 50px;position: relative;width: 100%;height: 100%;overflow: hidden;background: #fff;text-align: center;}
</style>

后端 Spring Boot 接口

需要先导入所需的 pom 文件

<!-- Encode Begin -->
<dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk16</artifactId><version>1.46</version></dependency><dependency><groupId>commons-codec</groupId><artifactId>commons-codec</artifactId><version>1.4</version></dependency><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.2.3</version><classifier>jdk15</classifier></dependency><!-- Encode End -->

WchatUtil 工具类

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.springframework.util.Base64Utils;import javax.crypto.BadPaddingException;
import javax.crypto.Cipher;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import java.io.UnsupportedEncodingException;
import java.security.InvalidAlgorithmParameterException;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.security.spec.AlgorithmParameterSpec;
import java.util.HashMap;
import java.util.Map;/*** @ClassName: WeChatUtil* @Auther: Yuu* @Date: 2020/8/21 11:17* @Description: 微信工具类*/
public class WeChatUtil {public static JSONObject getSessionKeyOrOpenId(String code) {String requestUrl = "https://api.weixin.qq.com/sns/jscode2session";Map<String, String> requestUrlParam = new HashMap<>();// https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=164113089&lang=zh_CN//小程序appIdrequestUrlParam.put("appid", "*****");//小程序secretrequestUrlParam.put("secret", "******");//小程序端返回的coderequestUrlParam.put("js_code", code);//默认参数requestUrlParam.put("grant_type", "authorization_code");//发送post请求读取调用微信接口获取openid用户唯一标识JSONObject jsonObject = JSON.parseObject(HttpClientUtil.doPost(requestUrl, requestUrlParam));return jsonObject;}public static String getWxMiniPhone(String sessionkey, String iv, String encryptedData)throws NoSuchPaddingException, NoSuchAlgorithmException, InvalidAlgorithmParameterException,InvalidKeyException, BadPaddingException, IllegalBlockSizeException, UnsupportedEncodingException {byte[] encrypData = Base64Utils.decodeFromString(encryptedData);byte[] ivData = Base64Utils.decodeFromString(iv);byte[] sessionKey = Base64Utils.decodeFromString(sessionkey);String resultString = null;AlgorithmParameterSpec ivSpec = new IvParameterSpec(ivData);SecretKeySpec keySpec = new SecretKeySpec(sessionKey, "AES");Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);resultString = new String(cipher.doFinal(encrypData), "UTF-8");JSONObject object = JSONObject.parseObject(resultString);// 拿到手机号码String phone = object.getString("phoneNumber");return phone;}
}

Spring Boot 后台接口

@PostMapping("wxlogin")public Result<?> WxLogin(String code, String encryptedData, String iv) {// 根据 code 获取 open_idJSONObject sessionKeyOrOpenId = WeChatUtil.getSessionKeyOrOpenId(code);String openId = sessionKeyOrOpenId.getString("openid");String sessionKey = sessionKeyOrOpenId.getString("session_key");// 判断openId是否已经绑定手机号SysUser sysUser = null;if (openId != null) {SysUser sysUserWrapper = new SysUser();sysUserWrapper.setThirdId(openId);QueryWrapper<SysUser> sysUserQueryWrapper = QueryGenerator.initQueryWrapper(sysUserWrapper, null);sysUser = sysUserService.getOne(sysUserQueryWrapper);} else {return Result.error("服务器异常，请稍后重试");}// 第一次登录，绑定手机号if (sysUser == null) {String phone = null;try {phone = WeChatUtil.getWxMiniPhone(sessionKey, iv, encryptedData);} catch (Exception e) {e.printStackTrace();}// 绑定 phone 与 open_idSysUser sysUserPhoneWrapper = new SysUser();sysUserPhoneWrapper.setPhone(phone);QueryWrapper<SysUser> sysUserPhoneQueryWrapper = QueryGenerator.initQueryWrapper(sysUserPhoneWrapper, null);sysUser = sysUserService.getOne(sysUserPhoneQueryWrapper);if (sysUser == null) {return Result.error("您还未绑定系统");}sysUser.setThirdId(openId);sysUserService.updateById(sysUser);}// 检查账号是否有效Result<JSONObject> result = sysUserService.checkUserIsEffective(sysUser);if(!result.isSuccess()) {return result;}// 封装 resultString token = setResultToken(sysUser, result);// 存入redisredisUtil.set(CommonConstant.PREFIX_USER_TOKEN + token, token);sysBaseAPI.addLog("用户名: " + sysUser.getUsername() + ",登录成功！", CommonConstant.LOG_TYPE_1, null);return result;}

其他的方法暂不提供，可自行修改…

效果图

【uni-app】uni-app 小程序获取手机号登录相关推荐

微信小程序获取手机号登录流程
微信小程序获取手机号登录流程首先前端使用wx.login 获取code wx.login({success(res) {if (res.code) {that.setData({code: res. ...
微信小程序获取手机号登录流程(个人开发者账号不支持)
微信小程序获取手机号登录流程所需条件 1. 非个人开发者账号 2. AppID+AppSecret 流程思路 **注意:** 代码实现常见问题所需条件 1. 非个人开发者账号获取手机号文档这 ...
微信小程序获取手机号登录(Java后端)
1.添加依赖 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok< ...
微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...
微信小程序获取手机号并解密详解
微信小程序获取手机号并解密 1 获取手机号 2 解密 2.1 获取所需数据 2.2 解密返回数据 1 获取手机号获取手机号的过程官方文档有详细的介绍.参考官方链接要注意的是,此功能只对非个人且完成 ...
php 微信小程序获取手机号_实例讲解微信小程序获取手机号授权用户登录功能...
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写.本文主要给大家分享微信小程序获取手机号授权用户登录功能,需要的朋友参考下吧, ...
java实现微信、手机号登陆_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPaDirIrkFhoneNumber这个组件通过button来 ...
uni-app微信小程序获取手机号；微信小程序获取手机号，获取到后需要进行解密；微信小程序获取手机号失败 Error：该appId没有权限
方法1.uni-app登录加获取手机号解密-直接看此篇即可解决微信小程序获取手机号注意点: 1.需要先登录,微信小程序登录看这篇 2.手机号获取到时加密的,需要后端解密或者前端自己解密(解密时候就会 ...
php7.4 微信小程序获取手机号
第一步应该先接受获取code 然后得到sessionkey和openid 第二步把openid返回给小程序客户端,同时把sessionkey和openid存入数据库第三步小程序获取手机号时把op ...

【uni-app】uni-app 小程序获取手机号登录

具体业务

实现

前端 uni-app

后端 Spring Boot 接口

效果图

【uni-app】uni-app 小程序获取手机号登录相关推荐

最新文章

热门文章