From 837ea40bf12e4881afc9a7b1dc5d463512d03ae6 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Fri, 29 Dec 2023 17:33:37 +0800 Subject: [PATCH] Optimize register. Add turnstile captcha to login. --- .env.development | 3 +- .env.production | 3 +- .env.testing | 3 +- package-lock.json | 10 ++++++ package.json | 1 + src/constants/common.constants.ts | 3 ++ src/global.d.ts | 2 ++ src/pages/Sign.tsx | 51 ++++++++++++++++++++----------- src/services/auth.tsx | 2 +- 9 files changed, 56 insertions(+), 22 deletions(-) diff --git a/.env.development b/.env.development index 14639df..2d4393a 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,3 @@ VITE_API_URL=http://localhost:8080 -VITE_API_TOKEN_URL=${VITE_API_URL}/token \ No newline at end of file +VITE_API_TOKEN_URL=${VITE_API_URL}/token +VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY} \ No newline at end of file diff --git a/.env.production b/.env.production index 245e99d..5062b96 100644 --- a/.env.production +++ b/.env.production @@ -1,2 +1,3 @@ VITE_API_URL=${PRODUCT_API_URL} -VITE_API_TOKEN_URL=${VITE_API_URL}/token \ No newline at end of file +VITE_API_TOKEN_URL=${VITE_API_URL}/token +VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY} \ No newline at end of file diff --git a/.env.testing b/.env.testing index ecf602a..7475bc2 100644 --- a/.env.testing +++ b/.env.testing @@ -1,3 +1,4 @@ NODE_ENV=development VITE_API_URL=${TEST_API_URL} -VITE_API_TOKEN_URL=${VITE_API_URL}/token \ No newline at end of file +VITE_API_TOKEN_URL=${VITE_API_URL}/token +VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 971b8f1..a071142 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@ant-design/icons": "^5.2.6", + "@marsidev/react-turnstile": "^0.4.0", "antd": "^5.12.1", "axios": "^1.6.2", "dayjs": "^1.11.10", @@ -1231,6 +1232,15 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@marsidev/react-turnstile": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.4.0.tgz", + "integrity": "sha512-U0lwTWQhP04AnIdWEbLpF/phpqtblNbrnE4yJMdvGyeOZOTmuHW3wB+V8X+BO55pTXZitp2GgJsrGkbUjwJIeQ==", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", diff --git a/package.json b/package.json index bd89530..8257e58 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@ant-design/icons": "^5.2.6", + "@marsidev/react-turnstile": "^0.4.0", "antd": "^5.12.1", "axios": "^1.6.2", "dayjs": "^1.11.10", diff --git a/src/constants/common.constants.ts b/src/constants/common.constants.ts index dbc1338..abbdd71 100644 --- a/src/constants/common.constants.ts +++ b/src/constants/common.constants.ts @@ -29,6 +29,7 @@ export const SYSTEM_ERROR = 10050 export const SYSTEM_TIMEOUT = 10051 export const SYSTEM_REQUEST_ILLEGAL = 10052 export const SYSTEM_ARGUMENT_NOT_VALID = 10053 +export const SYSTEM_INVALID_CAPTCHA_CODE = 10054 export const PERMISSION_LOGIN_SUCCESS = 20000 export const PERMISSION_PASSWORD_CHANGE_SUCCESS = 20001 @@ -73,3 +74,5 @@ export const DATABASE_NO_RECORD_FOUND = 30052 export const API_AVATAR_SUCCESS = 50100 export const API_AVATAR_ERROR = 50150 + +export const H_CAPTCHA_SITE_KEY = import.meta.env.VITE_TURNSTILE_SITE_KEY diff --git a/src/global.d.ts b/src/global.d.ts index 54720b5..bb13ebf 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -4,6 +4,7 @@ interface ImportMetaEnv { readonly VITE_API_URL: string readonly VITE_API_TOKEN_URL: string + readonly VITE_TURNSTILE_SITE_KEY: string } interface ImportMeta { @@ -81,6 +82,7 @@ interface RetrieveParam { interface LoginParam { account: string password: string + captchaCode: string } interface UserWithPowerInfoVo { diff --git a/src/pages/Sign.tsx b/src/pages/Sign.tsx index 131afbf..d8c720c 100644 --- a/src/pages/Sign.tsx +++ b/src/pages/Sign.tsx @@ -1,10 +1,12 @@ import React, { useState } from 'react' import { useNavigate } from 'react-router' import Icon from '@ant-design/icons' +import { Turnstile } from '@marsidev/react-turnstile' import '@/assets/css/pages/sign.scss' import { COLOR_BACKGROUND, DATABASE_DUPLICATE_KEY, + H_CAPTCHA_SITE_KEY, PERMISSION_ACCOUNT_NEED_INIT, PERMISSION_FORGET_SUCCESS, PERMISSION_LOGIN_SUCCESS, @@ -15,7 +17,8 @@ import { PERMISSION_RETRIEVE_SUCCESS, PERMISSION_USER_DISABLE, PERMISSION_USER_NOT_FOUND, - PERMISSION_USERNAME_NOT_FOUND + PERMISSION_USERNAME_NOT_FOUND, + SYSTEM_INVALID_CAPTCHA_CODE } from '@/constants/common.constants.ts' import { getLoginStatus, getUserInfo, requestUserInfo, setToken } from '@/util/auth' import { AppContext } from '@/App' @@ -67,22 +70,9 @@ const SignUp: React.FC = () => { const response = res.data switch (response.code) { case PERMISSION_REGISTER_SUCCESS: - void r_auth_login({ - account: registerParam.email, - password: registerParam.password - }).then((res_) => { - const response_ = res_.data - switch (response_.code) { - case PERMISSION_LOGIN_SUCCESS: - setToken(response_.data?.token ?? '') - void message.success('恭喜，您快要完成注册了') - setIsFinish(true) - break - default: - void message.success('出错了，请稍后重试') - setIsSigningUp(false) - } - }) + setToken(response.data?.token ?? '') + void message.success('恭喜，您快要完成注册了') + setIsFinish(true) break case DATABASE_DUPLICATE_KEY: void message.error('用户名或邮箱已被注册，请重试') @@ -632,6 +622,11 @@ const SignIn: React.FC = () => { const navigate = useNavigate() const [searchParams] = useSearchParams() const [isSigningIn, setIsSigningIn] = useState(false) + const [captchaCode, setCaptchaCode] = useState('') + + const handleOnTurnstileSuccess = (token: string) => { + setCaptchaCode(token) + } const handleOnFinish = (loginParam: LoginParam) => { if (isSigningIn) { @@ -639,7 +634,17 @@ const SignIn: React.FC = () => { } setIsSigningIn(true) - void r_auth_login({ account: loginParam.account, password: loginParam.password }) + if (!captchaCode) { + void message.warning('请先通过验证') + setIsSigningIn(false) + return + } + + void r_auth_login({ + account: loginParam.account, + password: loginParam.password, + captchaCode + }) .then((res) => { const response = res.data const { code, data } = response @@ -696,6 +701,9 @@ const SignIn: React.FC = () => { ) setIsSigningIn(false) break + case SYSTEM_INVALID_CAPTCHA_CODE: + void message.error('验证码有误，请刷新重试') + break default: void message.error( <> @@ -739,6 +747,13 @@ const SignIn: React.FC = () => { disabled={isSigningIn} /> + + + 记住密码 request.post(URL_REGISTER, param) +export const r_auth_register = (param: RegisterParam) => request.post(URL_REGISTER, param) export const r_auth_resend = () => request.post(URL_RESEND)