uniapp实战(三) -- 小程序微信登录
小程序微信登录的核心是围绕着openId来的,对于每个用户在这个小程序中都有一个唯一的openId来标识用户的身份,但是出于安全考虑,小程序是无法获得openId的,只能获得code,把这个code传给后台,后台根据code,appid,appsecret去获取openid,然后用这个openid来跟用户进行绑定,这样通过code-openid-用户信息的方式,小程序只需要传给后台code就能获取
·
小程序微信登录的核心是围绕着openId来的,对于每个用户在这个小程序中都有一个唯一的openId来标识用户的身份,但是出于安全考虑,小程序是无法获得openId的,只能获得code,把这个code传给后台,后台根据code,appid,appsecret去获取openid,然后用这个openid来跟用户进行绑定,这样通过code-openid-用户信息的方式,小程序只需要传给后台code就能获取到用户的信息了。
第一步,获取微信code,使用code登录
可以通过调用uni.login获取微信code,然后调用后台接口传递code,如果调用成功则跳转到首页,失败则跳转到注册页
由于uni.login不是promise的,我们先来个封装
const uniUtils = {
login(data = {provider: "weixin"}) {
return new Promise((resolve, reject) => {
uni.login({
...data,
success: function (resp) {
resolve(resp);
},
fail: function (e) {
reject(e);
}
})
});
},
getUserInfo(data = {provider: "weixin"}) {
return new Promise((resolve, reject) => {
uni.getUserInfo({
...data,
success: function (resp) {
resolve(resp)
},
fail: function (err) {
reject(err)
}
});
})
}
}
export default uniUtils
然后在main.js里面引入下就能直接用了
import utils from "./utils";
Vue.prototype.$utils = utils
获取微信code,调用后台接口
login: function () {
this.$utils.uniUtils.login().then(async resp => {
try {
let code = resp.code
//通过微信code登录
const res = await this.$api.post({
url: 'api/public/wxLogin',
data: {code}
})
//把用户信息放入vuex中
this.$store.commit('user/SET_USER_INFO', res.data)
//跳转到index页面
uni.switchTab({
url: "/pages/index/index"
})
} catch (e) {
console.error(e)
//状态码50001表示未绑定
if (e.status == 50001) {
uni.showToast({
title: '请先绑定账号',
icon: 'none'
});
setTimeout(() => {
uni.navigateTo({
url: '/pages/register/register'
})
}, 1500)
}
}
})
}
第二步,如果未绑定,则去绑定账号
register: function () {
//获取code
this.$utils.uniUtils.login().then(async resp => {
const {userInfo} = await this.$utils.uniUtils.getUserInfo()
console.log(userInfo)
const bindRes = await this.$api.post({
url: '/api/public/bindUser',
data: {
...this.form,
avatar: userInfo.avatarUrl,
nickname: userInfo.nickName,
code: resp.code
}
})
this.$store.commit('user/SET_USER_INFO', bindRes.data)
//跳转到index页面
uni.switchTab({
url: "/pages/index/index"
})
})
}
更多推荐
已为社区贡献6条内容
所有评论(0)