Como Receber Mensagens no Discord com Cloudflare Functions

Como receber mensagens de um formulário HTML diretamente no seu Discord utilizando Cloudflare Pages e Cloudflare Functions.

Vamos dividir o processo em quatro partes principais: criação do formulário HTML, configuração do webhook no Discord, configuração do Worker na Cloudflare e Deploy do projeto.

Criando um Formulário HTML

Primeiro, você precisa de um formulário HTML para coletar os dados do usuário. O formulário básico pode parecer assim:

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

Este formulário envia uma requisição POST para o endpoint /api/submit quando o usuário clica em "Enviar".

Configurando o Webhook do Discord

Para receber mensagens no Discord, você precisa configurar um webhook. Siga os passos abaixo:

Crie um Canal no Discord: Se você ainda não tem um canal dedicado, crie um no seu servidor Discord.
Configure o Webhook: Vá até "Configurações do Canal" > "Integrações" > "Webhooks" e clique em "Criar Webhook".
Nomeie o Webhook: Dê um nome ao seu webhook e copie a URL gerada.

Configurando o Cloudflare Pages e Workers

Agora que você tem o formulário e o webhook configurados, é hora de configurar o Cloudflare Worker para processar as requisições e enviar mensagens ao Discord.

1: Criar um Projeto no GitHub

Crie um repositório no GitHub para o seu projeto. No seu terminal, clone o repositório e configure a estrutura do projeto:

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

2: Estrutura do Projeto

Organize seu projeto da seguinte maneira:

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

3: Configurar o Worker

No arquivo functions/api/submit.js, adicione o seguinte código para processar o formulário e enviar a mensagem para o 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 + "

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

Deploy

Com tudo configurado, vamos implantar o projeto:

Faça commit e push do código para o GitHub:

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

No Cloudflare Pages, conecte o repositório GitHub, selecione o branch principal e configure a saída de build para public.
Para não expor suas chaves e configurações sensíveis, configure as variáveis de ambiente no Cloudflare Pages. Acesse o dashboard do Cloudflare Pages. Selecione o projeto e vá até Settings > Environment Variables. Adicione as seguintes variáveis:
- DISCORD_WEBHOOK_URL com a URL do webhook do Discord.
- HCAPTCHA_SECRET com o segredo do hCaptcha.
- HCAPTCHA_SITE_KEY com a chave do site do hCaptcha.

Após a configuração, seu site estará acessível via um subdomínio *.pages.dev e pronto para uso. Quando um usuário enviar o formulário, uma mensagem será enviada diretamente para o seu canal no Discord.

Parabéns! Você configurou com sucesso um formulário HTML que envia mensagens para o Discord usando Cloudflare Functions.

Blog