-
首先布局登录按钮(触发登录的一定要是button,button才有获取用户的方法)
文章来源:https://www.toymoban.com/news/detail-548873.html
<button
open-type="getPhoneNumber"
@click.stop="loginfn"
@getphonenumber.stop="onGetPhoneNumber"
>点击微信一键登录</button>
2.写点击button之后的逻辑,,获取iv,code,ncryptedData,调用后端接口进行登录
文章来源地址https://www.toymoban.com/news/detail-548873.html
// 用户授权登录
//首先点击登录按钮的时候获取一下code,保存到data里
loginfn(){
wx.login({
success(res) {
that.code = res.code;
return;
},
});
}
//调用button自带的弹窗获取用户信息方法
async onGetPhoneNumber(val) {
//此时的val是用户点击了允许还是拒绝
let that = this;
if (val.detail.errMsg === "getPhoneNumber:ok") {
//保存需要的** iv, encryptedData **
const { iv, encryptedData } = val.detail;
//调用后台登录的接口,传递参数
const result = await that.api.getLoginApi({
loginType: "1",
iv,
code: that.code,
encryptedData,
});
// 登陆成功
if (result.data.token) {
//保存token
uni.setStorageSync("token", result.data.token);
that.token = uni.getStorageSync("token");
uni.showToast({
title: 登录成功",
duration: 800,
icon: "success",
});
// 刷新回到用户页页面
uni.reLaunch({
url: "/pages/myself/myself",
});
return;
}
}
} else {
uni.showToast({
title: "已取消登录",
duration: 500,
icon: "success",
});
}
}
到了这里,关于uniapp实现小程序登录,微信一键登录,获取token,iv,code,ncryptedData的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!