Kuika'nın Recaptcha elementi, uygulamalarınızı otomatik işlemlerden ve botlardan korur. Kullanıcı dostu bir doğrulama süreci sunarak yalnızca gerçek kullanıcıların erişim sağlamasını garanti eder. Bu element, özellikle formlar ve giriş ekranlarında güvenliği artırmak için idealdir. Bu eğitim içeriğinde, Recaptcha elementini nasıl kullanacağınızı ve doğrulama ayarlarını nasıl yapılandıracağınızı öğreneceksiniz.
Bu eğitim içeriği aşağıdaki başlıklardan oluşur:
Recaptcha elementi ekleme
Recaptcha doğrulama ayarları
ReCaptcha kullanımı için gereken ayarlar
Elements ayarları ve özelleştirme
ReCaptcha Elementi Ekleyin
Kuika platformuna giriş yapın.
Apps ekranından çalışacağınız projeyi seçin.
UI Design modülüne girin.
Sol kenardaki Elements panelinden, Interactive kategorisi altındaki Recaptcha elementini sürükleyerek ekranınıza bırakın.
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:
"Key Identifier" alanı için "Certificates, Identifiers & Profiles" bölümünden oluşturulan key’in "KEY ID"’sini alın.
"Team ID" alanı için, aynı sayfada sağ üstte isminizin altında görünen kodu kullanın.
Domain adı kaydedildikten sonra, Key Type alanından ilgili seçenekleri belirleyerek "Create Key" butonuna tıklayın.
Oluşturulan key, sayfada listelenecektir.
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.
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.
Element Ayarları ve Özelleştirme
Authorization (Yetkilendirme)
Anonymous Access: Kullanıcıların hesap bilgisi girmeden erişmesini sağlar.
All Roles Access: Kullanıcıların hesap bilgileri doğrulanarak erişim sağlanır.
Element düzeyinde yetkilendirme için Properties panelinden Authorization ayarlarını düzenleyin.
Visibility (Görünürlük)
Always Visible: Element her zaman görünür.
Hidden: Element gizlenir.
Sometimes Visible: Element, belirli bir koşula bağlı olarak görünür.
Ayarı yapılandırmak için:
Ekrandaki elementi seçin.
Sağ kenardaki Properties panelini açın.
Visibility alanında ihtiyacınıza göre bir seçenek belirleyin.
Editability (Düzenlenebilirlik)
Enabled: Element düzenlenebilir.
Disabled: Element düzenlenemez.
Sometimes Enabled: Element, belirli koşullara göre düzenlenebilir veya düzenlenemez.
Style Panel ile Arayüz Tasarımı
Elementlerinizi Styling Panel ile özelleştirerek, web ve mobil uygulamalarınız için etkileyici arayüzler oluşturabilirsiniz. Bu bölümde, aşağıdaki ayarları yapılandırabilirsiniz:
Layout (Düzen): Boyutlandırma, hizalama ve iç boşluk (padding) ayarları. Ayarlar arasında Size, Min Size ve Align bulunur.
Text (Metin): Yazı tipi, stil, renk, boyut ve aralık ayarları.
Fill (Dolgu): Arka planı renk veya görsellerle özelleştirme.
Border (Kenarlık): Kenarlık ekleme ve köşe yarıçapı ayarları.
Shadow (Gölge): Elementlere derinlik katmak için gölge efekti ekleme.
Bu adımları takip ederek, Area Chart elementini ihtiyaçlarınıza uygun şekilde yapılandırabilirsiniz.
Actions (Aksiyonlar)
Kuika, aşağıdaki sistem aksiyonlarını destekler:
Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration ve String Operations.
Kendi oluşturduğunuz SQL aksiyonlarını da kullanabilirsiniz.
Aksiyon eklemek için Properties panelinden +ADD ACTION butonunu kullanabilirsiniz.
Actions desteği bazı elementlerde geçerli olmayabilir.