iFrame kullanarak One Tap'i entegre etme

Google One Tap, kendi web sitenizin barındırdığı bir iframe (bundan sonra Ara iFrame olarak anılacaktır) içinde oluşturulabilir. Ara iframe kullanıldığında One Tap kullanıcı deneyiminde algılanabilir herhangi bir değişiklik yoktur.

Orta düzey iframe tabanlı entegrasyon, bazı esneklikler ve riskler getirir:

  • One Tap için yerleşik kullanıcı deneyimi ve sonraki kullanıcı deneyimi akışı.

    One Tap kullanıcı deneyimi tamamlandıktan sonra, sonraki kullanıcı deneyimi akışını ara iframe'in içinde görüntüleyebilirsiniz. Böylece, hem One Tap hem de sonraki kullanıcı deneyimi mevcut içerik sayfasına yerleştirilebilir. Aşağıdaki örneğe bakın.

    Ara iframe'e sahip yerleştirilmiş kullanıcı deneyimi örneği.

    Ara iframe olmadan, normalde sonraki kullanıcı deneyimi akışını görüntülemek için tam sayfada gezinmeniz gerekir. Bu, bazı durumlarda rahatsız edici olabilir.

  • Tek Tek ve Her Yerde Görüntülü Reklam Ağı'nı entegre edin.

    One Tap entegrasyon kodlarının tamamı (One Tap API çağrısı ve sonraki kullanıcı deneyimi işleme) ara iframe'e dahildir. One Tap'in görüntülenebileceği içerik sayfalarında tek yapmanız gereken ara iframe'i yerleştirmektir.

    Bu mimari, endişelerin birbirinden ayrılmasını sağlayarak entegrasyon ve bakım maliyetinizi azaltır.

  • Kimlik Jetonu Sergilenme Kapsamını sınırlayın.

    Kimlik jetonları doğrudan ara iframe tarafından tüketilir. Hiçbir zaman içerik sayfalarına gösterilmez. Bu mimari, kimlik jetonlarının gösterim kapsamını önemli ölçüde azaltabilir.

    Ara iframe yöntemi, girişle ilgili ayrı bir alt alan (örneğin,login.example.com) ve içerikle ilgili birden fazla alt alan (örneğin, spor.example.com ve games.example.com) olan web sitelerinde de iyi sonuç verir.

  • One Tap ile Alanları Görüntüleme.

    Google'ın OAuth politikaları uyarınca, OAuth yanıtları alan tüm alanların Google API Konsolu'nda ön kayıt yaptırması gerekir. Normal One Tap entegrasyonuyla, kimlik jetonları bu alanlara geri aktarılacağı için geliştiricilerin One Tap'in gösterebileceği tüm alanlara ön kayıt yaptırması gerekir. Bazı web siteleri, kullanıcılarının dinamik olarak alt alanlar oluşturmasına olanak tanır. Bu alt alanların ön kayıt yaptırması mümkün değildir. Sonuç olarak, One Tap dinamik olarak oluşturulan bu alt alanlarda görüntülenemez.

    Bu sorun, ara iframe'den yararlanarak düzeltilebilir. Bu durumda, yalnızca ara iframe'in alanının ön kayıt yaptırılması gerekir. Kimlik Jetonları bu içerik sayfalarında görünmediğinden, içerik sayfası alan adlarının kaydedilmesine gerek yoktur.

  • AMP Desteği.

    Varsayılan olarak, aşağıdaki nedenlerden dolayı Google One Tap AMP sayfalarında görüntülenemez.

    1. Özel JS kitaplığına veya koduna izin verilmiyor.

    2. AMP önbelleği, sayfayı başka bir (AMP Görüntüleyici'ye ait) alandan oluşturabilir.

    Bu sorun, ara iframe mimarisinden yararlanarak düzeltilebilir. One Tap entegrasyonu ara iframe'de tamamlandıktan sonra, geliştiriciler <amp-onetap-google> bileşeni ekleyerek AMP sayfalarına yerleştirebilirler.

    Aynı ara iframe hem AMP sayfaları hem de AMP olmayan HTML sayfaları tarafından yeniden kullanılabilir.

  • Gizlilik Riskleri.

    Geliştiriciler, ara iframe'lerin beklenmeyen alanlara yerleştirilmesini önlemek için önlemler almalıdır. Örneğin, kötü amaçlı.com ortadaki iframe'inizi yerleştirebilir ve böylece One Tap kullanıcı deneyiminizi web sitesinde görüntüleyebilir. Bu kesinlikle son kullanıcıların gizlilikle ilgili çok fazla endişe duymasına neden olacaktır.

  • Güvenlik Riskleri.

    Yukarıda belirtilen beklenmedik çerçeveleme sorunu nedeniyle ara iframe'iniz, üst çerçevesine hiçbir zaman güvenlik veya gizlilik açısından hassas veriler (kimlik jetonları, oturum çerezi değerleri, kullanıcı verileri vb.) göndermemelidir. Bu kurala uyulmaması, web sitelerinizi tehlikeye atabilir.

Ara Iframe'de Tek Dokunuş Oluştur

One Tap'i ara iframe'in içinde görüntülemek için aşağıdaki kod snippet'ini ara iframe'in HTML koduna yerleştirin:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

data-allowed_parent_origin özelliği kullanılırsa Google One Tap, ara iframe modunda çalışır. Özellik değeri olarak tek bir alan adı veya virgülle ayrılmış alan adı listesi ayarlayabilirsiniz. Joker karakter alt alan adları da desteklenir.

(İsteğe bağlı) Ara Iframe'de Sonraki Kullanıcı Deneyimini Oluştur

Giriş yanıtında, son kullanıcılara görünür içerik gösterebilecek herhangi bir HTML kodunu döndürebilirsiniz. Ek profil bilgileri isteyebilir veya Hizmet Şartları'nı kabul edebilirsiniz. Sayfa gönderildikten sonra başka sayfalar görüntüleyebilirsiniz. Örneğin, ödeme veya abonelik için.

Ara iframe'i yeniden boyutlandırabilirsiniz:

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

Özetle, ara iframe'de tam oturum açma veya kaydolma kullanıcı deneyimi akışları yerleşik kullanıcı deneyimi olarak uygulanabilir.

One Tap kullanıcı deneyiminden sonraki ilk sayfa için notifyParentResize() yöntemini aşağıdaki nedenlerden dolayı iki kez çağırmanız gerekir.

  1. One Tap kullanıcı deneyimi tamamlandığında ara iframe gizli olarak ayarlanır.

  2. Bir öğenin offsetHeight özellik değeri gizlendiğinde 0 olur.

İlk çağrıda, iframe yüksekliğini 1 piksel olacak şekilde yeniden boyutlandırabilir ve böylece görünür hale getirebilirsiniz. Ardından, offsetHeight özellik değeri kullanıma sunulduktan sonra bunu uygun bir yüksekliğe göre yeniden boyutlandırabilirsiniz.

Aşağıdaki örnek kod, One Tap kullanıcı deneyiminden sonra üst kaynağın nasıl doğrulanacağını ve kullanıcı arayüzü için ara iframe'in nasıl yeniden boyutlandırılacağını gösterir.

<script>
window.onload = () => {
  google.accounts.id.intermediate.verifyParentOrigin(
    ["https://example.com","https://example-com.cdn.ampproject.org"],
    () => {
      google.accounts.id.intermediate.notifyParentResize(1);
      window.setTimeout(() => {
        let h = document.getElementById('container').offsetHeight;
        google.accounts.id.intermediate.notifyParentResize(h);
      }, 200);
    },
    () => {
      document.getElementById('container').style.display = 'none';
      document.getElementById('warning').innerText = 'Warning: the page is displayed in an unexpected domain!';
    }
  );
};
</script>

Kullanıcı Deneyiminin Tamamlanması bölümündeki Ara iFrame'i Kaldırma

Kullanıcı deneyimi akışı tamamlandığında üst içerik sayfasını, ara iframe'i kaldırması için bilgilendirmelisiniz. Bu amaçla, aşağıdaki kod snippet'ini giriş yanıt kodunuza yerleştirebilirsiniz.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

Kullanıcı deneyimi akışı atlanırsa bunun yerine notifyParentClose yöntemi çağrılmalıdır.

Ara Iframe'i HTML Sayfalarına Yerleştirme

Aşağıdaki kod snippet'ini, Google One Tap'in görüntülemesini istediğiniz tüm HTML sayfalarına yerleştirin:

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

data-src özelliği, ara iframe'inizin URI'sidir.