Cloudflare機能を使用してDiscordでメッセージを受信する方法-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-07-19 16:26:32

オリジナル

1090 人が閲覧しました

Como Receber Mensagens no Discord com Cloudflare Functions

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

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

HTMLフォームの作成

まず、ユーザーデータを収集するための 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 の設定

Discord でメッセージを受信するには、Webhook を設定する必要があります。以下の手順に従ってください:

Discord チャンネルを作成する: 専用チャンネルをまだ持っていない場合は、Discord サーバー上に作成します。
Webhook を設定します。 [チャンネル設定] > [チャンネル設定] に移動します。「統合」 > 「Webhook」をクリックし、「Webhook の作成」をクリックします。
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:<seu-usuario>/<seu-repositorio>.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 + "

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

ログイン後にコピー

展開する

すべての設定が完了したら、プロジェクトをデプロイしましょう:

コードをコミットして GitHub にプッシュします:
```
git add .
git commit -m "Projeto configurado"
git push origin main
```
ログイン後にコピー
Cloudflare Pages で、GitHub リポジトリに接続し、メインブランチを選択し、ビルド出力をパブリックに設定します。
機密キーと設定の公開を避けるために、Cloudflare Pages で環境変数を設定します。 Cloudflare Pages ダッシュボードにアクセスします。プロジェクトを選択し、設定 > に移動します。 環境変数。次の変数を追加します:
- DISCORD_WEBHOOK_URL を Discord Webhook URL に置き換えます。
- HCAPTCHA_SECRET を hCaptcha シークレットに置き換えます。
- HCAPTCHA_SITE_KEY は、hCaptcha Web サイトキーに置き換えます。