uniapp开发微信小程序的登录功能实现
3.结合以上这两个api获取的一些数据组合成接口所需要的参数,然后通过调用后端的接口去得到用户的token。调用uni.login()这个api去获取code字段。,得到一些登录接口相关的一些数据。1.首先我们是需要去。获取token的方法。
·
小程序的登录是必不可少的,那我们如何去实现这个功能呢
1.首先我们是需要去调用uni.getUserProfile()去获取用户信息的,得到一些登录接口相关的一些数据
2.再去调用uni.login()这个api去获取code字段
3.结合以上这两个api获取的一些数据组合成接口所需要的参数,然后通过调用后端的接口去得到用户的token
具体实现如下
// 获取微信用户的基本信息
async getUserProfile () {
// desc 为必填字段,用于声明获取用户个人信息后的用途,不超过 30 个字符
const [err, res] = await uni.getUserProfile({desc: '完善用户信息'})
// 用户拒绝授权
if (err) return uni.$showMsg('您拒绝授权!')
// 用户同意授权,保存用户信息到 vuex 中
console.log(res)
this.saveUserInfo(res.userInfo)
// 获取登录成功后的 Token 字符串
this.getToken(res)
}
获取token的方法
// 调用登录接口,换取永久的 token
async getToken(info) {
// 调用微信登录接口
const [err, res] = await uni.login()
// 判断微信登录 uni.login() 是否调用失败
if (err) return uni.$showMsg('微信登录失败!')
// 准备参数对象
const data = {
code: res.code, // 微信登录返回的 code
encryptedData: info.encryptedData, // 包括敏感数据在内的完整用户信息的加密数据
iv: info.iv, // 加密算法的初始向量
rawData: info.rawData, // 不包括敏感信息的原始数据字符串
signature: info.signature // 用于校验用户信息
}
// wxfb52f2d7b2f6123a
// 由于不是小程序开发者,可以写死一个假值进行下面流程的测试
const { data: loginResult } = await uni.$http.post('/users/wxlogin', data)
// 登录是否成功判断
if (loginResult.meta.status !== 200) return uni.$showMsg('黑马优购登录失败!')
uni.$showMsg('登录成功!')
}
更多推荐
已为社区贡献3条内容
所有评论(0)