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

た入场券 2022-12-03 13:19 389阅读 0赞

## 具体业务 ##

小程序使用手机号登录，需要绑定到当前业务系统。获取手机号时序图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70_pic_center]

## 实现 ##

### 前端 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.encryptedData
    				let 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.code
    								console.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.code
    					console.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` 文件

<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>

`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
            //小程序appId
            requestUrlParam.put("appid", "*****");
            //小程序secret
            requestUrlParam.put("secret", "******");
            //小程序端返回的code
            requestUrlParam.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_id
    		JSONObject 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_id
    			SysUser 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;
    		}
    
    		// 封装 result
    		String token = setResultToken(sysUser, result);
    
    		// 存入redis
    		redisUtil.set(CommonConstant.PREFIX_USER_TOKEN + token, token);
    		sysBaseAPI.addLog("用户名: " + sysUser.getUsername() + ",登录成功！", CommonConstant.LOG_TYPE_1, null);
    
    		return result;
    	}

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

## 效果图 ##

![在这里插入图片描述][20200903220616175.gif_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/1d9086dbeb0a4c57b8aa91b73f27cafd.png
[20200903220616175.gif_pic_center]: /images/20221123/9765d0e05d384cb89ed3e13fcb992057.png