uniapp小程序授权微信登录获取头像昵称openid及手机号

<template>
	<view class="login">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		  <image class="avatar"  v-model="userInfo.avatar"  src="{{userInfo.avatar}}"></image>
		</button> 
		<!-- 由于是个人注册的小程序,所以无法进行微信认证和手机号的获取 -->
		<button v-if="false" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
		<input type="nickname"  @blur="getnickname" v-model="userInfo.nickName" class="weui-input" placeholder="请输入昵称"/>
		<button @click="handleWxLogin" class="login-btn cu-btn block bg-green lg round">微信登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  userInfo:{loginStyle:0,
			  avatar :'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
			  nickName:'',code:''},
			}
		},
		methods: {
			getPhoneNumber (e) {
			    console.log(e.detail.code)  // 动态令牌
			    console.log(e.detail.errMsg) // 回调信息(成功失败都会返回)
			    console.log(e.detail.errno)  // 错误码(失败时返回)
			},
			getnickname(e){
				console.log("dataLee2"+JSON.stringify(e))
				this.userInfo.nickName=e.detail.value;
			},
			onChooseAvatar(e) {
				console.log("dataLee"+JSON.stringify(e))
				this.userInfo.avatar = 'data:image/jpeg;base64,' +     wx.getFileSystemManager().readFileSync(e.detail.avatarUrl,'base64')
				console.log(this.userInfo.avatar)
			},
			handleWxLogin(){
				console.log("form:"+JSON.stringify(this.userInfo))
				if (this.userInfo.avatar === "") {
				  this.$modal.msgError("请选择您的头像")
				} else if (this.userInfo.nickName === "") {
				  this.$modal.msgError("请输入您的昵称")
				} else {
				  this.$modal.loading("登录中,请耐心等待...")
				  var _this=this;
				  wx.login({
				    success (res) {
						console.log("dataL"+JSON.stringify(res))
						console.log("code:"+res.code)
				      if (res.code) {
						_this.userInfo.code = res.code;
				        //发起网络请求
				        _this.pwdLogin()
				      } else {
				        console.log('登录失败!' + res.errMsg)
				      }
				    }
				  })
				}
			},
			// 微信授权信息登录
			async pwdLogin() {
			  this.$store.dispatch('Login', this.userInfo).then(() => {
			    this.$modal.closeLoading()
			    this.loginSuccess()
			  }).catch(() => {
			    if (this.captchaEnabled) {
			      this.getCode()
			    }
			  })
			},
			// 登录成功后,处理函数
			loginSuccess(result) {
			  // 设置用户信息
			  this.$store.dispatch('GetInfo').then(res => {
			    this.$tab.reLaunch('/pages/index')
			  })
			}
		}
	}
</script>

<style lang="scss">
	.login{
		 text-align: center;
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		.avatar-wrapper{
			text-align: center;
			margin-top: 10px;
			margin-bottom: 10px;
			 width:80px;
			 height:80px;
			 .avatar{
				width:80px;
				height:80px;
			 }
		}
		.weui-input{
			text-align: center;
			width: 100px;
			height: 20px;
			margin-bottom: 10px;
		}
	}
</style>

java代码:

##根据前台获取手机号组件获取的code获取手机号

@Transactional(rollbackFor = Exception.class)
    @Override
    public ReceptionUser wxLogin(ReceptionUser receptionUser) {
        //先获取access_token,再获取手机号。
        //请求地址分别是"https://api.weixin.qq.com/cgi-bin/token"
        //和https://api.weixin.qq.com/wxa/business/getuserphonenumber?access token=$ftoken)
        String phoneNumber = null;
        try{
            //因为access_token的有效期为7200秒,所以获取之后需要存储起来,再判断是否过期,过期了就更新
            String key = Constants.ACCESS_TOKEN;
            String accessToken = "";
            if (redisCache.hasKey(key)){
                accessToken = redisCache.getCacheObject(key);
            }
            if (StrUtil.isBlank(accessToken)){
                //如果过期了,就重新获取
                accessToken = wxMaService.getAccessToken(true);
                redisCache.setCacheObject(key,accessToken,7100, TimeUnit.SECONDS);
            }
            if (StrUtil.isBlank(accessToken)){
                return null;
            }
            String urlphone = ACCESS_TOKEN+accessToken;
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("code",receptionUser.getCode());
            String reqParam = jsonObject.toJSONString();
            String result = HttpUtils.sendPost(urlphone,reqParam);
            if (StrUtil.isNotBlank(result)){
                JSONObject resultJSONObject = JSON.parseObject(result);
                System.out.println("结果:"+resultJSONObject);
                Integer errcode = resultJSONObject.getInteger("errcode");
                if (errcode != null && errcode.equals(0)){
                    JSONObject phoneInfo = resultJSONObject.getJSONObject("phone_info");
                    if (phoneInfo != null && phoneInfo.size() > 0){
                        获取手机号
                        phoneNumber = phoneInfo.getString("phoneNumber");
                    }
                }else{
                    return null;
                }
            }

        }catch (Exception e){
            e.printStackTrace();
            return  null;
        }
        if (StrUtil.isBlank(phoneNumber)){
            return  null;
        }

        //查询用户是否存在,不存在则新增
        ReceptionUser user = receptionUserMapper.selectReceptionUserByAccountNumber(phoneNumber);
        if (user != null){
            return user;
        }else{
            ReceptionUser add = new ReceptionUser();
            add.setId(IdUtils.getId());
            add.setCreateTime(new Date());
            add.setAccountNumber(phoneNumber);
            add.setPhone(phoneNumber);
            add.setUserType(RUserType.ORDINARY_REGISTERED_USERS.getCode());
            if (StrUtil.isBlank(add.getNickName())){
                String phone = add.getPhone().substring(add.getPhone().length() - 4);
                add.setNickName("用户"+phone);
            }
            if (StrUtil.isBlank(add.getAvatar())){
                List<CustomDefaultImg> list = userDefaultAvatarService.list(new LambdaQueryWrapper<CustomDefaultImg>()
                .eq(CustomDefaultImg::getType, CustomDefaultImgType.RECEPTION_DEFAULT_AVATAR.getCode()));
                if (list != null && list.size() > 0){
                    CustomDefaultImg userDefaultAvatar = list.get(0);
                    if (userDefaultAvatar != null && StrUtil.isNotBlank(userDefaultAvatar.getPath())){
                        add.setAvatar(userDefaultAvatar.getPath());
                    }
                }
            }
            int addresult = receptionUserMapper.insertReceptionUser(add);
            if (addresult > 0){
                return add;
            }
        }
        return null;
    }


##微信授权手动填写头像昵称及wx.login获取的code java代码
@Override
    public AjaxResult login(BlogUserDto blogUserDto) {
        BlogUser blogUser = new BlogUser();
        blogUser.setScene(blogUserDto.getScene());
        blogUser.setNickName(blogUserDto.getNickName());
        if (StrUtil.isNotBlank(blogUserDto.getAvatar()) && blogUserDto.getAvatar().contains("base64")){
            MultipartFile file = FileUtils.base64ToMultipartFile(blogUserDto.getAvatar());
            try {
                if(file != null){
                    // 上传文件路径
                    String filePath = SpringAutumnComeBlogConfig.getUploadPath();
                    // 上传并返回新文件名称
                    String fileName = FileUploadUtils.upload(filePath, file);
                    String url = serverConfig.getUrl() + fileName;
                    AjaxResult ajax = AjaxResult.success();
                    ajax.put("fileName" , fileName);
                    blogUserDto.setAvatar(String.valueOf(ajax.get("fileName")));
                }
            } catch (Exception e) {
            }
        }
        blogUser.setAvatar(blogUserDto.getAvatar());
        if(blogUserDto.getLoginStyle()  != null){
            //微信登录
            if(blogUserDto.getLoginStyle() == 0){
                String code = blogUserDto.getCode();
                if (ObjectUtil.isNull(code)){
                    return AjaxResult.error("code不能为空");
                }
                String sessionKey = null;
                String openId = null;
                try{
                    WxMaJscode2SessionResult result = this.wxMaService.getUserService().getSessionInfo(code);
                    sessionKey = result.getSessionKey();
                    openId = result.getOpenid();
                }catch (Exception e){
                    log.error(e.getMessage());
                }
                if (sessionKey == null || openId == null){
                   return AjaxResult.error("获取openid或者sessionKey为空");
                }
                blogUser.setOpenid(openId);
                //如果openid存在
                BlogUser openidisnotnull = blogUserMapper.selectOne(new LambdaQueryWrapper<BlogUser>().eq(BlogUser::getOpenid,openId));
                if (ObjectUtil.isNotNull(openidisnotnull)){
                    blogUser.setId(openidisnotnull.getId());
                    blogUserMapper.updateBlogUser(blogUser);
                }else{
                    blogUser.setId(IdUtils.getLongId());
                    blogUserMapper.insertBlogUser(blogUser);
                }

            }else if (blogUserDto.getLoginStyle() == 2){
                //账号密码登录
                //判断账号是否存在
                blogUser = blogUserMapper.selectOne(new LambdaQueryWrapper<BlogUser>()
                        .eq(BlogUser::getUsername,blogUserDto.getUsername()));
                if (blogUser == null){
                    return AjaxResult.error("账户不存在");
                }else{
                    //判断密码是否正确
                    if (!blogUserDto.getPassword().equals(blogUser.getPassword())){
                        return AjaxResult.error("密码不正确");
                    }
                }

            }
            //创建token
            Map<String,Object> claims = new HashMap<>();
            claims.put("uuid",IdUtils.getLongId());
            claims.put(Constants.BLOG_LOGIN_USER_KEY,blogUser.getId());
            String token = tokenService.createToken((claims));

            redisCache.setCacheObject(CacheConstants.BLOG_LOGIN_TOKEN_KEY + blogUser.getId(),token);
            AjaxResult ajax = AjaxResult.success();
            ajax.put(Constants.TOKEN, token);

            return ajax;
        }

        return null;
    }

注释:

如果获取access_token出现如下错误,请使用稳定版:

地址:
https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getStableAccessToken.html


POST https://api.weixin.qq.com/cgi-bin/stable_token 
{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest, could get access_token by getStableAccessToken, more details at https://mmbizurl.cn/s/JtxxFh33r rid: 65b3294e-6993fa45-745b3def"}
结果:{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest, could get access_token by getStableAccessToken, more details at https://mmbizurl.cn/s/JtxxFh33r rid: 65b3294e-6993fa45-745b3def"}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
根据提供的引用内容,可以得知获取微信小程序用户手机号的方法有两种,分别是新版和老版。下面分别介绍这两种方法: 1. 新版获取用户手机号的方法: 前端需要授权两次,一次获取用户信息授权码code,另外一次获取用户手机授权码code,全部传给后端。后端通过用户信息授权获取openid,通过手机授权获取手机号码。具体步骤如下: - 前端调用wx.login()方法获取用户信息授权码code和用户手机授权回调里的iv和encryptedData。 - 前端调用wx.getPhoneNumber()方法获取用户手机号授权码code。 - 前端将获取到的code和iv、encryptedData一起传给后端。 - 后端通过用户信息授权码code获取openid,通过手机授权获取手机号码。 - 后端将获取到的手机号码进行绑定用户,然后通过登录验证返回给前端登录凭证token。 2. 老版获取用户手机号的方法: 前端需要传给后端授权码code和用户手机授权回调里的iv和encryptedData。后端通过code获取openid和sessionKey,然后用sessionKey和iv解密encryptedData获取手机号。最后通过手机号进行绑定用户,然后通过登录验证返回给前端登录凭证token。具体步骤如下: - 前端调用wx.login()方法获取用户信息授权码code和用户手机授权回调里的iv和encryptedData。 - 前端将获取到的code和iv、encryptedData一起传给后端。 - 后端通过code获取openid和sessionKey。 - 后端用sessionKey和iv解密encryptedData获取手机号。 - 后端将获取到的手机号码进行绑定用户,然后通过登录验证返回给前端登录凭证token。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

飞流银河

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

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

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

打赏作者

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

抵扣说明:

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

余额充值