Cloudflare機能を使用してDiscordでメッセージを受信する方法

Cloudflare ページと Cloudflare 関数を使用して、Discord で HTML フォームからメッセージを直接受信する方法。

プロセスを 4 つの主要な部分に分けます: HTML フォームの作成、Discord での Webhook の構成、Cloudflare でのワーカーの構成、およびプロジェクトのデプロイ。

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 を設定します。 [チャンネル設定] > [チャンネル設定] に移動します。 「統合」 > 「Webhook」をクリックし、「Webhook の作成」をクリックします。
3. Webhook に名前を付けます: Webhook に名前を付け、生成された URL をコピーします。

Cloudflareページとワーカーの構成

フォームと Webhook の設定が完了したので、リクエストを処理し、Discord にメッセージを送信するように Cloudflare Worker を設定します。

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: ワーカーを構成する

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 Web サイト キーに置き換えます。

セットアップ後、Web サイトは *.pages.dev サブドメイン経由でアクセスできるようになり、使用できるようになります。ユーザーがフォームを送信すると、メッセージがあなたの Discord チャンネルに直接送信されます。

おめでとうございます! Cloudflare Functions を使用して Discord にメッセージを送信する HTML フォームが正常に設定されました。

以上がCloudflare機能を使用してDiscordでメッセージを受信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。