Yükleniyor...

Birazdan kaldığınız yerden devam edeceksiniz.

Node.js ve React ile reCAPTCHA Nasıl Entegre Edilir?

YayınlandıGüncellendi

Node.js ve React kullanarak reCAPTCHA nasıl entegre edilir, adım adım anlatıyoruz. reCAPTCHA v2 ile v3 farklarını, frontend ve backend doğrulama süreçlerini sade ve anlaşılır kod örnekleriyle açıklıyoruz. Form güvenliğini artırmak için kapsamlı bir rehberdir.

Node.js ve React ile reCAPTCHA Nasıl Entegre Edilir?

reCAPTCHA Nedir ve Neden Kullanılır?

reCAPTCHA, Google’ın geliştirdiği bir güvenlik sistemidir. Formlara gelen isteklerin bot mu yoksa gerçek kullanıcı mı olduğunu ayırt etmek için kullanılır. Özellikle login, kayıt ve iletişim formlarında güvenlik katmanı oluşturur. reCAPTCHA v2, kullanıcıdan onay isterken; v3, arka planda skor üretir. v2 daha güvenli, v3 daha kullanıcı dostudur. Ancak v3’te skor analizi gerektiği için backend doğrulama da önemlidir. Her iki versiyon da bot saldırılarını engellemek, spam kayıtları azaltmak ve form kötüye kullanımını önlemek için kullanılır. Kullanımı ücretsizdir ama yüksek trafiklerde ücretlendirme olabilir.

Google reCAPTCHA Hesabı ve Anahtar Oluşturma

reCAPTCHA’yı kullanmak için https://www.google.com/recaptcha/admin adresinden proje oluşturulmalı ve reCAPTCHA türü (v2 ya da v3) seçilmelidir. Uygulama alan adı girilir ve iki anahtar alınır: Site Key (frontend için) ve Secret Key (backend için). Bu anahtarlar .env dosyasında saklanmalı, özellikle Secret Key asla client tarafına sızdırılmamalıdır. Site Key React uygulamasında gösterilirken, Secret Key ile sunucu tarafında token doğrulaması yapılır. Panelde doğrulama başarı oranlarını ve kullanıcı skorlarını içeren istatistikler de görüntülenebilir.

React Frontend Uygulamasında reCAPTCHA v2 Kullanımı

React ile reCAPTCHA kullanmak oldukça basittir. Bunun için react-google-recaptcha adlı kütüphane kullanılır. Bu kütüphane Google reCAPTCHA v2 için hazır bir bileşen sunar. Kurulum için aşağıdaki komut yazılır:

snippet.sh
bash1 satırUTF-8

React bileşeni içinde ReCAPTCHA komponenti çağrılır ve sitekey prop’u verilerek yapılandırılır. Aşağıdaki örnek, bir form bileşeni içinde reCAPTCHA’yı nasıl kullandığımızı gösterir.

snippet.jsx
jsx43 satırUTF-8

Node.js ile reCAPTCHA Doğrulaması

Backend tarafında reCAPTCHA token’ının doğrulanması gerekir. Google, https://www.google.com/recaptcha/api/siteverify adresinden bu işlemi yapar. İstek POST yöntemi ile yapılır. Aşağıda, Express.js ile token doğrulama işleminin örneği yer alır.

snippet.js
js32 satırUTF-8

reCAPTCHA v2 vs v3: Hangi Durumda Hangisi?

  • v2 daha güvenlidir çünkü kullanıcıdan manuel onay alınır. Ancak kullanıcı deneyimini bozar.
  • v3 kullanıcı deneyimini bozmaz, arka planda skor üretir. Fakat %100 doğruluk vermez.
  • Formlarınız çok hassassa (login, ödeme), v2 önerilir.
  • Daha kullanıcı dostu senaryolar (yorum yazma, e-posta gönderme) için v3 idealdir.
  • v3 ile backend'de skor kontrolü yapmak gerekir. Genellikle 0.5 üstü kabul edilir.

Akış Diyagramı

Kullanıcı → Form → ReCAPTCHA Token → Backend → Google Siteverify → Sonuç → Aksiyon


Sıkça Sorulanlar

reCAPTCHA ne kadar güvenli?

Google reCAPTCHA, botları ayırt etme konusunda oldukça başarılıdır. Ancak çok gelişmiş botlar hala bazı açıkları aşabilir. Bu yüzden reCAPTCHA, diğer güvenlik önlemleriyle birlikte kullanılmalıdır.

v2 mi v3 mü kullanmalıyım?

Eğer kullanıcı doğrulaması çok önemliyse v2 (checkbox) daha sağlamdır. Ancak kullanıcı akışını bozmamak için v3 daha uygundur. Arka planda çalışır, görünmezdir.

Invisible reCAPTCHA nedir?

Invisible reCAPTCHA, checkbox yerine otomatik olarak kullanıcı davranışını analiz ederek çalışan bir v2 türevidir. Kullanıcıdan ek aksiyon istemez.