uni-app心得之通过云数据库实现简单的登录和注册

前言

随着移动互联网的迅猛发展，APP已经成为人们生活中必不可少的一部分。而UniApp作为一种基于Vue.js的跨平台开发框架，提供了一种快速开发多端应用的解决方案。

        通过在学校学习uni-app的这段时间，作为一个初出茅庐的新人，我想分享一下关于登录与注册的实现。这是一个通过云数据库的方法实现的登录和注册。

        1.实现这个功能需要对uniCloud.callFunction请求的使用有一定的了解。

        2.还需要运用setStorageSync将登录的信息传给下一个界面。

        3.还有登录成功之后的页面跳转。

        下面就由我做一个简单的登录注册吧。

登录原理

1. 用户输入凭证：
   • 用户通过uni-app的前端界面（如表单）输入用户名和密码。
2. 发送请求：
   • 用户点击登录按钮后，uni-app通过uni.request方法（或其他网络请求API）将用户名和密码发送到后端服务器。
3. 后端验证：
   • 后端服务器接收到请求后，会验证用户名和密码的正确性。
   • 验证通常涉及与存储在数据库中的用户信息进行比对。
4. 生成Token：
   • 如果用户名和密码验证成功，后端会生成一个Token。
   • Token是一个字符串，通常包含用户的身份信息（如用户ID）和一些安全信息（如时间戳、签名等）。
   • Token的生成过程可能涉及加密算法（如MD5、SHA等）以确保其安全性。
5. 返回Token：
   • 后端将生成的Token返回给前端。
   • 前端通过uni.setStorageSync等方法将Token存储在本地（如localStorage、sessionStorage或Cookie中）。
6. 后续请求携带Token：
   • 在用户登录成功后，前端在向后端发送请求时（如获取用户数据、执行其他操作等），都会在请求头（Header）中携带Token。
   • 后端在接收到请求后，会验证Token的有效性。
7. Token验证：
   • 后端验证Token的过程可能包括解析Token、验证时间戳（防止Token过期）、验证签名（确保Token未被篡改）等步骤。
   • 如果Token验证通过，后端会处理该请求并返回相应的数据或执行相应的操作。
8. Token失效与刷新：
   • Token通常有一个有效期限，过期后需要用户重新登录或进行Token刷新操作。
   • Token刷新通常涉及前端向后端发送一个包含旧Token的请求，后端验证旧Token的有效性后返回一个新的Token。
9. 安全性考虑：
   • 在整个登录和Token管理过程中，安全性是非常重要的。
   • 应使用HTTPS协议进行通信，确保数据在传输过程中的安全性。
   • 对密码进行加密存储，防止密码泄露。
   • 使用安全的Token生成和验证算法，防止Token被伪造或篡改。

总结来说，uni-app云数据库的登录原理主要依赖于前端发送用户凭证到后端进行验证，后端生成并返回Token，前端存储并使用Token进行后续请求的验证。整个过程涉及网络通信、用户验证、Token生成和验证等多个环节，需要确保数据的安全性和用户隐私的保护。

一.页面样式.

.

做成如上界面，两个输入框，一个按钮即可，可以和上面差不多，也可以简单点。

二.创建数据表

右击uniCloud打开云数据库web控制台，找到云数据库，创建数据表

表中要包含有用户名和密码

三.数据绑定

<template>
    <view class="form">
        //对输入框的内容用v-model进行双向数据绑定
		<input type="text" v-model="username" placeholder="请输入账号">
		<input type="password" v-model="password" placeholder="请输入密码">
    </view>
			
    <view class="btn">
        //对按钮以及注册文字设置点击事件
	    <button @tap="applyLogin">登录</button>
        <view class="tip" @tap="applyRegister">
		    没有账号？点击此处注册账号
	    </view>
    </view>
</template>

<script>
    export default {
		data() {
			return {
                //返回用户名和密码
				username:"",
				password:""
			}
		},
    }
</script>

四.创建云函数（登录）

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	//连接数据库
	const db=uniCloud.database();

	var username=event.username;
	var	password=event.password
	
    //查找云数据库表，User是表名
	let result=await db.collection('User').where({
		username:username
	}).get();
	console.log(result)
	if(result.affectedDocs==0){
		return{
			code:500,
			msg:"用户不存在"
		}
	}else{
		if(password==result.data[0].password){
			return{
				code:200,
				msg:"登录成功",
				msg:result.data[0]
			}
		}else{
			return{
				code:500,
				msg:"密码错误"
			}
		}
		
	}
	//返回数据给客户端
	return event
};

五.调用云函数

		methods: {
			applyLogin(){
				uniCloud.callFunction({
					name:"getUserInfo",					
					data:{
						username:this.username,
						password:this.password
					},
					success: (res) => {	
						//将登录的信息保存到本地
						uni.setStorageSync('User',res.result.msg)
						//对结果进行判断
						if(res.result.code==200){
							uni.showToast({
								title:"登陆成功"
							})
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/index/index"
								})
							},1000)
						}else{
							uni.showToast({
								title:res.result.msg,
								icon:"none"
							})
						}
					}
				})
			},
            //注册跳转
			applyRegister(){
				uni.navigateTo({
					url:"/pages/register/register"
				})
			}
			
			
		}

对页面输入的数据和云函数从表中查到的数据进行对比，然后判断是否成功，一致则跳转下一个页面，不一致显示错误的地方。

六.创建云函数（注册）

注册的云函数跟插入数据差不多，将注册页的输入框的数据插入到用户表里就可以了。

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	const db=uniCloud.database();
	//添加数据到云数据库
	var id=await db.collection('User').add({
			username:event.username,
			password:event.password,
			name:event.name
		})
	if(id){
		return {
			code:200,
			msg:"注册完成"
		}
	}else{
		return {
			code:501,
			msg:"注册失败"
		}
	}
	//返回数据给客户端
	return event
};

七.调用云函数

也是一样，数据绑定，设置点击事件

<view class="middle">
	<view class="form">
		<input type="text" v-model="name" placeholder="请输入用户名">
		<input type="text" v-model="username" placeholder="请输入账号">
		<input type="password" v-model="password" placeholder="请输入密码">
	</view>

	<view class="btn">
		<button @tap="applyRegister">注册</button>
		<view class="tip" @tap="toLogin">
			返回登录
		</view>
	</view>
</view>

<script>
	export default {
		data() {
			return {
				username:"",
				password:"",
				name:""
			}
		},
		methods: {
			applyRegister(){
				uniCloud.callFunction({
					name:"addUser",
					data:{
						username:this.username,
						password:this.password,
						name:this.name
					},
					success: (res) => {
						console.log(res)
						if(res.result.code==200){
							uni.showToast({
								title:"注册成功",
								icon:"success"
							}),
							uni.navigateBack();
							
						}
					}
				})
			},
			
			toLogin(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

以上就是简单的登录和注册啦。

总结

登录和注册在uni-app中的意义在于确保用户的身份和数据安全。登录功能允许用户通过验证后进入应用，注册功能则允许用户创建新账号。