Rumah >hujung hadapan web >tutorial js >Cara Menerima Mesej pada Discord dengan Fungsi Cloudflare
Cara menerima mesej daripada borang HTML terus pada Discord anda menggunakan Cloudflare Pages dan Fungsi Cloudflare.
Kami akan membahagikan proses kepada empat bahagian utama: mencipta borang HTML, mengkonfigurasi webhook pada Discord, mengkonfigurasi Worker on Cloudflare dan Menetapkan projek.
Pertama, anda memerlukan borang HTML untuk mengumpul data pengguna. Bentuk asas mungkin kelihatan seperti ini:
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
Borang ini menghantar permintaan POST ke titik akhir /api/submit apabila pengguna mengklik "Serah".
Untuk menerima mesej di Discord, anda perlu menyediakan webhook. Ikuti langkah di bawah:
Sekarang anda mempunyai borang dan webhook dikonfigurasikan, tiba masanya untuk mengkonfigurasi Cloudflare Worker untuk memproses permintaan dan menghantar mesej kepada Discord.
Buat repositori di GitHub untuk projek anda. Dalam terminal anda, klon repositori dan konfigurasikan struktur projek:
mkdir meu-projeto cd meu-projeto git init git remote add origin git@github.com:b44895184412195210c28bd5c3af3a4c/3f8699a903798851377304c0547685d2.git
Atur projek anda seperti berikut:
meu-projeto ├── functions │ └── api │ └── submit.js └── public └── index.html
Dalam fail functions/api/submit.js, tambahkan kod berikut untuk memproses borang dan hantar mesej kepada 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 + " ```", } ] }] }), }); }
Dengan segala-galanya dikonfigurasikan, mari gunakan projek:
Komit dan tolak kod ke GitHub:
git add . git commit -m "Projeto configurado" git push origin main
Dalam Cloudflare Pages, sambungkan repositori GitHub, pilih cawangan utama dan tetapkan output binaan kepada awam.
Untuk mengelak daripada mendedahkan kunci dan tetapan sensitif anda, konfigurasikan pembolehubah persekitaran dalam Cloudflare Pages. Akses papan pemuka Halaman Cloudflare anda. Pilih projek dan pergi ke Tetapan > Pembolehubah Persekitaran. Tambah pembolehubah berikut:
Selepas persediaan, tapak web anda akan boleh diakses melalui subdomain *.pages.dev dan sedia untuk digunakan. Apabila pengguna menyerahkan borang, mesej akan dihantar terus ke saluran Discord anda.
Tahniah! Anda telah berjaya mengkonfigurasi borang HTML yang menghantar mesej kepada Discord menggunakan Fungsi Cloudflare.
Atas ialah kandungan terperinci Cara Menerima Mesej pada Discord dengan Fungsi Cloudflare. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!