俄羅斯：將審查iPhone等外國公司設(shè)備 保數(shù)據(jù)安全
iPhone和特斯拉都屬于在各自領(lǐng)域領(lǐng)頭羊的品牌，推出的產(chǎn)品也也都是數(shù)一數(shù)二的，但對于一些國家而言，它們的產(chǎn)品可靠性和安全性還是在限制范圍內(nèi)。近日，俄羅斯聯(lián)邦通信、信息技術(shù)
hi, 大家好, 我是徐小夕, 今天給大家分享一款非常有意思的開源組件, 可以實(shí)現(xiàn)我們平時(shí)開發(fā)中的滑動驗(yàn)證碼需求, 當(dāng)然也是技術(shù)圈小伙伴奮戰(zhàn)了無數(shù)個(gè)黑夜和白天的結(jié)果, 值得好好推薦一下.
圖片
react-rotate-captcha 是一款開箱即用的滑動驗(yàn)證碼 React 組件，基于 isszz/rotate-captcha 做的二次開發(fā)；結(jié)合了騰訊防水墻，增加安全策略.
具體策略由兩部分組成：
策略規(guī)則：
這里的路由是指驗(yàn)證通過后，要執(zhí)行操作的路由，而不是驗(yàn)證操作時(shí)的路由
圖片
原理：
優(yōu)點(diǎn)：
后端提供 Laravel 擴(kuò)展：levi/laravel-rotate-captcha ，可直接使用或根據(jù) Api 接口定制.
效果如下:
圖片
圖片
具體的使用安裝方式如下:
// yarn安裝yarn add react-rotate-captcha// pnpm安裝pnpm add react-rotate-captcha使用方式如下:
// 1. 通過status喚起import { useState } from 'react';import RotateCaptcha from "react-rotate-captcha";function App() { const [open, setOpen] = useState(true); return <RotateCaptcha open={open} onClose={() => setOpen(false)} />}// 2. 通過Instance喚起import RotateCaptcha from "react-rotate-captcha";function Page() { const captcha = RotateCaptcha.useCaptchaInstance(); return ( <button onClick={() => captcha.open()}>click it</button> );}function App() { return ( <RotateCaptcha> <Page /> </RotateCaptcha> );}當(dāng)然我們也可以使用 ref 來實(shí)現(xiàn)同樣的效果:
import { useRef } from 'react';import RotateCaptcha, { CaptchaInstance } from "react-rotate-captcha";function App() { const ref = useRef<CaptchaInstance>(null); return ( <RotateCaptcha ref={ref}> <button onClick={() => ref.current!.open()}>click it</button> </RotateCaptcha> );}基本屬性介紹:
圖片
同時(shí)該組件接受5個(gè)方法，只有 onClose 和 result 是同步函數(shù)，其余全部為異步函數(shù):
圖片
更詳細(xì)的用法大家可以在github上學(xué)習(xí)參考:
https://github.com/cgfeel/react-rotate-captcha
demo 目前提供了 webpack 和 vite 版本的, 可以在: https://codesandbox.io/p/devbox/react-rotate-captcha-ts-react-vite-t23lcq 體驗(yàn).
本文鏈接：http://www.www897cc.com/showinfo-26-39506-0.html一款小而美的開源滑動驗(yàn)證碼組件
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號