uniapp使用uniCloud实现手机号一键登录

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官网