Comment recevoir des messages sur Discord avec les fonctions Cloudflare-js tutoriel-php.cn

Comment recevoir des messages sur Discord avec les fonctions Cloudflare

WBOY

Libérer： 2024-07-19 16:26:32

original

1090 Les gens l'ont consulté

Como Receber Mensagens no Discord com Cloudflare Functions

Comment recevoir des messages d'un formulaire HTML directement sur votre Discord à l'aide des pages Cloudflare et des fonctions Cloudflare.

Nous diviserons le processus en quatre parties principales : création du formulaire HTML, configuration du webhook sur Discord, configuration du Worker sur Cloudflare et déploiement du projet.

Création d'un formulaire HTML

Tout d'abord, vous avez besoin d'un formulaire HTML pour collecter les données utilisateur. Le formulaire de base pourrait ressembler à ceci :

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

Copier après la connexion

Ce formulaire envoie une requête POST au point de terminaison /api/submit lorsque l'utilisateur clique sur "Soumettre".

Configuration du webhook Discord

Pour recevoir des messages sur Discord, vous devez configurer un webhook. Suivez les étapes ci-dessous :

Créez une chaîne Discord : Si vous n'avez pas déjà de chaîne dédiée, créez-en une sur votre serveur Discord.
Configurez le Webhook : Accédez à « Paramètres de la chaîne » > "Intégrations" > "Webhooks" et cliquez sur "Créer un Webhook".
Nommez le Webhook : Donnez un nom à votre webhook et copiez l'URL générée.

Configuration des pages et des travailleurs Cloudflare

Maintenant que le formulaire et le webhook sont configurés, il est temps de configurer Cloudflare Worker pour traiter les demandes et envoyer des messages à Discord.

1 : Créer un projet sur GitHub

Créez un référentiel sur GitHub pour votre projet. Dans votre terminal, clonez le référentiel et configurez la structure du projet :

mkdir meu-projeto
cd meu-projeto
git init
git remote add origin git@github.com:<seu-usuario>/<seu-repositorio>.git

Copier après la connexion

2 : Structure du projet

Organisez votre projet comme suit :

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

Copier après la connexion

3 : Configurer le travailleur

Dans le fichier function/api/submit.js, ajoutez le code suivant pour traiter le formulaire et envoyer le message à 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 + "

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

Copier après la connexion

Déployer

Une fois tout configuré, déployons le projet :

Commitez et envoyez le code vers GitHub :

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

Copier après la connexion

Dans Cloudflare Pages, connectez le référentiel GitHub, sélectionnez la branche principale et définissez la sortie de build sur publique.
Pour éviter d'exposer vos clés et paramètres sensibles, configurez les variables d'environnement dans Cloudflare Pages. Accédez à votre tableau de bord Cloudflare Pages. Sélectionnez le projet et accédez à Paramètres > Variables d'environnement. Ajoutez les variables suivantes :
- DISCORD_WEBHOOK_URL avec l'URL du webhook Discord.
- HCAPTCHA_SECRET avec le secret hCaptcha.
- HCAPTCHA_SITE_KEY avec la clé du site hCaptcha.

Après la configuration, votre site Web sera accessible via un sous-domaine *.pages.dev et prêt à être utilisé. Lorsqu'un utilisateur soumet le formulaire, un message sera envoyé directement sur votre chaîne Discord.

Félicitations ! Vous avez configuré avec succès un formulaire HTML qui envoie des messages à Discord à l'aide des fonctions Cloudflare.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!