Schisandra-Cloud-Storage/schisandra-cloud-storage-front-react
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加滑动验证码

Browse Source
This commit is contained in:
landaiqing
2024-04-24 16:29:29 +08:00
parent 46462c4514
commit 773dbe1e7e
10 changed files with 211 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/api/captcha/canvas.ts Normal file
View File

@@ -0,0 +1,68 @@
const calcSize = (img: HTMLImageElement, size: number) => {
const src_src = Math.max(Math.min(img.width, img.height, size), 160)
const dst_w = src_src
const dst_h = src_src
const dst_scale = dst_h / dst_w // Target image ratio
const src_scale = img.height / img.width // Original image aspect ratio
const info =
src_scale >= dst_scale
? [
Math.round(img.height * (src_src / img.width)),
0,
Math.round((img.height - img.width) / 2),
]
: [
Math.round(img.width * (src_src / img.height)),
Math.round((img.width - img.height) / 2),
0,
]
return [img.width, img.height, src_src, ...info]
}
const build = (img: HTMLImageElement, sizes: number[]): [number, string] => {
const [src_w, src_h, size, tar_size, x, y] = sizes
const canvas = document.createElement('canvas')
canvas.width = size
canvas.height = size
const max = 275 - 50
const min = 0
const ave = Math.round((360 / max) * 100) / 100
const ctx = canvas.getContext('2d')
const coordinate = size / 2
const moveX = Math.floor(Math.random() * (max - min + 1)) + 0
ctx?.beginPath()
ctx?.translate(coordinate, coordinate)
ctx?.rotate((moveX * -1 * ave * Math.PI) / 180)
ctx?.translate(-coordinate, -coordinate)
ctx?.drawImage(img, x, y, src_w, src_h, 0, 0, tar_size, size)
ctx!.globalCompositeOperation = 'destination-in'
ctx?.arc(size / 2, size / 2, size / 2, 0, (360 * Math.PI) / 180, false)
ctx?.fill()
ctx?.restore()
return [(360 / (max - min)) * moveX, canvas.toDataURL('image/png')]
}
export const handle = (url: string, size: number = 350) =>
new Promise<[number, string]>((resovle) => {
const img = new Image()
img.onerror = function () {
console.log('image load error')
}
img.onload = function () {
const sizes = calcSize(img, size)
const arc_img = build(img, sizes)
resovle(arc_img)
}
img.src = url
})

97
src/api/captcha/index.ts Normal file
View File

@@ -0,0 +1,97 @@
import type { TicketInfoType, TokenInfoType } from 'react-rotate-captcha'
import { handle } from './canvas'
import wallhaven from '@/assets/images/wallhaven.jpg'
export type ActionType = {
code: 0 | 1
msg: string
}
const tokenRaw = 'Nvuv8LdXUNRAVW022Gm7HkGc7RTDoEmU'
const info = {
angle: -1,
sid: '',
ticket: '',
}
export async function checkTicket(ticket?: TicketInfoType) {
const { sid, ticket: ticketRaw } = info
const { data } = ticket || {}
const isWait = sid !== '' && ticketRaw !== ''
const success = sid === data?.sid && ticketRaw === data.ticket
const result =
isWait && success
? {
code: 0,
msg: 'Successful',
}
: {
code: 1,
msg: 'Failed',
}
return result as ActionType
}
export async function get(): Promise<TokenInfoType> {
info.angle = -1
info.sid = ''
info.ticket = ''
return {
code: 0,
data: {
str: 'wallhaven',
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() {
const [degree, src] = await handle(wallhaven)
info.angle = degree
return src
}
export function sleep(time: number) {
return new Promise((resolve) => {
setTimeout(() => resolve(true), time)
})
}
export async function verify(token: string, deg: number): Promise<TicketInfoType> {
const { angle } = info
const success = token === tokenRaw && Math.abs(deg - angle) <= 5
info.sid = Math.random().toString(36).slice(-8)
info.ticket = crypto.randomUUID()
return angle >= 0 && success
? {
code: 0,
data: {
sid: info.sid,
ticket: info.ticket,
},
msg: 'Success',
}
: {
code: 1,
msg: 'Fail verify',
}
}

18
src/components/HomeIndex/index.less
View File

@@ -71,7 +71,15 @@ html {
}
.h1 span {
color: hsl(260 80% 50%);
//color: hsl(260 80% 50%);
display: table;
margin: 0 auto;
font-weight: 800;
font-size: 1em;
background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
//line-height: 200px;
}
.h2 {
@@ -96,16 +104,16 @@ html {
}
.navbar {
justify-content: center;
justify-content: flex-start;
margin: 0 auto;
display: flex;
width: 80ch;
width: 100vw;
max-width: 100%;
}
.nav button {
width: 44px;
aspect-ratio: 1;
//width: 44px;
//aspect-ratio: 1;
}
.hero {

44
src/components/HomeIndex/index.tsx
View File

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import './index.less'
import SvgIcon from '@/components/SvgIcon/SvgIcon.tsx'
const HomeIndex: React.FC = () => {
useEffect(() => {
document.body.classList.add('body')
@@ -201,48 +202,7 @@ const HomeIndex: React.FC = () => {
href='/login'
target='_blank'
rel='noreferrer noopener'>
<svg
className='w-9'
viewBox='0 0 969 955'
fill='none'
xmlns='http://www.w3.org/2000/svg'>
<circle
cx='161.191'
cy='320.191'
r='133.191'
stroke='currentColor'
strokeWidth='20'></circle>
<circle
cx='806.809'
cy='320.191'
r='133.191'
stroke='currentColor'
strokeWidth='20'></circle>
<circle
cx='695.019'
cy='587.733'
r='31.4016'
fill='currentColor'></circle>
<circle
cx='272.981'
cy='587.733'
r='31.4016'
fill='currentColor'></circle>
<path
d='M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z'
fill='currentColor'></path>
<rect
x='310.42'
y='448.31'
width='343.468'
height='51.4986'
fill='#FF1E1E'></rect>
<path
fillRule='evenodd'
clipRule='evenodd'
d='M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z'
fill='currentColor'></path>
</svg>
<SvgIcon name={'schisandra'} size={50} />
</a>
</div>
</nav>

4
src/main.tsx
View File

@@ -10,7 +10,7 @@ const router = createBrowserRouter(routeConfig)
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<MobxProvider {...RootStore}>
<RouterProvider router={router} />
<RouterProvider router={router} />
</MobxProvider>
</React.StrictMode>,
</React.StrictMode>
)

7
src/views/404/404.tsx
View File

@@ -1,10 +1,17 @@
import { useNavigate } from 'react-router-dom'
import './index.less'
import {useEffect} from "react";
export default () => {
const navigate = useNavigate()
const goBack = () => {
navigate(-1)
}
useEffect(() => {
document.body.classList.add('not-fount-body')
return ()=>{
document.body.classList.remove('not-fount-body')
}
}, []);
return (
<>
<body translate='no'>

4
src/views/404/index.less
View File

@@ -4,7 +4,9 @@
box-sizing: border-box;
}
.not-fount-body {
background-image: url("@/assets/images/background.png");
}
.container {
position: absolute;

11
src/views/User/Login/index.tsx
View File

@@ -17,6 +17,8 @@ import qrCode from '@/assets/images/login_qrcode-landaiqing.jpg'
import styles from './index.module.less'
import { observer } from 'mobx-react'
import FooterComponent from '@/components/Footer'
import RotateCaptcha from 'react-rotate-captcha'
import { get, load, verify } from '@/api/captcha/index.ts'
// import useStore from '@/utils/store/useStore.tsx'
type LoginType = 'account' | 'phone'
@@ -33,6 +35,7 @@ export default observer(() => {
const [form] = Form.useForm()
// @ts-ignore
const [base64Code, setBase64Code] = useState<API.GenerateBase64Code>({ data: '' })
const [open, setOpen] = useState(false)
const clickGetBase64CodeMethod = async () => {
await getBase64CodeMethod()
}
@@ -271,6 +274,7 @@ export default observer(() => {
block
size='large'
onClick={async () => {
setOpen(true)
let validateFields
if (loginType === 'account') {
validateFields = ['username', 'password', 'code']
@@ -376,6 +380,13 @@ export default observer(() => {
</Space>
</div>
<FooterComponent></FooterComponent>
<RotateCaptcha
get={get}
load={load}
verify={verify}
open={open}
onClose={() => setOpen(false)}
/>
</div>
)
})