uni-app实现手机一键登录

uni-app实现手机一键登录

一键登录优势

号码认证（Number Verification Service）服务一般集成三大运营商特有的网关取号、验证能力，自动通过底层数据网关和短信网关识别本机号码，在不泄漏用户信息的前提下，安全、快速地验证用户身份。提供一键登录、本机校验两大功能，无需经过繁琐的注册登录环节即可一键免密注册和登录 APP，可提升用户使用体验。

• 快速高效

  用户授权后可快速获得用户号码，免去验证码等待、输入等操作步骤，缩短用户注册/登录流程，即可一键免密注册/登录 APP。操作简便，用户转化率高。

• 三网合一

  集成中国三大运营商特有的网关取号、验证能力，支持三网手机号码认证。一次集成，即可完成三网对接，全国全网覆盖。

• 安全稳定

  在不泄漏用户信息的前提下，验证用户身份，不存在被截获、被篡改的风险，接口采用 HTTPS+ 双签名加密，渠道稳定，安全性高。

一键登录原理

一键登录：依托运营商的移动通信网络，采用通信网关取号技术，准确识别用户流量卡归属的手机号码。在获得用户授权后，App端（适配iOS和Android）可使用本机号码实现一键免密登录。

取号方法

通过调用安卓的getPhoneInfo或iOS的getPhoneNumberCompletion，在用户无感知的情况下进行网络判断、蜂窝数据网络切换和网关取号等操作（以上操作均需消耗一定时间），返回取号是否成功的结果。

• 取号所需网络环境：运营商取号能力是通过数据网关实现，取号过程须在数据流量打开的情况下才能进行。因此，用户如果关闭数据流量将无法取号；若当前信号弱或者网络有干扰时，时延会高于平均值，取号成功率降低。
• 超时设置：SDK默认超时设置为8000ms，同时提供设置取号超的方法：安卓通过setOverTime设置，iOS通过setTimeoutInterval设置。
• 运营商判断：SDK提供判断用户当前网络状态和流量卡所属运营商的方法，通过调用安卓SDK的getNetworkType或iOS的networkInfo可获得以上信息，以便对不同用户选择不同的运营商的SDK进行取号或选择不同的登录方式。
• 关于取号缓存：应用取号或者授权成功后，SDK将取号的一个临时凭证缓存在本地，缓存能有效提高取号成功率、降低时延，并允许用户在未开启蜂窝网络时成功取号。SDK本身对缓存有处理逻辑，在某些场景下（如换卡）会让缓存提前失效，但若应用对安全性要求较高，也可以通过SDK提供的方法（安卓的delScrip和iOS的delectScrip）让缓存马上失效。

前置条件

• 手机安装有SIM卡
• 手机开启/有数据流量
• uniApp开发者中心注册账号并实名认证
• 开通uniCloud服务（一键登录需要uniCloud，其他服务建议部署在自有后台服务器）
• 开通uniApp一键登录服务
• uniApp一键登录关联uniCloud服务空间

开通uniCloud服务并创建服务空间

说明

一键登录在客户端获取 access_token 后，必须在 uniCloud 换取手机号码。
对于5+ App，需要新建一个 uni-app 应用，且开通其uniCloud服务。
在uniCloud的云函数中拿到手机号后，可以通过云函数url方式生成普通的http接口给 5+ App 使用。
开通uniCloud是免费的，其中阿里云是全免费，腾讯云是提供一个免费服务空间。

注意:
虽然一键登录需要uniCloud，但并不要求开发者把所有的后台服务都迁移到uniCloud

服务器API详见：uniCloud云函数中使用一键登录

开通

申请开通地址：https://unicloud.dcloud.net.cn/home

创建服务空间

创建服务空间成功

开通uniApp一键登录服务

详见 一键登录开通指南

说明：

• AppId：可以从开发者中心后台创建应用获取，或者从HBuilder新建应用获取。
• Android证书：Android平台云端打包 - uniApp公共测试证书

开通成功

一键登录关联服务空间

添加配置好的服务空间，入口，添加服务空间成功如下

注：
在 uniCloud 中使用一键登录接口时，将允许调用接口的服务空间添加到此列表中。服务空间添加成功后，只有列表中的服务空间才可以调用当前账号下的短信接口。

创建uni-app项目

HBuilder创建项目

项目创建uniCloud云开发环境

关联云服务器空间

关联服务空间成功

在项目manifest.json页面“App模块配置”项的“OAuth(登录鉴权)”下勾选“**一键登录(uni-verify)**”

开发一键登录

云函数开发

点击uniCloud -> cloudfunctions，创建getPhoneNumber -> index.js 文件。

index.js源码

'use strict';

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

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

	// 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端
	// 如果数据库在uniCloud上，可以直接入库
	// 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，将手机号通过http方式传递给其他服务器的接口，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient

	// 访问HTTP服务，把openid+phoneNumber传递到后端服务器，获取token
	// const apiUrl = 'http://localhost:8888/login';
	const apiUrl = 'http://xxx/login';
	const httpRes = await uniCloud.httpclient.request(apiUrl, {
		method: 'POST',
		// 指定以application/json发送data内的数据
		contentType: 'json',
		data: {
			openid: event.openid,
			phoneNumber: res.phoneNumber
		},
		// 指定返回值为json格式，自动进行parse
		dataType: 'json'
	});
	console.log(httpRes);

	// 返回用户登录结果，成功则增加token
    // 转发后端服务器的返回结果到uniapp前端
	return httpRes;
};

保存后上传部署到云空间

后端服务器代码

代码逻辑：
获取uniCloud.httpclient发送的openid+phoneNumber参数，通过数据库数据校验，判断用户是否需要一键注册（通过雪花算法生成用户ID）并登录，或者直接一键登录，再赋值用户相应权限，生成token，返回到uniCloud.httpclient。

前端代码

结构

index.vue

<template>
	<view>
		<view v-if="autoStatus" class="login-view">
			<image class="logo-img" src="/static/logo.png"></image>
			<view class="login-btn" @click="submitlogin()">
				一键登录
			</view>
		</view>
		<view v-else>
			不支持一键登录功能
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				autoStatus: true
			}
		},
		onLoad() {
			this.isAutoLogin()
		},
		methods: {
			// 判断是否支持一键登陆
			isAutoLogin() {
				let _that = this
				// 获取可用的服务提供商
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						// ['weixin', qq', 'univerify']
						console.log(res.provider)
					}
				});
				// 预登录
				uni.preLogin({
					// 用手机号登录
					provider: 'univerify',
					success() {
						_that.autoStatus = true
						console.log('预登录成功')
					},
					// 预登录失败
					fail(err) {
						_that.autoStatus = false
						console.log('错误码：' + err.errCode)
						console.log(err.errMsg)
					}
				})
			},
			submitlogin() {
				let _that = this
				// 正式登录，弹出授权窗
				uni.login({
					provider: 'univerify',
					// 自定义登录框样式
					univerifyStyle: {
						// 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
						"fullScreen": true,
						// 授权页面背景颜色，默认值：#ffffff 
						"backgroundColor": "#ffffff",
						"phoneNum": {
							// 手机号文字颜色 默认值：#000000
							"color": "#2281F5",
						},
						"authButton": {
							// 授权按钮正常状态背景颜色 默认值：#3479f5 
							"normalColor": "#3479f5",
							// 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
							"highlightColor": "#2861c5",
							// 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
							"disabledColor": "#73aaf5",
							// 授权按钮文字颜色 默认值：#ffffff  
							"textColor": "#ffffff",
							// 授权按钮文案 默认值：“本机号码一键登录”  
							"title": "本机号码一键登录"
						}
					},
					// 正式登录成功
					success(res) {
						// {openid:'登录授权唯一标识', access_token:'接口返回的token'}
						console.log(res.authResult);

						// 在得到access_token后，通过callfunction调用云函数
						uniCloud.callFunction({
							// 云函数名称
							name: 'getPhoneNumber',
							// 传给云函数的参数
							data: {
								// 客户端一键登录接口返回的access_token
								'access_token': res.authResult.access_token,
								// 客户端一键登录接口返回的openid
								'openid': res.authResult.openid
							},
							success(callRes) {
								console.log('调用云函数成功' + callRes)
								// 设置Token
								uni.setStorage({
									key: 'token',
									data: callRes.result.data.data.token
								})
								uni.closeAuthView()
								// 跳转首页
								uni.redirectTo({
									url: '/pages/home/home'
								})
							},
							fail(callErr) {
								console.log('调用云函数出错' + callErr)
							},
							complete() {
								// 关闭授权登录界面
								// uni.closeAuthView()
							}
						})
					},
					// 正式登录失败
					fail(err) {
						console.log(err.errCode)
						console.log(err.errMsg)
						// 关闭授权登录界面
						uni.closeAuthView()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.logo-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			margin: 100rpx auto;
		}

		.login-btn {
			width: 50%;
			text-align: center;
			background-color: #939393;
			color: #FFFFFF;
			border-radius: 50rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 26rpx;
		}
	}
</style>

home.vue

<template>
	<view>
		<view class="display">欢迎来到二层空间</view>
		<view class="display">你的token如下</view>
		<view class="display"><text>{{data}}</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: ''
			}
		},
		onLoad() {
			this.print()
		},
		methods: {
			print() {
				this.data = uni.getStorageSync('token');
				// this.data = "1111111";
			}
		}
	}
</script>

<style>
	.display {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.display text{
		height: auto;
		width: 80%;
		display: inline-block;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
</style>

测试

真机调试
手机USB连接电脑，选择文件管理，打开开发者调试，HBuilder就可以检测到手机真机。

如果检测不到，参考以下文章
HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题

结果

首页

登录页

成功页

查询调用成功数据 入口

云函数日志 入口

部署发行

• 云函数上云部署

• 后端上服务器部署

• uniapp打包（发行 -> 原生APP-云打包）