DEV Community

Rhuan Oliveira
Rhuan Oliveira

Posted on

Como Receber Mensagens no Discord com Cloudflare Functions

#tutorial #javascript #html #discord

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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Crie um Canal no Discord: Se você ainda não tem um canal dedicado, crie um no seu servidor Discord.
  2. Configure o Webhook: Vá até "Configurações do Canal" > "Integrações" > "Webhooks" e clique em "Criar Webhook".
  3. 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
Enter fullscreen mode Exit fullscreen mode

2: Estrutura do Projeto

Organize seu projeto da seguinte maneira:

meu-projeto ├── functions │ └── api │ └── submit.js └── public └── index.html
Enter fullscreen mode Exit fullscreen mode

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 + " ```", } ] }] }), }); }
Enter fullscreen mode Exit fullscreen mode

Deploy

Com tudo configurado, vamos implantar o projeto:

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

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

  2. No Cloudflare Pages, conecte o repositório GitHub, selecione o branch principal e configure a saída de build para public.

  3. 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.

Top comments (0)