浅谈 前端验证码那些事

<template>
	<div class="login-container">
		<el-form ref="loginForm" class="login-form" autocomplete="on" label-position="left">

			<div class="title-container">
				<h3 class="title">平台</h3>
			</div>

			<el-form-item prop="username">

				<el-input class="login-input" ref="username" placeholder="用户名" name="username" type="text" tabindex="1"
					autocomplete="on" />
			</el-form-item>

			<el-form-item prop="password">

				<el-input class="login-input" ref="password" placeholder="密码" name="password" tabindex="2"
					autocomplete="on" />

			</el-form-item>

			<el-form-item>
				<el-row :gutter="10" style="width:100%">

					<el-col :span="14">
						<el-input v-model="captcha" style="height: 100%;" placeholder="请输入验证码" />
					</el-col>
					<el-col :span="10">
						<div @click="getCaptcha" style="background-color: aliceblue;" v-html="captchaCode"></div>
					</el-col>
				</el-row>

			</el-form-item>


			<el-button type="primary" style="width:100%;height:50px;margin-bottom:30px;"
				@click="valifyCaptcha">登录</el-button>
		</el-form>


	</div>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"

	const captchaCloud = uniCloud.importObject("captcha") // uniapp 的 云对象 


	const captchaCode = ref("") // 展示验证码图片
	const captcha = ref("") // 记录用户输入的验证码
	let uuid = "" // 唯一id

	// 获取验证码的
	const getCaptcha = async () => {
		const res = await captchaCloud.getCaptcha()
		// console.log(res)
		captchaCode.value = res.svg
		uuid = res.uuid
	}
	// 单独校验验证码是否正确的 接口  用来测试使用  tips:本次没有校验用户名和密码
	const valifyCaptcha = async () => {
		const res = await captchaCloud.valifyCaptcha(captcha.value, uuid)
		console.log(res)
	}
	onLoad(() => {
		getCaptcha()
	})
</script>


<style lang="scss">
	$bg: #2d3a4b;
	$dark_gray: #889aa4;
	$light_gray: #eee;

	.login-container {
		width: 100%;
		background-color: $bg;
		overflow: hidden;
		height: 100vh;

		.login-form {
			position: relative;
			width: 520px;
			max-width: 100%;
			padding: 160px 35px 0;
			margin: 0 auto;
			overflow: hidden;

			:deep(.el-input__wrapper) {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
			}
		}


		.title-container {
			position: relative;

			.title {
				font-size: 26px;
				color: $light_gray;
				margin: 0px auto 40px auto;
				text-align: center;
				font-weight: bold;
			}
		}





	}

	$bg: #283443;
	$light_gray: #fff;
	$cursor: #fff;

	/* reset element-ui css */
	.login-container {
		.el-input {
			display: inline-block;
			height: 47px;


		}

		.el-form-item {
			border: 1px solid rgba(255, 255, 255, 0.1);
			background: rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			color: #454545;
		}
	}
</style>

'use strict';

const svgCaptcha = require('svg-captcha'); // 生成验证码的插件
const db = uniCloud.database()


module.exports = {
	_before: function() { // 通用预处理器

	},

    // 生成验证码
	async getCaptcha() {
		const captcha = svgCaptcha.create();

        // 成功插入数据库后，res会获得当前数据的id，将这个id 看成唯一id即可。 也可以使用第三方库  nanoid 独立生成
		const res = await db.collection("captcha").add({
			text: captcha.text,
			create_date: Date.now(),
		})
		// console.log(res)
		//返回数据给客户端
		return {
			svg: captcha.data,
			uuid: res.id
		}
	},
    
    // 校验验证码 
	async valifyCaptcha(text, uuid) {
		const dbJQL = uniCloud.databaseForJQL({ // 获取JQL database引用，此处需要传入云对象的clientInfo
			clientInfo: this.getClientInfo()
		})


		// 校验 唯一id和验证码和是否过期
		const res = await dbJQL.collection("captcha").where(
			`text=='${text}' && ${Date.now()} - create_date > ${1000*60}  && _id=='${uuid}'`).count()
		// console.dir(res) 
		return !!res.total

	}
}