.env.development

@@ -1,2 +1,3 @@
 VITE_API_URL=http://localhost:8080
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

.env.production

@@ -1,2 +1,3 @@
 VITE_API_URL=${PRODUCT_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

.env.testing

@@ -1,3 +1,4 @@
 NODE_ENV=development
 VITE_API_URL=${TEST_API_URL}
 VITE_API_TOKEN_URL=${VITE_API_URL}/token
+VITE_TURNSTILE_SITE_KEY=${TURNSTILE_SITE_KEY}

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",

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",

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

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 {

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,23 +70,10 @@ const SignUp: React.FC = () => {
                 const response = res.data
                 switch (response.code) {
                     case PERMISSION_REGISTER_SUCCESS:
-                        void r_auth_login({
+                        setToken(response.data?.token ?? '')
-                            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)
-                            }
-                        })
-                        break
                     case DATABASE_DUPLICATE_KEY:
                         void message.error('用户名或邮箱已被注册，请重试')
                         setIsSigningUp(false)
@@ -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}
                             />
                         </AntdForm.Item>
+                        <AntdForm.Item>
+                            <Turnstile
+                                siteKey={H_CAPTCHA_SITE_KEY}
+                                options={{ theme: 'light' }}
+                                onSuccess={handleOnTurnstileSuccess}
+                            />
+                        </AntdForm.Item>
                         <FlexBox direction={'horizontal'} className={'addition'}>
                             <AntdCheckbox disabled={isSigningIn}>记住密码</AntdCheckbox>
                             <a

src/services/auth.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/constants/urls.constants'
 import request from '@/services'
 
-export const r_auth_register = (param: RegisterParam) => request.post(URL_REGISTER, param)
+export const r_auth_register = (param: RegisterParam) => request.post<TokenVo>(URL_REGISTER, param)
 
 export const r_auth_resend = () => request.post(URL_RESEND)