diff --git a/.oxlintrc.json b/.oxlintrc.json
index beeadf02c34..9c88d4e9c6a 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -30,7 +30,9 @@
       "rules": {
         "react/jsx-max-depth": "off",
         "typescript/no-floating-promises": "off",
-        "typescript/unbound-method": "off"
+        "typescript/unbound-method": "off",
+        "typescript/no-base-to-string": "off",
+        "restrict-template-expressions": "off"
       }
     },
     {
diff --git a/packages/admin/package.json b/packages/admin/package.json
index a8cbf6b1ae8..0372e87ea41 100644
--- a/packages/admin/package.json
+++ b/packages/admin/package.json
@@ -36,6 +36,7 @@
     "prepublishOnly": "pnpm build"
   },
   "devDependencies": {
+    "@better-captcha/react": "^0.5.6",
     "@rematch/core": "2.2.0",
     "base-icon": "2.3.2",
     "classnames": "2.5.1",
diff --git a/packages/admin/src/components/Captcha.js b/packages/admin/src/components/Captcha.js
new file mode 100644
index 00000000000..8d49c9142db
--- /dev/null
+++ b/packages/admin/src/components/Captcha.js
@@ -0,0 +1,7 @@
+import { ReCaptchaV3 } from '@better-captcha/react/provider/recaptcha-v3';
+import { Turnstile } from '@better-captcha/react/provider/turnstile';
+
+export const CaptchaProviders = {
+  recaptchaV3: ReCaptchaV3,
+  turnstile: Turnstile,
+};
diff --git a/packages/admin/src/components/useCaptcha.js b/packages/admin/src/components/useCaptcha.js
deleted file mode 100644
index de9283f78dc..00000000000
--- a/packages/admin/src/components/useCaptcha.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useRecaptcha } from './useRecaptchaV3.js';
-import { useTurnstile } from './useTurnstile.js';
-
-export const useCaptcha = (config) => {
-  const recaptchaV3 = useRecaptcha(config);
-  const turnstile = useTurnstile(config);
-
-  if (window.turnstileKey) {
-    return turnstile;
-  }
-  if (window.recaptchaV3Key) {
-    return recaptchaV3;
-  }
-
-  return () => {
-    // do nothing
-  };
-};
diff --git a/packages/admin/src/components/useRecaptchaV3.js b/packages/admin/src/components/useRecaptchaV3.js
deleted file mode 100644
index a494ee8a628..00000000000
--- a/packages/admin/src/components/useRecaptchaV3.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import useScript from './useScript.js';
-
-export const useRecaptcha = ({ sitekey, hideDefaultBadge = false, checkForExisting = true }) => {
-  const [recaptcha, setRecaptcha] = useState();
-
-  useEffect(() => {
-    if (isBrowser && hideDefaultBadge) {
-      injectStyle('.grecaptcha-badge { visibility: hidden; }');
-    }
-  }, [hideDefaultBadge]);
-
-  useScript({
-    src: window.recaptchaV3Key
-      ? `https://recaptcha.net/recaptcha/api.js?render=${sitekey}`
-      : undefined,
-    onload: () =>
-      window.grecaptcha.ready(() => {
-        setRecaptcha(window.grecaptcha);
-      }),
-    checkForExisting,
-  });
-
-  useEffect(() => {
-    if (window.grecaptcha && window.recaptchaV3Key) {
-      window.grecaptcha.ready(() => {
-        setRecaptcha(window.grecaptcha);
-      });
-    }
-  }, []);
-
-  return (action) =>
-    new Promise((resolve, reject) => {
-      if (recaptcha) {
-        resolve(recaptcha.execute(sitekey, { action }));
-      } else {
-        reject(new Error('Recaptcha script not available'));
-      }
-    });
-};
-
-const isBrowser = typeof window !== 'undefined' && Boolean(window.document);
-
-const injectStyle = (rule) => {
-  const styleEl = document.createElement('style');
-
-  document.head.append(styleEl);
-
-  const styleSheet = styleEl.sheet;
-
-  if (styleSheet) styleSheet.insertRule(rule, styleSheet.cssRules.length);
-};
diff --git a/packages/admin/src/components/useScript.js b/packages/admin/src/components/useScript.js
deleted file mode 100644
index 2a1fcb816fd..00000000000
--- a/packages/admin/src/components/useScript.js
+++ /dev/null
@@ -1,104 +0,0 @@
-// The hooks original author is @hupe1980 fork from https://github.com/hupe1980/react-script-hook/blob/master/src/use-script.tsx
-
-import { useEffect, useState } from 'react';
-
-// Previously loading/loaded scripts and their current status
-export const scripts = {};
-
-// Check for existing <script> tags with this src. If so, update scripts[src]
-// and return the new status; otherwise, return undefined.
-const checkExisting = (src) => {
-  const existing = document.querySelector(`script[src="${src}"]`);
-
-  if (existing) {
-    // Assume existing <script> tag is already loaded,
-    // and cache that data for future use.
-    return (scripts[src] = {
-      loading: false,
-      error: null,
-      scriptEl: existing,
-    });
-  }
-
-  return;
-};
-
-export default function useScript({ src, checkForExisting = false, ...attributes }) {
-  // Check whether some instance of this hook considered this src.
-  let status = src ? scripts[src] : undefined;
-
-  // If requested, check for existing <script> tags with this src
-  // (unless we've already loaded the script ourselves).
-  if (!status && checkForExisting && src && isBrowser) {
-    status = checkExisting(src);
-  }
-
-  const [loading, setLoading] = useState(status ? status.loading : Boolean(src));
-  const [error, setError] = useState(status ? status.error : null);
-  // Tracks if script is loaded so we can avoid duplicate script tags
-  const [scriptLoaded, setScriptLoaded] = useState(false);
-
-  useEffect(() => {
-    // Nothing to do on server, or if no src specified, or
-    // if script is already loaded or "error" state.
-    if (!isBrowser || !src || scriptLoaded || error) return;
-
-    // Check again for existing <script> tags with this src
-    // in case it's changed since mount.
-    status = scripts[src];
-    if (!status && checkForExisting) {
-      status = checkExisting(src);
-    }
-
-    // Determine or create <script> element to listen to.
-    let scriptEl;
-
-    if (status) {
-      ({ scriptEl } = status);
-    } else {
-      scriptEl = document.createElement('script');
-      scriptEl.src = src;
-
-      Object.keys(attributes).forEach((key) => {
-        if (scriptEl[key] === undefined) {
-          scriptEl.setAttribute(key, attributes[key]);
-        } else {
-          scriptEl[key] = attributes[key];
-        }
-      });
-
-      status = scripts[src] = {
-        loading: true,
-        error: null,
-        scriptEl: scriptEl,
-      };
-    }
-    // `status` is now guaranteed to be defined: either the old status
-    // from a previous load, or a newly created one.
-
-    const handleLoad = () => {
-      if (status) status.loading = false;
-      setLoading(false);
-      setScriptLoaded(true);
-    };
-    const handleError = (error) => {
-      if (status) status.error = error;
-      setError(error);
-    };
-
-    scriptEl.addEventListener('load', handleLoad);
-    scriptEl.addEventListener('error', handleError);
-
-    document.body.append(scriptEl);
-
-    return () => {
-      scriptEl.removeEventListener('load', handleLoad);
-      scriptEl.removeEventListener('error', handleError);
-    };
-    // we need to ignore the attributes as they're a new object per call, so we'd never skip an effect call
-  }, [src]);
-
-  return [loading, error];
-}
-
-const isBrowser = typeof window !== 'undefined' && Boolean(window.document);
diff --git a/packages/admin/src/components/useTurnstile.js b/packages/admin/src/components/useTurnstile.js
deleted file mode 100644
index ca17add138d..00000000000
--- a/packages/admin/src/components/useTurnstile.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import useScript from './useScript.js';
-
-export const useTurnstile = ({ sitekey, checkForExisting = true }) => {
-  const [turnstile, setTurnstile] = useState();
-
-  useScript({
-    src: window.turnstileKey ? `https://challenges.cloudflare.com/turnstile/v0/api.js` : undefined,
-    onload: () =>
-      window.turnstile.ready(() => {
-        setTurnstile(window.turnstile);
-      }),
-    async: false,
-    checkForExisting,
-  });
-
-  useEffect(() => {
-    if (!window.turnstile) {
-      return;
-    }
-
-    window.turnstile.ready(() => {
-      setTurnstile(window.turnstile);
-    });
-  }, []);
-
-  return (action) =>
-    new Promise((resolve, reject) => {
-      if (!turnstile) {
-        reject(new Error('Turnstile script not available'));
-
-        return;
-      }
-
-      turnstile.render('.captcha-container', {
-        sitekey,
-        action,
-        callback: resolve,
-      });
-    });
-};
diff --git a/packages/admin/src/pages/login/index.jsx b/packages/admin/src/pages/login/index.jsx
index 6f6b93cc130..27e8e048b80 100644
--- a/packages/admin/src/pages/login/index.jsx
+++ b/packages/admin/src/pages/login/index.jsx
@@ -1,13 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router';
 
 import Header from '../../components/Header.jsx';
 import * as Icons from '../../components/icon/index.js';
-import { useCaptcha } from '../../components/useCaptcha.js';
+
 import { get2FAToken } from '../../services/user.js';
 
+import { CaptchaProviders } from '../../components/Captcha.js';
+import getCaptchaConfig from '../../utils/getCaptchaConfig.js';
+
 // oxlint-disable-next-line max-lines-per-function
 export default function Login() {
   const { t } = useTranslation();
@@ -17,10 +20,9 @@ export default function Login() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const [is2FAEnabled, enable2FA] = useState(false);
-  const execute = useCaptcha({
-    sitekey: window.turnstileKey ?? window.recaptchaV3Key,
-    hideDefaultBadge: true,
-  });
+  const captchaRef = useRef(null);
+
+  const captchaConfig = getCaptchaConfig();
 
   const match = location.pathname.match(/(.*?\/)ui/);
   const basePath = match && match[1] ? match[1] : '/';
@@ -59,7 +61,9 @@ export default function Login() {
       return setError(t('please input 2fa code'));
     }
 
-    const token = await execute('login');
+    const captchaToken = CaptchaProviders[captchaConfig?.provider]
+      ? captchaRef.current.getResponse()
+      : '';
 
     try {
       await dispatch.user.login({
@@ -67,8 +71,7 @@ export default function Login() {
         password,
         code,
         remember,
-        recaptchaV3: window.recaptchaV3Key ? token : undefined,
-        turnstile: window.turnstileKey ? token : undefined,
+        captcha: captchaToken,
       });
     } catch {
       setError(t('email or password error'));
@@ -163,7 +166,13 @@ export default function Login() {
                 />
               </p>
             )}
-            <p className="captcha-container" />
+
+            {CaptchaProviders[captchaConfig?.provider] &&
+              React.createElement(CaptchaProviders[captchaConfig.provider], {
+                ...captchaConfig,
+                ref: captchaRef,
+              })}
+
             <p className="submit">
               <button type="submit" className="btn btn-l w-100 primary" disabled={loading}>
                 {t('login')}
diff --git a/packages/admin/src/pages/register/index.jsx b/packages/admin/src/pages/register/index.jsx
index 06d941c8846..ffbf71d5ddc 100644
--- a/packages/admin/src/pages/register/index.jsx
+++ b/packages/admin/src/pages/register/index.jsx
@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router';
 
 import Header from '../../components/Header.jsx';
-import { useCaptcha } from '../../components/useCaptcha.js';
+import { CaptchaProviders } from '../../components/Captcha.js';
+import getCaptchaConfig from '../../utils/getCaptchaConfig.js';
 
 // oxlint-disable-next-line max-lines-per-function
 export default function Register() {
@@ -14,10 +15,9 @@ export default function Register() {
   const user = useSelector((state) => state.user);
   const [error, setError] = useState(false);
   const [submitting, setSubmitting] = useState(false);
-  const execute = useCaptcha({
-    sitekey: window.turnstileKey ?? window.recaptchaV3Key,
-    hideDefaultBadge: true,
-  });
+  const captchaRef = useRef(null);
+
+  const captchaConfig = getCaptchaConfig();
 
   useEffect(() => {
     if (user && user.objectId) {
@@ -49,14 +49,16 @@ export default function Register() {
 
     try {
       setSubmitting(true);
-      const token = await execute('login');
+
+      const captchaToken = CaptchaProviders[captchaConfig?.provider]
+        ? captchaRef.current.getResponse()
+        : '';
       const resp = await dispatch.user.register({
         display_name: nick,
         email,
         url: link,
         password,
-        recaptchaV3: window.recaptchaV3Key ? token : undefined,
-        turnstile: window.turnstileKey ? token : undefined,
+        captcha: captchaToken,
       });
 
       if (resp && resp.verify) {
@@ -146,7 +148,13 @@ export default function Register() {
                 placeholder={t('password again')}
               />
             </p>
-            <p className="captcha-container" />
+
+            {captchaConfig?.provider &&
+              React.createElement(CaptchaProviders[captchaConfig.provider], {
+                ...captchaConfig,
+                ref: captchaRef,
+              })}
+
             <p className="submit">
               <button type="submit" disabled={submitting} className="btn btn-l w-100 primary">
                 {t('register')}
diff --git a/packages/admin/src/services/auth.js b/packages/admin/src/services/auth.js
index 1abf53aa37d..642b4f5aa89 100644
--- a/packages/admin/src/services/auth.js
+++ b/packages/admin/src/services/auth.js
@@ -6,11 +6,11 @@ export const getUserInfo = () =>
     Promise.reject(new Error('get userinfo failed'));
   });
 
-export const login = ({ email, password, code, recaptchaV3, turnstile }) =>
+export const login = ({ email, password, code, recaptchaV3, turnstile, captcha }) =>
   request({
     url: 'token',
     method: 'POST',
-    body: { email, password, code, recaptchaV3, turnstile },
+    body: { email, password, code, recaptchaV3, turnstile, captcha },
   });
 
 export const logout = () => {
diff --git a/packages/admin/src/store/user.js b/packages/admin/src/store/user.js
index f26075dc345..1c28bde6352 100644
--- a/packages/admin/src/store/user.js
+++ b/packages/admin/src/store/user.js
@@ -28,13 +28,14 @@ export const user = {
 
       return dispatch.user.setUser(user);
     },
-    async login({ email, password, code, remember, recaptchaV3, turnstile }) {
+    async login({ email, password, code, remember, recaptchaV3, turnstile, captcha }) {
       const { token, ...user } = await login({
         email,
         password,
         code,
         recaptchaV3,
         turnstile,
+        captcha,
       });
 
       if (token) {
diff --git a/packages/admin/src/utils/getCaptchaConfig.js b/packages/admin/src/utils/getCaptchaConfig.js
new file mode 100644
index 00000000000..5ece3f513b6
--- /dev/null
+++ b/packages/admin/src/utils/getCaptchaConfig.js
@@ -0,0 +1,22 @@
+export default function () {
+  if (window.captcha) {
+    return window.captcha;
+  }
+
+  if (window.recaptchaV3Key) {
+    return {
+      provider: 'recaptchaV3',
+      sitekey: window.recaptchaV3Key,
+      options: {
+        action: 'login',
+      },
+    };
+  }
+
+  if (window.turnstileKey) {
+    return {
+      provider: 'turnstile',
+      sitekey: window.turnstileKey,
+    };
+  }
+}
diff --git a/packages/client/package.json b/packages/client/package.json
index af33e14a79c..d2bf9e6599f 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -70,12 +70,12 @@
     "style:meta": "sass ./src/styles/meta.scss ./dist/waline-meta.css --style=compressed"
   },
   "dependencies": {
+    "@better-captcha/vue": "^0.5.6",
     "@vueuse/core": "^14.2.1",
     "@waline/api": "workspace:*",
     "autosize": "^6.0.1",
     "marked": "^17.0.4",
     "marked-highlight": "^2.2.3",
-    "recaptcha-v3": "^1.11.3",
     "vue": "^3.5.29"
   },
   "devDependencies": {
diff --git a/packages/client/rollup.config.ts b/packages/client/rollup.config.ts
index 7911ed00820..dd4eb96b9d5 100644
--- a/packages/client/rollup.config.ts
+++ b/packages/client/rollup.config.ts
@@ -95,15 +95,7 @@ export default [
       }),
     ],
     treeshake: 'smallest',
-    external: [
-      '@vueuse/core',
-      '@waline/api',
-      'autosize',
-      'marked',
-      'marked-highlight',
-      'recaptcha-v3',
-      'vue',
-    ],
+    external: ['@better-captcha/vue', '@vueuse/core', '@waline/api', 'autosize', 'marked', 'marked-highlight', 'vue'],
   },
 
   // components
@@ -116,15 +108,7 @@ export default [
         sourcemap: true,
       },
     ],
-    external: [
-      '@vueuse/core',
-      '@waline/api',
-      'autosize',
-      'marked',
-      'marked-highlight',
-      'recaptcha-v3',
-      'vue',
-    ],
+    external: ['@better-captcha/vue', '@vueuse/core', '@waline/api', 'autosize', 'marked', 'marked-highlight', 'vue'],
     plugins: [
       vue({
         isProduction: true,
diff --git a/packages/client/src/components/Captcha.ts b/packages/client/src/components/Captcha.ts
new file mode 100644
index 00000000000..bab14e55ce7
--- /dev/null
+++ b/packages/client/src/components/Captcha.ts
@@ -0,0 +1,24 @@
+import { ReCaptchaV3 } from '@better-captcha/vue/provider/recaptcha-v3';
+import { Turnstile } from '@better-captcha/vue/provider/turnstile';
+interface RecaptchaV3Provider {
+  name: 'recaptchaV3';
+  component: typeof ReCaptchaV3;
+}
+
+interface TurnstileProvider {
+  name: 'turnstile';
+  component: typeof Turnstile;
+}
+
+export type CaptchaProvider = RecaptchaV3Provider | TurnstileProvider;
+
+export const CaptchaProviders: CaptchaProvider[] = [
+  {
+    name: 'recaptchaV3',
+    component: ReCaptchaV3,
+  },
+  {
+    name: 'turnstile',
+    component: Turnstile,
+  },
+];
diff --git a/packages/client/src/components/CommentBox.vue b/packages/client/src/components/CommentBox.vue
index 945fede374d..b00eae1e8f9 100644
--- a/packages/client/src/components/CommentBox.vue
+++ b/packages/client/src/components/CommentBox.vue
@@ -6,7 +6,10 @@ import { addComment, login, updateComment } from '@waline/api';
 import autosize from 'autosize';
 import type { DeepReadonly, CSSProperties } from 'vue';
 import { computed, inject, nextTick, onMounted, reactive, ref, useTemplateRef, watch } from 'vue';
+import { useCaptcha } from '@better-captcha/vue';
+import type { CaptchaHandle } from '@better-captcha/vue';
 
+import { CaptchaProviders } from './Captcha.js';
 import {
   CloseIcon,
   EmojiIcon,
@@ -17,13 +20,7 @@ import {
   PreviewIcon,
 } from './Icons.js';
 import ImageWall from './ImageWall.vue';
-import {
-  useEditor,
-  useReCaptcha,
-  useTurnstile,
-  useUserInfo,
-  useUserMeta,
-} from '../composables/index.js';
+import { useEditor, useUserInfo, useUserMeta } from '../composables/index.js';
 import type { WalineSearchResult } from '../typings/index.js';
 import type { WalineEmojiConfig } from '../utils/index.js';
 import {
@@ -67,6 +64,7 @@ const config = inject(configKey)!;
 const editor = useEditor();
 const userMeta = useUserMeta();
 const userInfo = useUserInfo();
+const captchaHandler = useCaptcha<CaptchaHandle>();
 
 const inputRefs = ref<Record<string, HTMLInputElement>>({});
 const textAreaRef = useTemplateRef<HTMLTextAreaElement>('textarea');
@@ -82,6 +80,8 @@ const emojiTabIndex = ref(0);
 const showEmoji = ref(false);
 const previewEmoji = ref('');
 const previewStyle = ref<CSSProperties>({});
+const { captchaRef } = captchaHandler;
+
 let leaveTimer: ReturnType<typeof setTimeout>;
 
 const onEmojiHover = (event: MouseEvent, key: string): void => {
@@ -129,11 +129,16 @@ const isSubmitting = ref(false);
 const isImageListEnd = ref(false);
 
 const locale = computed(() => config.value.locale);
-
 const isLogin = computed(() => Boolean(userInfo.value.token));
 
 const canUploadImage = computed(() => config.value.imageUploader != null);
 
+const CaptchaProvider = computed(() => {
+  const provider = config.value.captcha?.provider;
+
+  return CaptchaProviders.find(({ name }) => name === provider);
+});
+
 const insert = (content: string): void => {
   // oxlint-disable-next-line typescript/no-non-null-assertion
   const textArea = textAreaRef.value!;
@@ -208,8 +213,7 @@ const onImageChange = (): void => {
 
 // oxlint-disable-next-line complexity, max-statements
 const submitComment = async (): Promise<void> => {
-  const { serverURL, lang, login, wordLimit, requiredMeta, recaptchaV3Key, turnstileKey } =
-    config.value;
+  const { serverURL, lang, login, wordLimit, requiredMeta } = config.value;
 
   const comment: WalineCommentData = {
     comment: content.value,
@@ -285,9 +289,10 @@ const submitComment = async (): Promise<void> => {
   isSubmitting.value = true;
 
   try {
-    if (recaptchaV3Key) comment.recaptchaV3 = await useReCaptcha(recaptchaV3Key).execute('social');
-
-    if (turnstileKey) comment.turnstile = await useTurnstile(turnstileKey).execute('social');
+    if (CaptchaProvider.value) {
+      await captchaHandler.execute();
+      comment.captcha = await captchaHandler.getResponse();
+    }
 
     const options = {
       serverURL,
@@ -665,7 +670,12 @@ onMounted(() => {
         </div>
 
         <div class="wl-info">
-          <div class="wl-captcha-container" />
+          <component
+            v-if="CaptchaProvider"
+            :is="CaptchaProvider.component"
+            ref="captchaRef"
+            v-bind="config.captcha"
+          />
 
           <div class="wl-text-number">
             {{ wordNumber }}
diff --git a/packages/client/src/composables/index.ts b/packages/client/src/composables/index.ts
index 08b7da5ed04..d1affb5fff1 100644
--- a/packages/client/src/composables/index.ts
+++ b/packages/client/src/composables/index.ts
@@ -1,6 +1,4 @@
 export * from './inputs.js';
 export * from './like.js';
 export * from './reaction.js';
-export * from './recaptchaV3.js';
-export * from './turnstile.js';
 export * from './userInfo.js';
diff --git a/packages/client/src/composables/recaptchaV3.ts b/packages/client/src/composables/recaptchaV3.ts
deleted file mode 100644
index 188c6238047..00000000000
--- a/packages/client/src/composables/recaptchaV3.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ReCaptchaInstance } from 'recaptcha-v3';
-import { load } from 'recaptcha-v3';
-
-const recaptchaStore: Record<string, Promise<ReCaptchaInstance>> = {};
-
-interface ReCaptcha {
-  execute: (action: string) => Promise<string>;
-}
-
-export const useReCaptcha = (key: string): ReCaptcha => {
-  const init = (recaptchaStore[key] ??= load(key, {
-    useRecaptchaNet: true,
-    autoHideBadge: true,
-  }));
-
-  return {
-    execute: (action: string) => init.then((instance) => instance.execute(action)),
-  };
-};
diff --git a/packages/client/src/composables/turnstile.ts b/packages/client/src/composables/turnstile.ts
deleted file mode 100644
index 8b21956d96a..00000000000
--- a/packages/client/src/composables/turnstile.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useScriptTag } from '@vueuse/core';
-
-interface TurnstileOptions {
-  sitekey: string;
-  action?: string;
-  size?: 'normal' | 'compact';
-  callback?: (token: string) => void;
-}
-interface TurnstileInstance {
-  ready: (fn: () => void) => void;
-  excute: (className: string, options?: TurnstileOptions) => void;
-  render: (className: string, options?: TurnstileOptions) => void;
-}
-
-declare global {
-  interface Window {
-    turnstile?: TurnstileInstance;
-  }
-}
-
-interface Turnstile {
-  execute: (action: string) => Promise<string>;
-}
-
-export const useTurnstile = (key: string): Turnstile => {
-  const execute = async (action: string): Promise<string> => {
-    const { load } = useScriptTag(
-      'https://challenges.cloudflare.com/turnstile/v0/api.js',
-      // oxlint-disable-next-line no-undefined
-      undefined,
-      { async: false },
-    );
-
-    await load();
-
-    const { turnstile } = window;
-
-    return new Promise((resolve) => {
-      turnstile?.ready(() => {
-        turnstile.render('.wl-captcha-container', {
-          sitekey: key,
-          action,
-          size: 'compact',
-          callback: resolve,
-        });
-      });
-    });
-  };
-
-  return { execute };
-};
diff --git a/packages/client/src/typings/captcha.ts b/packages/client/src/typings/captcha.ts
new file mode 100644
index 00000000000..e80f7992c64
--- /dev/null
+++ b/packages/client/src/typings/captcha.ts
@@ -0,0 +1,130 @@
+import type { RenderParameters as AltchaRenderParameters } from '@better-captcha/vue/provider/altcha';
+import type { RenderParameters as CapWidgetRenderParameters } from '@better-captcha/vue/provider/cap-widget';
+import type { RenderParameters as CaptchaFoxRenderParameters } from '@better-captcha/vue/provider/captcha-fox';
+import type { RenderParameters as FriendlyCaptchaRenderParameters } from '@better-captcha/vue/provider/friendly-captcha';
+import type { RenderParameters as HCaptchaRenderParameters } from '@better-captcha/vue/provider/hcaptcha';
+import type { RenderParameters as PrivateCaptchaRenderParameters } from '@better-captcha/vue/provider/private-captcha';
+import type { RenderParameters as ProsopoRenderParameters } from '@better-captcha/vue/provider/prosopo';
+import type { RenderParameters as ReCaptchaRenderParameters } from '@better-captcha/vue/provider/recaptcha';
+import type { RenderParameters as ReCaptchaV3RenderParameters } from '@better-captcha/vue/provider/recaptcha-v3';
+import type { RenderParameters as TurnstileRenderParameters } from '@better-captcha/vue/provider/turnstile';
+
+
+export interface BaseWalineCaptchaOptions {
+  /**
+   * captcha provider site key
+   */
+  sitekey: string;
+}
+
+export interface AltchaCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'altcha';
+  /**
+   * captcha provider options
+   */
+  options?: AltchaRenderParameters;
+}
+
+export interface CapWidgetCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'cap-widget';
+  /**
+   * captcha provider options
+   */
+  options?: CapWidgetRenderParameters;
+}
+
+export interface CaptchaFoxCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'captcha-fox';
+  /**
+   * captcha provider options
+   */
+  options?: CaptchaFoxRenderParameters;
+}
+
+export interface FriendlyCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'friendly-captcha';
+  /**
+   * captcha provider options
+   */
+  options?: FriendlyCaptchaRenderParameters;
+}
+
+export interface HCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'h-captcha';
+  /**
+   * captcha provider options
+   */
+  options?: HCaptchaRenderParameters;
+}
+
+export interface PrivateCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'private-captcha';
+  /**
+   * captcha provider options
+   */
+  options?: PrivateCaptchaRenderParameters;
+}
+
+export interface ProsopoCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'prosopo';
+  /**
+   * captcha provider options
+   */
+  options?: ProsopoRenderParameters;
+}
+
+export interface ReCaptchaCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'recaptcha';
+  /**
+   * captcha provider options
+   */
+  options?: ReCaptchaRenderParameters;
+}
+
+export interface ReCaptchaV3CaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'recaptchaV3';
+  /**
+   * captcha provider options
+   */
+  options: ReCaptchaV3RenderParameters;
+}
+
+export interface TurnstileCaptchaOptions extends BaseWalineCaptchaOptions {
+  /**
+   * captcha provider name
+   */
+  provider: 'turnstile';
+  /**
+   * captcha provider options
+   */
+  options?: TurnstileRenderParameters;
+}
+
+export type WalineCaptchaOptions = ReCaptchaV3CaptchaOptions | TurnstileCaptchaOptions | AltchaCaptchaOptions | CapWidgetCaptchaOptions | CaptchaFoxCaptchaOptions | FriendlyCaptchaOptions | HCaptchaOptions | PrivateCaptchaOptions | ProsopoCaptchaOptions | ReCaptchaCaptchaOptions;
\ No newline at end of file
diff --git a/packages/client/src/typings/index.ts b/packages/client/src/typings/index.ts
index 6c97e180fc7..98c1fb644db 100644
--- a/packages/client/src/typings/index.ts
+++ b/packages/client/src/typings/index.ts
@@ -2,3 +2,4 @@ export * from './base.js';
 export * from './locale.js';
 export * from './waline.js';
 export * from './options.js';
+export * from './captcha.js';
diff --git a/packages/client/src/typings/waline.ts b/packages/client/src/typings/waline.ts
index 05e79d964d4..71d3cc1d33c 100644
--- a/packages/client/src/typings/waline.ts
+++ b/packages/client/src/typings/waline.ts
@@ -1,3 +1,5 @@
+
+
 import type {
   WalineCommentSorting,
   WalineEmojiInfo,
@@ -9,6 +11,7 @@ import type {
   WalineSearchOptions,
   WalineTeXRenderer,
 } from './base.js';
+import type { WalineCaptchaOptions } from './captcha.js';
 import type { WalineLocale } from './locale.js';
 
 export interface WalineProps {
@@ -195,10 +198,19 @@ export interface WalineProps {
    */
   noRss?: boolean;
 
+  /**
+   * Captcha 配置
+   *
+   * Captcha options
+   */
+  captcha?: WalineCaptchaOptions;
+
   /**
    * recaptcha v3 客户端 key
    *
    * recaptcha v3 client key
+   *
+   * @deprecated Please use `captcha` instead.
    */
   recaptchaV3Key?: string;
 
@@ -206,6 +218,8 @@ export interface WalineProps {
    * turnstile 客户端 key
    *
    * turnstile client key
+   *
+   * @deprecated Please use `captcha` instead.
    */
   turnstileKey?: string;
 
diff --git a/packages/client/src/utils/config.ts b/packages/client/src/utils/config.ts
index 9fd79f6e675..328b6f38a07 100644
--- a/packages/client/src/utils/config.ts
+++ b/packages/client/src/utils/config.ts
@@ -30,7 +30,14 @@ export interface WalineEmojiConfig {
 export interface WalineConfig extends Required<
   Omit<
     WalineProps,
-    'emoji' | 'imageUploader' | 'highlighter' | 'texRenderer' | 'wordLimit' | 'reaction' | 'search'
+    | 'emoji'
+    | 'imageUploader'
+    | 'highlighter'
+    | 'texRenderer'
+    | 'wordLimit'
+    | 'reaction'
+    | 'search'
+    | 'captcha'
   >
 > {
   locale: WalineLocale;
@@ -40,7 +47,8 @@ export interface WalineConfig extends Required<
   imageUploader: WalineImageUploader | null;
   texRenderer: WalineTeXRenderer | null;
   search: WalineSearchOptions | null;
-  reaction: string[] | null;
+  reaction: string[] | null | boolean;
+  captcha: WalineProps['captcha'] | null;
 }
 
 export const getServerURL = (serverURL: string): string => {
@@ -68,6 +76,7 @@ export const getConfig = ({
   noCopyright = false,
   noRss = false,
   login = 'enable',
+  captcha,
   recaptchaV3Key = '',
   turnstileKey = '',
   commentSorting = 'latest',
@@ -95,11 +104,18 @@ export const getConfig = ({
   login,
   noCopyright,
   noRss,
+  captcha:
+    captcha ??
+    (recaptchaV3Key
+      ? { provider: 'recaptchaV3', sitekey: recaptchaV3Key, options: { action: 'social' } }
+      : turnstileKey
+        ? { provider: 'turnstile', sitekey: turnstileKey }
+        : null),
   recaptchaV3Key,
   turnstileKey,
   ...more,
   // oxlint-disable-next-line typescript/strict-boolean-expressions, typescript/prefer-nullish-coalescing
-  reaction: reaction === true ? DEFAULT_REACTION : reaction || null,
+  reaction: reaction === true ? DEFAULT_REACTION : (reaction ?? null),
   imageUploader: fallback(imageUploader, defaultUploadImage),
   highlighter: fallback(highlighter, defaultHighlighter),
   texRenderer: fallback(texRenderer, defaultTeXRenderer),
diff --git a/packages/client/template/init.html b/packages/client/template/init.html
index a6d64738aae..d9f21746d70 100644
--- a/packages/client/template/init.html
+++ b/packages/client/template/init.html
@@ -20,8 +20,10 @@
         pageview: true,
         serverURL: import.meta.env.SERVERURL || 'https://walinejs.comment.lithub.cc',
         emoji: ['//unpkg.com/@waline/emojis@1.1.0/bilibili', '//unpkg.com/@waline/emojis@1.1.0/qq'],
-        // recaptchaV3Key: '6Lfz4-shAAAAANgsYRR0datkzv6zLIaKrSqfHsiG',
-        turnstileKey: '0x4AAAAAAACTzOE6F_3MuL-L',
+        // captcha: { provider: 'recaptchaV3', sitekey: '6Lfz4-shAAAAANgsYRR0datkzv6zLIaKrSqfHsiG' },
+        recaptchaV3Key: '6Lfz4-shAAAAANgsYRR0datkzv6zLIaKrSqfHsiG',
+        // captcha: { provider: 'turnstile', sitekey: '0x4AAAAAAACTzOE6F_3MuL-L'},
+        // turnstileKey: '0x4AAAAAAACTzOE6F_3MuL-L',
       });
     </script>
   </body>
diff --git a/packages/server/src/logic/base.js b/packages/server/src/logic/base.js
index a5439a047bc..aebc3a8e4e9 100644
--- a/packages/server/src/logic/base.js
+++ b/packages/server/src/logic/base.js
@@ -157,12 +157,12 @@ module.exports = class BaseLogic extends think.Logic {
 
   async useCaptchaCheck() {
     const { RECAPTCHA_V3_SECRET, TURNSTILE_SECRET } = process.env;
-    const { turnstile, recaptchaV3 } = this.post();
+    const { turnstile, recaptchaV3, captcha } = this.post();
 
     if (TURNSTILE_SECRET) {
       return this.useRecaptchaOrTurnstileCheck({
         secret: TURNSTILE_SECRET,
-        token: turnstile,
+        token: captcha || turnstile,
         api: 'https://challenges.cloudflare.com/turnstile/v0/siteverify',
         method: 'POST',
       });
@@ -171,7 +171,7 @@ module.exports = class BaseLogic extends think.Logic {
     if (RECAPTCHA_V3_SECRET) {
       return this.useRecaptchaOrTurnstileCheck({
         secret: RECAPTCHA_V3_SECRET,
-        token: recaptchaV3,
+        token: captcha || recaptchaV3,
         api: 'https://recaptcha.net/recaptcha/api/siteverify',
         method: 'GET',
       });
diff --git a/packages/server/src/middleware/dashboard.js b/packages/server/src/middleware/dashboard.js
index 8f145dcef78..479d1aab827 100644
--- a/packages/server/src/middleware/dashboard.js
+++ b/packages/server/src/middleware/dashboard.js
@@ -15,6 +15,7 @@ module.exports = function () {
     window.SITE_NAME = ${JSON.stringify(process.env.SITE_NAME)};
     window.recaptchaV3Key = ${JSON.stringify(process.env.RECAPTCHA_V3_KEY)};
     window.turnstileKey = ${JSON.stringify(process.env.TURNSTILE_KEY)};
+    window.captcha = ${JSON.stringify(process.env.CAPTCHA)};
     window.oauthServices = ${JSON.stringify(ctx.state.oauthServices || [])};
     window.serverURL = '${ctx.serverURL}/api/';
     </script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b276fe6ef78..1ae5eeae2e2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -168,6 +168,9 @@ importers:
 
   packages/admin:
     devDependencies:
+      '@better-captcha/react':
+        specifier: ^0.5.6
+        version: 0.5.6(react@19.2.4)(typescript@5.9.3)
       '@rematch/core':
         specifier: 2.2.0
         version: 2.2.0(redux@5.0.1)
@@ -218,6 +221,9 @@ importers:
 
   packages/client:
     dependencies:
+      '@better-captcha/vue':
+        specifier: ^0.5.6
+        version: 0.5.6(typescript@5.9.3)(vue@3.5.29(typescript@5.9.3))
       '@vueuse/core':
         specifier: ^14.2.1
         version: 14.2.1(vue@3.5.29(typescript@5.9.3))
@@ -233,9 +239,6 @@ importers:
       marked-highlight:
         specifier: ^2.2.3
         version: 2.2.3(marked@17.0.4)
-      recaptcha-v3:
-        specifier: ^1.11.3
-        version: 1.11.3
       vue:
         specifier: ^3.5.29
         version: 3.5.29(typescript@5.9.3)
@@ -956,6 +959,23 @@ packages:
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@better-captcha/core@0.5.6':
+    resolution: {integrity: sha512-t+VDA+cDh3dy1d2WxrNS/7wD60R7ERV5UJM2CyHZNkizvrK4ymW93VXgQfHBpT4YgpSri6i/zN16vO0RKKqKgA==}
+    peerDependencies:
+      typescript: ^5.0.0
+
+  '@better-captcha/react@0.5.6':
+    resolution: {integrity: sha512-/NsTEx3y1LhYFLtgAOLkXEPKw88m5fFLp903rIoJZuKmZFtzrGr7i/T0ua0wK0flPPxe3dRNl8Fje3Sz9/HV7A==}
+    peerDependencies:
+      react: ^18 || ^19
+      typescript: ^5.0.0
+
+  '@better-captcha/vue@0.5.6':
+    resolution: {integrity: sha512-n1eIHLhs3DBHrepnUAK0Bq8BW/1gjYy2QjyTMVk0v7tyfkd1qYaELyjyP/gvamVZrmy2A1+th01bAr15lESkIQ==}
+    peerDependencies:
+      typescript: ^5.0.0
+      vue: ^3.3.0
+
   '@bufbuild/protobuf@2.11.0':
     resolution: {integrity: sha512-sBXGT13cpmPR5BMgHE6UEEfEaShh5Ror6rfN3yEK5si7QVrtZg8LEPQb0VVhiLRUslD2yLnXtnRzG035J/mZXQ==}
 
@@ -7338,9 +7358,6 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
-  recaptcha-v3@1.11.3:
-    resolution: {integrity: sha512-sEE6J0RzUkS+sKEBpgCD/AqCU0ffrAVOADGjvAx9vcttN+VLK42SWMkj/J/I6vHu3Kew+xcfbBqDVb65N0QGDw==}
-
   rechoir@0.7.1:
     resolution: {integrity: sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==}
     engines: {node: '>= 0.10'}
@@ -9944,6 +9961,22 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@better-captcha/core@0.5.6(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@better-captcha/react@0.5.6(react@19.2.4)(typescript@5.9.3)':
+    dependencies:
+      '@better-captcha/core': 0.5.6(typescript@5.9.3)
+      react: 19.2.4
+      typescript: 5.9.3
+
+  '@better-captcha/vue@0.5.6(typescript@5.9.3)(vue@3.5.29(typescript@5.9.3))':
+    dependencies:
+      '@better-captcha/core': 0.5.6(typescript@5.9.3)
+      typescript: 5.9.3
+      vue: 3.5.29(typescript@5.9.3)
+
   '@bufbuild/protobuf@2.11.0': {}
 
   '@bytecodealliance/preview2-shim@0.17.6': {}
@@ -16668,8 +16701,6 @@ snapshots:
 
   readdirp@5.0.0: {}
 
-  recaptcha-v3@1.11.3: {}
-
   rechoir@0.7.1:
     dependencies:
       resolve: 1.22.11