微信小程序获取用户手机号码
作者:源字节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 加入
一个着迷于技术又喜欢不断折腾的技术活跃者。喜欢并热爱编程,执着于努力之后所带来的美好生活!
评论