uni-app手机号一键登录是DCloud联合个推公司推出的，整合三大运营商网关认证能力的服务。
通过运营商的底层SDK，实现App端无需短信验证码直接获取手机号，实现一键登录功能。手机一键登录 替换了短信验证登录的方式，消除有短信验证模式等待时间较长，操作繁琐和容易泄露的痛点。
- 支持版本：HBuilderX 3.0+
- 支持项目类型：uni-app的App端，5+App，Wap2App
- 支持系统平台：Android、IOS
- 支持运营商：中国移动、中国联通、中国电信
一、开通服务
登录DCloud开发者后台，找到“一键登录”，选择“基础配置”，开通一键登录功能。
二、添加应用
- DCloud AppId：创建uniapp项目时，生成的ID，如?__UNI__XXXXXX
- 应用名称：填写App名称即可
- Android签名：打包时使用的包名
- Android应用签名MD5：通过keytool工具自定义生成，也可以使用dcloud测试默认：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58。 建议自己生成
- IOS BundleId：IOS打包时的包名，一般跟Android包名一样
提交申请后，如”开通服务“中图例，状态为”正常“，则审核通过。
三、充值
一键登录是一个收费项目，需要充值后使用。开发环境中，可以”连接本地云函数“实现登录功能。
四、安全配置
在一键登录中选择”安全配置“项，添加服务空间，系统提供uniCloud服务空间白名单安全配置，可以提高接口调用安全性，防止被他人盗用。
五、实现一键登录功能
5.1 创建云函数
创建云函数其实很简单，如果有不清楚的，可以参照前一篇文章中如何创建的：uni-app中使用uniCloud实现发送短信验证码（开通、配置、使用）
注：开发云函数或调用云函数，一定要先开通云空间
uniCloud云开发平台地址：uniCloud官网-web控制台
代码如下：
'use strict';
exports.main = async (event, context) => {
// event里包含着客户端提交的参数
const res = await uniCloud.getPhoneNumber({
appid: '_UNI_ABCDEFG', // 替换成自己开通一键登录的应用的DCloud appid
provider: 'univerify',
apiKey: 'xxx', // 在开发者中心开通服务并获取apiKey
apiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecret
access_token: event.access_token,
openid: event.openid
});
return {
code: 0,
data: res,
message: '获取手机号成功'
}
}5.2 客户端-请求登录授权
预登录操作可以判断当前设备环境是否支持一键登录。代码如下：
uni.preLogin({
provider: 'univerify',
success(){ //预登录成功
// 显示一键登录选项
},
fail(res){ // 预登录失败
// 不显示一键登录选项（或置灰）
// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
console.log(res.errCode)
console.log(res.errMsg)
}
})- 如果当前设备环境不支持一键登录，此时应该显示其他的登录选项。
- 如果手机没有插入有效的sim卡，或者手机蜂窝数据网络关闭，都有可能造成预登录校验失败。
预登录成功后，可以调用授权功能，根据用户操作及授权结果返回对应的回调，拿到access_token，代码如下：
uni.login({
provider: 'univerify',
univerifyStyle: { // 自定义登录框样式
//参考`univerifyStyle 数据结构`
},
success(res){ // 登录成功
console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
},
fail(res){ // 登录失败
console.log(res.errCode)
console.log(res.errMsg)
}
})5.3 返回值
{
"errMsg": "login:ok",
"authResult": {
"openid": "208E2FBE6EF64DF3B2D377D886EF2A14124262bfd7ae16465ea0f0634554dcee7636",
"access_token": "ZGI4NjkxZWE4YjAyNGUzMjhiMmZiNDcwODBjYjc5MDF8fDJ8djJ8Mg=="
}
}5.4 客户端通过callFunction向uniCloud云端换取手机号信息
通过5.3中的返回值，通过执行云函数换取手机号信息，代码如下：
// 在得到access_token后，通过callfunction调用云函数
uniCloud.callFunction({
name: 'xxx', // 你的云函数名称
data: {
'access_token': 'xxx', // 客户端一键登录接口返回的access_token
'openid': 'xxx' // 客户端一键登录接口返回的openid
}
}).then(res => {
// res.result = {
// code: '',
// message: ''
// }
// 登录成功，可以关闭一键登录授权界面了
}).catch(err=>{
// 处理错误
})5.5 综合示例
以上 客户端整合后，如下代码所示：
methods: {
//登录函数
login(){
let that = this;
uni.preLogin({
provider: 'univerify',
success() {
uni.login({
provider: 'univerify',
success: res => {
if(res.errMsg=='login:ok'){
//执行云函数
uniCloud.callFunction({
name: 'phoneNumber',
data: {
// 客户端一键登录接口返回的access_token
access_token: res.authResult['access_token'],
// 客户端一键登录接口返回的openid
openid: res.authResult['openid']
}
}).then(res => {
//关闭弹框事件
uni.closeAuthView();
if(res.result['code']==0){
//获取的手机号
//do somthing...
console.log(res.result['phoneNumber']);
}else{
uni.showToast({
icon: 'none',
title: '授权失败~'
});
}
//if end
}).catch(msg => {
//关闭弹框事件
uni.closeAuthView();
console.error(msg);
});
}else{
//关闭弹框事件
uni.closeAuthView();
uni.showToast({
icon: 'none',
title: res['errMsg']
});
}
},
fail: res => {
uni.showToast({
icon: 'none',
title: res['errMsg']
});
}
});
},
fail: res => {
uni.showToast({
icon: 'none',
title: res['errMsg']
});
}
});
}
}
以上仅供参考，更详细请访问官方文档：概述 | uni-app官网
