如何使用 cloudflare 页面和 cloudflare functions 直接在 discord 上接收来自 html 表单的消息。
我们将把这个过程分为四个主要部分:创建 html 表单、在 discord 上配置 webhook、在 cloudflare 上配置 worker 以及部署项目。
创建 html 表单
首先,您需要一个 html 表单来收集用户数据。基本形式可能如下所示:
<meta charset="utf-8"><title>formulário de contato</title><meta name="viewport" content="width=device-width, initial-scale=1">
当用户单击“提交”时,此表单会向 /api/submit 端点发送 post 请求。
配置 discord webhook
要在 discord 上接收消息,您需要设置一个 webhook。请按照以下步骤操作:
- 创建一个 discord 频道: 如果您还没有专用频道,请在您的 discord 服务器上创建一个。
- 配置 webhook: 进入“频道设置”>“集成”>“webhook”,然后点击“创建 webhook”。
- 命名 webhook: 为您的 webhook 命名并复制生成的 url。
配置 cloudflare 页面和工作人员
现在您已经配置了表单和 webhook,是时候配置 cloudflare worker 来处理请求并向 discord 发送消息了。
1:在github上创建项目
为您的项目创建一个 github 存储库。在您的终端中,克隆存储库并配置项目结构:
mkdir meu-projeto
cd meu-projeto
git init
git remote add origin git@github.com:<seu-usuario>/<seu-repositorio>.git
</seu-repositorio></seu-usuario>
2:项目结构
按如下方式组织您的项目:
meu-projeto
├── functions
│ └── api
│ └── submit.js
└── public
└── index.html
3:配置worker
在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 存储库,选择主分支,并将构建输出设置为 public。
-
为了避免暴露敏感密钥和设置,请在 cloudflare pages 中配置环境变量。访问您的 cloudflare pages 仪表板。选择项目并进入设置 > 环境变量。添加以下变量:
- discord_webhook_url 与 discord webhook url。
- hcaptcha_secret 带有 hcaptcha 秘密。
- hcaptcha_site_key 与 hcaptcha 网站密钥。
设置后,您的网站将可以通过 *.pages.dev 子域访问并可供使用。当用户提交表单时,一条消息将直接发送到您的 discord 频道。
恭喜!您已成功配置一个 html 表单,该表单可使用 cloudflare functions 向 discord 发送消息。