微信小程序获取用户手机号码

我们在做小程序开发的过程中,经常会涉及到用户认证的问题,最普遍的就是获取用户的手机号码一键登录

获取用户手机号码 分为以下几步:

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

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

开源字节

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值