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

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

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

HTML 양식 만들기

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

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    b2386ffb911b14667cb8f0f91ea547a7Formulário de Contato6e916e0f7d1e588d4f442bf645aedb2f
    e6a2ef4717ed03faee9e40cd54c601e7
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    41a62721f8f6faf85d3f3c442e120146
      32748748547056b73a05801fcce610b9Nome:8c1ecd4bb896b2264e0711597d40766c
      d54606a9be00961829c6e14160b24f20

      fb17cf704df615c5ede8c45530d33a1dEmail:8c1ecd4bb896b2264e0711597d40766c
      1080a2b74ca5aa671651a7e5cb19b3b6

      67ea4e327d93b644e8207e5594cd3243Assunto:8c1ecd4bb896b2264e0711597d40766c
      ea7d10cd0f3e06a24f7d5ec80f4ed662

      30ec3257503b5021be72e6d720187196Mensagem:8c1ecd4bb896b2264e0711597d40766c
      8f90f65b244ff37f833edf9160eb4a3540587128eee8df8f03d0b607fe983014

      2fde95773b8f5f556e457b384dfac0eeEnviar65281c5ac262bf6d81768915a4a77ac0
    f5a47148e367a6035fd7a2faa965022e
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

Discord 웹훅 구성

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

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

Cloudflare 페이지 및 작업자 구성

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

1: GitHub에서 프로젝트 생성

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

mkdir meu-projeto
cd meu-projeto
git init
git remote add origin git@github.com:b44895184412195210c28bd5c3af3a4c/3f8699a903798851377304c0547685d2.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 + "

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

배포

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

1. GitHub에 코드를 커밋하고 푸시하세요.
   

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

2. Cloudflare Pages에서 GitHub 저장소를 연결하고 기본 분기를 선택한 다음 빌드 출력을 공개로 설정하세요.

3. 민감한 키와 설정이 노출되지 않도록 하려면 Cloudflare 페이지에서 환경 변수를 구성하세요. Cloudflare Pages 대시보드에 액세스하세요. 프로젝트를 선택하고 설정 > 환경변수. 다음 변수를 추가합니다:

   • DISCORD_WEBHOOK_URL을 Discord 웹훅 URL로 바꿉니다.
   • HCAPTCHA_SECRET을 hCaptcha 비밀번호로 바꿉니다.
   • HCAPTCHA_SITE_KEY를 hCaptcha 웹사이트 키로 바꿉니다.

설정이 완료되면 *.pages.dev 하위 도메인을 통해 웹사이트에 액세스할 수 있으며 바로 사용할 수 있습니다. 사용자가 양식을 제출하면 메시지가 Discord 채널로 직접 전송됩니다.

축하합니다! Cloudflare Functions를 사용하여 Discord에 메시지를 보내는 HTML 양식을 성공적으로 구성했습니다.

위 내용은 Cloudflare 기능을 사용하여 Discord에서 메시지를 받는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!