uni-app接入一键登录功能
一键登录功能官方文档
官方文档地址：https://uniapp.dcloud.net.cn/univerify.html
使用一键登录功能条件
- 开通uni一键登录服务，开通后添加需要申请开通一键登录功能的应用。
开通一键登录服务文档地址:https://doc.dcloud.net.cn/uniCloud/uni-login/service.html
Android使用自有证书：如果你使用了自有证书，需要在 我的应用-> 选择你的应用 -> 各平台信息，找到你的Android端应用配置相应签名参数，否则在创建一键登录应用的时候签名参数是没有的。
如果你使用
keytool -list -v -keystore {your_app}.keystore打印参数发现你的md5参数没有，请参考这个获取md5签名参数：https://ask.dcloud.net.cn/article/38778
我用的是里面大佬分享的不降级的方式，这种方式需要先安装openssl
- 开通uniCloud服务
一键登录功能需要用到云空服务空间和云函数所以必须开通服务空间，你一键登录创建的原函数上传后也会存在这里面。
- 配置manifest.json ，需要在App模块配置勾选上OAuth(登录鉴权)和一键登录(univerify)
创建云uniCloud云开发环境
上面的步骤都配置好了，接下来就可以回到编辑器创建云开发环境了， 右击你的项目文件夹 -> 选择创建uniCloud云开发环境 -> 选择你的云服务空间类型(阿里云、腾讯云、支付宝小程序云)。创建好之后，右击生成的uniCloud文件夹关联你的服务空间。
创建云函数
右击cloudfunctions文件夹选择新建云函数/云对象选项去创建你的云函数。创建完并添加完代码后，右击你创建的云函数文件夹上传部署你的云函数。
云函数代码
'use strict';
exports.main = async (event, context) => {
// event里包含着客户端提交的参数
const res = await uniCloud.getPhoneNumber({
appid: '__UNI__xxxxxx', // 替换成自己开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数
provider: 'univerify',
apiKey: 'xxxxxxxxxxxxxxxx', // 在开发者中心开通服务并获取apiKey
apiSecret: 'xxxxxxxxxxxxxx', // 在开发者中心开通服务并获取apiSecret
access_token: event.access_token,
openid: event.openid
})
console.log('res>>>>>>>>>>>>>>>',res); // res里包含手机号
// 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端
// 如果数据库在uniCloud上，可以直接入库
// 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，将手机号通过http方式传递给其他服务器的接口，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
// return {
// code: 0,
// message: '获取手机号成功',
// data:res
// }
return res
}
一键登录功能代码
// 手机号一键登录
loginPhone() {
let that = this
uni.preLogin({
provider: 'univerify',
success(res) { //预登录成功
// 显示一键登录选项
console.log('预登录成功');
uni.login({
provider: 'univerify',
univerifyStyle: { // 自定义登录框样式
//参考`univerifyStyle 数据结构`
"fullScreen": false, // 是否全屏显示，默认值： false
"title": '快速登录',
"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
"phoneNum": {
"color": "#000000", // 手机号文字颜色 默认值：#000000
"fontSize": "18" // 手机号字体大小 默认值：18
},
"slogan": {
"color": "#8a8b90", // slogan 字体颜色 默认值：#8a8b90
"fontSize": "12" // slogan 字体大小 默认值：12
},
// 一键登录
"authButton": {
"normalColor": "#d20000", // 授权按钮正常状态背景颜色 默认值：#3479f5
"highlightColor": "#d20000", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
"disabledColor": "rgba(210, 0, 0,.6)", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
"title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
},
// 其他登录方式
"otherLoginButton": {
"visible": "true", // 是否显示其他登录按钮，默认值：true
"title": "短信验证码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
},
"privacyTerms": {
"defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
"textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
"termsColor": "#1d4788", // 协议文字颜色 默认值： #1d4788
"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
"fontSize": "12", // 字体大小 默认值：12,
"privacyItems": [
// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
{
"url": "https://你的协议地址", // 点击跳转的协议详情页面
"title": "《隐私协议》" // 你的协议名称
}
]
}
},
success(res) { // 登录成功
console.log(res);
that.openid = res.authResult.openid;
that.access_token = res.authResult.access_token;
// 客户端(调用云函数) 调用云函数来实现整个业务逻辑
// 在得到access_token后，通过callfunction调用云函数
uniCloud.callFunction({
// name 是你的云函数名称，如果你的的云空间有多个app需要开通一键登录功能，可以通过名称区分使用的云函数
name: "getPhoneNumber",
data: {
openid: that.openid,
access_token: that.access_token
}
}).then(res => {
console.log("获取成功");
// console.log(res); // res 内容包含手机号码
// 获取用户的手机号
that.phoneNumber = res.result.phoneNumber;
/**到这已经拿到手机号了，后续可以使用获取到的手机号调用后端同事给的手机号码登录接口*/
that.verifyMobile(res.result.phoneNumber)
}).catch((err) => {
// 执行失败
})
},
// 当用户点击自定义按钮时，会触发uni.login的fail回调[点击其他登录方式，可以跳转页面]
// 判断返回数据执行任意逻辑
fail(res) { // 登录失败
console.log(res.errCode)
console.log(res.errMsg)
if (res.code == "30002") {
// 切换为验证码登录
uni.closeAuthView();
that.loginType = '2'
} else if (res.code == "30008") {
// 点击了自定义登录按钮--暂未启用
}else if(res.code == '30006'){
uni.closeAuthView();
uni.showToast({
title:'一键登录失败，请重试。',
icon:'none'
})
}
}
})
},
fail(res) { // 预登录失败
// 不显示一键登录选项（或置灰）
// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
if(res.errCode == 40101 || res.errCode == 40201 || res.errCode == 40301){
uni.showToast({
icon: "none",
title: '请检查一下手机卡类型是否是正常运营商手机卡，关闭飞行模式后重新尝试。',
duration: 3000,
});
}else{
uni.showToast({
icon: "none",
title: `您的手机号/设备暂不支持一键登录，请尝试其它登录方式。(${res.errCode})`,
duration: 3000,
});
}
setTimeout(() => {
// 关闭一键登录弹框
uni.closeAuthView();
}, 1000);
console.log('预登录失败', res.errCode)
console.log(res.errMsg)
}
});
},
到这里，配置部分和代码部分就结束了，接下来就需要你去处理调试过程中的问题了。
温馨提示：
-
如果你使用自定义基座，配置完后，先打个新的自定义基座再去真机调试。
-
iOS端因为有测试证书和生产证书，测试证书可以换一个appid，申请两个开通一键登录功能的应用进行测试。
-
一键登录服务如果你已经通过审核的应用需要更换签名，更换并通过审核后，ios端需要重新打包发布后才能生效。
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
