Google One Tap, kendi web sitenizde barındırılan bir iFrame (bundan sonra ara iFrame olarak adlandırılır) içinde oluşturulabilir. Orta düzeyde bir iframe kullanıldığında, One Tap kullanıcı deneyiminde algılanabilir bir değişiklik olmaz.
Ara 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 içinde sonraki kullanıcı deneyimi akışını görüntüleyebilirsiniz. Bu nedenle, hem Tek Bakış hem de kullanıcı deneyimi geçerli içerik sayfasına yerleştirilebilir. Aşağıdaki örneğe bakın.
Ara iframe olmadan, normalde bazı kullanıcı deneyimini rahatsız edici olabilecek sonraki kullanıcı deneyimi akışını görüntülemek için tam sayfada gezinmeniz gerekir.
Bir Kez entegre edin ve Her Yerde Gösterin.
Tüm One Tap entegrasyon kodları (One Tap API'si çağrısı ve sonraki kullanıcı deneyimi işleme) ara iframe'de yer alır. One Tap'in gösterilebileceğ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 Temas 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 gösterilmez. Bu mimari, kimlik jetonlarının karşılaşma kapsamını önemli ölçüde azaltabilir.
Ara iframe yolu, özel olarak girişle ilgili bir alt alan adı (örneğin, login.example.com) ve içerikle ilgili birden fazla alt alan adı (örneğin, spor.example.com ve oyunlar.example.com) olan web sitelerinde de işe yarar.
One Tap; Görünen Alanlar.
Google’ın OAuth politikaları uyarınca, OAuth yanıtlarını alan tüm alanların Google API Konsolu'na önceden kaydettirilmesi gerekir. Normal One Tap entegrasyonuyla, kimlik jetonları bu alanlara aktarılacağı için geliştiricilerin One Tap'in gösterebileceği tüm alanları önceden kaydettirmesi gerekir. Bazı web siteleri, kullanıcılarının dinamik olarak alt alan oluşturmalarına olanak tanır. Bu da ön kayıt yaptırmak imkansızdır. Bu nedenle, dinamik olarak oluşturulan bu alt alanlarda One Tap 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ında gösterilmediği için içerik sayfası alanlarını kaydetmeniz gerekmez.
AMP Desteği.
Varsayılan olarak Google One Tap, aşağıdaki nedenlerden dolayı AMP sayfalarında görüntülenemez.
Özel JS kitaplığına veya koduna izin verilmez.
AMP önbelleği, sayfayı başka bir form (AMP Görüntüleyici&s) alanı oluşturabilir.
Bu sorun, ara iframe mimarisi kullanılarak düzeltilebilir. Bir ara iframe'de One Tap entegrasyonu yapıldıktan sonra, geliştiriciler bir <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 beklenmeyen alanlara yerleştirilmesini önlemek için önlemler almalıdır. Örneğin, kötü amaçlı içerik, ara iframe'inizi yerleştirebilir ve dolayısıyla One Tap kullanıcı deneyiminizi web sitesine yerleştirebilir. Bu durum, son kullanıcılar için kesinlikle gizlilikle ilgili çok sayıda endişeye neden olacaktır.
Güvenlik Riskleri.
Yukarıda belirtilen beklenmedik çerçeveleme sorunu nedeniyle, ara iframe'iniz kimlik çerçeveleri, oturum çerez değerleri, kullanıcı verileri gibi üst çerçevelerine hiçbir zaman güvenlik veya gizlilik açısından hassas veriler göndermemelidir. Bu kurala uyulmaması web sitelerinizi tehlikeye atabilir.
Orta Iframe'de Bir Dokunuş Oluştur
Ara iframe'de 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 mevcutsa 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ı Deneyimi Oluşturma
Giriş yanıtında, herhangi bir HTML kodunu döndürebilirsiniz. Bu durumda, son kullanıcılara bazı görünür içerikler gösterilebilir. Örneğin, ekstra profil bilgisi istemek veya Hizmet Şartları'nı kabul etmek vb. sayfa gönderildikten sonra başka sayfalar da görüntüleyebilirsiniz. Örneğin, ödeme veya abonelik vb. 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>
Özet olarak, ara iframe ile tam oturum açma veya kaydolma kullanıcı deneyimi akışları, kullanıcı deneyimi olarak uygulanabilir.