Kuika’nın Recaptcha elementi, uygulamalarınızı botlar ve otomatik işlemlere karşı korumak amacıyla kullanılır. Kullanıcıdan doğrulama alarak yalnızca gerçek kullanıcıların belirli işlemleri gerçekleştirmesine izin verir ve spam, kötü amaçlı istekler veya otomatik form gönderimlerini engeller.
Recaptcha elementi, özellikle form gönderimleri, kayıt (sign up), giriş (login), iletişim formları ve kritik işlem adımları gibi güvenlik gerektiren senaryolarda önemli bir rol oynar. Kullanıcı doğrulaması, arka planda çalışarak kullanıcı deneyimini minimum düzeyde etkilerken uygulama güvenliğini artırır.
Recaptcha elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Form gönderimlerinin korunması: İletişim formları, geri bildirim formları veya destek taleplerinde bot kaynaklı spam gönderimlerini engellemek için kullanılır.
Kayıt (Sign Up) ve giriş (Login) ekranları: Otomatik hesap oluşturma veya giriş denemelerini önlemek amacıyla kullanıcı doğrulaması sağlar.
Şifre sıfırlama ve doğrulama adımları: Şifre yenileme, e-posta doğrulama veya güvenlik adımlarında kötüye kullanım riskini azaltır.
Ödeme ve kritik işlem adımları: Sipariş oluşturma, ödeme başlatma veya önemli veri gönderimleri öncesinde gerçek kullanıcı doğrulaması yapmak için kullanılır.
2. Temel Özellikler
Bot ve otomatik işlemlere karşı koruma sağlar. Recaptcha elementi, uygulamaya yapılan otomatik ve kötü niyetli istekleri engelleyerek yalnızca gerçek kullanıcıların işlem yapmasını sağlar.
Güvenlik seviyesini artırır. Spam gönderimler, bot kayıtları ve otomatik saldırılara karşı uygulamanın genel güvenliğini güçlendirir.
Doğrulama sonucunu aksiyonlarda kullanabilme. Recaptcha doğrulamasının başarılı veya başarısız olmasına göre farklı aksiyon akışları kurgulanabilir.
2.1. ReCaptcha Elementi Kullanımı İçin Gereken Ayarlar
ReCaptcha elementini kullanabilmek için, her platform (Web, Android, iOS) için farklı key bilgileri gerekmektedir. Google ReCaptcha hizmetinden alınacak bu anahtarlar, platforma özel olarak oluşturulmalıdır. Web, Android ve iOS için ayrı ayrı alınan key bilgileri, doğru doğrulama süreci sağlamak için her platforma özgü olarak Configuration Manager modülündeki Google Recaptcha alanına girilmelidir.
Google Console ReCaptcha Ayarları Google ReCaptcha anahtarlarını almak için aşağıdaki adımları takip edin:
Proje yoksa New Project butonu ile yeni bir proje oluşturun.
Proje adını girerek "Create" butonuna tıklayın.
Açılan sayfada "Enable" butonuna basın.
Ardından "Create Key" butonuna tıklayın.
Display Name alanı, key’lerin listelendiği ekranda nasıl görünmesi isteniyorsa o şekilde doldurulmalıdır.
Application Type alanı için Website seçeneği seçilir.
Domain List alanına, eklenen sitenin domain adresi girilir. (İsteğe bağlı olarak devre dışı bırakılabilir; ancak güvenlik açısından önerilmez.)
Gerekli adımlar tamamlandıktan sonra Next Step butonuna tıklanır.
Burada isteğe bağlı olarak oluşturulan key ile ilgili seçenekler aktif edilir.
Bu örnekte test amaçlı bir key oluşturulduğu için aşağıdaki seçimler yapılmıştır. Kendi key’inizi oluştururken ilgili alanları ihtiyaçlarınıza ve kullanım senaryonuza göre değerlendirerek seçim yapabilirsiniz.
Gerekli adımlar tamamlandıktan sonra sayfanın alt kısmında yer alan Create Key butonuna tıklanarak key oluşturulur. Açılan ekranda geri ok simgesine tıklayarak oluşturduğunuz key’i key listesi sayfasında görüntüleyebilirsiniz.
Oluşturulan key, sayfada listelenecektir.
Android Key Alma
ReCaptcha sayfasında key’lerin listelendiği alanda bulunan Create Key butonuna tıklayın.
Display Name alanını, key’in listede nasıl görünmesini istiyorsanız o şekilde doldurun.
Application Type alanı için Android seçeneğini seçin.
Domain List alanına, eklediğiniz sitenin domain adresi girilir. (Domain List alanına ilişkin detaylı açıklamayı bu rehberin sonraki adımlarında bulabilirsiniz.)
Android seçimi yapıldıktan sonra açılan alana, Kuika platformunda oluşturduğunuz projenin Configuration Manager → Android sekmesinde bulunan Bundle ID bilgisini girin.
Done butonuna tıklayarak Bundle ID bilgisini kaydedin.
Gerekli adımları tamamladıktan sonra Next Step butonuna tıklayın.
Açılan ekranda, oluşturulan key için isteğe bağlı seçenekleri ihtiyaçlarınıza göre belirleyin.
Son olarak Create Key butonuna tıklayarak key’i oluşturun.
Oluşturulan key’i görüntülemek için açılan sayfada geri ok simgesine tıklayın. Key, key listesi sayfasında görüntülenecektir.
iOS Key Alma
ReCaptcha sayfasında key’lerin listelendiği alanda bulunan Create Key butonuna tıklayın.
Display Name alanını, key’in listede nasıl görünmesini istiyorsanız o şekilde doldurun.
Application Type alanı için iOS app seçeneğini seçin.
Domain List alanına, eklediğiniz sitenin domain adresi girilir. (Domain List alanına ilişkin detaylı açıklamayı bu rehberin sonraki adımlarında bulabilirsiniz.)
Açılan alana, Kuika platformunda oluşturduğunuz projenin Configuration Manager → iOS sekmesinde bulunan Bundle ID bilgisini girin.
Done butonuna tıklayarak Bundle ID bilgisini kaydedin.
Apple Developer Ayarları
Bundle ID kaydedildikten sonra sayfanın alt kısmında yer alan Apple Developer Settings alanını yapılandırmanız gerekir. Bu bilgiler Apple Developer hesabı üzerinden alınacaktır.
Certificates, Identifiers & Profiles bölümünde Keys sekmesine geçin.
Yeni bir Private Key (.p8) oluşturmak için + butonuna tıklayın.
Key Name alanını doldurun ve listeden gerekli seçeneği işaretleyin.
Register butonuna tıklayın.
Açılan ekranda Download butonuna tıklayarak .p8 uzantılı dosyayı indirin.
.p8 dosyası yalnızca bir kez indirilebilir. Her private key için tek indirme hakkı bulunmaktadır.
Private Key Bilgilerinin Eklenmesi
İndirilen .p8 dosyasını, iOS key oluşturma sayfasındaki ilgili alana Browse seçeneği ile yükleyin.
Key Identifier alanı için, Certificates, Identifiers & Profiles → Keys sekmesinde oluşturduğunuz key’in KEY ID değerini kullanın.
Team ID alanı için, aynı sayfada sağ üst bölümde adınızın altında yer alan Team ID kodunu girin.
Key Oluşturma
Apple ayarlarını tamamladıktan sonra Next Step butonuna tıklayın.
Açılan ekranda, oluşturulan key için isteğe bağlı seçenekleri ihtiyaçlarınıza göre belirleyin.
Son olarak Create Key butonuna tıklayarak key’i oluşturun.
Key oluşturulduktan sonra açılan sayfada geri ok simgesine tıklayarak oluşturulan key’i key listesi sayfasında görüntüleyebilirsiniz.
Kuika ReCaptcha Entegrasyonu
Bu aşamaya kadar Web, Android ve iOS key’leri oluşturduk. Şimdi aldığımız key’leri Kuika platformunda kullanacağız.
Eğer mobil uygulama için kullanacaksanız öncelikle mobil uygulama oluşturmanız gerekmektedir. Mobil uygulama oluşturmak için ilgili içeriğimize ulaşabilirsiniz.
WEB Entegrasyonu
"Configuration Manager" modülüne gidin.
"App Settings" sekmesinde ve "Google Recaptcha" alanını bulun. Detaylı bilgi için Configuration Manager içeriğimizi inceleyebilirsiniz.
"Add New" butonuna tıklayın.
Açılan pencerede "Name" alanını isteğe göre doldurun.
"Site Key" ve "Secret Key" alanlarını, Google tarafından oluşturulan Web Key içindeki değerlerden alın.
Details sayfasında Integrations sekmesine gidilir ve Integrate with a third-party service or plugin butonuna tıklanır.
Google Recaptcha sayfasına geri dönüp oluşturduğumuz web key içinde Key Details butonuna tıklanır.
Details sayfasında Integrations sekmesine gelinir ve “Integrate with a third-party service or plugin” butonuna tıklanır.
Gelen penceredeki ise Secret Key olur.
"ID" değeri -> "Site Key"
"Secret Key" değeri -> "Secret Key"
Gerekli bilgileri girdikten sonra Configuration Manager modülündeki alana kaydedin. Android ve iOS uygulamalar için de benzer adımları takip ederek konfigürasyon oluşturabilirsiniz.
Android Entegrasyonu
"Configuration Manager" modülüne gidin.
"Android" sekmesinde sayfanın en altına inerek "Google Recaptcha" alanını bulun.
Bu adımları tamamladıktan sonra, UI Design modülüne geri dönün.
ReCaptcha elementine sağ kenardaki ADD VALIDATION butonundan Validation ekleyin.
Daha sonra, Recaptcha doğrulamasını eklemek istediğiniz butona OnClick→ Verification→ Verify ReCaptcha Token aksiyonunu ekleyin. Eğer çıkış işlemi gerekiyorsa, Logout aksiyonunu ekleyin.
Yani, Recaptcha doğrulaması eklemek için, doğrulama yapılması gereken butona Verify ReCaptcha Token aksiyonunu, çıkış yapılması gereken butona ise Logoutaksiyonunu ekleyebilirsiniz.
Eğer doğrulama başarısız oluyorsa, Google Console'da key yapılandırmalarını kontrol edin.
API çağrılarında hata alıyorsanız, secret key'in doğru girildiğinden emin olun.
Eğer reCAPTCHA elementi sayfada görünmüyorsa, UI tarafındaki entegrasyonu kontrol edin ve eksik olan aksiyonları tamamlayın.
2.2. Recaptcha Elementine Eklenebilen Aksiyonlar
Recaptcha elementi, herhangi bir aksiyonu desteklemez ve doğrudan işlem başlatmaz. Kullanıcı doğrulama durumunu yalnızca kontrol amaçlı sağlar ve güvenlik için bir kontrol noktası olarak kullanılır. Doğrulama sonucuna bağlı işlemler, Recaptcha dışındaki elementler veya süreçler üzerinden yönetilmelidir.
3. ReCaptcha Elementi Nasıl Kullanılır?
Bu bölümde reCAPTCHA elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Sign In Ekranı – reCAPTCHA ile Güvenli Giriş
Bir iş yönetimi veya kurumsal uygulamada, kullanıcıların sisteme güvenli şekilde erişebilmesi için Sign In ekranı, reCAPTCHA doğrulaması entegre edilerek yapılandırılmıştır. Bu ekran, yetkisiz erişimleri ve otomatik giriş denemelerini engellemeyi hedeflerken kullanıcı deneyimini sade bir yapıda sunar.
Senaryoda:
Kullanıcı, e-posta adresi ve parola bilgilerini girerek giriş işlemini başlatır.
Giriş işlemi öncesinde, “Ben robot değilim” reCAPTCHA doğrulaması ile kullanıcı etkileşimi doğrulanır.
reCAPTCHA doğrulaması tamamlanmadan giriş işlemi gerçekleştirilemez ve kullanıcıya bilgilendirici bir uyarı mesajı gösterilir.
Doğrulama başarıyla tamamlandığında kullanıcı sisteme giriş yaparak uygulamanın ana ekranına yönlendirilir.
Adım 1 - Hazır Sign In Ekranına ReCaptcha Ekleme
UI Design modülünü açın:
Akademi üzerinde bulunan ReCaptcha Settings sayfası üzerinden gerekli adımları izleyerek Site Key ve Secret Key anahtarlarını oluşturun.
Kullanılan ReCaptcha tipi V2 Checkbox olarak ayarlanmalıdır.
Sol yan paneldeki Screens alanında her proje de hazır gelen Signin ekranına tıklayın.
Ekranda giriş butonu üzerine Elements > Interactive > ReCaptcha elementini ekleyin.
ReCaptcha elementinin yanındaki boşluğa tıklayın ve Col > Styling > Layout > Align > Dikeyde ve Yatayda Ortala olarak ayarlayın.
ReCaptcha’nın styling alanı mevcut değildir.
Adım 2 - Doğrulama Aksiyonunu Ekleme
Sign in sayfası içersindeki Sign In to Your Account buttonelementine tıklayın. Button elementine Add Action > onClick > Verification > Verify Recaptcha Token aksiyonunu ekleyin.
Eklenen aksiyonu aksiyon kutucuğu üzerine basılı tutarak ilk sıraya alın.
Sign In to Your Account buttonelementine tıklayın ve tanımlı aksiyonlarındaki Sign In aksiyonu içerisine seçeneklerinden Add Condition ile koşul ekleyin.
Koşul tanımlamasını Field > Action Result > VerifyRecaptchaToken ve diper alanları aşağıdaki gibi tanımlayın.
Son olarak ReCaptcha elementine tıklayın ve Add Validation alanından validasyon ekleyin.
İsteğe bağlı olarak ek bir validasyon eklenmediğinde, elementin kendi notification yapısı kullanılır.
Condition 1 yazısına tıklayın ve koşulu aşağıdaki gibi tanımlayın.
Invalid Message alanını “Lütfen reCAPTCHA doğrulamasını işaretleyin.” olarak güncelleyin.
Preview
Uygulama test edildiğinde, hazır giriş ekranında giriş işlemi sırasında reCAPTCHA doğrulaması zorunlu olacak şekilde yapılandırılmıştır. Kullanıcı doğrulamayı tamamlamadan giriş yapamaz ve doğrulama yapılmadığında ekranda bilgilendirici bir uyarı mesajı gösterilir. Bu yapı sayesinde giriş süreci hem güvenli hem de kontrollü bir şekilde yönetilirken, yetkisiz ve otomatik erişim denemelerine karşı ek bir güvenlik katmanı sağlanır.
4. Ortak Özellikler (Properties)
ReCaptcha elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
