React实现滑块验证

滑块验证（Slider CAPTCHA）是一种常见的验证码形式，用于区分人类用户和自动化脚本（如爬虫或恶意程序）。用户需要通过拖动滑块到指定位置来完成验证。

一、效果展示

二、导入的依赖

import SliderCaptcha from 'rc-slider-captcha';
import React, { useRef } from 'react';
import { sleep } from 'ut2';
import createPuzzle from 'create-puzzle';
import { RubyOutlined, MehOutlined, SmileOutlined, RedoOutlined, LoadingOutlined } from '@ant-design/icons'
import styles from "../css/resetPwd.module.css"
import pic from '../assets/2.png'

rc-slider-captcha: 一个滑块验证组件库，提供了拼图滑块验证的核心功能。

React, useRef: React 的核心库和 Hook，用于管理组件状态和引用。

sleep: 一个工具函数，用于模拟异步操作的延迟。

createPuzzle: 用于生成拼图验证的背景图和滑块图。

@ant-design/icons: Ant Design 的图标库，用于显示滑块验证的不同状态图标。

styles: 导入的 CSS 模块，用于样式化组件。

pic: 本地图片资源，用于生成拼图验证的背景图和滑块图。

三、实现

// 滑块拼图验证组件

import SliderCaptcha from 'rc-slider-captcha';
import React, { useRef } from 'react'; //引入React和useRef钩子
import { sleep } from 'ut2'; //引入sleep函数，用于模拟延迟
import createPuzzle from 'create-puzzle'; //引入生成拼图的库
import { RubyOutlined, MehOutlined, SmileOutlined, RedoOutlined, LoadingOutlined } from '@ant-design/icons' //引入antd的图标组件
import styles from "../css/resetPwd.module.css" //引入自定义样式文件

// 这里是你要自己准备的图片
import pic from '../assets/2.png'
// 定义滑块拼图验证组件
const SoildCaptcha = (params) => {
    const offsetXRef = useRef(0); // 用于存储拼图块的正确位置
    // 查看是否在安全距离
    const verifyCaptcha = async (data) => {
        await sleep(); //模拟网络延迟请求
        // 判断用户拖动的位置是否在正确位置5px偏移量内
        if (data.x >= offsetXRef.current - 5 && data.x < offsetXRef.current + 5) {
            // 延迟1秒后调用成功回调函数
            setTimeout(() => {
                params.onSuccess() //调用父组件传递的成功回调函数
            }, 1000)
            return Promise.resolve(); //验证成功
        }
        return Promise.reject(); //验证失败
    };
    return (
        <div className={styles.box1}>
            <SliderCaptcha
                request={() =>
                    createPuzzle(pic, {
                        format: 'blob' //指定输出格式为二进制数据流
                    }).then((res) => {
                        offsetXRef.current = res.x //保存拼图块的正确位置
                        return {
                        // 背景图片
                            bgUrl: res.bgUrl, //背景图地址
                            // 核验区域
                            puzzleUrl: res.puzzleUrl
                        };
                    })
                }
                onVerify={(data) => {
                    return verifyCaptcha(data);
                }}
                // ！！！！这里是重点！！！！！
                // bgSize必须和原图片的尺寸一样！！！！！！！！！！！！！！！！！！
                bgSize={{ width: 500, height: 315 }}
                tipIcon={{
                    default: <RubyOutlined />,
                    loading: <LoadingOutlined />,
                    success: <SmileOutlined />,
                    error: <MehOutlined />,
                    refresh: <RedoOutlined />
                }}
                tipText={{
                    default: '向右👉拖动完成拼图',
                    loading: '👩🏻‍💻🧑‍💻努力中...',
                    moving: '向右拖动至拼图位置',
                    verifying: '验证中...',
                    error: '验证失败',
                    success:'验证成功'
                }}
            />
        </div>
    );
}

export default SoildCaptcha;

滑块验证技术是现代Web开发中不可或缺的一部分，它通过简单的拖动操作实现了复杂的安全验证需求。本文从拼图生成到验证逻辑，详细解析了滑块验证的实现过程，并探讨了其优化方向和潜在问题。希望本文能为您提供一些启发，同时激发您对这一领域的进一步思考。技术的进步永无止境，而滑块验证只是其中的一个缩影。让我们一起探索更多可能性，为用户创造更安全、更友好的数字体验。