uniapp app端使用一键登录
·
由于项目需要用到手机号一键登录
在manifest中配置
uniapp的一键登录需要用到云函数
所以去配置dcloud后台服务空间
https://unicloud.dcloud.net.cn/
去配置dcloud后台开通一键登录然后去申请应用
https://unicloud.dcloud.net.cn/pages/uni-login/app-config
然后去右键项目创建uniCloud云开发绑定刚才申请的服务空间
在里面的cloudfunctions中创建函数
index.js文件
'use strict';
exports.main = async (event, context) => {
// event里包含着客户端提交的参数
console.log("event:",event,context);
const res = await uniCloud.getPhoneNumber({
appid: '', //填写你自己的appid
provider: 'univerify',
access_token: event.access_token,
openid: event.openid
})
console.log(res); // res里包含手机号
// 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端
// 如果数据库在uniCloud上，可以直接入库
// 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，
// 将手机号通过http方式传递给其他服务器的接口，
// 详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
return {
code: 0,
message: '获取手机号成功',
data:res
}
}选择公共模块
使用代码
// sim授权登录
const goSimAuth = () => {
if (!checkSelectAgreement('sim')) return;
uni.getProvider({
service: 'oauth',
success: function(res) {
console.log(res.provider, res.provider == 'univerify') // ['qq', 'univerify']
if (~res.provider.indexOf('univerify')) {
console.log("univerify:SIM一键登录",verifyButton.value) // ['qq', 'univerify']
uni.login({
provider: 'univerify',
univerifyStyle: {
fullScreen: true,
backgroundColor: "#ffffff", // 授权页面背景颜色，默认值：#ffffff
backgroundImage: "/static/imgs/loginIcon/univerify/univerify.png",
icon: {
"path": " ", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
"width": "0px", //图标宽度 默认值：60px
"height": "0px" //图标高度 默认值：60px
},
closeIcon: {
"path": " ", // 自定义显示在授权框中的logo，仅支持本地图片
"width": "0px", //图标宽度 默认值：60px (HBuilderX 4.0+ 仅iOS支持)
"height": "0px" //图标高度 默认值：60px (HBuilderX 4.0+ 仅iOS支持)
},
phoneNum: {
"color": "#05110D" // 手机号文字颜色 默认值：#202020
},
slogan: {
"color": "#05110D" // slogan 字体颜色 默认值：#BBBBBB
},
authButton: {
"normalColor": "#FF6B35", // 授权按钮正常状态背景颜色 默认值：#3479f5
"highlightColor": "#FF6B35", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
"disabledColor": "#FF6B35", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
"title": "登录", // 授权按钮文案 默认值：“本机号码一键登录”
"borderRadius": "8px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
},
otherLoginButton: {
"visible": true, // 是否显示其他登录按钮，默认值：true
"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明
"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明
"textColor": "#7B7B7B", // 其他登录按钮文字颜色 默认值：#656565
"title": "短信验证码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
"borderColor": "", //边框颜色 默认值：透明（仅iOS支持）
"borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
},
privacyTerms: {
"defaultCheckBoxState": true, // 条款勾选框初始状态 默认值： true
"isCenterHint": false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
"uncheckedImage": "/static/imgs/loginIcon/univerify/wxz.png", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)
"checkedImage": "/static/imgs/loginIcon/univerify/xz.png", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)
"checkBoxSize": 12, // 可选 条款勾选框大小
"textColor": "#969B9C", // 文字颜色 默认值：#BBBBBB
"termsColor": "#1F2021", // 协议文字颜色 默认值： #5496E3
"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
"privacyItems": [ // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
{
"url": "https://api.minihongyu.com/privacy/usageLicense.html", // 点击跳转的协议详情页面
"title": "用户协议" // 协议名称
},
{
"url": "https://api.minihongyu.com/privacy/privacyAgreement.html", // 点击跳转的协议详情页面
"title": "隐私政策" // 协议名称
}
]
},
buttons: { // 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
"iconWidth": "40px", // 图标宽度（高度等比例缩放） 默认值：45px
"list": verifyButton.value
}
},
success: function(res) {
// 关闭授权弹窗
uni.closeAuthView()
// {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
// 登录成功
console.log(res.authResult, "sim授权的信息")
// return
simAuth.value = res.authResult
goUniCloudFunction()
},
fail: function(err) {
if (err.code == '30008') {
console.log(err.index)
switch (err.index) {
case 0: {
// 苹果登录
console.log('苹果登录')
goAppleAuth();
break;
}
case 1: {
// 微信登录
console.log('微信登录')
goWechatAuth();
break;
}
case 2: {
// 抖音登录
console.log('抖音登录')
goTiktokAuth()
break;
}
default: {
console.log('不知道点的啥')
}
}
} else if(err.code == '30005') {
console.log("111请开启移动数据后再次使用")
uni.showToast({
title: err.metadata.desc+',请开启移动数据后再次使用',
icon: "none"
})
}else{
uni.closeAuthView();
}
// 登录授权失败
console.log(err, "当前授权·失败了")
}
})
}
}
});
}
// 上传云函数
const goUniCloudFunction = () => {
// simAuthPhone.value = '15881775851';
// goSmiLoginApi();
uniCloud.callFunction({
name: "simLogingFunction", // 填写你自己的云函数名称
//传入上面获取的openid和access_token获取手机号
data: {
access_token: simAuth.value.access_token, // 客户端一键登录接口返回的access_token
openid: simAuth.value.openid // 客户端一键登录接口返回的openid
}
})
.then((dataRes) => {
//此处已经成功获取手机号等信息
console.log("云函数返回的参数", dataRes)
simAuthPhone.value = dataRes.result.data.phoneNumber;
goSmiLoginApi();
// 获取手机号后根据自己的需求做后面的登录操作即可
//...
})
.catch((err) => {
console.log(err);
console.log("云函数报错", err)
uni.showToast({
title: err.errMsg,
icon: "none"
})
})
}
// smi手机号一键登录授权 给后端传递获取到的unionid和openId还有手机型号的信息
const goSmiLoginApi = async () => {
let data = ref({
phoneNumber: simAuthPhone.value,
brand: systemInfo.value.brand,
invitationCode: uni.getStorageSync('invitationCode') || ''
})
//#ifdef APP-PLUS
data.value.deviceType = isIos.value ? 'IOS' : 'Android';
// #endif
//#ifndef APP-PLUS
data.value.deviceType = 'PC';
// #endif
console.log(data.value, "上传");
// return
uni.showLoading({
title: "加载中",
mask: true,
})
try {
const res = await request({
url: `/app/logIn/simLogIn`,
method: 'POST',
data: data.value
})
uni.hideLoading()
console.log(res, "当前接口返回回来的参数")
if (res.code == 200) {
uni.setStorageSync('userInfo', res.data)
uni.setStorage({
key: 'token',
data: res.data.token,
success: function() {
uni.switchTab({
url: '/pages/index/index'
});
}
});
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
});
}
} catch (err) {
console.log(err, "sim登录失败")
uni.showToast({
title: err.data.message,
icon: 'none',
duration: 2000
});
}
}调试ios需要打包，安卓标准基座就可以
更多推荐
6
0- 0
已为社区贡献5条内容
所有评论(0)