Optimize register. Add turnstile captcha to login.

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,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}
                             />
                         </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)