PHP前端开发

如何使用 Cloudflare 函数接收 Discord 消息

百变鹏仔 3天前 #JavaScript
文章标签 如何使用

如何使用 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">
nome: email: assunto: mensagem: enviar

当用户单击“提交”时,此表单会向 /api/submit 端点发送 post 请求。

配置 discord webhook

要在 discord 上接收消息,您需要设置一个 webhook。请按照以下步骤操作:

  1. 创建一个 discord 频道: 如果您还没有专用频道,请在您的 discord 服务器上创建一个。
  2. 配置 webhook: 进入“频道设置”>“集成”>“webhook”,然后点击“创建 webhook”。
  3. 命名 webhook: 为您的 webhook 命名并复制生成的 url。

配置 cloudflare 页面和工作人员

现在您已经配置了表单和 webhook,是时候配置 cloudflare worker 来处理请求并向 discord 发送消息了。

1:在github上创建项目

为您的项目创建一个 github 存储库。在您的终端中,克隆存储库并配置项目结构:

mkdir meu-projetocd meu-projetogit initgit 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}&amp;remoteip=${ip}&amp;secret=${secret}&amp;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 + "```",                    }                ]            }]        }),    });}

部署

所有配置完成后,让我们来实现该项目:

  1. 提交代码并将其推送到 github:

    git add .git commit -m "Projeto configurado"git push origin main
  2. 在 cloudflare pages 中,连接 github 存储库,选择主分支,并将构建输出设置为 public。

  3. 为了避免暴露敏感密钥和设置,请在 cloudflare pages 中配置环境变量。访问您的 cloudflare pages 仪表板。选择项目并进入设置 > 环境变量。添加以下变量:

设置后,您的网站将可以通过 *.pages.dev 子域访问并可供使用。当用户提交表单时,一条消息将直接发送到您的 discord 频道。

恭喜!您已成功配置一个 html 表单,该表单可使用 cloudflare functions 向 discord 发送消息。