feat: add ReCaptchaV2 & Turnstile

.env

@@ -1,2 +1,4 @@
 VITE_R2_BASE_URL=https://pub-e115c4e749734702abd09206cba74257.r2.dev/
 VITE_HCAPTCHA_SITEKEY=a7340f48-b55e-4c56-8d96-2e70ce3423e0
+VITE_RECAPTCHA_SITEKEY=6LdTSxkrAAAAAOWt1LWFd9HYt8IRXyT0PaJXouC3
+VITE_TURNSTILE_SITEKEY=0x4AAAAAABL64iQLO7IcpeAL

functions/api/avatars/index.js

@@ -1,19 +1,10 @@
 import { verifyJWT } from '../../middleware/auth';
+import { captchaPlugins } from '../../middleware/captcha';
 import { createErrorResponse, createSuccessResponse } from '../../utils';
 import { fileTypeFromBuffer } from 'file-type';
-import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
 
 export const onRequestPut = [
-  async (context) => {
+  ...captchaPlugins,
-    return hCaptchaPlugin({
-      secret: context.env.hcaptcha_secret_key,
-      sitekey: context.env.hcaptcha_site_key,
-      onError: (context) => {
-        console.error("hCaptcha error:", context.error);
-        return createErrorResponse("hCaptcha verification failed", 403);
-      }
-    })(context);
-  },
   async (context) => {
     const { request, env } = context;
 

functions/api/login.js

@@ -1,18 +1,9 @@
 import { SignJWT } from 'jose';
 import { createSuccessResponse, createErrorResponse } from "../utils";
-import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
+import { captchaPlugins } from '../middleware/captcha';
 
 export const onRequestPost = [
-  async (context) => {
+  ...captchaPlugins,
-    return hCaptchaPlugin({
-      secret: context.env.hcaptcha_secret_key,
-      sitekey: context.env.hcaptcha_site_key,
-      onError: (context) => {
-        console.error("hCaptcha error:", context.error);
-        return createErrorResponse("hCaptcha verification failed", 403);
-      }
-    })(context);
-  },
   async (context) => {
     try {
       const { request, env } = context;

functions/api/messages.js

@@ -1,6 +1,6 @@
 import { verifyJWT } from '../middleware/auth';
+import { captchaPlugins } from '../middleware/captcha';
 import { createErrorResponse, createSuccessResponse } from '../utils';
-import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
 
 export async function onRequestGet(context) {
   try {
@@ -17,16 +17,7 @@ export async function onRequestGet(context) {
 }
 
 export const onRequestPost = [
-  async (context) => {
+  ...captchaPlugins,
-    return hCaptchaPlugin({
-      secret: context.env.hcaptcha_secret_key,
-      sitekey: context.env.hcaptcha_site_key,
-      onError: (context) => {
-        console.error("hCaptcha error:", context.error);
-        return createErrorResponse("hCaptcha verification failed", 403);
-      }
-    })(context);
-  },
   async (context) => {
     try {
       const { request, env } = context;

functions/api/motto.js

@@ -1,18 +1,9 @@
 import { verifyJWT } from '../middleware/auth';
 import { createErrorResponse, createSuccessResponse } from '../utils';
-import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
+import { captchaPlugins } from '../middleware/captcha';
 
 export const onRequestPost = [
-  async (context) => {
+  ...captchaPlugins,
-    return hCaptchaPlugin({
-      secret: context.env.hcaptcha_secret_key,
-      sitekey: context.env.hcaptcha_site_key,
-      onError: (context) => {
-        console.error("hCaptcha error:", context.error);
-        return createErrorResponse("hCaptcha verification failed", 403);
-      }
-    })(context);
-  },
   async (context) => {
     try {
       // Verify the JWT token

functions/api/register.js

@@ -1,17 +1,8 @@
+import { captchaPlugins } from '../middleware/captcha';
 import { createErrorResponse, createSuccessResponse } from '../utils';
-import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
 
 export const onRequestPost = [
-  async (context) => {
+  ...captchaPlugins,
-    return hCaptchaPlugin({
-      secret: context.env.hcaptcha_secret_key,
-      sitekey: context.env.hcaptcha_site_key,
-      onError: (context) => {
-        console.error("hCaptcha error:", context.error);
-        return createErrorResponse("hCaptcha verification failed", 403);
-      }
-    })(context);
-  },
   async (context) => {
     try {
       const { request, env } = context;

functions/middleware/captcha.js

@@ -0,0 +1,58 @@
+import { createErrorResponse } from '../utils';
+
+import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
+import turnstilePlugin from "@cloudflare/pages-plugin-turnstile";
+
+export const captchaPlugins = [
+  async (context) => {
+    try {
+      return hCaptchaPlugin({
+        secret: context.env.hcaptcha_secret_key,
+        sitekey: context.env.hcaptcha_site_key,
+        onError: (context) => {
+          console.error("hCaptcha error:", context.error);
+          return createErrorResponse("hCaptcha verification failed", 403);
+        }
+      })(context);
+    } catch (e) {
+      console.error("hCaptcha error:", e);
+      return createErrorResponse("hCaptcha verification failed", 400);
+    }
+  },
+  async (context) => {
+    try {
+      const recaptchaResponse = (await context.request.clone().formData()).get("g-recaptcha-response").toString();
+      const formData = new FormData();
+      formData.append("secret", context.env.recaptcha_secret_key);
+      formData.append("response", recaptchaResponse);
+
+      const response = await fetch("https://www.google.com/recaptcha/api/siteverify", {
+        method: "POST",
+        body: formData
+      });
+      const data = await response.json();
+      if (!data.success) {
+        console.error("reCAPTCHA error:", data);
+        return createErrorResponse("reCAPTCHA verification failed", 403);
+      }
+    } catch (e) {
+      console.error("reCAPTCHA error:", e);
+      return createErrorResponse("reCAPTCHA verification failed", 400);
+    }
+    return context.next();
+  },
+  async (context) => {
+    try {
+      return turnstilePlugin({
+        secret: context.env.turnstile_secret_key,
+        onError: (context) => {
+          console.error("Turnstile error:", context.error);
+          return createErrorResponse("Turnstile verification failed", 403);
+        }
+      })(context)
+    } catch (e) {
+      console.error("Turnstile error:", e);
+      return createErrorResponse("Turnstile verification failed", 400);
+    }
+  }
+]

index.html

@@ -2,7 +2,7 @@
 <html lang="zh-tw">
   <head>
     <meta charset="UTF-8" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com/ajax/libs/tocas/ https://hcaptcha.com https://*.hcaptcha.com; style-src 'self' https://cdnjs.cloudflare.com/ajax/libs/tocas/ https://hcaptcha.com https://*.hcaptcha.com 'unsafe-inline'; img-src 'self' blob: https://pub-e115c4e749734702abd09206cba74257.r2.dev/; font-src https://cdnjs.cloudflare.com/ajax/libs/tocas/; frame-src https://hcaptcha.com https://*.hcaptcha.com; connect-src 'self' https://hcaptcha.com https://*.hcaptcha.com;">
+    <meta http-equiv="Content-Security-Policy" content="">
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Practicum of Attacking and Defense of Network Security</title>

package-lock.json

@@ -9,12 +9,15 @@
       "version": "0.0.0",
       "dependencies": {
         "@cloudflare/pages-plugin-hcaptcha": "^1.0.4",
+        "@cloudflare/pages-plugin-turnstile": "^1.0.2",
         "@hcaptcha/vue3-hcaptcha": "^1.3.0",
         "file-type": "^20.4.1",
         "jose": "^6.0.10",
         "pinia": "^3.0.2",
         "vue": "^3.5.13",
-        "vue-router": "^4.5.0"
+        "vue-router": "^4.5.0",
+        "vue-turnstile": "^1.0.11",
+        "vue3-recaptcha-v2": "^2.1.0"
       },
       "devDependencies": {
         "@cloudflare/workers-types": "^4.20250327.0",
@@ -75,6 +78,12 @@
       "integrity": "sha512-LZ1kWAhj3/wdAAnJs/fUG8akC+FKizLu2AdhVzr4aExncXA2wjXvphktG40pvEMIoMXH5LBqP9H7YNguR14Y7Q==",
       "license": "MIT"
     },
+    "node_modules/@cloudflare/pages-plugin-turnstile": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@cloudflare/pages-plugin-turnstile/-/pages-plugin-turnstile-1.0.2.tgz",
+      "integrity": "sha512-vKPqN/guV1sk/t8TUIZEGlrlld3iwmfdbuWex8jbhUmv/9ozf2HmBjVBYgnr5q7UPjQsWB7hwqZsx8z3k+BkyQ==",
+      "license": "MIT"
+    },
     "node_modules/@cloudflare/workers-types": {
       "version": "4.20250412.0",
       "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20250412.0.tgz",
@@ -1917,6 +1926,24 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vue-turnstile": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/vue-turnstile/-/vue-turnstile-1.0.11.tgz",
+      "integrity": "sha512-iaTBoZ5oUqtNRto6bmbn6FQvW0h/sK7mPUJc1Qn4em+cELXN59U2FQTcpWfKssV3OY6lEZzmCpcn/zrb7htK3A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.45"
+      }
+    },
+    "node_modules/vue3-recaptcha-v2": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue3-recaptcha-v2/-/vue3-recaptcha-v2-2.1.0.tgz",
+      "integrity": "sha512-dy1qieyWkRHR0yfuHaiI4aPKAsDJ/9Gwl58bl7gU9UtDMOfFAAmimMbyuYTRdxNU90dapJ5LLf2u+2h+gfOiSg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3"
+      }
     }
   }
 }

package.json

@@ -10,16 +10,21 @@
     "preview": "vite preview",
     "pages:dev": "wrangler pages dev --proxy 5173",
     "pages:deploy": "wrangler pages deploy dist",
-    "deploy": "npm run build && npm run pages:deploy"
+    "deploy": "npm run build && npm run pages:deploy",
+    "migrate": "wrangler d1 execute --file schema.sql --local awd-db",
+    "d1:migrate": "wrangler d1 execute --file schema.sql --local awd-db"
   },
   "dependencies": {
     "@cloudflare/pages-plugin-hcaptcha": "^1.0.4",
+    "@cloudflare/pages-plugin-turnstile": "^1.0.2",
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "file-type": "^20.4.1",
     "jose": "^6.0.10",
     "pinia": "^3.0.2",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vue-turnstile": "^1.0.11",
+    "vue3-recaptcha-v2": "^2.1.0"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20250327.0",

src/components/Board/BoardForm.vue

@@ -1,36 +1,32 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['new-message']);
 const props = defineProps(['locked']);
 
 const text = ref('');
-const hcaptchaResponse = ref('');
+const captchaResponse = ref(null);
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 const maxLength = 200;
 
-const hcaptchaRef = ref(null);
-
-const handleHcaptchaVerify = (token) => {
-  hcaptchaResponse.value = token;
-};
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
-};
-
 const remainingCharacters = computed(() => {
   return maxLength - text.value.length;
 });
 
+const handleCaptchaVerified = (response) => {
+  captchaResponse.value = response;
+};
+
 function submit() {
-  if (!text.value || props.locked || !hcaptchaResponse.value) {
+  if (!text.value || props.locked || !captchaVerified) {
     return;
   }
 
-  emit('new-message', { text: text.value, hcaptchaResponse: hcaptchaResponse.value });
+  emit('new-message', { text: text.value, captchaResponse: captchaResponse.value });
   text.value = '';
-  hcaptchaRef.value.reset();
 }
 </script>
 
@@ -52,15 +48,14 @@ function submit() {
           </div>
         </div>
       </div>
-      <VueHcaptcha
+      <CAPTCHA
-        ref="hcaptchaRef"
+        :hcaptchaSitekey="$hcaptchaSitekey"
-        :sitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
-        @verify="handleHcaptchaVerify"
+        :turnstileSitekey="$turnstileSitekey"
-        @expired="handleHcaptchaExpired"
+        @captchaVerified="handleCaptchaVerified"
-        @reset="handleHcaptchaExpired"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
-        <button class="ts-button" type="submit" :class="{'is-disabled': text === '' || props.locked || !hcaptchaResponse.value }">送出</button>
+        <button class="ts-button" type="submit" :class="{'is-disabled': text === '' || props.locked || !captchaVerified }">送出</button>
       </div>
     </fieldset>
   </form>

src/components/CAPTCHA.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { defineEmits, defineExpose, defineProps, watch, ref, onMounted } from 'vue';
+
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import { RecaptchaV2, useRecaptcha } from "vue3-recaptcha-v2";
+import VueTurnstile from 'vue-turnstile';
+
+const { handleReset: handleRecaptchaReset } = useRecaptcha();
+
+const props = defineProps({
+  isVertical: {
+    type: Boolean,
+    default: false,
+  },
+  hcaptchaSitekey: {
+    type: String,
+    required: true,
+  },
+  recaptchaSitekey: {
+    type: String,
+    required: true,
+  },
+  turnstileSitekey: {
+    type: String,
+    required: true,
+  },
+});
+const emit = defineEmits(['captchaVerified']);
+
+const hcaptchaResponse = ref('');
+const recaptchaResponse = ref('');
+const turnstileToken = ref('');
+
+const hcaptchaRef = ref(null);
+const recaptchaWidgetId = ref('');
+const turnstileRef = ref(null);
+
+const handleHcaptchaVerify = (token) => {
+  hcaptchaResponse.value = token;
+};
+
+const handleHcaptchaExpired = () => {
+  hcaptchaResponse.value = '';
+};
+
+const handleRecaptchaLoad = (response) => {
+  recaptchaResponse.value = response;
+}
+
+const handleRecaptchaExpired = () => {
+  recaptchaResponse.value = '';
+};
+
+const handleWidgetId = (widgetId) => {
+  recaptchaWidgetId.value = widgetId;
+};
+
+watch(
+  () => [hcaptchaResponse.value, recaptchaResponse.value, turnstileToken.value],
+  ([hcaptcha, recaptcha, turnstile]) => {
+    if (hcaptcha && recaptcha && turnstile) {
+      // All tokens are available
+      emit('captchaVerified', {
+        hCaptchaResponse: hcaptcha,
+        recaptchaResponse: recaptcha,
+        turnstileResponse: turnstile
+      });
+    }
+  }
+);
+
+const reset = () => {
+  hcaptchaRef.value?.reset();
+  if (recaptchaWidgetId.value) handleRecaptchaReset(recaptchaWidgetId.value);
+  turnstileRef.value?.reset();
+};
+
+defineExpose({
+  reset,
+});
+
+onMounted(() => {
+  console.log(props);
+});
+</script>
+
+<template>
+  <div class="ts-content is-horizontally-fitted">
+    <div class="ts-wrap is-center-aligned is-middle-aligned" :class="{ 'is-vertical': props.isVertical }">
+      <VueHcaptcha
+        ref="hcaptchaRef"
+        :sitekey="props.hcaptchaSitekey"
+        @verify="handleHcaptchaVerify"
+        @expired="handleHcaptchaExpired"
+        @reset="handleHcaptchaExpired"
+        :reCaptchaCompat="false"
+        :theme="$darkMode ? 'dark' : 'light'"
+      />
+      <RecaptchaV2
+        :sitekey="props.recaptchaSitekey"
+        @widgetId="handleWidgetId"
+        @expired-callback="handleRecaptchaExpired"
+        @load-callback="handleRecaptchaLoad"
+        :theme="$darkMode ? 'dark' : 'light'"
+      />
+      <VueTurnstile :site-key="props.turnstileSitekey" ref="turnstileRef" v-model="turnstileToken" />
+    </div>
+  </div>
+</template>

src/components/Login/LoginForm.vue

@@ -1,26 +1,20 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['login-submit']);
 
 const username = ref('');
 const password = ref('');
-const hcaptchaResponse = ref('');
+const captchaResponse = ref(null);
 
-const hcaptchaRef = ref(null);
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 
 const usernameError = ref('');
 const passwordError = ref('');
 
-const handleHcaptchaVerify = (token) => {
-  hcaptchaResponse.value = token;
-};
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
-};
-
 function validateUsername() {
   if (!username.value) {
     usernameError.value = '使用者名稱為必填。';
@@ -55,16 +49,19 @@ watch(
   }
 );
 
+const handleCaptchaVerified = (response) => {
+  captchaResponse.value = response;
+};
+
 const submit = () => {
   validateUsername();
   validatePassword();
 
-  if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
+  if (usernameError.value || passwordError.value || !captchaVerified) {
     return;
   }
 
-  emit('login-submit', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
+  emit('login-submit', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
-  hcaptchaRef.value.reset();
 }
 </script>
 
@@ -92,16 +89,15 @@ const submit = () => {
           </div>
         </div>
       </div>
-      <VueHcaptcha
+      <CAPTCHA
-        ref="hcaptchaRef"
+        :hcaptchaSitekey="$hcaptchaSitekey"
-        :sitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
-        @verify="handleHcaptchaVerify"
+        :turnstileSitekey="$turnstileSitekey"
-        @expired="handleHcaptchaExpired"
+        @captchaVerified="handleCaptchaVerified"
-        @reset="handleHcaptchaExpired"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
         <button class="ts-button is-fluid" type="submit" :class="{
-          'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== '' || !hcaptchaResponse
+          'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== '' || !captchaVerified
         }">登入</button>
       </div>
     </div>

src/components/Profile/ProfileForm.vue

@@ -2,7 +2,7 @@
 import { ref, computed, defineProps } from 'vue';
 import { useRouter } from 'vue-router';
 import { uploadAvatar } from '../../lib/api';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import CAPTCHA from '../CAPTCHA.vue';
 import { useAuthStore } from '../../stores/auth';
 
 const props = defineProps({
@@ -15,22 +15,20 @@ const props = defineProps({
 const authStore = useAuthStore();
 const router = useRouter();
 
-const hcaptchaRef = ref(null);
-
 const avatarFile = ref(null);
 const avatarError = ref('');
-const hcaptchaResponse = ref('');
+const captchaResponse = ref(null);
 
 const onFileChange = (event) => {
   avatarFile.value = event.target.files[0];
 };
 
-const handleHcaptchaVerify = (token) => {
+const captchaVerified = computed(() => {
-  hcaptchaResponse.value = token;
+  return captchaResponse.value !== null;
-};
+});
 
-const handleHcaptchaExpired = () => {
+const handleCaptchaVerified = (response) => {
-  hcaptchaResponse.value = '';
+  captchaResponse.value = response;
 };
 
 const onSubmit = async () => {
@@ -41,7 +39,7 @@ const onSubmit = async () => {
     return;
   }
 
-  if (!hcaptchaResponse.value) {
+  if (!captchaVerified) {
     avatarError.value = '請完成驗證。';
     return;
   }
@@ -57,9 +55,8 @@ const onSubmit = async () => {
   }
 
   try {
-    await uploadAvatar(avatarFile.value, authStore.jwt, hcaptchaResponse.value);
+    await uploadAvatar(avatarFile.value, authStore.jwt, captchaResponse.value);
     alert('Avatar uploaded successfully!');
-    hcaptchaRef.value.reset();
     // After successful upload, reload this page
     router.go(0);
   } catch (error) {
@@ -103,15 +100,14 @@ const avatarUrl = computed(() => {
           </div>
         </div>
       </div>
-      <VueHcaptcha
+      <CAPTCHA
-        ref="hcaptchaRef"
+        :hcaptchaSitekey="$hcaptchaSitekey"
-        :sitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
-        @verify="handleHcaptchaVerify"
+        :turnstileSitekey="$turnstileSitekey"
-        @expired="handleHcaptchaExpired"
+        @captchaVerified="handleCaptchaVerified"
-        @reset="handleHcaptchaExpired"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
-        <button class="ts-button" :disabled="!(avatarFile && avatarError === '' && hcaptchaResponse)" type="submit">更新</button>
+        <button class="ts-button" :disabled="!(avatarFile && avatarError === '' && captchaVerified)" type="submit">更新</button>
       </div>
     </fieldset>
   </form>

src/components/Register/RegisterForm.vue

@@ -1,25 +1,19 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+import CAPTCHA from '../CAPTCHA.vue';
 
 const emit = defineEmits(['new-user']);
 
 const username = ref('');
 const password = ref('');
-const hcaptchaResponse = ref('');
+const captchaResponse = ref(null);
-
-const hcaptchaRef = ref(null);
 
 const usernameError = ref('');
 const passwordError = ref('');
 
-const handleHcaptchaVerify = (token) => {
+const captchaVerified = computed(() => {
-  hcaptchaResponse.value = token;
+  return captchaResponse.value !== null;
-};
+});
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
-};
 
 function validateUsername() {
   if (!username.value) {
@@ -55,17 +49,20 @@ watch(
   }
 );
 
+const handleCaptchaVerified = (response) => {
+  captchaResponse.value = response;
+};
+
 const submit = () => {
   validateUsername();
   validatePassword();
 
-  if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
+  if (usernameError.value || passwordError.value || !captchaVerified) {
     return;
   }
 
-  emit('new-user', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
+  emit('new-user', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
-  hcaptchaRef.value.reset();
+};
-}
 </script>
 
 <template>
@@ -94,15 +91,14 @@ const submit = () => {
           </div>
         </div>
       </div>
-      <VueHcaptcha
+      <CAPTCHA
-        ref="hcaptchaRef"
+        :hcaptchaSitekey="$hcaptchaSitekey"
-        :sitekey="$hcaptchaSitekey"
+        :recaptchaSitekey="$recaptchaSitekey"
-        @verify="handleHcaptchaVerify"
+        :turnstileSitekey="$turnstileSitekey"
-        @expired="handleHcaptchaExpired"
+        @captchaVerified="handleCaptchaVerified"
-        @reset="handleHcaptchaExpired"
       />
       <div class="ts-wrap has-top-spaced is-end-aligned">
-        <button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' || !hcaptchaResponse }">送出</button>
+        <button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' || !captchaVerified }">送出</button>
       </div>
     </div>
   </form>

src/lib/api.js

@@ -2,7 +2,7 @@ import { unauthRedirectToLogin } from '../router';
 
 const API_BASE_URL = '/api';
 
-export async function register(username, password, hCaptchaResponse) {
+export async function register(username, password, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { username, password };
 
@@ -10,6 +10,12 @@ export async function register(username, password, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/register", {
     method: 'POST',
@@ -24,7 +30,7 @@ export async function register(username, password, hCaptchaResponse) {
   return response.json();
 }
 
-export async function login(username, password, hCaptchaResponse) {
+export async function login(username, password, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { username, password };
 
@@ -32,6 +38,12 @@ export async function login(username, password, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/login", {
     method: 'POST',
@@ -46,7 +58,7 @@ export async function login(username, password, hCaptchaResponse) {
   return response.json();
 }
 
-export async function postMessage(message, jwt, hCaptchaResponse) {
+export async function postMessage(message, jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   const payload = { message };
 
@@ -54,6 +66,12 @@ export async function postMessage(message, jwt, hCaptchaResponse) {
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/messages", {
     method: 'POST',
@@ -138,13 +156,18 @@ export async function getProfile(jwt) {
   return response.json();
 }
 
-export async function uploadAvatar(avatar, jwt, hCaptchaResponse) {
+export async function uploadAvatar(avatar, jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   formData.append('avatar', avatar);
-
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   const response = await fetch(API_BASE_URL + "/avatars", {
     method: 'PUT',
@@ -167,11 +190,17 @@ export async function uploadAvatar(avatar, jwt, hCaptchaResponse) {
   return data;
 }
 
-export async function generateMotto(jwt, hCaptchaResponse) {
+export async function generateMotto(jwt, { hCaptchaResponse, recaptchaResponse, turnstileResponse }) {
   const formData = new FormData();
   if (hCaptchaResponse) {
     formData.append('h-captcha-response', hCaptchaResponse);
   }
+  if (recaptchaResponse) {
+    formData.append('g-recaptcha-response', recaptchaResponse);
+  }
+  if (turnstileResponse) {
+    formData.append('cf-turnstile-response', turnstileResponse);
+  }
 
   try {
     const response = await fetch('/api/motto', {

src/lib/darkMode.js

@@ -0,0 +1,16 @@
+import { reactive } from 'vue';
+
+const darkModeMediaQuery = '(prefers-color-scheme: dark)';
+const matchMedia = window.matchMedia(darkModeMediaQuery);
+
+const darkMode = reactive({
+  value: matchMedia.matches,
+});
+
+matchMedia.addEventListener('change', (event) => {
+  darkMode.value = event.matches;
+});
+
+export const install = (app) => {
+ app.config.globalProperties.$darkMode = darkMode;
+}

src/main.js

@@ -3,13 +3,21 @@ import './style.css';
 import App from './App.vue';
 import router from './router';
 import { createPinia } from 'pinia';
+import { install as installRecaptcha } from "vue3-recaptcha-v2";
+import { install as installDarkMode } from './lib/darkMode';
 
 const pinia = createPinia();
 const app = createApp(App);
 
 app.use(pinia);
 app.use(router);
+app.use(installDarkMode);
+app.use(installRecaptcha, {
+  sitekey: import.meta.env.VITE_RECAPTCHA_SITEKEY
+});
 
 app.config.globalProperties.$hcaptchaSitekey = import.meta.env.VITE_HCAPTCHA_SITEKEY;
+app.config.globalProperties.$recaptchaSitekey = import.meta.env.VITE_RECAPTCHA_SITEKEY;
+app.config.globalProperties.$turnstileSitekey = import.meta.env.VITE_TURNSTILE_SITEKEY;
 
 app.mount('#app');

src/style.css

@@ -11,5 +11,4 @@ html, body, #app {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1em 0;
 }

src/views/DailyMottoView.vue

@@ -1,32 +1,32 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import { generateMotto as generateMottoApi } from '../lib/api';
 import { useAuthStore } from '../stores/auth';
-import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
+
+import CAPTCHA from '../components/CAPTCHA.vue';
 
 const motto = ref('');
 const mottoLoading = ref(false);
-const hcaptchaResponse = ref('');
 
 const authStore = useAuthStore();
 
-const hcaptchaRef = ref(null);
+const captcha = ref(null);
+const captchaResponse = ref(null);
+const captchaVerified = computed(() => {
+  return captchaResponse.value !== null;
+});
 
-const handleHcaptchaVerify = (token) => {
+const handleCaptchaVerified = (captchaData) => {
-  hcaptchaResponse.value = token;
+  captchaResponse.value = captchaData;
-};
-
-const handleHcaptchaExpired = () => {
-  hcaptchaResponse.value = '';
 };
 
 const generateMotto = async () => {
   mottoLoading.value = true;
 
   try {
-    const generatedMotto = await generateMottoApi(authStore.jwt, hcaptchaResponse.value);
+    const generatedMotto = await generateMottoApi(authStore.jwt, captchaResponse.value);
     motto.value = generatedMotto;
-    hcaptchaRef.value.reset();
+    captcha.value.reset();
   } catch (error) {
     console.error(error);
     alert('Failed to generate motto.');
@@ -42,14 +42,15 @@ const generateMotto = async () => {
       <div class="ts-box ts-content is-center-aligned">
         <div class="ts-header is-large is-center-aligned">每日金句生成器</div>
         <div class="ts-header is-secondary is-center-aligned">Powered By Cloudflare Workers AI</div>
-        <VueHcaptcha
+        <CAPTCHA
-          ref="hcaptchaRef"
+          ref="captcha"
-          :sitekey="$hcaptchaSitekey"
+          @captchaVerified="handleCaptchaVerified"
-          @verify="handleHcaptchaVerify"
+          :hcaptchaSitekey="$hcaptchaSitekey"
-          @expired="handleHcaptchaExpired"
+          :recaptchaSitekey="$recaptchaSitekey"
-          @reset="handleHcaptchaExpired"
+          :turnstileSitekey="$turnstileSitekey"
+          :isVertical="true"
         />
-        <button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
+        <button class="ts-button" @click="generateMotto" :disabled="!captchaVerified">生成</button>
       </div>
       <div class="ts-content is-center-aligned">
         <p class="ts-text">每日金句:</p>

src/views/LoginView.vue

@@ -7,9 +7,9 @@ import { login } from '../lib/api';
 const router = useRouter();
 const authStore = useAuthStore();
 
-const onSubmit = async ({ username, password, hcaptchaResponse }) => {
+const onSubmit = async ({ username, password, captchaResponse }) => {
   try {
-    const response = await login(username, password, hcaptchaResponse);
+    const response = await login(username, password, captchaResponse);
     const { jwt } = response;
     authStore.setJwt(jwt);
     alert('Login successful!');

src/views/RegisterView.vue

@@ -5,9 +5,9 @@ import { register } from '../lib/api';
 
 const router = useRouter();
 
-const handleNewUser = async ({ username, password, hcaptchaResponse }) => {
+const handleNewUser = async ({ username, password, captchaResponse }) => {
   try {
-    const response = await register(username, password, hcaptchaResponse);
+    const response = await register(username, password, captchaResponse);
 
     alert(response.message || 'Registration successful! Please log in.');
     // Redirect to login page

wrangler.toml

@@ -5,6 +5,10 @@ compatibility_date = "2025-04-12"
 [vars]
 hcaptcha_site_key = "a7340f48-b55e-4c56-8d96-2e70ce3423e0"
 hcaptcha_secret_key = "ES_8b04993dc0004f59864d11bb1dc6a3bc"
+turnstile_site_key = "0x4AAAAAABL64iQLO7IcpeAL"
+turnstile_secret_key = "0x4AAAAAABL64iEN4VrGqNbSF9AvtUiDgr0"
+recaptcha_site_key = "6LdTSxkrAAAAAOWt1LWFd9HYt8IRXyT0PaJXouC3"
+recaptcha_secret_key = "6LdTSxkrAAAAAJSaQNfWeediIrFTITejA9cRqiCR"
 JWT_SECRET = "7KH0adxP9mYrUYrEs0p_ccecRiaQf9IuxalS5r10QVI"
 
 [[d1_databases]]