uniapp实现一键登录（保姆式教程）

最新推荐文章于 2024-09-12 19:06:16 发布

pollyLiang.

最新推荐文章于 2024-09-12 19:06:16 发布

阅读量1.8w

点赞数 26

分类专栏： uniapp 文章标签： uni-app vue

本文链接：https://blog.csdn.net/qq_41556539/article/details/119911241

版权

uniapp 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

官方文档入口链接

前置条件：
手机安装有sim卡
手机开启数据流量（与wifi无关，不要求关闭wifi，但数据流量不能禁用。）
开通uniCloud服务（但不要求所有后台代码都使用uniCloud）

没调用成功时候不要急，根据错误码来找问题错误码入口链接

第一步 .开通uniCloud服务并创建服务空间

申请开通地址：https://unicloud.dcloud.net.cn/home
创建样板图以（phonedemo）服务空间名为例
在这里插入图片描述

第二步开通uni一键登陆服务

开发者需要登录 DCloud开发者中心，申请开通一键登录服务。
详细步骤参考：开通一键登录服务的详细教程

申请一键登录服务信息ok样板图（调用成功一次会扣掉0.02）。
申请一键登陆服务信息（调用成功一次会扣掉0.02）

第三步回到开发者中心（安全配置）https://dev.dcloud.net.cn/uniLogin/security 关联上配置好的服务空间

添加配置好的服务空间入口
添加服务空间 ok

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

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

在这里插入图片描述

第五步实战教程

1.创建新项目（phoneLogin）
在这里插入图片描述

建立云函数并上传部署 (点击项目右键 uniCloud云开发环境 (以阿里云为例))
点击uniCloud右键（关联云服务空间或项目选项）
关联服务空间 ok 样板图

点击uniCloud ----> cloudfunctions 创建getPhoneNumber --> index.js 文件在这里插入图片描述
附上源码

'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: '', // 在开发者中心开通服务并获取apiKey
		apiSecret: '', // 在开发者中心开通服务并获取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()		
	})
};

保姆式提醒

appid指的是（附上截图）
apiKey和 apiSecret 所指的是，附上截图+链接（https://dev.dcloud.net.cn/uniLogin）

前端代码实现

<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) {
						console.log(res.provider) // ['weixin', qq', 'univerify']
					}
				});
				uni.preLogin({ //预登录
					provider: 'univerify', //用手机号登录
					success() {
						_that.autoStatus = true
						console.log('预登录成功')
					},

					fail(err) { //预登录失败
						_that.autoStatus = false
						console.log('错误码：' + err.errCode)
						console.log(err.errMsg)
					}
				})
			},
			submitlogin() {
				uni.login({ //正式登录，弹出授权窗
					provider: 'univerify',
					univerifyStyle: { // 自定义登录框样式
						"fullScreen": true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
						"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff 
						"phoneNum": {
							"color": "#2281F5", // 手机号文字颜色 默认值：#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() //关闭授权登录界面
					}
				})
			}
		}
	}
</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>