Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Web ve mobil uygulamalar daha popüler hale geldikçe, spam ve diğer kötü amaçlı etkinlik riski de artmaktadır. CAPTCHA'lar, bu tür güvenlik tehditlerini önlemek için entegre edilmeye değer kullanışlı bir güvenlik önlemi olabilir.

CAPTCHA, istenmeyen e-posta botlarının otomatik saldırılarını önlemek için genellikle web formlarıyla entegre olan minimum düzeyde bir güvenlik özelliğidir. Bir uygulamaya erişen kullanıcının kötü amaçlı kod yürüten bir bot değil, gerçekten insan olmasını sağlar.

CAPTCHA Nedir?

CAPTCHA kısaltması, Bilgisayarları ve İnsanları Ayırmak için Tamamen Otomatik Genel Turing testi anlamına gelir. Uygulamanızla etkileşime giren belirli bir kullanıcının bot değil, insan olup olmadığını belirlemek için kontrol eden, bilgisayar tarafından oluşturulan bir testi ifade eder.

Metin tabanlı ve ses tabanlı CAPTCHA'lar gibi uygulamanıza entegre edebileceğiniz farklı CAPTCHA testi türleri vardır. Ancak en popüler ve etkili tür Google reCAPTCHA'dır. Gelişmiş risk analizi algoritmalarını kullanarak gerçek kullanıcılar ve botlar arasında ayrım yapmak için kontrol yapar.

instagram viewer

Google reCAPTCHA'nın iki sürümü vardır:

  • reCAPTCHA V3: Bu sürüm arka planda çalışır ve kullanıcının davranışına göre genel bir puan belirler.
  • reCAPTCHA V2: Bu sürüm, kimlik doğrulama formuna "Ben robot değilim" onay kutusunu yerleştirir.

Bu kılavuz, Google reCAPTCHA V2'yi keşfedecektir. Bunu bir React uygulamasına nasıl entegre edeceğinizi öğrenmek için okumaya devam edin.

React Uygulamasını reCAPTCHA Admin Console'a kaydedin

Başlamak için uygulamanızı reCAPTCHA'nın geliştirici konsoluna kaydetmeniz gerekir. Başını aşmak Google'ın reCAPTCHA Yönetici Konsolu, Google hesabınızla oturum açın ve gerekli form ayrıntılarını doldurun.

Etiket adını girin, seçin reCAPTCHA V2, ve açılır kutuda, "Ben robot değilim" onay kutusu seçeneğini kullanarak istekleri doğrula'yı seçin. Son olarak, uygulamanızın alan adını sağlayın. Yerel geliştirme için, yazın yerel ana bilgisayar alan adı olarak.

Uygulamanızı kaydettikten sonra, site sizi oluşturduğunuz gizli anahtar ve site anahtarlarıyla yeni bir sayfaya yönlendirecektir.

Bir React İstemcisi Oluşturun

Bu proje iki yönlüdür: Google reCAPTCHA ile basit bir giriş formu oluşturan bir React istemcisi ve Bir kullanıcı reCAPTCHA'yı tamamladıktan sonra oluşturulan belirteci doğrulamak için reCAPTCHA'nın API'sine POST istekleri yapan ekspres arka uç meydan okumak.

Proje dosyalarınızı barındırmak için yerel olarak bir proje klasörü oluşturun. Sonraki, React uygulamasını oluştur ve mevcut dizini istemcininkiyle değiştirin. İstemci klasörünüzün kök dizininde, API gizli anahtarını ve site anahtarını depolamak için bir .env dosyası oluşturun.

REACT_APP_reCAPTCHA_SITE_KEY = 'Site anahtarı'
REACT_APP_reCAPTCHA_SECRET_KEY = 'gizli anahtar'

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub deposu.

Gerekli Paketleri Kurun

Axios'u yükleyin, tarayıcıdan ve React-Google-reCAPTCHA'dan HTTP istekleri yapmak için bu kitaplığı kullanacaksınız. Bu paket, reCAPTCHA API için React'e özgü bir uygulama sağlar.

npm install tepki-recaptcha-google axios --save

Google reCAPTCHA'yı React Uygulamasına entegre edin

Aç src/App.js dosyası, standart React kodunu silin ve aşağıdaki kodu ekleyin:

Bu bileşen, Google reCAPTCHA widget'ını içeren basit bir giriş formu oluşturacaktır.

İlk önce React, Axios ve tepki-google-recaptcha paketlerini içe aktarın:

içe aktarmak Tepki, { useState, useRef } itibaren'tepki';
içe aktarmak eksenler itibaren"eksen";
içe aktarmak ReCAPTCHA itibaren"react-google-recaptcha";

Ardından üç durum değişkeni tanımlayın: SuccessMsg, errorMsg ve validToken. Başarılı form gönderimi ve reCAPTCHA doğrulaması sonrasında kodunuz bu durumları güncelleyecektir. Ek olarak, siteyi ve gizli anahtarları ENV dosyasından alın.

işlevUygulama() {
sabit [BaşarıMsg, setSuccessMsg] = useState("")
sabit [ErrorMsg, setErrorMsg] = useState("")
sabit [valid_token, setValidToken] = useState([]);
sabit SITE_KEY = işlem.env. REACT_APP_reCAPTCHA_SITE_KEY;
sabit SECRET_KEY = işlem.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Bir kullanıcı reCAPTCHA sınamalarını tamamladıktan sonra oluşturulan belirteci yakalamak için reCAPTCHA bileşenine başvuran bir useRef kancası tanımlayın.

sabit captchaRef = kullanRef(hükümsüz);

Ardından, bir kullanıcı oturum açma formunu gönderdiğinde çağrılacak bir handleSubmit işlevi oluşturun. Bu işlev, belirteci reCAPTCHA bileşeninden alır ve ardından Sıfırla sonraki kontrollere izin vermek için reCAPTCHA'yı sıfırlama yöntemi.

Ek olarak belirtecin var olup olmadığını kontrol eder ve belirteci doğrulamak için correctToken işlevini çağırır. Belirteci doğruladıktan sonra, validToken durumunu API yanıt verileriyle güncelleyecektir.

sabit işlemeGönder = zaman uyumsuz (e) => {
 e.preventDefault();
izin vermek simge = captchaRef.current.getValue();
 captchaRef.current.reset();
eğer (jeton) {
izin vermek geçerli_belirteç = beklemek doğrulamaToken (belirteç);
 setValidToken (geçerli_token);
eğer (geçerli_belirteç[0].başarı doğru) {
konsol.kayıt("doğrulandı");
 setSuccessMsg("Yaşasın!! formu gönderdiniz")
 } başka {
konsol.kayıt("Doğrulanmadı");
 setErrorMsg(" Üzgünüm!! Bot olmadığınızı doğrulayın")
 }
 }
 }

Son olarak, istek gövdesindeki reCAPTCHA belirtecini ve gizli anahtarı ileterek, Axios kullanarak bir Ekspres sunucu uç noktasına bir POST isteği gönderecek olan correctToken işlevini tanımlayın. İstek başarılı olursa, yanıt verilerini APIResponse dizisine gönderir ve sonuç olarak diziyi döndürür.

sabit doğrulamaToken = zaman uyumsuz (belirteç) => {
izin vermek API Yanıtı = [];
denemek {
izin vermek cevap = beklemek Axios.post(` http://localhost: 8000/verify-token`, {
 reCAPTCHA_TOKEN: belirteç,
 Gizli_Anahtar: SECRET_KEY,
 });
 APIResponse.push (yanıt['veri']);
geri dönmek API Yanıtı;
 } yakalamak (hata) {
konsol.log (hata);
 }
 };

Son olarak, reCAPTCHA bileşeniyle bir form döndürün. Bu bileşen, reCAPTCHA widget'ını yapılandırmak ve görüntülemek için referans kancasını ve site anahtarını donanım olarak alır.

Bir kullanıcı formu gönderdiğinde bileşen, validToken durumunun değerine göre bir başarı veya hata mesajı oluşturur. reCAPTCHA belirteci geçerliyse, yani bir kullanıcı reCAPTCHA sınamalarını başarıyla tamamladıysa başarı mesajını, aksi takdirde hata mesajını görüntüler.

geri dönmek (
"Uygulama">
"Uygulama başlığı"> 
"Giriş Formu">


 {geçerli_token.uzunluk > 0 && geçerli_belirteç[0].başarı doğru
? <h3sınıf adı="metin Başarısı">{Başarı Mesajı}h3>
: <h3sınıf adı="metin Hatası">{ErrorMsg} h3>}


Kullanıcı Adı</p>
"metin" yer tutucu="Kullanıcı adı..." />




Şifre</p>
"şifre" yer tutucu = "Şifre..." />


 sınıfAdı="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />








ihracatvarsayılan Uygulama

Son olarak, geliştirme sunucusunu çalıştırın ve tarayıcınıza gidin. http://localhost: Sonuçları görüntülemek için 3000.

Ekspres Arka Ucu Oluşturun

Başlamak için, tüm proje klasörünün kök dizininde, bir Express web sunucusu oluşturun, ve şu paketleri kurun:

npm ekspres kors eksenleri vücut ayrıştırıcısını kurar

Ekspres Sunucuyu Kurma

Ardından, server proje klasöründeki index.js dosyasını açın ve şu kodu ekleyin:

sabit ifade = gerekmek('ifade etmek')
sabit eksenler = gerekmek("eksen");
sabit korlar = gerekmek('kors');
sabit uygulama = ekspres();
sabit vücutAyrıştırıcı = gerekmek('vücut ayrıştırıcı');
sabit jsonParser = bodyParser.json();
sabit PORT = işlem.env. LİMAN || 8000;


app.use (jsonParser);
app.use (kors());


uygulama.post("/ doğrulama belirteci", zaman uyumsuz (gerekli, res) => {
sabit { reCAPTCHA_TOKEN, Secret_Key} = req.body;


denemek {
izin vermek cevap = beklemek eksen.post(` https://www.google.com/recaptcha/api/siteverify? sır=${Secret_Key}&yanıt=${reCAPTCHA_TOKEN}`);
konsol.log (yanıt.veri);


geri dönmek res.status(200).json({
 başarı:doğru,
 İleti: "Jeton başarıyla doğrulandı",
 doğrulama_bilgisi: yanıt.veri
 });
 } yakalamak(hata) {
konsol.log (hata);


geri dönmek res.status(500).json({
 başarı:YANLIŞ,
 İleti: "Jeton doğrulanırken hata oluştu"
 })
 }
});
app.listen (BAĞLANTI NOKTASI, () => konsol.kayıt(`Uygulama bağlantı noktasında başladı ${PORT}`));

Bu kod aşağıdakileri yapar:

  • Sunucu, Google'ın reCAPTCHA API'sine eşzamansız bir HTTP POST isteği yapan bir Gönderi yolu tanımlar. istek URL'sinde kimlik doğrulama için gizli anahtarı ileterek Axios'u kullanarak reCAPTCHA jetonunu doğrulayın.
  • reCAPTCHA belirteci başarıyla doğrulanırsa sunucu, true olarak ayarlanmış bir "success" özelliği, bir "message" özelliği içeren bir JSON nesnesi ile yanıt verir. belirtecin başarıyla doğrulandığını ve Google'ın doğrulama yanıtıyla ilgili bilgileri içeren bir "verification_info" özelliğini belirtir. API.
  • Doğrulama işlemi sırasında bir hata oluşursa, sunucu aşağıdakileri içeren bir JSON nesnesiyle yanıt verir: "success" özelliği false olarak ayarlandı ve "message" özelliği, doğrulamada bir hata olduğunu gösterdi. jeton.

Son olarak, düğüm sunucusunu çalıştırın ve reCAPTCHA özelliğinin işlevselliğini test edin.

düğüm index.js

reCAPTCHA'lar Spambot'lara Karşı Güvenliği Garanti Edebilir mi?

Google'a göre, reCAPTCHA hizmetinin başarı oranı %99'un üzerinde, bu da spam'in yalnızca küçük bir yüzdesinin reCAPTCHA güvenlik özelliğini atlayabileceği anlamına geliyor.

Kararlı kötü aktörler yine de geçici çözümler bulabildiğinden, reCAPTCHA kusursuz değildir. Ancak istenmeyen posta robotlarından kaynaklanan riski önemli ölçüde azaltabilen önemli bir araç olmaya devam ediyor.