Tek Dokunuş ile Iframe Entegre Etme

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Google One Tap, kendi web sitenizde barındırılan bir iFrame (bundan sonra Ara Iframe olarak anılacaktır) içinde oluşturulabilir. Tek dokunmalı kullanıcı deneyiminde ara bir iframe kullanıldığında herhangi bir değişiklik yoktur.

Ara iframe'e dayalı entegrasyon bazı esneklikler ve riskler taşır:

  • Tek Dokunma ve sonraki kullanıcı deneyimi akışı için yerleşik kullanıcı deneyimi.

    One Tap kullanıcı deneyimi tamamlandıktan sonra, sonraki kullanıcı deneyimi akışını ara iframe'de görüntüleyebilirsiniz. Bu nedenle, hem Tek Temas hem de bunu izleyen 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, normalde kullanıcının erişimine neden olabilecek kullanıcı deneyimi akışını göstermek için tam sayfada gezinmeye normalde ihtiyacınız olur.

  • Bir Kez Entegrasyon ve Her Yerde Görüntüleme.

    Tüm One Tap entegrasyon kodu (One Tap API'si çağrısı ve sonraki kullanıcı deneyimi işleme) ara iframe'e kaplanmıştır. One Tap'in gösterilebileceği içerik sayfalarında, ara iframe'i yerleştirmek yeterlidir.

    Bu mimari, endişelerin ayrılmasına olanak tanır ve böylece entegrasyon ile bakım maliyetinizi azaltır.

  • Kimlik Jetonu Gösterim Kapsamını sınırlandırın.

    Kimlik jetonları, doğrudan ara iframe tarafından kullanılır. Bunlar hiçbir zaman içerik sayfalarına maruz kalmaz. Bu mimari, kimlik jetonlarının temas kapsamını önemli ölçüde azaltabilir.

    Ara iframe yolu, girişle ilgili özel bir alt alan adına (örneğin, login.example.com) ve içerikle ilgili birden fazla alt alan adına (örneğin spor.example.com ve oyunlar.example.com) sahip web siteleriyle de çalışır.

  • Tek Dokunuş Alanları Gösteriyor.

    Google'ın OAuth politikaları uyarınca, OAuth yanıtı alan tüm alanların Google API Konsolu'na önceden kaydettirilmesi gerekir. Normal One Tap entegrasyonuyla, kimlik jetonları bu alanlara 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 alan oluşturmalarına izin verir. Bu alan için ön kayıt yaptırmak imkansızdır. Bu nedenle, One Tap dinamik olarak oluşturulan bu alt alanlarda gösterilemez.

    Bu sorun, ara iframe kullanılarak düzeltilebilir. Bu durumda, yalnızca ara iframe'in alanı için ön kayıt yaptırılması gerekir. Kimlik Jetonları bu içerik sayfalarına maruz kalmadığından, içerik sayfası alanlarını kaydetmenize gerek yoktur.

  • AMP Desteği.

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

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

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

    Bu sorun, ara iframe mimarisinden faydalanarak düzeltilebilir. Ara katman iframe'inde One Tap entegrasyonu yapıldıktan sonra geliştiriciler <amp-onetap-google> bileşeni ekleyerek bunları 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 beklenmeyen alanlara yerleştirilmesini önlemek için önlemler almalıdır. Örneğin, bad.com, ara iframe'inizi yerleştirebilir ve böylece One Tap kullanıcı deneyiminizi web sitesinde oynatamaz. Bu da son kullanıcıların gizlilikle ilgili endişelerine neden olacaktır.

  • Güvenlik Riskleri.

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

Orta Iframe'de Tek Dokunuş Oluştur

Ara Tek iframe'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 mevcutsa Google One Tap, ara iframe modunda çalışır. Özellik değeri olarak tek bir alanı veya virgülle ayrılmış bir alan listesini ayarlayabilirsiniz. Joker karakter alt alan adları da desteklenir.

(İsteğe bağlı) Ara Iframe'te sonraki kullanıcı deneyimini oluşturma

Giriş yanıtında, herhangi bir HTML kodu döndürebilirsiniz. Böylece, son kullanıcılara bazı görünür içerikler gösterilebilir. Örneğin, ek profil bilgileri isteme veya Hizmet Şartları'nı kabul etme vs. Sayfa gönderildikten sonra daha fazla sayfa görüntüleyebilirsiniz. Örneğin ödeme veya abonelik için.

Ara iframe'i aşağıda olduğu gibi yeniden boyutlandırma seçeneğiniz de vardır.

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

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