From 09262b594a0544db35ab6eb49f3d89d5ddd4ee5c Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Fri, 21 Feb 2025 15:36:32 +0800
Subject: [PATCH] feat:add captcha (#5389)

---
 frontend/desktop/package.json                 |   2 +
 .../src/components/signin/Captcha/index.tsx   | 109 ++++++++++++++++++
 .../src/components/signin/auth/useSms.tsx     |  28 +++--
 .../desktop/src/components/signin/index.tsx   |  11 +-
 .../desktop/src/pages/api/auth/phone/sms.ts   |  13 ++-
 .../src/pages/api/platform/getAppConfig.ts    |   6 +-
 .../src/pages/api/platform/getAuthConfig.ts   |   9 ++
 frontend/desktop/src/pages/signin.tsx         |  14 ++-
 .../src/services/backend/middleware/sms.ts    |  66 +++++++++++
 frontend/desktop/src/services/backend/sms.ts  |  67 ++++++++---
 .../desktop/src/services/backend/svc/sms.ts   |   2 +-
 frontend/desktop/src/stores/script.ts         |  19 +++
 frontend/desktop/src/types/system.ts          |  27 ++++-
 frontend/pnpm-lock.yaml                       |  18 +++
 14 files changed, 355 insertions(+), 36 deletions(-)
 create mode 100644 frontend/desktop/src/components/signin/Captcha/index.tsx
 create mode 100644 frontend/desktop/src/stores/script.ts

diff --git a/frontend/desktop/package.json b/frontend/desktop/package.json
index 5a3379fb9d6..ede5862733e 100644
--- a/frontend/desktop/package.json
+++ b/frontend/desktop/package.json
@@ -17,8 +17,10 @@
     "postinstall": "pnpm gen:global && pnpm gen:region"
   },
   "dependencies": {
+    "@alicloud/captcha20230305": "1.1.3",
     "@alicloud/dysmsapi20170525": "^2.0.24",
     "@alicloud/openapi-client": "^0.4.6",
+    "@alicloud/tea-typescript": "^1.8.0",
     "@alicloud/tea-util": "^1.4.7",
     "@chakra-ui/anatomy": "^2.2.1",
     "@chakra-ui/icons": "^2.1.1",
diff --git a/frontend/desktop/src/components/signin/Captcha/index.tsx b/frontend/desktop/src/components/signin/Captcha/index.tsx
new file mode 100644
index 00000000000..6188c6818ee
--- /dev/null
+++ b/frontend/desktop/src/components/signin/Captcha/index.tsx
@@ -0,0 +1,109 @@
+import request from '@/services/request';
+import { useConfigStore } from '@/stores/config';
+import useScriptStore from '@/stores/script';
+import { Box, Button, ButtonProps, Link, LinkProps } from '@chakra-ui/react';
+import { delay } from 'lodash';
+import React, {
+  ReactElement,
+  forwardRef,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react';
+import { v4 } from 'uuid';
+export type TCaptchaInstance = {
+  getToken: () => Promise<string>;
+  reset: () => void;
+};
+
+const HiddenCaptchaComponent = forwardRef(function HiddenCaptchaComponent(props, ref) {
+  const captchaElementRef = useRef<HTMLDivElement>(null);
+  const captchaInstanceRef = useRef(null);
+  const tokenRef = useRef('');
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const { authConfig } = useConfigStore();
+  useImperativeHandle<any, TCaptchaInstance>(
+    ref,
+    () => {
+      return {
+        getToken: async () => {
+          buttonRef.current?.click();
+          await new Promise((res) => {
+            setTimeout(res, 1000);
+          });
+          const token = tokenRef.current;
+          return token;
+        },
+        reset() {
+          tokenRef.current = '';
+        }
+      };
+    },
+    []
+  );
+  const { captchaIsLoaded } = useScriptStore();
+  const [buttonId] = useState('captcha_button_pop');
+  const [captchaId] = useState('captcha_' + v4().slice(0, 8));
+
+  // @ts-ignore
+  const getInstance = (instance) => {
+    captchaInstanceRef.current = instance;
+  };
+
+  const onBizResultCallback = () => {};
+  useEffect(() => {
+    if (!captchaIsLoaded) return;
+    const initAliyunCaptchaOptions = {
+      SceneId: authConfig?.captcha.ali.sceneId,
+      prefix: authConfig?.captcha.ali.prefix,
+      mode: 'popup',
+      element: '#' + captchaId,
+      button: '#' + buttonId,
+      async captchaVerifyCallback(captchaToken: string) {
+        try {
+          tokenRef.current = captchaToken;
+          return {
+            captchaResult: true
+          };
+        } catch (err) {
+          tokenRef.current = '';
+          return {
+            captchaResult: false
+          };
+        }
+      },
+      onBizResultCallback: onBizResultCallback,
+      getInstance,
+      slideStyle: {
+        width: 360,
+        height: 40
+      },
+      immediate: false,
+      language: 'cn',
+      region: 'cn'
+    };
+
+    // @ts-ignore
+    window.initAliyunCaptcha(initAliyunCaptchaOptions);
+
+    return () => {
+      captchaInstanceRef.current = null;
+    };
+  }, [captchaIsLoaded]);
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        variant={'unstyled'}
+        hidden
+        id={buttonId}
+        {...(props as ButtonProps)}
+      />
+      <div ref={captchaElementRef} id={captchaId} />
+    </>
+  );
+});
+
+export { HiddenCaptchaComponent };
diff --git a/frontend/desktop/src/components/signin/auth/useSms.tsx b/frontend/desktop/src/components/signin/auth/useSms.tsx
index 09a8467f636..81a4c27fa96 100644
--- a/frontend/desktop/src/components/signin/auth/useSms.tsx
+++ b/frontend/desktop/src/components/signin/auth/useSms.tsx
@@ -13,11 +13,12 @@ import {
 import { useTranslation } from 'next-i18next';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
-import { MouseEventHandler, useEffect, useRef, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { MouseEvent, MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react';
+import { get, useForm } from 'react-hook-form';
 import { getRegionToken } from '@/api/auth';
 import { getBaiduId, getInviterId, getUserSemData, sessionConfig } from '@/utils/sessionConfig';
 import { I18nCommonKey } from '@/types/i18next';
+import { useConfigStore } from '@/stores/config';
 
 export default function useSms({
   showError
@@ -27,9 +28,10 @@ export default function useSms({
   const { t } = useTranslation();
   const _remainTime = useRef(0);
   const router = useRouter();
+  const { authConfig } = useConfigStore();
   const [isLoading, setIsLoading] = useState(false);
   const setToken = useSessionStore((s) => s.setToken);
-  const { register, handleSubmit, trigger, getValues } = useForm<{
+  const { register, handleSubmit, trigger, getValues, watch } = useForm<{
     phoneNumber: string;
     verifyCode: string;
   }>();
@@ -81,7 +83,7 @@ export default function useSms({
     onAfterGetCode,
     getCfToken
   }: {
-    getCfToken?: () => string | undefined;
+    getCfToken?: () => Promise<string | undefined>;
     onAfterGetCode?: () => void;
   }) => {
     const [remainTime, setRemainTime] = useState(_remainTime.current);
@@ -93,19 +95,26 @@ export default function useSms({
       }, 1000);
       return () => clearInterval(interval);
     }, [remainTime]);
-
-    const getCode: MouseEventHandler = async (e) => {
+    const [invokeTime, setInvokeTime] = useState(new Date().getTime());
+    const getCode: MouseEventHandler = async (e: MouseEvent) => {
       e.preventDefault();
-
       if (!(await trigger('phoneNumber'))) {
         showError(t('common:invalid_phone_number') || 'Invalid phone number');
         return;
       }
+      if (new Date().getTime() - invokeTime <= 1000) {
+        return;
+      } else {
+        setInvokeTime(new Date().getTime());
+      }
+      const cfToken = await getCfToken?.();
+      if (authConfig?.captcha.enabled && authConfig.captcha.ali.enabled) {
+        if (!cfToken) return;
+      }
       setRemainTime(60);
       _remainTime.current = 60;
-
       try {
-        const cfToken = getCfToken?.();
+        const cfToken = await getCfToken?.();
         const res = await request.post<any, ApiResp<any>>('/api/auth/phone/sms', {
           id: getValues('phoneNumber'),
           cfToken
@@ -121,7 +130,6 @@ export default function useSms({
         onAfterGetCode?.();
       }
     };
-
     return (
       <>
         <InputGroup
diff --git a/frontend/desktop/src/components/signin/index.tsx b/frontend/desktop/src/components/signin/index.tsx
index 1c4ed0e5a57..5b0a48c1433 100644
--- a/frontend/desktop/src/components/signin/index.tsx
+++ b/frontend/desktop/src/components/signin/index.tsx
@@ -26,6 +26,8 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import useWechat from './auth/useWechat';
+import { HiddenCaptchaComponent, TCaptchaInstance } from './Captcha';
+import { captcha } from 'tencentcloud-sdk-nodejs';
 
 export default function SigninComponent() {
   const conf = useConfigStore();
@@ -74,6 +76,7 @@ export default function SigninComponent() {
     }
   }, []);
   const turnstileRef = useRef<TurnstileInstance>(null);
+  const captchaRef = useRef<TCaptchaInstance>(null);
   const loginConfig = useMemo(() => {
     return {
       [LoginType.SMS]: {
@@ -82,9 +85,12 @@ export default function SigninComponent() {
           <SmsModal
             onAfterGetCode={() => {
               turnstileRef.current?.reset();
+              captchaRef.current?.reset();
             }}
-            getCfToken={() => {
-              return turnstileRef.current?.getResponse();
+            getCfToken={async () => {
+              const token = await captchaRef.current?.getToken();
+              const turnstiletoken = turnstileRef.current?.getResponse();
+              return token;
             }}
           />
         )
@@ -225,6 +231,7 @@ export default function SigninComponent() {
                     siteKey={conf.commonConfig?.cfSiteKey}
                   />
                 )}
+                {conf.authConfig?.captcha.enabled && <HiddenCaptchaComponent ref={captchaRef} />}
                 <Button
                   variant={'unstyled'}
                   background="linear-gradient(90deg, #000000 0%, rgba(36, 40, 44, 0.9) 98.29%)"
diff --git a/frontend/desktop/src/pages/api/auth/phone/sms.ts b/frontend/desktop/src/pages/api/auth/phone/sms.ts
index bbc14a574c5..dbbed48116f 100644
--- a/frontend/desktop/src/pages/api/auth/phone/sms.ts
+++ b/frontend/desktop/src/pages/api/auth/phone/sms.ts
@@ -1,5 +1,10 @@
 import { ErrorHandler } from '@/services/backend/middleware/error';
-import { filterCf, filterPhoneParams, sendPhoneCodeGuard } from '@/services/backend/middleware/sms';
+import {
+  filterCaptcha,
+  filterCf,
+  filterPhoneParams,
+  sendPhoneCodeGuard
+} from '@/services/backend/middleware/sms';
 import { sendPhoneCodeSvc } from '@/services/backend/svc/sms';
 import { enablePhoneSms } from '@/services/enable';
 import { NextApiRequest, NextApiResponse } from 'next';
@@ -9,8 +14,10 @@ export default ErrorHandler(async function handler(req: NextApiRequest, res: Nex
     throw new Error('SMS is not enabled');
   }
   await filterCf(req, res, async () => {
-    await filterPhoneParams(req, res, ({ phoneNumbers: phone }) =>
-      sendPhoneCodeGuard(phone)(res, () => sendPhoneCodeSvc(phone)(res))
+    await filterCaptcha(req, res, () =>
+      filterPhoneParams(req, res, ({ phoneNumbers: phone }) =>
+        sendPhoneCodeGuard(phone)(res, () => sendPhoneCodeSvc(phone)(res))
+      )
     );
   });
 });
diff --git a/frontend/desktop/src/pages/api/platform/getAppConfig.ts b/frontend/desktop/src/pages/api/platform/getAppConfig.ts
index 617959d8f2f..5fb9dfa6e0a 100644
--- a/frontend/desktop/src/pages/api/platform/getAppConfig.ts
+++ b/frontend/desktop/src/pages/api/platform/getAppConfig.ts
@@ -52,10 +52,10 @@ export async function getAppConfig(): Promise<AppClientConfigType> {
     const authConf = await getAuthClientConfig();
     const commonConf = await getCommonClientConfig();
     const layoutConf = await getLayoutConfig();
-    const _tracking = global.AppConfig.tracking;
+    const appConfig = global.AppConfig;
     const tracking: Required<TrackingConfigType> = {
-      websiteId: _tracking.websiteId || '',
-      hostUrl: _tracking.hostUrl || ''
+      websiteId: appConfig?.tracking?.websiteId || '',
+      hostUrl: appConfig?.tracking?.hostUrl || ''
     };
     const conf = genResConfig(cloudConf, authConf, commonConf, layoutConf, tracking);
     if (!global.commitCroner) {
diff --git a/frontend/desktop/src/pages/api/platform/getAuthConfig.ts b/frontend/desktop/src/pages/api/platform/getAuthConfig.ts
index 8aeebb90fe3..45548571a8e 100644
--- a/frontend/desktop/src/pages/api/platform/getAuthConfig.ts
+++ b/frontend/desktop/src/pages/api/platform/getAuthConfig.ts
@@ -19,6 +19,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
 // genResAuthConfig Return AuthConfigType with only necessary fields for response to client, to avoid exposing sensitive data
 function genResAuthClientConfig(conf: AuthConfigType) {
+  const captcha = conf.captcha;
   const authClientConfig: AuthClientConfigType = {
     callbackURL: conf.callbackURL || '',
     invite: {
@@ -62,6 +63,14 @@ function genResAuthClientConfig(conf: AuthConfigType) {
         proxyAddress: conf.idp.oauth2?.proxyAddress || ''
       }
     },
+    captcha: {
+      enabled: !!captcha?.enabled,
+      ali: {
+        enabled: !!captcha?.ali?.enabled,
+        sceneId: captcha?.ali?.sceneId || '',
+        prefix: captcha?.ali?.prefix || ''
+      }
+    },
     hasBaiduToken: !!conf.baiduToken,
     billingToken: ''
   };
diff --git a/frontend/desktop/src/pages/signin.tsx b/frontend/desktop/src/pages/signin.tsx
index 35b2fd5529b..f3469f025e6 100644
--- a/frontend/desktop/src/pages/signin.tsx
+++ b/frontend/desktop/src/pages/signin.tsx
@@ -8,11 +8,12 @@ import Head from 'next/head';
 import { useEffect } from 'react';
 import { useTranslation } from 'next-i18next';
 import Script from 'next/script';
+import useScriptStore from '@/stores/script';
 
 export default function SigninPage() {
-  const { layoutConfig } = useConfigStore();
+  const { layoutConfig, authConfig } = useConfigStore();
   const { t } = useTranslation();
-
+  const { setCaptchaIsLoad } = useScriptStore();
   useEffect(() => {
     const url = sessionStorage.getItem('accessTemplatesNoLogin');
     if (!!url) {
@@ -29,9 +30,18 @@ export default function SigninPage() {
         <link rel="shortcut icon" href={layoutConfig?.logo ? layoutConfig?.logo : '/favicon.ico'} />
         <link rel="icon" href={layoutConfig?.logo ? layoutConfig?.logo : '/favicon.ico'} />
       </Head>
+      {authConfig?.captcha.enabled && (
+        <Script
+          src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"
+          onLoad={() => {
+            setCaptchaIsLoad();
+          }}
+        />
+      )}
       {layoutConfig?.meta.scripts?.map((item, i) => {
         return <Script key={i} {...item} />;
       })}
+
       <SigninComponent />
     </Box>
   );
diff --git a/frontend/desktop/src/services/backend/middleware/sms.ts b/frontend/desktop/src/services/backend/middleware/sms.ts
index 887a1de0c7c..59873432b60 100644
--- a/frontend/desktop/src/services/backend/middleware/sms.ts
+++ b/frontend/desktop/src/services/backend/middleware/sms.ts
@@ -11,6 +11,7 @@ import {
 import { isEmail } from '@/utils/crypto';
 import { EMAIL_STATUS } from '@/types/response/email';
 import { SemData } from '@/types/sem';
+import { captchaReq } from '../sms';
 
 export const filterPhoneParams = async (
   req: NextApiRequest,
@@ -140,6 +141,71 @@ export const filterCf = async (req: NextApiRequest, res: NextApiResponse, next:
   }
   return await Promise.resolve(next());
 };
+export const filterCaptcha = async (
+  req: NextApiRequest,
+  res: NextApiResponse,
+  next: () => void
+) => {
+  if (
+    !global.AppConfig.desktop.auth.captcha?.enabled ||
+    (process.env.NODE_ENV === 'development' && !process.env.DEV_CAPTCHA_ENABLED)
+  ) {
+    await Promise.resolve(next());
+    return;
+  }
+  const { cfToken: captchaVerifyParam } = req.body as { cfToken?: string };
+  if (!captchaVerifyParam)
+    return jsonRes(res, {
+      message: 'captchaToken is invalid',
+      code: 400
+    });
+  const result = await captchaReq({
+    captchaVerifyParam
+  });
+  if (!result?.verifyResult)
+    return jsonRes(res, {
+      message: 'captchaToken is invalid',
+      data: {
+        result: !!result?.verifyResult,
+        code: result?.verifyCode || ''
+      },
+      code: 409
+    });
+  await Promise.resolve(next());
+};
+export const captchaSvc = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (process.env.NODE_ENV === 'development' && !process.env.DEV_CAPTCHA_ENABLED) {
+    return true;
+  }
+  const { captchaToken } = req.body as { captchaToken?: string; sceneId?: string };
+
+  if (!captchaToken)
+    return jsonRes(res, {
+      message: 'captchaToken is invalid',
+      code: 400
+    });
+  const result = await captchaReq({
+    captchaVerifyParam: captchaToken
+  });
+  if (!result?.verifyResult)
+    return jsonRes(res, {
+      message: 'captchaToken is invalid',
+      data: {
+        result: !!result?.verifyResult,
+        code: result?.verifyCode || ''
+      },
+      code: 409
+    });
+  else
+    return jsonRes(res, {
+      message: 'captchaToken is valid',
+      data: {
+        result: result.verifyResult,
+        code: result?.verifyCode || ''
+      },
+      code: 203
+    });
+};
 
 // once code
 export const verifyCodeUidGuard =
diff --git a/frontend/desktop/src/services/backend/sms.ts b/frontend/desktop/src/services/backend/sms.ts
index e208168097c..7af35c726a3 100644
--- a/frontend/desktop/src/services/backend/sms.ts
+++ b/frontend/desktop/src/services/backend/sms.ts
@@ -2,10 +2,10 @@
 import { getAppConfig } from '@/pages/api/platform/getAppConfig';
 import { retrySerially } from '@/utils/tools';
 import Dysmsapi, * as dysmsapi from '@alicloud/dysmsapi20170525';
-//@ts-ignore
-import * as OpenApi from '@alicloud/openapi-client';
-//@ts-ignore
-import * as Util from '@alicloud/tea-util';
+import * as $tea from '@alicloud/tea-typescript';
+import OpenApi, * as $OpenApi from '@alicloud/openapi-client';
+import Utils, * as $Util from '@alicloud/tea-util';
+import Captcha, * as $Captcha from '@alicloud/captcha20230305';
 import nodemailer from 'nodemailer';
 const getTransporter = () => {
   if (!global.nodemailer) {
@@ -26,7 +26,12 @@ const getTransporter = () => {
   }
   return global.nodemailer;
 };
+
 export const smsReq = async (phoneNumbers: string) => {
+  // for dev
+  if (process.env.NODE_ENV === 'development' && !process.env.DEV_SMS_ENABLED) {
+    return '123456';
+  }
   const aliConfig = global.AppConfig.desktop.auth.idp.sms?.ali;
   if (!aliConfig) throw Error('config error');
   const { signName, templateCode, accessKeyID: accessKeyId, accessKeySecret } = aliConfig;
@@ -42,13 +47,13 @@ export const smsReq = async (phoneNumbers: string) => {
     templateCode,
     templateParam: `{"code":${code}}`
   });
-  const config = new OpenApi.Config({
+  const config = new $OpenApi.Config({
     accessKeyId,
     accessKeySecret
   });
 
   const client = new Dysmsapi(config);
-  const runtime = new Util.RuntimeOptions({});
+  const runtime = new $Util.RuntimeOptions({});
   await retrySerially(async () => {
     try {
       const _result = await client.sendSmsWithOptions(sendSmsRequest, runtime);
@@ -65,8 +70,8 @@ export const smsReq = async (phoneNumbers: string) => {
       }
       if (_result.body.code !== 'OK') {
         throw new Error(`
-				${_result.body.message} 
-				${phoneNumbers}, 
+				${_result.body.message}
+				${phoneNumbers},
 				${new Date()}`);
       }
       return _result;
@@ -76,6 +81,42 @@ export const smsReq = async (phoneNumbers: string) => {
   }, 3);
   return code;
 };
+
+export const captchaReq = async ({ captchaVerifyParam }: { captchaVerifyParam?: string }) => {
+  // for dev
+  const captchaConfig = global.AppConfig.desktop.auth.captcha;
+  if (!captchaConfig?.enabled) throw Error('config error');
+  const aliConfig = global.AppConfig.desktop.auth.captcha?.ali;
+  if (!aliConfig) throw Error('config error');
+  const { sceneId, accessKeyID: accessKeyId, accessKeySecret = '', endpoint } = aliConfig;
+  const captchaRequest = new $Captcha.VerifyIntelligentCaptchaRequest({});
+  captchaRequest.captchaVerifyParam = captchaVerifyParam;
+  captchaRequest.sceneId = sceneId;
+  const config = new $OpenApi.Config({
+    accessKeyId,
+    accessKeySecret,
+    endpoint
+  });
+  const client = new Captcha(config);
+  const runtime = new $Util.RuntimeOptions({});
+  return await retrySerially(async () => {
+    try {
+      const _result = await client.verifyIntelligentCaptchaWithOptions(captchaRequest, runtime);
+      if (!_result) {
+        throw new Error('captcha result is null');
+      }
+      console.log(_result);
+      if (_result.body.code !== 'Success' || !_result.body.success) {
+        throw new Error(`
+				${_result.body.message}
+				${new Date()}`);
+      }
+      return _result.body.result;
+    } catch (error) {
+      return Promise.reject(error);
+    }
+  }, 3);
+};
 export const emailSmsReq = async (email: string) => {
   const emailConfig = global.AppConfig.desktop.auth.idp.sms?.email;
   if (!emailConfig) throw Error('config error');
@@ -101,7 +142,7 @@ export const emailSmsReq = async (email: string) => {
 						background-color: #f0f0f0;
 						text-align: center;
 					}
-			
+
 					.container {
 						max-width: 400px;
 						margin: 50px auto;
@@ -110,17 +151,17 @@ export const emailSmsReq = async (email: string) => {
 						border-radius: 5px;
 						box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 					}
-			
+
 					h2 {
 						color: #3498db;
 					}
-			
+
 					.verification-code {
 						font-size: 24px;
 						color: #333;
 						margin-bottom: 20px;
 					}
-			
+
 					.button {
 						padding: 10px 20px;
 						background-color: #3498db;
@@ -129,7 +170,7 @@ export const emailSmsReq = async (email: string) => {
 						border-radius: 5px;
 						cursor: pointer;
 					}
-			
+
 					.button:hover {
 						background-color: #2980b9;
 					}
diff --git a/frontend/desktop/src/services/backend/svc/sms.ts b/frontend/desktop/src/services/backend/svc/sms.ts
index 3d3caccd1ab..7381f1756bc 100644
--- a/frontend/desktop/src/services/backend/svc/sms.ts
+++ b/frontend/desktop/src/services/backend/svc/sms.ts
@@ -1,7 +1,7 @@
 import { NextApiResponse } from 'next';
 import { addOrUpdateCode, SmsType } from '../db/verifyCode';
 import { jsonRes } from '../response';
-import { emailSmsReq, smsReq } from '../sms';
+import { captchaReq, emailSmsReq, smsReq } from '../sms';
 
 export const sendSmsCodeResp =
   (smsType: SmsType, id: string, code: string) =>
diff --git a/frontend/desktop/src/stores/script.ts b/frontend/desktop/src/stores/script.ts
new file mode 100644
index 00000000000..f93ab5a85d7
--- /dev/null
+++ b/frontend/desktop/src/stores/script.ts
@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+type ScriptState = {
+  captchaIsLoaded: boolean;
+  setCaptchaIsLoad: () => void;
+};
+
+const useScriptStore = create<ScriptState>()(
+  immer((set, get) => ({
+    captchaIsLoaded: false,
+    setCaptchaIsLoad() {
+      set({
+        captchaIsLoaded: true
+      });
+    }
+  }))
+);
+
+export default useScriptStore;
diff --git a/frontend/desktop/src/types/system.ts b/frontend/desktop/src/types/system.ts
index e050cf3ec27..acd2ec0e941 100644
--- a/frontend/desktop/src/types/system.ts
+++ b/frontend/desktop/src/types/system.ts
@@ -141,6 +141,17 @@ export type AuthConfigType = {
       };
     };
   };
+  captcha?: {
+    enabled: boolean;
+    ali?: {
+      enabled: boolean;
+      sceneId: string;
+      prefix: string;
+      endpoint: string;
+      accessKeyID: string;
+      accessKeySecret?: string;
+    };
+  };
 };
 
 export type AuthClientConfigType = DeepRequired<
@@ -161,7 +172,11 @@ export type AuthClientConfigType = DeepRequired<
       'jwt',
       'billingUrl',
       'workorderUrl',
-      'cloudVitrualMachineUrl'
+      'cloudVitrualMachineUrl',
+      //captcha
+      'captcha.ali.accessKeyID',
+      'captcha.ali.accessKeySecret',
+      'captcha.ali.endpoint'
     ]
   >
 > & {
@@ -313,7 +328,15 @@ export const DefaultAuthClientConfig: AuthClientConfigType = {
       proxyAddress: ''
     }
   },
-  billingToken: ''
+  billingToken: '',
+  captcha: {
+    enabled: false,
+    ali: {
+      enabled: false,
+      sceneId: '',
+      prefix: ''
+    }
+  }
 };
 export const DefaultAppClientConfig: AppClientConfigType = {
   cloud: DefaultCloudConfig,
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 5320c887cae..4b465b9dc7e 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -60,12 +60,18 @@ importers:
 
   desktop:
     dependencies:
+      '@alicloud/captcha20230305':
+        specifier: 1.1.3
+        version: 1.1.3
       '@alicloud/dysmsapi20170525':
         specifier: ^2.0.24
         version: 2.0.24
       '@alicloud/openapi-client':
         specifier: ^0.4.6
         version: 0.4.7
+      '@alicloud/tea-typescript':
+        specifier: ^1.8.0
+        version: 1.8.0
       '@alicloud/tea-util':
         specifier: ^1.4.7
         version: 1.4.7
@@ -2766,6 +2772,18 @@ packages:
     resolution: {integrity: sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==}
     dev: true
 
+  /@alicloud/captcha20230305@1.1.3:
+    resolution: {integrity: sha512-AUyW7z6xgtC+Khp0BuzerirKLuxCQcovwcsvXPUib5kCxsrKvWuVWrGyTHP9rIpA1pE9ijOlDw8domtgPlY/KQ==}
+    dependencies:
+      '@alicloud/endpoint-util': 0.0.1
+      '@alicloud/openapi-client': 0.4.7
+      '@alicloud/openapi-util': 0.3.2
+      '@alicloud/tea-typescript': 1.8.0
+      '@alicloud/tea-util': 1.4.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@alicloud/credentials@2.3.0:
     resolution: {integrity: sha512-x0vf/m1BzkqYXAj2Hkd22O35josx5P4VCzq/9EvTBjA7aGLX/P6JDz7QVp+gnhLjPJyvwAbErvJRYq4gIo4IMA==}
     dependencies: