如何使用 Cloudflare 頁面和 Cloudflare 函數直接在 Discord 上接收來自 HTML 表單的訊息。
我們將把這個過程分為四個主要部分：建立 HTML 表單、在 Discord 上設定 webhook、在 Cloudflare 上設定 Worker 以及部署專案。
首先，您需要一個 HTML 表單來收集使用者資料。基本形式可能如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulário de Contato</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form method="POST" action="/api/submit">
<label for="name">Nome:</label>
<input id="name" name="name" type="text" required>
<label for="email">Email:</label>
<input id="email" name="email" type="email" required>
<label for="subject">Assunto:</label>
<input id="subject" name="subject" type="text" required>
<label for="message">Mensagem:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Enviar</button>
</form>
</body>
</html>
當使用者按一下「提交」時，此表單會向 /api/submit 端點發送 POST 請求。
要在 Discord 上接收訊息，您需要設定一個 webhook。請依照以下步驟操作：
現在您已經配置了表單和 webhook，是時候配置 Cloudflare Worker 來處理請求並向 Discord 發送訊息了。
在 GitHub 上為您的專案建立一個儲存庫。在您的終端機中，複製儲存庫並配置專案結構：
mkdir meu-projeto cd meu-projeto git init git remote add origin git@github.com:<seu-usuario>/<seu-repositorio>.git
如下整理您的專案：
meu-projeto
├── functions
│ └── api
│ └── submit.js
└── public
└── index.html
在functions/api/submit.js檔案中，加入以下程式碼來處理表單並將訊息傳送到Discord：
export async function onRequestPost(ctx) {
try {
return await handleRequest(ctx);
} catch(e) {
return new Response(`${e.message}\n${e.stack}`, { status: 500 });
}
}
async function handleRequest({ request, env }) {
const data = await request.formData();
const name = data.get('name');
const email = data.get('email');
const subject = data.get('subject');
const message = data.get('message');
const captcha = data.get('h-captcha-response');
if (!name || !email || !subject || !message || !captcha) {
return new Response('Verifique se os campos estão preenchidos!', { status: 400 });
}
const captchaVerified = await verifyHcaptcha(
captcha,
request.headers.get('cf-connecting-ip'),
env.HCAPTCHA_SECRET,
env.HCAPTCHA_SITE_KEY
);
if (!captchaVerified) {
return new Response('Captcha inválido!', { status: 400 });
}
await sendDiscordMessage(name, email, subject, message, env.DISCORD_WEBHOOK_URL);
return new Response('OK');
}
async function verifyHcaptcha(response, ip, secret, siteKey) {
const res = await fetch('https://hcaptcha.com/siteverify', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `response=${response}&remoteip=${ip}&secret=${secret}&sitekey=${siteKey}`
});
const json = await res.json();
return json.success;
}
async function sendDiscordMessage(name, email, subject, message, webhookUrl) {
await fetch(webhookUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: 'Formulário de Contato',
embeds: [{
color: 0x0099ff,
title: 'Nova Mensagem',
fields: [
{
name: 'Nome',
value: name,
inline: true,
},
{
name: 'Email',
value: email,
inline: true,
},
{
name: 'Assunto',
value: subject,
},
{
name: 'Mensagem',
value: "```
" + message + "
```",
}
]
}]
}),
});
}
所有設定完成後，讓我們部署專案：
提交程式碼並將其推送到 GitHub：
git add . git commit -m "Projeto configurado" git push origin main
在 Cloudflare Pages 中，連接 GitHub 儲存庫，選擇主分支，並將建置輸出設為公開。
為了避免暴露敏感金鑰和設置，請在 Cloudflare Pages 中配置環境變數。存取您的 Cloudflare Pages 儀表板。選擇項目並進入設定> 環境變數。新增以下變數：
設定後，您的網站將可以透過 *.pages.dev 子網域存取並可供使用。當使用者提交表單時，一則訊息將直接傳送到您的 Discord 頻道。
恭喜！您已成功設定一個 HTML 表單，可使用 Cloudflare Functions 向 Discord 傳送訊息。
以上是如何使用 Cloudflare 函數接收 Discord 訊息的詳細內容。更多資訊請關注PHP中文網其他相關文章！
