1. Kuika platformuna giriş yapın.
2. Apps ekranından çalışacağınız projeyi seçin.
3. UI Design modülüne girin.

4. Sol kenardaki Elements panelinden, Interactive kategorisi altındaki Recaptcha elementini sürükleyerek ekranınıza bırakın.

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:

WEB Key Alma

1. Google ReCaptcha Anahtar Oluşturma sayfasına gidin.

2. "Go to reCAPTCHA" butonuna tıklayın.

3. "Select a project" butonuna basarak devam edin.

3. Proje yoksa New Project butonu ile yeni bir proje oluşturun. 

5. Proje adını girerek "Create" butonuna tıklayın.

6. Açılan sayfada "Enable" butonuna basın.

7. Ardından "Create Key" butonuna tıklayın.

8. "Display Name" alanını doldurun ve "Choose Platform Type" olarak "Website" seçin.
9. Açılan alana web sayfanızın domain adını girin ve "Done" butonuna basın.

10. Domain adı kaydedildikten sonra, Key Type alanından ilgili seçenekleri belirleyerek "Create Key" butonuna tıklayın.

11. Oluşturulan key, sayfada listelenecektir.
12.  Android ve iOS uygulamalar için de benzer adımları takip ederek key oluşturabilirsiniz. 

Android Key Alma

1. ReCaptcha sayfasında "Create Key" butonuna tıklayın.
2. "Display Name" alanını doldurun ve "Choose Platform Type" olarak "Android app" seçin.
3. "Bundle ID"’yi girin.
4. "Done" butonuna basarak kaydedin.
5. Gerekli seçenekleri belirleyerek "Create Key" butonuna tıklayın.
6. Oluşturulan key, sayfada listelenecektir.

iOS Key Alma

1. ReCaptcha sayfasında "Create Key" butonuna tıklayın.
2. "Display Name" alanını doldurun ve "Choose Platform Type" olarak "iOS app" seçin.
3. "Bundle ID"’yi girin.
4. "Done" butonuna basarak kaydedin.

5. Bundle ID’yi kayıt ettikten sonra hemen altında Apple Developer settings alanıyla devam edeceğiz. 
6. Apple Developer hesabınıza giriş yaparak Certificates, Identifiers & Profiles sayfasına gidin.

7. "Keys" sekmesinden "+" butonuna tıklayarak yeni bir "Private Key (.p8)" dosyası oluşturun.

8. "Key Name" girerek "Register" butonuna tıklayın ve "Download" butonuna basarak .p8 dosyasını indirin.

.p8 dosyası sadece bir kez indirilebilir.

9. İndirilen .p8 dosyasını ReCaptcha sayfasına yükleyin.

10. "Key Identifier" alanı için "Certificates, Identifiers & Profiles" bölümünden oluşturulan key’in "KEY ID"’sini alın.
11. "Team ID" alanı için, aynı sayfada sağ üstte isminizin altında görünen kodu kullanın.
12. Domain adı kaydedildikten sonra, Key Type alanından ilgili seçenekleri belirleyerek "Create Key" butonuna tıklayın.
13. 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

1. "Configuration Manager" modülüne gidin.

2. "App Settings" sekmesinde ve "Google Recaptcha" alanını bulun. Detaylı bilgi için Configuration Manager içeriğimizi inceleyebilirsiniz. 
3. "Add New" butonuna tıklayın.

4. Açılan pencerede "Name" alanını isteğe göre doldurun.
5. "Site Key" ve "Secret Key" alanlarını, Google tarafından oluşturulan Web Key içindeki değerlerden alın.
6. Google Recaptcha sayfasına geri dönüp oluşturduğumuz web key içinde Key Details butonuna tıklanır.

7. Details sayfasında Integrations sekmesine gelinir ve “Integrate with a third-party service or plugin” butonuna tıklanır.
8. Gelen penceredeki ise Secret Key olur.
   
   • "ID" değeri -> "Site Key"
   • "Secret Key" değeri -> "Secret Key"
9. 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

1. "Configuration Manager" modülüne gidin.
2. "Android" sekmesinde sayfanın en altına inerek "Google Recaptcha" alanını bulun.
3. "Add New" butonuna tıklayın.
4. "Name" alanını isteğe göre doldurun.
5. "Site Key" alanına, oluşturduğunuz Android Key’in "ID" değerini girin.
6. Gerekli bilgileri girdikten sonra kaydedin.

iOS Entegrasyonu

1. "Configuration Manager" modülüne gidin.
2. "iOS" sekmesinde sayfanın en altına inerek "Google Recaptcha" alanını bulun.
3. "Add New" butonuna tıklayın.
4. "Name" alanını isteğe göre doldurun.
5. "Site Key" alanına, oluşturduğunuz iOS Key’in "ID" değerini girin.
6. Gerekli bilgileri girdikten sonra kaydedin.

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 Logout aksiyonunu ekleyebilirsiniz. Daha fazla bilgi için "Verify ReCaptcha Token" dokümanını inceleyebilirsiniz. 

Hata ve Sorun Giderme

1. Eğer doğrulama başarısız oluyorsa, Google Console'da key yapılandırmalarını kontrol edin.
2. API çağrılarında hata alıyorsanız, secret key'in doğru girildiğinden emin olun.
3. Eğer reCAPTCHA elementi sayfada görünmüyorsa, UI tarafındaki entegrasyonu kontrol edin ve eksik olan aksiyonları tamamlayın.

Authorization (Yetkilendirme)

Element düzeyindeki erişim kontrolünü yönetmek için, Properties panelindeki Authorization bölümünü kullanabilirsiniz.

Erişim Tipleri

Anonymous

Elementin tüm kullanıcılar tarafından, giriş yapmadan görüntülenmesine izin verir.

Restricted

Erişimin yalnızca doğrulanmış kullanıcılara veya belirli rollere göre sınırlandırılmasını sağlar.

• Everyone: Aktif edildiğinde, giriş yapmış tüm kullanıcılar elemente erişebilir.
• Roles: Elemente erişmesine izin verilen roller buradan seçilir. Rol listesini düzenlemek için Roles alanının yanındaki dişli (⚙️) ikonuna tıklayarak Role Management penceresini açabilirsiniz. Bu pencereden yeni rol ekleyebilir, klasör oluşturabilir veya mevcut rolleri yönetebilirsiniz.

Unauthorized Behavior (Hide / Disable)

Kullanıcı gerekli role sahip değilse, elementin nasıl davranacağını Choose alanından belirleyebilirsiniz:

• Hide: Kullanıcı yetkili değilse element tamamen gizlenir ve ekranda görünmez.
• Disable: Element görünür kalır ancak tıklanamaz / kullanılamaz hâle gelir.

Bu ayar, yetkisiz kullanıcıların elementle nasıl karşılaşacağını yönetmeniz için kullanılır.

Visibility (Görünürlük)

Always Visible: Element her zaman görünür.
Hidden: Element gizlenir.
Sometimes Visible: Element, belirli koşullara bağlı olarak görünür.

Sometimes Visible seçeneği kullanıldığında AND / OR grupları doğrudan eklenebilir ve görünürlük kuralları birlikte gruplandırılarak daha karmaşık senaryolar rahatlıkla yönetilebilir.

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.