273 lines
7.9 KiB
Vue
273 lines
7.9 KiB
Vue
<template>
|
||
<view
|
||
style="height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;">
|
||
|
||
<view style="padding: 35rpx;">
|
||
<button type="primary" block open-type="getUserInfo" @getuserinfo="appLoginWx">
|
||
微信一键登录
|
||
</button>
|
||
</view>
|
||
<ywx-auth-model></ywx-auth-model>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
|
||
import ywxAuthModel from "@/components/ywx-auth-model/ywx-auth-model.vue";
|
||
|
||
export default {
|
||
//2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
|
||
components: {
|
||
ywxAuthModel
|
||
},
|
||
data() {
|
||
return {
|
||
openid: "",
|
||
loginstate: "0",
|
||
openid: "",
|
||
userEntity: null,
|
||
terminal: "",
|
||
osVersion: "",
|
||
phoneNumber: "",
|
||
showModal: false, //定义登录弹窗
|
||
}
|
||
},
|
||
onLoad: function() {},
|
||
methods: {
|
||
// 授权获取微信用户信息
|
||
appLoginWx(res) {
|
||
console.log(res)
|
||
// 获取用户信息成功
|
||
if (res.detail.errMsg === 'getUserProfile:ok' || res.detail.errMsg === 'getUserInfo:ok') {
|
||
this.userInfo = res.detail.userInfo;
|
||
let _this = this;
|
||
uni.showLoading({
|
||
title: '获取用户信息...',
|
||
mask: true
|
||
});
|
||
// 获取jsCode
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success(resLogin) {
|
||
console.log(resLogin);
|
||
if (resLogin.errMsg === "login:ok") {
|
||
// 获取jsCode成功，通过jsCode调用微信api获取用户openId
|
||
_this.wechatLogin(resLogin.code);
|
||
return
|
||
}
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '获取用户信息失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
},
|
||
fail() {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '获取用户信息失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
wechatLogin(wxCode) {
|
||
// 这里一般让后端去调用微信api获取openId等信息，前端调用的话像会多下面这个请求
|
||
// 因为若果是后端去调用的话，后端拿到微信api返回的openId后可直接去数据库查询判断该用户是否已注册，
|
||
// 如果已经注册了就直接返回注册的用户信息，
|
||
// 如果未注册，则后端需要返回openId、sessionKeyde等信息，
|
||
// 然后前端页面弹出授权获取手机号码的按钮，用户点击后拿到手机号后进行解密后再把信息提交给后台进行注册
|
||
const params = {
|
||
appid: this.appId, // 小程序的appId（注意需要企业的appId，并且你目前是开发人员，不然后续无法获取到手机号码）
|
||
secret: '***************', // 企业小程序的secret
|
||
js_code: wxCode, // 注意jsCode动态获取的，使用一次后将失效
|
||
grant_type: 'authorization_code' // 这个参数固定写死
|
||
}
|
||
that.$ajax('index/index', {
|
||
code: resLogin.code
|
||
}).then(res => {
|
||
console.log(res)
|
||
})
|
||
// 调用微信api获取openid等信息
|
||
this.$get('https://api.weixin.qq.com/sns/jscode2session', params).then(res => {
|
||
console.log(res)
|
||
if (res.errcode) {
|
||
console.log('获取openId失败')
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '获取用户信息失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return
|
||
}
|
||
this.openId = res.openid
|
||
this.sessionKey = res.session_key
|
||
this.unionid = res.unionid
|
||
|
||
// 调用后端接口判断用户是否已注册过
|
||
this.$post('/login', {
|
||
openId: this.openId
|
||
}).then(res => {
|
||
uni.hideLoading();
|
||
// 若返回的参数中有token说明已经注册过
|
||
if (res.status === 200 && res.data.token) {
|
||
uni.showToast({
|
||
title: '登录成功！',
|
||
duration: 1000
|
||
});
|
||
// 缓存用户信息
|
||
uni.setStorageSync("token", res.data.token);
|
||
uni.setStorageSync("userInfo", res.data);
|
||
// 登录成功返回上一页
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 1000)
|
||
return
|
||
}
|
||
// 走到这里说明没有注册过，需要弹出授权获取用户手机号的弹框按钮让用户授权
|
||
if (res.status == 200) {
|
||
this.showPhone = true
|
||
return
|
||
}
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}).catch(() => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '登录失败，请稍后重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
|
||
}).catch(err => {
|
||
console.log(err)
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '获取用户信息失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
|
||
// 下面注释的就是后端去调用微信api获取用户openId的提供给前端的接口
|
||
// this.$post('/login', {
|
||
// jsCode: wxCode
|
||
// }).then(res => {
|
||
// console.log(res);
|
||
// uni.hideLoading();
|
||
// // 若直接返回token说明已经注册
|
||
// if (res.status === 200 && res.data.token) {
|
||
// uni.showToast({
|
||
// title: '登录成功！',
|
||
// duration: 1000
|
||
// });
|
||
// uni.setStorageSync("token", res.data.token);
|
||
// this.saveUserInfo(res.data);
|
||
// setTimeout(() => {
|
||
// // this.goTabBar('/pages/index')
|
||
// uni.navigateBack({
|
||
// delta: 1
|
||
// })
|
||
// }, 1000)
|
||
// return
|
||
// }
|
||
// if (res.status == 200) {
|
||
// this.openId = res.data.openid
|
||
// this.sessionKey = res.data.session_key
|
||
// this.unionid = res.data.unionid
|
||
// this.id = res.data.id
|
||
// this.showPhone = true
|
||
// return
|
||
// }
|
||
// uni.showToast({
|
||
// title: res.message,
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// });
|
||
// }).catch(() => {
|
||
// uni.hideLoading();
|
||
// uni.showToast({
|
||
// title: '登录失败，请稍后重试',
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// });
|
||
// })
|
||
},
|
||
// 授权电话号回调 (这里千万注意：小程序必须要完成 微信认证才能获取到加密的手机号码)
|
||
getPhone(res) {
|
||
console.log(res)
|
||
if (res.detail.errMsg === 'getPhoneNumber:ok') {
|
||
const encryptedData = res.detail.encryptedData
|
||
console.log(123, sessionKey, encryptedData, iv)
|
||
const pc = new WXBizDataCrypt(this.appId, this.sessionKey)
|
||
const data = pc.decryptData(encryptedData, res.detail.iv) // 这里使用解密手机号的方法
|
||
console.log('解密后 data: ', data.phoneNumber)
|
||
this.phone = data.phoneNumber
|
||
this.showPhone = false
|
||
this.loginHandle()
|
||
} else {
|
||
this.showPhone = false
|
||
uni.showToast({
|
||
title: '获取手机号失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
// 用户注册
|
||
loginHandle() {
|
||
const data = {
|
||
"account": this.phone,
|
||
"icon": this.userInfo.avatarUrl,
|
||
"id": this.id,
|
||
"nickname": this.userInfo.nickName,
|
||
"openId": this.openId,
|
||
"phone": this.phone,
|
||
"unionid": this.unionid
|
||
}
|
||
console.log(data)
|
||
uni.showLoading({
|
||
title: '登录中...',
|
||
mask: true
|
||
});
|
||
this.$post('/login/login', data).then(res => {
|
||
console.log(res);
|
||
uni.hideLoading();
|
||
if (res.status == 200) {
|
||
uni.showToast({
|
||
title: '登录成功！',
|
||
duration: 1000
|
||
});
|
||
uni.setStorageSync("token", res.data.token);
|
||
uni.setStorageSync("userInfo", res.data);
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 1000)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|