t510599/ntu-awd-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add ReCaptchaV2 & Turnstile

Browse Source
This commit is contained in:
Tony Yang
2025-04-16 16:35:24 +08:00
parent 9ac3339557
commit 037ccb5781
23 changed files with 372 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2
View File
@@ -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
+2 -11
View File
@@ -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) => {
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);
},
...captchaPlugins,
async (context) => {
const { request, env } = context;
functions/api/login.js
+2 -11
View File
@@ -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) => {
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);
},
...captchaPlugins,
async (context) => {
try {
const { request, env } = context;
functions/api/messages.js
+2 -11
View File
@@ -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) => {
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);
},
...captchaPlugins,
async (context) => {
try {
const { request, env } = context;
functions/api/motto.js
+2 -11
View File
@@ -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) => {
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);
},
...captchaPlugins,
async (context) => {
try {
// Verify the JWT token
functions/api/register.js
+2 -11
View File
@@ -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) => {
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);
},
...captchaPlugins,
async (context) => {
try {
const { request, env } = context;
functions/middleware/captcha.js
+58
View File
@@ -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
+1 -1
View File
@@ -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
Generated
+28 -1
View File
@@ -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
+7 -2
View File
@@ -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
+18 -23
View File
@@ -1,36 +1,32 @@
<script setup>
import { ref, computed } from 'vue';
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
import { ref, computed, watch } from 'vue';
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
ref="hcaptchaRef"
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
@reset="handleHcaptchaExpired"
<CAPTCHA
:hcaptchaSitekey="$hcaptchaSitekey"
:recaptchaSitekey="$recaptchaSitekey"
:turnstileSitekey="$turnstileSitekey"
@captchaVerified="handleCaptchaVerified"
/>
<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
+109
View File
@@ -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
+18 -22
View File
@@ -1,26 +1,20 @@
<script setup>
import { ref, watch } from 'vue';
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
import { ref, watch, computed } from 'vue';
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 });
hcaptchaRef.value.reset();
emit('login-submit', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
}
</script>
@@ -92,16 +89,15 @@ const submit = () => {
</div>
</div>
</div>
<VueHcaptcha
ref="hcaptchaRef"
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
@reset="handleHcaptchaExpired"
<CAPTCHA
:hcaptchaSitekey="$hcaptchaSitekey"
:recaptchaSitekey="$recaptchaSitekey"
:turnstileSitekey="$turnstileSitekey"
@captchaVerified="handleCaptchaVerified"
/>
<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
+15 -19
View File
@@ -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) => {
hcaptchaResponse.value = token;
};
const captchaVerified = computed(() => {
return captchaResponse.value !== null;
});
const handleHcaptchaExpired = () => {
hcaptchaResponse.value = '';
const handleCaptchaVerified = (response) => {
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
ref="hcaptchaRef"
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
@reset="handleHcaptchaExpired"
<CAPTCHA
:hcaptchaSitekey="$hcaptchaSitekey"
:recaptchaSitekey="$recaptchaSitekey"
:turnstileSitekey="$turnstileSitekey"
@captchaVerified="handleCaptchaVerified"
/>
<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
+19 -23
View File
@@ -1,25 +1,19 @@
<script setup>
import { ref, watch, onMounted } from 'vue';
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
import { ref, watch, onMounted, computed } from 'vue';
import CAPTCHA from '../CAPTCHA.vue';
const emit = defineEmits(['new-user']);
const username = ref('');
const password = ref('');
const hcaptchaResponse = ref('');
const hcaptchaRef = ref(null);
const captchaResponse = ref(null);
const usernameError = ref('');
const passwordError = ref('');
const handleHcaptchaVerify = (token) => {
hcaptchaResponse.value = token;
};
const handleHcaptchaExpired = () => {
hcaptchaResponse.value = '';
};
const captchaVerified = computed(() => {
return captchaResponse.value !== null;
});
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 });
hcaptchaRef.value.reset();
}
emit('new-user', { username: username.value, password: password.value, captchaResponse: captchaResponse.value });
};
</script>
<template>
@@ -94,15 +91,14 @@ const submit = () => {
</div>
</div>
</div>
<VueHcaptcha
ref="hcaptchaRef"
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
@reset="handleHcaptchaExpired"
<CAPTCHA
:hcaptchaSitekey="$hcaptchaSitekey"
:recaptchaSitekey="$recaptchaSitekey"
:turnstileSitekey="$turnstileSitekey"
@captchaVerified="handleCaptchaVerified"
/>
<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
+35 -6
View File
@@ -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
+16
View File
@@ -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
+8
View File
@@ -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
-1
View File
@@ -11,5 +11,4 @@ html, body, #app {
display: flex;
align-items: center;
justify-content: center;
padding: 1em 0;
}
src/views/DailyMottoView.vue
+20 -19
View File
@@ -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) => {
hcaptchaResponse.value = token;
};
const handleHcaptchaExpired = () => {
hcaptchaResponse.value = '';
const handleCaptchaVerified = (captchaData) => {
captchaResponse.value = captchaData;
};
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
ref="hcaptchaRef"
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
@reset="handleHcaptchaExpired"
<CAPTCHA
ref="captcha"
@captchaVerified="handleCaptchaVerified"
:hcaptchaSitekey="$hcaptchaSitekey"
:recaptchaSitekey="$recaptchaSitekey"
: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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+4
View File
@@ -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]]