uniapp 云开发APP手机号码一键登录

univerify 是DCloud 推出的一键登录产品，通过与运营商深度合作，实现APP用户无需输入帐号密码，即可使用本机手机号码自动登录的能力。univerify是替代短信验证登录的下一代登录验证方式，能消除现有短信验证模式等待时间长、操作繁琐和容易泄露的痛点。
详细请参考官方文档：https://uniapp.dcloud.io/uniCloud/univerify

1.开通uniCloud服务

申请开通服务地址https://unicloud.dcloud.net.cn/login

2.开通uni一键登录服务

开发者需要登录DCloud开发者中心，申请开通一键登录服务。

3.建立云函数并上传部署

'use strict';

const db = uniCloud.database()

exports.main = async (event, context) => {
	const res = await uniCloud.getPhoneNumber({
		appid: '', // 替换成自己开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数
		provider: 'univerify',
		apiKey: 'f6**************ab', // 在开发者中心开通服务并获取apiKey
		apiSecret: '38c************a8', // 在开发者中心开通服务并获取apiSecret
		access_token: event.access_token,
		openid: event.openid
	});

	console.log(res); // res里的数据格式	{ code: 0, success: true, phoneNumber: '186*****078' }

	// 执行入库等操作，正常情况下不要把完整手机号返回给前端	
	return await db.collection('regUser').add({		
		openid: event.openid, //前端提交过来的数据
		PhoneNumber:res.phoneNumber,
		createTime: Date.now()		
	})
};

在云数据库建立regUser数据表，用于保存登录成功的手机号与openid

4.前端代码

<template>
	<view>
		<view v-if="isSupport" class="content">
			<image class="logo" src="/static/logo.png" @click="oneLogin()"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
		</view>
		<view v-if="!isSupport">
			<input placeholder="账号" />
			<input placeholder="密码" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '点击图片一键登录',
				isSupport: true
			}
		},

		methods: {
			oneLogin() {
				uni.getProvider({ //获取可用的服务提供商
					service: 'oauth',
					success: function(res) {
						console.log(res.provider) // ['weixin', qq', 'univerify']
					}
				});

				uni.preLogin({ //预登录
					provider: 'univerify', //用手机号登录
					success() {
						console.log('预登录成功')
						uni.login({ //正式登录，弹出授权窗
							provider: 'univerify',
							univerifyStyle: { // 自定义登录框样式
								"fullScreen": true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
								"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff 
								"phoneNum": {
									"color": "#ff00ff", // 手机号文字颜色 默认值：#000000   
								},
								"authButton": {
									"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5  
									"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
									"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
									"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff  
									"title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”  
								}
							},
							success(res) { // 正式登录成功
								console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
								
								// 在得到access_token后，通过callfunction调用云函数
								uniCloud.callFunction({
									name: 'getPhoneNumber', // 云函数名称
									data: { //传给云函数的参数
										'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
										'openid': res.authResult.openid // 客户端一键登录接口返回的openid
									},
									success(callRes) {
										console.log('调用云函数成功'+ callRes)										
									},
									fail(callErr) {
										console.log('调用云函数出错'+ callErr)
									},
									complete() {
										uni.closeAuthView() //关闭授权登录界面
									}
								})
							},
							fail(err) { // 正式登录失败
								console.log(err.errCode)
								console.log(err.errMsg)
								uni.closeAuthView() //关闭授权登录界面
							}
						})
					},

					fail(err) { //预登录失败
						console.log('错误码：' + err.errCode)
						console.log(err.errMsg)
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

5.要注意的事项

5-1. 代码要运行到手机才能成功获取手机号

5-2. 手机如果是双卡，要把其中一张卡取出来，在手机里停用也不行，否则预登录的时候会报错：30005–预登录失败。

5-3. App模块配置勾选一键登录。

6.调试的效果