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