Cloudflare 기능을 사용하여 Discord에서 메시지를 받는 방법-JS 튜토리얼-php.cn

Cloudflare 기능을 사용하여 Discord에서 메시지를 받는 방법

WBOY

풀어 주다： 2024-07-19 16:26:32

원래의

1098명이 탐색했습니다.

Como Receber Mensagens no Discord com Cloudflare Functions

Cloudflare 페이지 및 Cloudflare Functions를 사용하여 Discord에서 직접 HTML 양식의 메시지를 받는 방법

이 프로세스는 HTML 양식 생성, Discord에서 웹훅 구성, Cloudflare에서 작업자 구성, 프로젝트 배포의 네 가지 주요 부분으로 나누어집니다.

HTML 양식 만들기

먼저 사용자 데이터를 수집하려면 HTML 양식이 필요합니다. 기본 형태는 다음과 같습니다.

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

로그인 후 복사

이 양식은 사용자가 "제출"을 클릭하면 /api/submit 엔드포인트로 POST 요청을 보냅니다.

Discord 웹훅 구성

Discord에서 메시지를 받으려면 웹훅을 설정해야 합니다. 아래 단계를 따르세요.

Discord 채널 만들기: 아직 전용 채널이 없다면 Discord 서버에 채널을 만드세요.
웹훅 구성: '채널 설정' > "통합" > "웹훅"을 선택하고 "웹훅 생성"을 클릭하세요.
웹훅 이름 지정: 웹훅에 이름을 지정하고 생성된 URL을 복사하세요.

Cloudflare 페이지 및 작업자 구성

이제 양식과 웹후크가 구성되었으므로 요청을 처리하고 Discord에 메시지를 보내도록 Cloudflare Worker를 구성할 차례입니다.

1: GitHub에서 프로젝트 생성

GitHub에 프로젝트용 저장소를 만드세요. 터미널에서 저장소를 복제하고 프로젝트 구조를 구성합니다.

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

로그인 후 복사

2: 프로젝트 구조

다음과 같이 프로젝트를 구성하세요.

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

로그인 후 복사

3: 작업자 구성

functions/api/submit.js 파일에 다음 코드를 추가하여 양식을 처리하고 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 + "

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

로그인 후 복사

배포

모든 것이 구성되었으면 프로젝트를 배포해 보겠습니다.

GitHub에 코드를 커밋하고 푸시하세요.
```
git add .
git commit -m "Projeto configurado"
git push origin main
```
로그인 후 복사
Cloudflare Pages에서 GitHub 저장소를 연결하고 기본 분기를 선택한 다음 빌드 출력을 공개로 설정하세요.
민감한 키와 설정이 노출되지 않도록 하려면 Cloudflare 페이지에서 환경 변수를 구성하세요. Cloudflare Pages 대시보드에 액세스하세요. 프로젝트를 선택하고 설정 > 환경변수. 다음 변수를 추가합니다:
- DISCORD_WEBHOOK_URL을 Discord 웹훅 URL로 바꿉니다.
- HCAPTCHA_SECRET을 hCaptcha 비밀번호로 바꿉니다.
- HCAPTCHA_SITE_KEY를 hCaptcha 웹사이트 키로 바꿉니다.