JSPM – react-rotate-captcha@1.0.18

Package Exports

react-rotate-captcha
react-rotate-captcha/lib/index_bundle.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-rotate-captcha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

logo-react

一个开箱即用的滑动验证码React组件，基于[isszz/rotate-captcha]做的二次开发；结合了腾讯防水墙，增加安全策略，查看：策略和设计思路

Demo整理中。。。

📦 安装 (Installing)

Using NPM

npm install react-rotate-captcha

Using Yarn

yarn add react-rotate-captcha

Using PNPM

pnpm add react-rotate-captcha

🔨 使用 (Usage)

import { TicketInfoType, TokenInfoType } from "../../App";
import { handle } from "./canvas";

const tokenRaw = "Nvuv8LdXUNRAVW022Gm7HkGc7RTDoEmU";
let angle = 0;

export async function get(): Promise<TokenInfoType> {
    /*const request = await fetch(`http://${location.hostname}:8000/rotate.captcha`);
    const headers = request.headers;

    const info = await request.json();
    info.data.token = headers.get('X-Captchatoken');
    
    return info;*/
    return {
        code: 0,
        data: {
            str: "t01b6eac4d21e9d24d4",
            token: tokenRaw,
        },
        msg: "success",
    };
}

export function isSupportWebp() {
    try {
      return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
    } catch(err) {
      return false;
    }
}

export async function load(path: string) {
    const [degree, src] = await handle(`${location.origin}/${path}.jpg`);
    angle = degree;

    return src;
    return `http://${location.hostname}:8000/rotate.captcha/${path}`;
}

export function sleep(time: number) {
    return new Promise(resolve => {
        setTimeout(() => resolve(true), time);
    });
}

export async function verify(token: string, deg: number): Promise<TicketInfoType> {
    console.log(angle, deg);
    const success = token === tokenRaw && Math.abs(deg - angle) <= 5;
    return success ? {
        code: 0,
        data: {
            sid: Math.random().toString(36).slice(-8),
            ticket: crypto.randomUUID()
        },
        msg: 'Success',
    } : {
        code: 1,
        msg: 'Fail verify',
    };
    /*const request = await fetch(`http://${location.hostname}:8000/rotate.captcha/verify/${deg}`, {
        method: "GET",
        headers: {
            'X-Captchatoken': token,
        }
    });
    const info = await request.json();
    return info;*/
}

export async function ticket(ticket?: TicketInfoType) {
    const { data } = ticket||{};
    const response = await fetch(`http://${location.hostname}:8000/rotate.captcha/test/action`, data === undefined ? {} : {
        headers: {
            'X-Captchasid': data.sid,
            'X-Captchaticket': data.ticket,
        },
    });
    
    const info: ActionType = await response.json();
    return info;
}

🛟 设计思路 (Design)

New Board

✂️ 物料 (Material)

即时设计的向量稿件，包含组件设计规范：查看

911700882740_ pic

🔗 相关产品 (Product)

react前端组件

整理中，待开放...

isszz/rotate-captcha

第三方仓库，提供了react和laravel之外的生态扩展 [点击打开]

包含：

前端：vue、uni-app
后端：php、ThinkPHP