Borang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka

Dengan perkhidmatan hujung belakang sumber terbuka untuk pengumpulan borang dan pengendalian CAPTCHA anda boleh melaksanakan borang hubungan dengan perlindungan spam tanpa membangunkan perkhidmatan hujung belakang anda sendiri untuk ini. Perkhidmatan bahagian belakang ini juga tersedia dalam Awan Sumber Terbuka jadi anda tidak perlu mengehoskan sendiri perkhidmatan bahagian belakang ini.

Dalam blog ini saya akan menerangkan bagaimana anda boleh mendapatkan borang hubungan dengan cepat di mana mesej dihantar ke saluran Slack.

Buat Bot Slack

Slack Bot akan menjadi orang yang menghantar mesej ke saluran dalam Slack. Lawati https://api.slack.com/apps/ dan buat apl baharu dengan kebenaran untuk menyiarkan ke saluran Slack yang dikehendaki.

Simpan token Slack Bot kerana ini akan digunakan kemudian dalam tutorial ini.

Buat perkhidmatan bahagian belakang borang dalam Awan Sumber Terbuka

Log masuk atau daftar untuk akaun di Open Source Cloud.

Navigasi ke Perkhidmatan Borang Hubungan dan klik pada tab Rahsia Perkhidmatan. Klik pada Rahsia Baru dan tambah rahsia yang mengandungi token Slack Bot yang diperoleh sebelum ini.

Buat perkhidmatan borang kenalan dengan menekan butang Cipta perkhidmatan.

Beri nama perkhidmatan dan pilih kendur dalam menu lungsur pengangkutan. Sediakan rahsia perkhidmatan yang memegang token dan masukkan ID saluran tempat mesej harus disiarkan.

Apabila perkhidmatan sedang berjalan dan berjalan, anda boleh menyalin dan menyimpan URL ke perkhidmatan borang hubungan.

Contoh borang hubungan dalam React

Buat borang hubungan anda dalam aplikasi bahagian hadapan anda yang dalam React mungkin kelihatan seperti ini. Gantikan BACKEND-SERVICE-URL dengan URL yang diperoleh di atas.

'use client';
import { Input, Textarea } from '@nextui-org/react';

export default function Page() {
  const handleSubmit = (formData: any) => {
    fetch(new URL('BACKEND-SERVICE-URL/contact'), {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams(formData).toString()
    });
  };

  return (
    

) }

Apabila borang diserahkan, anda kini akan mendapat mesej dalam saluran Slack anda. Untuk mengelakkan bot spam menyalahgunakan borang ini, kami perlu menambah CAPTCHA. CAPTCHA ialah akronim yang bermaksud "Ujian Turing Awam Automatik Sepenuhnya untuk membezakan Komputer dan Manusia."

Untuk menyediakan fungsi ini, kami akan menggunakan perkhidmatan hujung belakang CAPTCHA sumber terbuka untuk menjana dan mengesahkan CAPTCHA. Cara ia berfungsi ialah anda menjana imej CAPTCHA yang memaparkan teks. Kemudian anda meminta pengguna (manusia) untuk memberikan teks yang dia lihat dan bahagian belakang akan mengesahkan bahawa ini adalah teks yang ditunjukkan dalam imej.

Buat perkhidmatan hujung belakang CAPTCHA dalam Awan Sumber Terbuka

Navigasi ke Perkhidmatan CAPTCHA dan klik pada butang Cipta perkhidmatan.

Beri nama perkhidmatan dan setelah perkhidmatan mula salin URL ke perkhidmatan. Gantikan CAPTCHA-SVC-URL di bawah dengan URL ini.

Tambahkan pengesahan CAPTCHA pada borang anda

Panjangkan borang yang kami buat di atas dengan kod berikut.

<p>'use client';<br>
import { Input, Textarea } from '@nextui-org/react'; </p>

<p>export default function Page() {<br>
  const [captchaSvg, setBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber TerbukaSvg] = useState<string null>(null);<br>
  const [captchaId, setBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber TerbukaId] = useState('');<br>
  const [captcha, setBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka] = useState('');<br>
  const [invalidBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka, setInvalidBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka] = useState(true);</string></p>

<p>useEffect(() => {<br>
    fetch(new URL('/captcha', 'CAPTCHA-SVC-URL'))<br>
      .then((response) => response.json())<br>
      .then((data) => {<br>
        setBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber TerbukaSvg(data.svg);<br>
        setBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber TerbukaId(data.id);<br>
      });<br>
  }, []);</p>

<p>const onBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber TerbukaChange = (value: string) => {<br>
    setBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka(value);<br>
    fetch(new URL('CAPTCHA-SVC-URL/verify/' + captchaId + '/' + value))<br>
      .then((response) => {<br>
        setInvalidBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka(!response.ok);<br>
      })<br>
      .catch(() => {<br>
        setInvalidBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka(true);<br>
      });<br>
  };</p>

<p>const handleSubmit = (formData: any) => {<br>
    fetch(new URL('BACKEND-SERVICE-URL/contact'), {<br>
      method: 'POST',<br>
      headers: {<br>
        'Content-Type': 'application/x-www-form-urlencoded'<br>
      },<br>
      body: new URLSearchParams(formData).toString()<br>
    });<br>
  };</p>

<p>return (<br>
    </p>

name="message"<br> minRows={8}<br> placeholder="Tell us a bit about what you want our help with"<br> /><br> {captchaSvg && (<br> <image src="%7BcaptchaSvg%7D" classname="bg-white" alt="Borang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka"></image><br> )}<br> <input> name="captcha"<br> placeholder="Enter the text from the image"<br> description="This is used to prevent automated submissions."<br> required<br> maxLength={4}<br> value={captcha}<br> onValueChange={onBorang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber TerbukaChange}<br> /><br> <input type="submit" value="Send" isdisabled="{invalidBorang" hubungan dan bahagian belakang captcha dalam awan sumber terbuka><br>

)
}

Kesimpulan

Ini ialah contoh tentang cara anda boleh menambah pada aplikasi web anda borang hubungan dengan pengesahan CAPTCHA yang menyiarkan ke saluran Slack tanpa perlu membina atau mengehoskan perkhidmatan bahagian belakang anda sendiri untuknya.

Apakah Awan Sumber Terbuka?

Awan Sumber Terbuka mengurangkan halangan untuk mula menggunakan sumber terbuka dan mengurangkan halangan bagi pencipta untuk menyediakan perisian mereka sebagai perkhidmatan. Baca lebih lanjut tentang sebab kami membangunkannya dalam siaran ini.

Atas ialah kandungan terperinci Borang hubungan dan bahagian belakang CAPTCHA dalam Awan Sumber Terbuka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!