博主项目前后端分离,前面部分教程:
首先需要登录DCloud开发者中心,申请开通一键登录服务。
开通后会得到ApiKey和Apisecret,和计费有关,扣费凭证,请勿泄露此信息!
点击应用管理——我的应用——创建应用,填写信息,appid在manifest.json的基础配置中,Android 应用签名可以使用云打包的公共证书签名,也可以生成自有证书。
添加应用后点击一键登录-基础配置-添加应用(不创建应用应用签名无法填入)等待审核……
(原文链接:https://blog.csdn.net/IDycy/article/details/128949597)
但是并没有使用云函数和云服务空间,而是交给自己的服务器处理,因为虽然云函数可以直接拿到手机号传给后端登录,但是为了安全考虑,还是没有直接前端拿手机号
把access_token和openid交给后端处理,后端使用云函数处理,具体看官网教程
uni.preLogin({
//预登录
provider: 'univerify', //用手机号登录
success() {
console.log('预登录成功')
uni.login({
//正式登录,弹出授权窗
provider: 'univerify',
univerifyStyle: {
// 自定义登录框样式
"fullScreen": true, // 是否全屏显示,true表示全屏模式,false表示非全屏模式,默认值为false。
"backgroundColor": "#ffffff", // 授权页面背景颜色,默认值:#ffffff
"phoneNum": {
"color": "#000000", // 手机号文字颜色 默认值:#000000
},
"authButton": {
"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值:#3479f5
"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)
"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持)
"textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff
"title": "本机号码一键登录", // 授权按钮文案 默认值:“本机号码一键登录”
},
"buttons": {
"iconWidth": "30px",
"list": [{
"provider": "sinaweibo",
"iconPath": "/static/sina.png"
},
{
"provider": "weixin",
"iconPath": "/static/wechat.png"
},
{
"provider": "qq",
"iconPath": "/static/qq.png"
}
]
},
},
async success(res) {
// 正式登录成功
console.log(res, 50);
let params = {
url: `/App/OneClickLogin?accessToken=${res.authResult.access_token}&openId=${res.authResult.openid}`,
method: 'POST',
};
const result =await request(params);
console.log(result)
if (result.statusCode === 200 && result.data
.success) {
if(result.data.data){
this.userdata = JSON.parse(JSON.stringify(result.data.data))
if (result.data.data.userOrCustomer === 1) {
uni.reLaunch({
url: '/shoppages/shopindex/shopindex',
success(res) {
console.log
},
fail(err) {
console.log(err)
}
})
} else {
uni.redirectTo({
url: '/pages/index/index',
success(res) {
console.log(res)
},
fail(err) {
console.log(err)
}
})
}
uni.closeAuthView() //关闭授权登录界面
try {
uni.setStorageSync('Token', result.data.data.token);
that.$store.commit('setuserinfo', this.userdata);
} catch (e) {
console.log(e)
}
}else{
uni.closeAuthView() //关闭授权登录界面
}
} else {
uni.showModal({
content: result.data.errMsg,
showCancel: false,
success:function(res){
if (res.confirm) {
uni.closeAuthView() //关闭授权登录界面
console.log('关闭授权登录界面');
}
}
})
}
},
fail(err) {
// 正式登录失败
console.log(`一键登录失败(${err.errCode})`, err.errMsg)
uni.closeAuthView()
//关闭授权登录界面
}
})
},
fail(err) {
// 预登录失败
console.log(`预登录失败`, err.errMsg)
}
})