微信小程序获取用户手机号码
作者:源字节1号
- 2022 年 8 月 03 日
本文字数:1734 字
阅读完需:约 6 分钟

我们在做小程序开发的过程中,经常会涉及到用户认证的问题,最普遍的就是获取用户的手机号码一键登录
获取用户手机号码 分为以下几步:
1、第一点击页面获取授权 code
2、第二获取小程序 token
3、第三根据 token 与 code 获取手机号码
4、执行登录认证逻辑
接下来我们来实现以上四步
首先先看前端页面获取 code 与手机号码:
<button open-type="getPhoneNumber" @getphonenumber="weChatLogin" class="clearBtn"> <view class="loginType"> <view class="item"> <view class="icon"><u-icon size="60" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view> 微信 </view> </view></button>
weChatLogin(e){ uni.showLoading({title:"登录中....",mask:true}) let code= e.detail.code; let url = "/api/miniWxApi/getPhoneNum?code="+code; this.$u.get(url).then(res => { let phoneNum = res.phoneNum let weChatUrl = "/api/weChatLogin"; this.$u.post(weChatUrl,{ username: phoneNum, code: code }).then(data => { uni.hideLoading(); // 登录成功初始化token与用户信息 this.$u.vuex('vuex_token', data.token); this.$u.vuex('vuex_user', data.loginUser); uni.switchTab({ url: '/pages/index/index' }) }); });},
复制代码
接下来我们看后端获取 token 与认证逻辑:
/** * 获取用户手机号码 */@GetMapping("/getPhoneNum")public AjaxResult getPhoneNum(String code){ AjaxResult ajax = AjaxResult.success(); // Object token = getAccessToken(); Object token = WxUtil.obtainAccessToken(APPID, SECRET); String phoneNum = WxUtil.getPhoneNum(token,code); ajax.put("phoneNum",phoneNum); return ajax;}
/** * 获取AccessToken */@GetMapping("/getAccessToken")public AjaxResult getAccessToken(){ AjaxResult ajax = AjaxResult.success(); Object token = redisCache.getCacheObject(accessTokenKey); if(StringUtils.isNull(token)){ token = WxUtil.obtainAccessToken(APPID, SECRET); redisCache.setCacheObject(accessTokenKey,token,30,TimeUnit.MINUTES); } ajax.put(accessTokenKey,token); return ajax;}
/** * 微信小程序注册/登录 */@PostMapping("/weChatLogin")public AjaxResult weChatLogin(HttpServletRequest request,@RequestBody LoginBody loginBody){ AjaxResult ajax = AjaxResult.success(); String msg = "登录成功"; if (StringUtils.isEmpty(loginBody.getUsername())){ msg = "用户名不能为空"; return error(msg); } // 判断是否为新用户 SysUser sysUser = userService.selectUserByUserName(loginBody.getUsername()); // 不是新用户,创建用户 if(sysUser == null){ sysUser = new SysUser(); sysUser.setUserName(loginBody.getUsername()); sysUser.setNickName(loginBody.getUsername()); sysUser.setPassword(loginBody.getUsername()); sysUser.setPhonenumber(loginBody.getUsername()); sysUser.setPassword(SecurityUtils.encryptPassword(loginBody.getUsername())); sysUser.setDeptId(110L); Long[] postIds = new Long[1]; postIds[0] = 8L; Long[] roleIds = new Long[1]; roleIds[0] = 5L; sysUser.setPostIds(postIds); sysUser.setRoleIds(roleIds); // 保存完用户后,还需要设置用户的角色,部门与岗位 userService.insertUser(sysUser); } // 生成token LoginUser loginUser = new LoginUser(sysUser,null); String token = tokenService.createToken(loginUser); ajax.put(Constants.TOKEN, token); ajax.put("loginUser", loginUser); return ajax;}
复制代码
如上步骤即可实现 uniapp 微信小程序登录,开源字节坚持写优雅的代码,以上代码可在开源字节低代码平台中免费获取
如若转载,请注明出处:开源字节 https://sourcebyte.cn/article/209.html
划线
评论
复制
发布于: 刚刚阅读数: 3
源字节1号
关注
一个着迷于技术又喜欢不断折腾的技术活跃者 2022.03.09 加入
一个着迷于技术又喜欢不断折腾的技术活跃者。喜欢并热爱编程,执着于努力之后所带来的美好生活!










评论