全栈的自我修养 ———— react实现滑动验证

实现滑动验证

展示


依赖

npm install rc-slider-captcha
npm install create-puzzle

api地址

实现

不借助create-puzzle

需要准备两张图片一个是核验图形,一个是原图------> 这个方法小编试了后感觉比较麻烦,这边就不继续写了

借助create-puzzle

这个工具会接受一个照片,然后自动分割出适当的验证尺寸

在其中bgSize必须要注意!!属性必须和图片一样!!!!!!!!

js 复制代码
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 pic from '../static/soildCaptcha.jpeg'
const SoildCaptcha = (params) => {
    const offsetXRef = useRef(0); // x 轴偏移值
    // 查看是否在安全距离
    const verifyCaptcha = async (data) => {
        await sleep();
        if (data.x >= offsetXRef.current - 5 && data.x < offsetXRef.current + 5) {
            setTimeout(() => {
                params.onSuccess()
            }, 1000)
            return Promise.resolve();
        }
        return Promise.reject();
    };
    return (
        <div className='container'>
            <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: 462, height: 266 }}
                tipIcon={{
                    default: <RubyOutlined />,
                    loading: <LoadingOutlined />,
                    success: <SmileOutlined />,
                    error: <MehOutlined />,
                    refresh: <RedoOutlined />
                }}
                tipText={{
                    default: '向右👉拖动完成拼图',
                    loading: '👩🏻‍💻🧑‍💻努力中...',
                    moving: '向右拖动至拼图位置',
                    verifying: '验证中...',
                    error: '验证失败'
                }}
            // loadingBoxProps={{
            //   icon: <Heart />,
            //   text: "I'm loading"
            // }}
            />
        </div>
    );
}

export default SoildCaptcha;
相关推荐
一ge科研小菜鸡10 分钟前
React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)
前端框架
熊的猫39 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel