iFrame kullanarak One Tap'i entegre etme

Google One Tap, kendi web siteniz tarafından barındırılan bir iframe (bundan sonra Orta Düzey 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 ve sonraki kullanıcı deneyimi akışı için yerleşik kullanıcı deneyimi.

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

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

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

  • Bir Kez Entegre Edin ve Her Yerde Görüntüleyin.

    One Tap entegrasyon kodlarının tamamı (One Tap API çağrısı ve sonraki kullanıcı deneyimi işleme) ara iframe'de kapsüllenmiştir. 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 ayrılmasını sağlayarak entegrasyon ve bakım maliyetinizi azaltır.

  • Kimlik Jetonu Maruz Kalma Kapsamını Sınırlayın.

    Kimlik jetonları doğrudan ara iframe tarafından kullanılır. İçerik sayfaları hiçbir zaman gösterilmez. Bu mimari, kimlik jetonlarının gösterim kapsamını önemli ölçüde azaltabilir.

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

  • One Tap ile Alanları Gösterme.

    Google'ın OAuth politikaları uyarınca, OAuth yanıtları alan tüm alanların Google Cloud Console'da ön kayıt yaptırması gerekir. Normal One Tap entegrasyonuyla, kimlik jetonları bu alanlara geri iletileceği 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, dinamik olarak oluşturulan bu alt alanlarda One Tap görüntülenemez.

    Bu sorun, ara iframe'den yararlanarak giderilebilir. Bu durumda, yalnızca ara iframe'in alanının önceden kaydedilmesi gerekir. Kimlik Jetonları bu içerik sayfalarına gösterilmediğinden içerik sayfası alan adlarının kaydedilmesine gerek yoktur.

  • AMP Desteği.

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

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

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

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

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

  • Gizlilik Riskleri.

    Geliştiriciler, ara iframe'lerin beklenmedik alanlara yerleştirilmesini önlemek için önlemler almalıdır. Örneğin, kötü amaçlı.com ara iframe'inizi yerleştirebilir ve böylece web sitesinde One Tap kullanıcı deneyiminizi görüntüleyebilir. Bu kesinlikle son kullanıcıların gizlilikle ilgili pek çok endişesine yol açacaktır.

  • Güvenlik Riskleri.

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

Ara Iframe'de Tek Dokunuş Oluşturma

Ara iframe'in içinde One Tap'i 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 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şturma

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 diğer 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 aşağıdaki nedenlerden dolayı notifyParentResize() yöntemini 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 yalnızca görünür hale getirmek için 1 piksel olarak yeniden boyutlandırabilirsiniz. Ardından, offsetHeight özellik değeri kullanıma sunulduktan sonra bunu uygun yüksekliğe göre yeniden boyutlandırabilirsiniz.

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

<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ındaki 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önteminin çağrılması gerekir.

HTML Sayfalarına Ara Iframe'i 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'sıdır.