如何使用 Cloudflare 函數接收 Discord 訊息

如何使用 Cloudflare 頁面和 Cloudflare 函數直接在 Discord 上接收來自 HTML 表單的訊息。

我們將把這個過程分為四個主要部分：建立 HTML 表單、在 Discord 上設定 webhook、在 Cloudflare 上設定 Worker 以及部署專案。

建立 HTML 表單

首先，您需要一個 HTML 表單來收集使用者資料。基本形式可能如下：

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    b2386ffb911b14667cb8f0f91ea547a7Formulário de Contato6e916e0f7d1e588d4f442bf645aedb2f
    e6a2ef4717ed03faee9e40cd54c601e7
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    41a62721f8f6faf85d3f3c442e120146
      32748748547056b73a05801fcce610b9Nome:8c1ecd4bb896b2264e0711597d40766c
      d54606a9be00961829c6e14160b24f20

      fb17cf704df615c5ede8c45530d33a1dEmail:8c1ecd4bb896b2264e0711597d40766c
      1080a2b74ca5aa671651a7e5cb19b3b6

      67ea4e327d93b644e8207e5594cd3243Assunto:8c1ecd4bb896b2264e0711597d40766c
      ea7d10cd0f3e06a24f7d5ec80f4ed662

      30ec3257503b5021be72e6d720187196Mensagem:8c1ecd4bb896b2264e0711597d40766c
      8f90f65b244ff37f833edf9160eb4a3540587128eee8df8f03d0b607fe983014

      2fde95773b8f5f556e457b384dfac0eeEnviar65281c5ac262bf6d81768915a4a77ac0
    f5a47148e367a6035fd7a2faa965022e
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

當使用者按一下「提交」時，此表單會向 /api/submit 端點發送 POST 請求。

配置 Discord Webhook

要在 Discord 上接收訊息，您需要設定一個 webhook。請依照以下步驟操作：

1. 建立一個 Discord 頻道：如果您還沒有專用頻道，請在您的 Discord 伺服器上建立一個。
2. 設定Webhook：前往「頻道設定」> 「整合」> 「Webhooks」並點選「建立 Webhook」。
3. 命名 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:b44895184412195210c28bd5c3af3a4c/3f8699a903798851377304c0547685d2.git

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 + "

```",
                    }
                ]
            }]
        }),
    });
}

部署

所有設定完成後，讓我們部署專案：

1. 提交程式碼並將其推送到 GitHub：
   

   git add .
   git commit -m "Projeto configurado"
   git push origin main
   

2. 在 Cloudflare Pages 中，連接 GitHub 儲存庫，選擇主分支，並將建置輸出設為公開。

3. 為了避免暴露敏感金鑰和設置，請在 Cloudflare Pages 中配置環境變數。存取您的 Cloudflare Pages 儀表板。選擇項目並進入設定> 環境變數。新增以下變數：

   • DISCORD_WEBHOOK_URL 與 Discord webhook URL。
   • HCAPTCHA_SECRET 與 hCaptcha 秘密。
   • HCAPTCHA_SITE_KEY 與 hCaptcha 網站金鑰。

設定後，您的網站將可以透過 *.pages.dev 子網域存取並可供使用。當使用者提交表單時，一則訊息將直接傳送到您的 Discord 頻道。

恭喜！您已成功設定一個 HTML 表單，可使用 Cloudflare Functions 向 Discord 傳送訊息。

以上是如何使用 Cloudflare 函數接收 Discord 訊息的詳細內容。更多資訊請關注PHP中文網其他相關文章！