So empfangen Sie Nachrichten auf Discord mit Cloudflare-Funktionen-js-Tutorial-php.cn

So empfangen Sie Nachrichten auf Discord mit Cloudflare-Funktionen

WBOY

Freigeben： 2024-07-19 16:26:32

Original

1089 Leute haben es durchsucht

Como Receber Mensagens no Discord com Cloudflare Functions

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:

<!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>

Nach dem Login kopieren

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:

Erstellen Sie einen Discord-Kanal: Wenn Sie noch keinen dedizierten Kanal haben, erstellen Sie einen auf Ihrem Discord-Server.
Konfigurieren Sie den Webhook: Gehen Sie zu „Kanaleinstellungen“ > „Integrationen“ > „Webhooks“ und klicken Sie auf „Webhook erstellen“.
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:<seu-usuario>/<seu-repositorio>.git

Nach dem Login kopieren

2: Projektstruktur

Organisieren Sie Ihr Projekt wie folgt:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Einsetzen

Sobald alles konfiguriert ist, stellen wir das Projekt bereit:

Übertragen Sie den Code und übertragen Sie ihn an GitHub:
```
git add .
git commit -m "Projeto configurado"
git push origin main
```
Nach dem Login kopieren
Verbinden Sie in Cloudflare Pages das GitHub-Repository, wählen Sie den Hauptzweig aus und legen Sie die Build-Ausgabe auf öffentlich fest.
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!