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

feat: hcaptcha

Browse Source
This commit is contained in:
Tony Yang
2025-04-15 14:46:16 +08:00
parent b8ae97e49b
commit 1b60b3517d
20 changed files with 430 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -1
View File
@@ -1 +1,2 @@
VITE_R2_BASE_URL=https://pub-e115c4e749734702abd09206cba74257.r2.dev/
VITE_R2_BASE_URL=https://pub-e115c4e749734702abd09206cba74257.r2.dev/
VITE_HCAPTCHA_SITEKEY=a7340f48-b55e-4c56-8d96-2e70ce3423e0
functions/api/avatars/index.js
+56 -43
View File
@@ -1,50 +1,63 @@
import { verifyJWT } from '../../middleware/auth';
import { createErrorResponse, createSuccessResponse } from '../../utils';
import { fileTypeFromBuffer } from 'file-type';
import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
export async function onRequestPut(context) {
try {
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);
},
async (context) => {
const { request, env } = context;
// Verify the JWT token
const authResult = await verifyJWT(context);
if (authResult) {
return authResult; // Return the error response from the middleware
try {
// Verify the JWT token
const authResult = await verifyJWT(context);
if (authResult) {
return authResult; // Return the error response from the middleware
}
const formData = await request.formData();
const avatar = formData.get('avatar');
if (!avatar) {
return createErrorResponse("Missing avatar", 400);
}
if (avatar.size > 1 * 1024 * 1024) {
// Entity too large
return createErrorResponse("Avatar must be less than 1MB", 413);
}
const buffer = await avatar.arrayBuffer();
const fileTypeResult = await fileTypeFromBuffer(buffer);
if (!fileTypeResult) {
return createErrorResponse("Unsupported file type", 400);
}
if (fileTypeResult.mime !== 'image/jpeg' && fileTypeResult.mime !== 'image/png') {
return createErrorResponse("Avatar must be a JPG or PNG image", 400);
}
// Upload the avatar to R2
const objectName = `avatars/${context.user.userId}`;
await env.MY_BUCKET.put(objectName, buffer);
// Store the filename in D1
await env.DB.prepare("UPDATE users SET avatar = ? WHERE id = ?").bind(objectName, context.user.userId).run();
return createSuccessResponse({ message: "Avatar uploaded successfully" });
} catch (error) {
console.error("Avatar upload error:", error);
return createErrorResponse("Avatar upload failed", 500);
}
const formData = await request.formData();
const avatar = formData.get('avatar');
if (!avatar) {
return createErrorResponse("Missing avatar", 400);
}
if (avatar.size > 1 * 1024 * 1024) {
// Entity too large
return createErrorResponse("Avatar must be less than 1MB", 413);
}
const buffer = await avatar.arrayBuffer();
const fileTypeResult = await fileTypeFromBuffer(buffer);
if (!fileTypeResult) {
return createErrorResponse("Unsupported file type", 400);
}
if (fileTypeResult.mime !== 'image/jpeg' && fileTypeResult.mime !== 'image/png') {
return createErrorResponse("Avatar must be a JPG or PNG image", 400);
}
// Upload the avatar to R2
const objectName = `avatars/${context.user.userId}`;
await env.MY_BUCKET.put(objectName, buffer);
// Store the filename in D1
await env.DB.prepare("UPDATE users SET avatar = ? WHERE id = ?").bind(objectName, context.user.userId).run();
return createSuccessResponse({ message: "Avatar uploaded successfully" });
} catch (error) {
console.error("Avatar upload error:", error);
return createErrorResponse("Avatar upload failed", 500);
}
}
},
];
functions/api/login.js
+61 -39
View File
@@ -1,58 +1,80 @@
import { SignJWT } from 'jose';
import { createSuccessResponse, createErrorResponse } from "../utils";
import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
export async function onRequestPost(context) {
try {
const { request, env } = 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);
},
async (context) => {
try {
const { request, env } = context;
let payload;
const { username, password } = await request.json();
try {
const formData = await request.formData();
payload = JSON.parse(formData.get('payload'));
} catch (e) {
console.error("Payload parsing error:", e);
return createErrorResponse("Invalid payload", 400);
}
if (!username || !password) {
return createErrorResponse("Missing username or password", 400);
}
const { username, password } = payload;
if (username.length < 3) {
return createErrorResponse("Username must be at least 3 characters", 400);
}
if (!username || !password) {
return createErrorResponse("Missing username or password", 400);
}
if (password.length < 8) {
return createErrorResponse("Password must be at least 8 characters", 400);
}
if (username.length < 3) {
return createErrorResponse("Username must be at least 3 characters", 400);
}
if (!/^[a-zA-Z0-9]+$/.test(username)) {
return createErrorResponse("Username must be alphanumeric", 400);
}
if (password.length < 8) {
return createErrorResponse("Password must be at least 8 characters", 400);
}
// Get the stored password from D1
const { results } = await env.DB.prepare("SELECT password FROM users WHERE username = ?").bind(username).all();
if (!/^[a-zA-Z0-9]+$/.test(username)) {
return createErrorResponse("Username must be alphanumeric", 400);
}
if (!results || results.length === 0) {
return new Response(JSON.stringify({"error": "Invalid username or password"}), { status: 403, headers: { 'Content-Type': 'application/json' } });
}
// Get the stored password from D1
const { results } = await env.DB.prepare("SELECT password FROM users WHERE username = ?").bind(username).all();
const storedPassword = results[0].password;
if (!results || results.length === 0) {
return new Response(JSON.stringify({"error": "Invalid username or password"}), { status: 403, headers: { 'Content-Type': 'application/json' } });
}
// Compare the password to the stored password
if (password !== storedPassword) {
return new Response(JSON.stringify({"error": "Invalid username or password"}), { status: 403, headers: { 'Content-Type': 'application/json' } });
}
const storedPassword = results[0].password;
// Get the user ID
const { results: userResults } = await env.DB.prepare("SELECT * FROM users WHERE username = ?").bind(username).all();
const jwtPayload = (({ id, username }) => ({ id, username }))(userResults[0]);
// Compare the password to the stored password
if (password !== storedPassword) {
return new Response(JSON.stringify({"error": "Invalid username or password"}), { status: 403, headers: { 'Content-Type': 'application/json' } });
}
// Generate a JWT token
const jwt = await new SignJWT(jwtPayload)
.setProtectedHeader({ alg: 'HS256' })
.setIssuedAt()
.setIssuer('urn:example:issuer')
.setAudience('urn:example:audience')
.setExpirationTime('2h')
.sign(new TextEncoder().encode(env.JWT_SECRET));
// Get the user ID
const { results: userResults } = await env.DB.prepare("SELECT * FROM users WHERE username = ?").bind(username).all();
const jwtPayload = (({ id, username }) => ({ id, username }))(userResults[0]);
return createSuccessResponse({ jwt });
// Generate a JWT token
const jwt = await new SignJWT(jwtPayload)
.setProtectedHeader({ alg: 'HS256' })
.setIssuedAt()
.setIssuer('urn:example:issuer')
.setAudience('urn:example:audience')
.setExpirationTime('2h')
.sign(new TextEncoder().encode(env.JWT_SECRET));
return createSuccessResponse({ jwt });
} catch (error) {
console.error("Login error:", error);
return createErrorResponse("Login failed", 500);
}
}
},
];
functions/api/messages.js
+41 -25
View File
@@ -1,5 +1,6 @@
import { verifyJWT } from '../middleware/auth';
import { createErrorResponse, createSuccessResponse } from '../utils';
import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
export async function onRequestGet(context) {
try {
@@ -15,42 +16,57 @@ export async function onRequestGet(context) {
}
}
export async function onRequestPost(context) {
try {
const { request, env } = 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);
},
async (context) => {
try {
const { request, env } = context;
let payload;
// Verify the JWT token
const authResult = await verifyJWT(context);
if (authResult) {
return authResult; // Return the error response from the middleware
}
try {
const formData = await request.formData();
payload = JSON.parse(formData.get('payload'));
} catch (e) {
console.error("Payload parsing error:", e);
return createErrorResponse("Invalid payload", 400);
}
const { message } = await request.json();
const { message } = payload;
if (!message) {
return createErrorResponse("Empty message", 400);
}
if (!message) {
return createErrorResponse("Empty message", 400);
}
if (message.length > 200) {
return createErrorResponse("Message too long", 400);
}
if (message.length > 200) {
return createErrorResponse("Message too long", 400);
}
// Generate a unique ID for the message
const messageId = crypto.randomUUID();
// Generate a unique ID for the message
const messageId = crypto.randomUUID();
// Store the message in D1
await env.DB.prepare("INSERT INTO messages (id, userId, message) VALUES (?, ?, ?)")
.bind(messageId, context.user.userId, message)
.run();
// Store the message in D1
await env.DB.prepare("INSERT INTO messages (id, userId, message) VALUES (?, ?, ?)")
.bind(messageId, context.user.userId, message)
.run();
return new Response(JSON.stringify({ id: messageId, username: context.user.username, message }), {
headers: { 'Content-Type': 'application/json' },
});
return new Response(JSON.stringify({ id: messageId, username: context.user.username, message }), {
headers: { 'Content-Type': 'application/json' },
});
} catch (error) {
console.error("Message posting error:", error);
return createErrorResponse("Message posting failed", 500);
}
}
},
];
export async function onRequestDelete(context) {
try {
functions/api/motto.js
+31 -21
View File
@@ -1,25 +1,35 @@
import { verifyJWT } from '../middleware/auth';
import { createErrorResponse, createSuccessResponse } from '../utils';
import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
export async function onRequestGet(context) {
try {
// Verify the JWT token
const authResult = await verifyJWT(context);
if (authResult) {
return authResult; // Return the error response from the middleware
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);
},
async (context) => {
try {
// Verify the JWT token
const authResult = await verifyJWT(context);
if (authResult) {
return authResult; // Return the error response from the middleware
}
const input = { prompt: '用繁體中文生成一句名言佳句' };
const response = await context.env.AI.run('@cf/meta/llama-3.2-1b-instruct', input);
const motto = response.response;
return createSuccessResponse({ motto });
} catch (error) {
console.error("Gen motto error:", error);
return createErrorResponse("Get motto failed", 500);
}
// Use Cloudflare AI Gateway to proxy the request to Google AI Studio
const ai = context.env.AI;
const input = { prompt: '用繁體中文生成一句名言佳句' };
const response = await ai.run('@cf/meta/llama-3.2-1b-instruct', input);
const motto = response.response;
return createSuccessResponse({ motto });
} catch (error) {
console.error("Gen motto error:", error);
return createErrorResponse("Get motto failed", 500);
}
}
},
];
functions/api/register.js
+60 -50
View File
@@ -1,52 +1,62 @@
import { createErrorResponse } from '../utils';
import { createErrorResponse, createSuccessResponse } from '../utils';
import hCaptchaPlugin from "@cloudflare/pages-plugin-hcaptcha";
export async function onRequestPost(context) {
try {
const { request, env } = context;
const { username, password } = await request.json();
if (!username || !password) {
return createErrorResponse("Missing username or password", 400);
}
if (username.length < 3) {
return createErrorResponse("Username must be at least 3 characters", 400);
}
if (password.length < 8) {
return createErrorResponse("Password must be at least 8 characters", 400);
}
if (!/^[a-zA-Z0-9]+$/.test(username)) {
return createErrorResponse("Username must be alphanumeric", 400);
}
// Check if the username already exists
const { results: existingUsers } = await env.DB.prepare("SELECT id FROM users WHERE username = ?").bind(username).all();
if (existingUsers.length > 0) {
return createErrorResponse("Username already exists", 400);
}
// Store the username and password in D1
await env.DB.prepare("INSERT INTO users (username, password, avatar) VALUES (?, ?, ?)").bind(username, password, "avatars/default.png").run();
// Get the user ID
const { results } = await env.DB.prepare("SELECT id FROM users WHERE username = ?").bind(username).all();
const userId = results[0].id;
// Registration successful, return success response
return new Response(
JSON.stringify({
success: true,
message: "Registration successful. Please login.",
}),
{
headers: { "Content-Type": "application/json" },
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);
}
);
} catch (error) {
console.error("Registration error:", error);
return createErrorResponse("Server Error", 500);
}
}
})(context);
},
async (context) => {
try {
const { request, env } = context;
let payload;
try {
const formData = await request.formData();
payload = JSON.parse(formData.get('payload'));
} catch (e) {
console.error("Payload parsing error:", e);
return createErrorResponse("Invalid payload", 400);
}
const { username, password } = payload;
if (!username || !password) {
return createErrorResponse("Missing username or password", 400);
}
if (username.length < 3) {
return createErrorResponse("Username must be at least 3 characters", 400);
}
if (password.length < 8) {
return createErrorResponse("Password must be at least 8 characters", 400);
}
if (!/^[a-zA-Z0-9]+$/.test(username)) {
return createErrorResponse("Username must be alphanumeric", 400);
}
// Check if the username already exists
const { results: existingUsers } = await env.DB.prepare("SELECT id FROM users WHERE username = ?").bind(username).all();
if (existingUsers.length > 0) {
return createErrorResponse("Username already exists", 400);
}
// Store the username and password in D1
await env.DB.prepare("INSERT INTO users (username, password, avatar) VALUES (?, ?, ?)").bind(username, password, "avatars/default.png").run();
// Registration successful, return success response
return createSuccessResponse("Registration successful", 201);
} catch (error) {
console.error("Registration error:", error);
return createErrorResponse("Server Error", 500);
}
},
];
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/; style-src 'self' https://cdnjs.cloudflare.com/ajax/libs/tocas/; img-src 'self' blob: https://pub-e115c4e749734702abd09206cba74257.r2.dev/; font-src https://cdnjs.cloudflare.com/ajax/libs/tocas/">
<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;">
<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
+20
View File
@@ -8,6 +8,8 @@
"name": "vue",
"version": "0.0.0",
"dependencies": {
"@cloudflare/pages-plugin-hcaptcha": "^1.0.4",
"@hcaptcha/vue3-hcaptcha": "^1.3.0",
"file-type": "^20.4.1",
"jose": "^6.0.10",
"pinia": "^3.0.2",
@@ -67,6 +69,12 @@
"node": ">=6.9.0"
}
},
"node_modules/@cloudflare/pages-plugin-hcaptcha": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@cloudflare/pages-plugin-hcaptcha/-/pages-plugin-hcaptcha-1.0.4.tgz",
"integrity": "sha512-LZ1kWAhj3/wdAAnJs/fUG8akC+FKizLu2AdhVzr4aExncXA2wjXvphktG40pvEMIoMXH5LBqP9H7YNguR14Y7Q==",
"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",
@@ -499,6 +507,18 @@
"node": ">=18"
}
},
"node_modules/@hcaptcha/vue3-hcaptcha": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@hcaptcha/vue3-hcaptcha/-/vue3-hcaptcha-1.3.0.tgz",
"integrity": "sha512-IEonS6JiYdU7uy6aeib8cYtMO4nj8utwStbA9bWHyYbOvOvhpkV+AW8vfSKh6SntYxqle/TRwhv+kU9p92CfsA==",
"license": "MIT",
"dependencies": {
"vue": "^3.2.19"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
package.json
+2
View File
@@ -13,6 +13,8 @@
"deploy": "npm run build && npm run pages:deploy"
},
"dependencies": {
"@cloudflare/pages-plugin-hcaptcha": "^1.0.4",
"@hcaptcha/vue3-hcaptcha": "^1.3.0",
"file-type": "^20.4.1",
"jose": "^6.0.10",
"pinia": "^3.0.2",
src/components/Board/BoardForm.vue
+19 -4
View File
@@ -1,22 +1,32 @@
<script setup>
import { ref, computed } from 'vue';
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
const emit = defineEmits(['new-message']);
const props = defineProps(['locked']);
const text = ref('');
const hcaptchaResponse = ref('');
const maxLength = 200;
const handleHcaptchaVerify = (token) => {
hcaptchaResponse.value = token;
};
const handleHcaptchaExpired = () => {
hcaptchaResponse.value = '';
};
const remainingCharacters = computed(() => {
return maxLength - text.value.length;
});
function submit() {
if (!text.value || props.locked) {
if (!text.value || props.locked || !hcaptchaResponse.value) {
return;
}
emit('new-message', { text: text.value });
emit('new-message', { text: text.value, hcaptchaResponse: hcaptchaResponse.value });
text.value = '';
}
</script>
@@ -39,8 +49,13 @@ function submit() {
</div>
</div>
</div>
<VueHcaptcha
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
/>
<div class="ts-wrap has-top-spaced is-end-aligned">
<button class="ts-button" type="submit" :class="{'is-disabled': text === '' || props.locked }">送出</button>
<button class="ts-button" type="submit" :class="{'is-disabled': text === '' || props.locked || !hcaptchaResponse.value }">送出</button>
</div>
</fieldset>
</form>
@@ -56,4 +71,4 @@ function submit() {
max-width: 100%;
}
}
</style>
</style>
src/components/Login/LoginForm.vue
+18 -5
View File
@@ -1,16 +1,24 @@
<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
const emit = defineEmits(['login-submit']);
const username = ref('');
const password = ref('');
const router = useRouter();
const hcaptchaResponse = ref('');
const usernameError = ref('');
const passwordError = ref('');
const handleHcaptchaVerify = (token) => {
hcaptchaResponse.value = token;
};
const handleHcaptchaExpired = () => {
hcaptchaResponse.value = '';
};
function validateUsername() {
if (!username.value) {
usernameError.value = '使用者名稱為必填。';
@@ -49,11 +57,11 @@ const submit = () => {
validateUsername();
validatePassword();
if (usernameError.value || passwordError.value) {
if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
return;
}
emit('login-submit', { username: username.value, password: password.value });
emit('login-submit', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
}
</script>
@@ -81,9 +89,14 @@ const submit = () => {
</div>
</div>
</div>
<VueHcaptcha
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="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 !== ''
'is-disabled': username === '' || password === '' || usernameError !== '' || passwordError !== '' || !hcaptchaResponse
}">登入</button>
</div>
</div>
src/components/Profile/ProfileForm.vue
+22 -2
View File
@@ -2,6 +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 { useAuthStore } from '../../stores/auth';
const props = defineProps({
@@ -16,11 +17,20 @@ const router = useRouter();
const avatarFile = ref(null);
const avatarError = ref('');
const hcaptchaResponse = ref('');
const onFileChange = (event) => {
avatarFile.value = event.target.files[0];
};
const handleHcaptchaVerify = (token) => {
hcaptchaResponse.value = token;
};
const handleHcaptchaExpired = () => {
hcaptchaResponse.value = '';
};
const onSubmit = async () => {
avatarError.value = '';
@@ -29,6 +39,11 @@ const onSubmit = async () => {
return;
}
if (!hcaptchaResponse.value) {
avatarError.value = '請完成驗證。';
return;
}
if (avatarFile.value.size > 1 * 1024 * 1024) {
avatarError.value = '頭貼檔案需小於 1MB。';
return;
@@ -40,7 +55,7 @@ const onSubmit = async () => {
}
try {
await uploadAvatar(avatarFile.value, authStore.jwt);
await uploadAvatar(avatarFile.value, authStore.jwt, hcaptchaResponse.value);
alert('Avatar uploaded successfully!');
// After successful upload, reload this page
router.go(0);
@@ -85,8 +100,13 @@ const avatarUrl = computed(() => {
</div>
</div>
</div>
<VueHcaptcha
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
/>
<div class="ts-wrap has-top-spaced is-end-aligned">
<button class="ts-button" :disabled="!(avatarFile && avatarError === '')" type="submit">更新</button>
<button class="ts-button" :disabled="!(avatarFile && avatarError === '' && hcaptchaResponse)" type="submit">更新</button>
</div>
</fieldset>
</form>
src/components/Register/RegisterForm.vue
+18 -3
View File
@@ -1,14 +1,24 @@
<script setup>
import { ref, watch } from 'vue';
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
const emit = defineEmits(['new-user']);
const username = ref('');
const password = ref('');
const hcaptchaResponse = ref('');
const usernameError = ref('');
const passwordError = ref('');
const handleHcaptchaVerify = (token) => {
hcaptchaResponse.value = token;
};
const handleHcaptchaExpired = () => {
hcaptchaResponse.value = '';
};
function validateUsername() {
if (!username.value) {
usernameError.value = '使用者名稱為必填。';
@@ -47,11 +57,11 @@ const submit = () => {
validateUsername();
validatePassword();
if (usernameError.value || passwordError.value) {
if (usernameError.value || passwordError.value || !hcaptchaResponse.value) {
return;
}
emit('new-user', { username: username.value, password: password.value });
emit('new-user', { username: username.value, password: password.value, hcaptchaResponse: hcaptchaResponse.value });
}
</script>
@@ -81,8 +91,13 @@ const submit = () => {
</div>
</div>
</div>
<VueHcaptcha
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
/>
<div class="ts-wrap has-top-spaced is-end-aligned">
<button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' }">送出</button>
<button class="ts-button" type="submit" :class="{'is-disabled': username === '' || password === '' || !hcaptchaResponse }">送出</button>
</div>
</div>
</form>
src/lib/api.js
+45 -45
View File
@@ -2,14 +2,18 @@ import { unauthRedirectToLogin } from '../router';
const API_BASE_URL = '/api';
export async function register(username, password, hCaptchaResponse) {
const formData = new FormData();
const payload = { username, password };
formData.append('payload', JSON.stringify(payload));
if (hCaptchaResponse) {
formData.append('h-captcha-response', hCaptchaResponse);
}
export async function register(username, password) {
const response = await fetch(API_BASE_URL + "/register", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
body: formData,
});
if (!response.ok) {
@@ -20,13 +24,18 @@ export async function register(username, password) {
return response.json();
}
export async function login(username, password) {
export async function login(username, password, hCaptchaResponse) {
const formData = new FormData();
const payload = { username, password };
formData.append('payload', JSON.stringify(payload));
if (hCaptchaResponse) {
formData.append('h-captcha-response', hCaptchaResponse);
}
const response = await fetch(API_BASE_URL + "/login", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password }),
body: formData
});
if (!response.ok) {
@@ -37,14 +46,21 @@ export async function login(username, password) {
return response.json();
}
export async function postMessage(message, jwt) {
export async function postMessage(message, jwt, hCaptchaResponse) {
const formData = new FormData();
const payload = { message };
formData.append('payload', JSON.stringify(payload));
if (hCaptchaResponse) {
formData.append('h-captcha-response', hCaptchaResponse);
}
const response = await fetch(API_BASE_URL + "/messages", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': "Bearer " + jwt,
'Authorization': "Bearer " + jwt
},
body: JSON.stringify({ message }),
body: formData
});
if (!response.ok) {
@@ -81,7 +97,7 @@ export async function deleteMessage(messageId, jwt) {
return response.json();
}
export async function getMessages(jwt) {
export async function getMessages() {
const response = await fetch(API_BASE_URL + "/messages", {
method: 'GET',
headers: {
@@ -122,43 +138,20 @@ export async function getProfile(jwt) {
return response.json();
}
export async function me(jwt) {
const response = await fetch(API_BASE_URL + "/me", {
method: 'GET',
headers: {
'Authorization': "Bearer " + jwt,
},
});
export async function uploadAvatar(avatar, jwt, hCaptchaResponse) {
const formData = new FormData();
formData.append('avatar', avatar);
if (!response.ok) {
if (response.status === 401) {
unauthRedirectToLogin();
return;
}
const error = await response.json();
throw new Error(error.error || 'User operation failed');
if (hCaptchaResponse) {
formData.append('h-captcha-response', hCaptchaResponse);
}
const userData = await response.json();
const avatarFilename = userData.avatar;
if (avatarFilename) {
return import.meta.env.VITE_R2_BASE_URL + "/" + avatarFilename;
}
return null;
}
export async function uploadAvatar(avatar, jwt) {
const body = new FormData();
body.append('avatar', avatar);
const response = await fetch(API_BASE_URL + "/avatars", {
method: 'PUT',
headers: {
'Authorization': "Bearer " + jwt,
},
body: body,
body: formData,
});
if (!response.ok) {
@@ -174,12 +167,19 @@ export async function uploadAvatar(avatar, jwt) {
return data;
}
export async function generateMotto(jwt) {
export async function generateMotto(jwt, hCaptchaResponse) {
const formData = new FormData();
if (hCaptchaResponse) {
formData.append('h-captcha-response', hCaptchaResponse);
}
try {
const response = await fetch('/api/motto', {
method: 'POST',
headers: {
'Authorization': `Bearer ${jwt}`,
},
body: formData
});
if (!response.ok) {
src/main.js
+3
View File
@@ -9,4 +9,7 @@ const app = createApp(App);
app.use(pinia);
app.use(router);
app.config.globalProperties.$hcaptchaSitekey = import.meta.env.VITE_HCAPTCHA_SITEKEY;
app.mount('#app');
src/style.css
+7
View File
@@ -5,4 +5,11 @@ html, body, #app {
#app {
display: flex;
flex-direction: column;
}
#hcap-script {
display: flex;
align-items: center;
justify-content: center;
padding: 1em 0;
}
src/views/BoardView.vue
+1 -1
View File
@@ -23,7 +23,7 @@ const onSubmit = async (message) => {
if (!isLoggedIn) return;
try {
await postMessage(message.text, authStore.jwt);
await postMessage(message.text, authStore.jwt, message.hcaptchaResponse);
const response = await getMessages();
messages.value = response.messages;
src/views/DailyMottoView.vue
+19 -3
View File
@@ -2,17 +2,27 @@
import { ref, onMounted } from 'vue';
import { generateMotto as generateMottoApi } from '../lib/api';
import { useAuthStore } from '../stores/auth';
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
const motto = ref('');
const mottoLoading = ref(false);
const hcaptchaResponse = ref('');
const authStore = useAuthStore();
const handleHcaptchaVerify = (token) => {
hcaptchaResponse.value = token;
};
const handleHcaptchaExpired = () => {
hcaptchaResponse.value = '';
};
const generateMotto = async () => {
mottoLoading.value = true;
try {
const generatedMotto = await generateMottoApi(authStore.jwt);
const generatedMotto = await generateMottoApi(authStore.jwt, hcaptchaResponse.value);
motto.value = generatedMotto;
} catch (error) {
console.error(error);
@@ -28,9 +38,15 @@ const generateMotto = async () => {
<div class="ts-box ts-content is-center-aligned">
<div class="ts-header is-large is-center-aligned">每日金句生成器</div>
<p class="ts-text">Powered By Cloudflare Workers AI</p>
<button class="ts-button" @click="generateMotto">生成</button>
<VueHcaptcha
:sitekey="$hcaptchaSitekey"
@verify="handleHcaptchaVerify"
@expired="handleHcaptchaExpired"
/>
<button class="ts-button" @click="generateMotto" :disabled="!hcaptchaResponse">生成</button>
<p class="ts-text">每日金句:</p>
<div class="ts-loading" v-if="mottoLoading"></div>
<p class="ts-text">{{ motto }}</p>
</div>
</div>
</template>
</template>
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 }) => {
const onSubmit = async ({ username, password, hcaptchaResponse }) => {
try {
const response = await login(username, password);
const response = await login(username, password, hcaptchaResponse);
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 }) => {
const handleNewUser = async ({ username, password, hcaptchaResponse }) => {
try {
const response = await register(username, password);
const response = await register(username, password, hcaptchaResponse);
alert(response.message || 'Registration successful! Please log in.');
// Redirect to login page