So empfangen Sie Nachrichten auf Discord mit Cloudflare-Funktionen

So empfangen Sie Nachrichten aus einem HTML-Formular direkt auf Ihrem Discord mit Cloudflare-Seiten und Cloudflare-Funktionen.

Wir werden den Prozess in vier Hauptteile unterteilen: Erstellen des HTML-Formulars, Konfigurieren des Webhooks auf Discord, Konfigurieren des Workers auf Cloudflare und Bereitstellen des Projekts.

Erstellen eines HTML-Formulars

Zunächst benötigen Sie ein HTML-Formular, um Benutzerdaten zu sammeln. Das Grundformular könnte so aussehen:

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

Dieses Formular sendet eine POST-Anfrage an den /api/submit-Endpunkt, wenn der Benutzer auf „Senden“ klickt.

Discord Webhook konfigurieren

Um Nachrichten auf Discord zu empfangen, müssen Sie einen Webhook einrichten. Befolgen Sie die folgenden Schritte:

1. Erstellen Sie einen Discord-Kanal: Wenn Sie noch keinen dedizierten Kanal haben, erstellen Sie einen auf Ihrem Discord-Server.
2. Konfigurieren Sie den Webhook: Gehen Sie zu „Kanaleinstellungen“ > „Integrationen“ > „Webhooks“ und klicken Sie auf „Webhook erstellen“.
3. Benennen Sie den Webhook: Geben Sie Ihrem Webhook einen Namen und kopieren Sie die generierte URL.

Konfigurieren von Cloudflare-Seiten und -Workern

Da Sie nun das Formular und den Webhook konfiguriert haben, ist es an der Zeit, Cloudflare Worker so zu konfigurieren, dass er Anfragen verarbeitet und Nachrichten an Discord sendet.

1: Erstellen Sie ein Projekt auf GitHub

Erstellen Sie ein Repository auf GitHub für Ihr Projekt. Klonen Sie in Ihrem Terminal das Repository und konfigurieren Sie die Projektstruktur:

mkdir meu-projeto
cd meu-projeto
git init
git remote add origin git@github.com:b44895184412195210c28bd5c3af3a4c/3f8699a903798851377304c0547685d2.git

2: Projektstruktur

Organisieren Sie Ihr Projekt wie folgt:

meu-projeto
├── functions
│   └── api
│       └── submit.js
└── public
    └── index.html

3: Konfigurieren Sie den Worker

Fügen Sie in der Datei „functions/api/submit.js“ den folgenden Code hinzu, um das Formular zu verarbeiten und die Nachricht an Discord zu senden:

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

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

Einsetzen

Sobald alles konfiguriert ist, stellen wir das Projekt bereit:

1. Übertragen Sie den Code und übertragen Sie ihn an GitHub:
   

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

2. Verbinden Sie in Cloudflare Pages das GitHub-Repository, wählen Sie den Hauptzweig aus und legen Sie die Build-Ausgabe auf öffentlich fest.

3. Um zu vermeiden, dass Ihre vertraulichen Schlüssel und Einstellungen offengelegt werden, konfigurieren Sie Umgebungsvariablen in Cloudflare Pages. Greifen Sie auf Ihr Cloudflare Pages-Dashboard zu. Wählen Sie das Projekt aus und gehen Sie zu Einstellungen > Umgebungsvariablen. Fügen Sie die folgenden Variablen hinzu:

   • DISCORD_WEBHOOK_URL mit der Discord-Webhook-URL.
   • HCAPTCHA_SECRET mit dem hCaptcha-Geheimnis.
   • HCAPTCHA_SITE_KEY mit dem hCaptcha-Website-Schlüssel.

Nach der Einrichtung ist Ihre Website über eine *.pages.dev-Subdomain zugänglich und einsatzbereit. Wenn ein Benutzer das Formular absendet, wird eine Nachricht direkt an Ihren Discord-Kanal gesendet.

Herzlichen Glückwunsch! Sie haben erfolgreich ein HTML-Formular konfiguriert, das mithilfe von Cloudflare-Funktionen Nachrichten an Discord sendet.

Das obige ist der detaillierte Inhalt vonSo empfangen Sie Nachrichten auf Discord mit Cloudflare-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!