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:

WEB Key Alma

  1. Google ReCaptcha Anahtar Oluşturma sayfasına gidin.
  1. "Go to reCAPTCHA" butonuna tıklayın.
  1. "Select a project" butonuna basarak devam edin.
  1. Proje yoksa New Project butonu ile yeni bir proje oluşturun. 
  1. Proje adını girerek "Create" butonuna tıklayın.
  1. Açılan sayfada "Enable" butonuna basın.
  1. Ardından "Create Key" butonuna tıklayın.
  1. "Display Name" alanını doldurun ve "Choose Platform Type" olarak "Website" seçin.
  2. Açılan alana web sayfanızın domain adını girin ve "Done" butonuna basın.
  1. Domain adı kaydedildikten sonra, Key Type alanından ilgili seçenekleri belirleyerek "Create Key" butonuna tıklayın.
  1. Oluşturulan key, sayfada listelenecektir.
  2.  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.
  1. Bundle ID’yi kayıt ettikten sonra hemen altında Apple Developer settings alanıyla devam edeceğiz. 
  2. Apple Developer hesabınıza giriş yaparak Certificates, Identifiers & Profiles sayfasına gidin.
  1. "Keys" sekmesinden "+" butonuna tıklayarak yeni bir "Private Key (.p8)" dosyası oluşturun.
  1. "Key Name" girerek "Register" butonuna tıklayın ve "Download" butonuna basarak .p8 dosyasını indirin.
.p8 dosyası sadece bir kez indirilebilir.
  1. İndirilen .p8 dosyasını ReCaptcha sayfasına yükleyin.
  1. "Key Identifier" alanı için "Certificates, Identifiers & Profiles" bölümünden oluşturulan key’in "KEY ID"’sini alın.
  2. "Team ID" alanı için, aynı sayfada sağ üstte isminizin altında görünen kodu kullanın.
  3. Domain adı kaydedildikten sonra, Key Type alanından ilgili seçenekleri belirleyerek "Create Key" butonuna tıklayın.
  4. 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.
  1. "App Settings" sekmesinde ve "Google Recaptcha" alanını bulun. Detaylı bilgi için Configuration Manager içeriğimizi inceleyebilirsiniz. 
  2. "Add New" butonuna tıklayın.
  1. Açılan pencerede "Name" alanını isteğe göre doldurun.
  2. "Site Key" ve "Secret Key" alanlarını, Google tarafından oluşturulan Web Key içindeki değerlerden alın.
  3. Google Recaptcha sayfasına geri dönüp oluşturduğumuz web key içinde Key Details butonuna tıklanır.
  1. Details sayfasında Integrations sekmesine gelinir ve “Integrate with a third-party service or plugin” butonuna tıklanır.
  2. Gelen penceredeki ise Secret Key olur.
    • "ID" değeri -> "Site Key"
    • "Secret Key" değeri -> "Secret Key"
  3. 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.