iFrame kullanarak One Tap'i entegre etme

Google One Tap, iFrame (bundan sonra Ara iFrame) kendi web siteniz tarafından barındırılan. Algılanan bir sorun yok. .

iframe tabanlı ara 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, sonraki kullanıcı deneyimi akışını ara iframe'i seçin. Bu nedenle, hem One Tap hem de sonraki kullanıcı deneyimi veya geçerli içerik sayfasına yönlendirir. Aşağıdaki örneğe bakın.

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

    Ara iframe olmadan, normal şartlarda tam sayfada gezinme için Bu durum bazı durumlarda rahatsız edici olabilen kullanıcı deneyimi akışını gösterebilir.

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

    Tüm One Tap entegrasyon kodları (One Tap API çağrısı ve sonraki kullanıcı deneyimi) işleme) ara iframe'e kapsüllenir. İçerik sayfalarında One Tap'in görüntülenebileceği yerde, tek yapmanız gereken ortadaki iframe'dir.

    Bu mimari, endişelerin ayrıştırılmasını sağlar ve böylece entegrasyon ve bakım maliyeti.

  • Kimlik Jetonu Maruz Kalma Kapsamını sınırlandırın.

    Kimlik jetonları doğrudan ara iframe tarafından kullanılır. Bunlar: hiçbir zaman gösterilmez. Bu mimari, şirket içinde kimlik jetonlarının karşılaşma kapsamını azaltın.

    Ara iframe yöntemi, hâlihazırda birinci taraf çerezlerine girişle ilgili özel bir alt alan (örneğin, login.example.com) ve birden fazla içerikle ilgili alt alan adları (örneğin, spor.example.com ve games.example.com).

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

    Google'ın OAuth politikaları uyarınca, OAuth alan tüm alanlar yanıtlarının Google Cloud konsoluna ön kayıt yaptırması gerekir. Normal One ile Tap entegrasyonu. Geliştiricilerin One Tap'in etkinleştirildiği tüm alanları ön kayıt yaptırması gerekir görüntülenebilir. Biraz web siteleri, kullanıcılarının dinamik olarak "özelleştirilmiş" alt alan adları oluşturmasına olanak tanır. ön kayıt yaptırmak imkansız. Bu nedenle One Tap şurada görüntülenemez: bu dinamik olarak oluşturulan alt alanlara karşılık gelir.

    Bu sorun, ara iFrame'den yararlanarak düzeltilebilir. Böyle durumlarda yalnızca ara iframe'e ait alanın ön kaydının yapılması gerekir. Orada kimlik Jetonları potansiyel riskleri fark edersiniz.

  • Gizlilik Riskleri.

    Geliştiriciler, ara iframe'lerin devre dışı bırakılmasını önlemek için beklenmedik alanlara yerleştirilmiş. Örneğin, kötü amaçlı.com, bir çerçeve oluşturmalı ve dolayısıyla web sitelerinde One Tap kullanıcı deneyimi sunmalıdır. Bu kesinlikle son kullanıcıların gizlilikle ilgili birçok endişesine yol açacaktır.

  • Güvenlik Riskleri.

    Yukarıda bahsedilen beklenmedik kadraja alma sorunu nedeniyle, iframe, güvenlik veya gizlilik açısından hassas verileri hiçbir zaman üst öğesine göndermemelidir. kimlik jetonları, oturum çerezi değerleri, kullanıcı verileri vb. gibi tüm verileri web sitelerinizi tehlikeye atabilir.

Ara iFrame'de One Tap Oluşturma

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

<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 çalışır. kullanabilirsiniz. Tek bir alan adı veya virgülle ayrılmış bir alan listesi olarak kullanabilirsiniz. Joker karakterli alt alan adları da desteklenir.

(İsteğe bağlı) Ara iFrame'de Sonraki Kullanıcı Deneyimi Oluşturma

Giriş yanıtında, istediğiniz HTML kodunu döndürebilirsiniz. Bu kod, göz önünde bulundurmayan kişileri ifade eder. Örneğin, sizden ek profil bilgisi isteme, kabul edersiniz. 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 ile tam oturum açma veya kaydolma kullanıcı deneyimi akışları yerleşik kullanıcı deneyimi olarak uygulanmalıdır.

One Tap kullanıcı deneyiminden sonraki ilk sayfa için notifyParentResize() numarasını çağırmanız gerekir. yöntemini iki kez kullanmayı unutmayın.

  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ırarak görünür. Daha sonra, offsetHeight özellik değeri kullanılabilir hale geldiğinde şunları yapabilirsiniz: uygun yükseklikte yeniden boyutlandırabilirsiniz.

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

<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ı Deneyimi Tamamlandığında Ara iframe'i Kaldırma

Aşağıdaki durumlarda ara iframe'i kaldırması için üst içerik sayfasına bildirimde bulunmanız gerekir: ve kullanıcı deneyimi akışı tamamlanmıştır. Bu amaçla, aşağıdaki kod snippet'ini giriş yanıt kodunuz.

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

Kullanıcı deneyimi akışı atlanırsa notifyParentClose yönteminin çağrılması gerekir .

HTML Sayfalarına Ara iFrame Yerleştirme

Google One Tap'in kullanılmasını istediğiniz tüm HTML sayfalarına aşağıdaki kod snippet'ini yerleştirin. gösterilecek:

<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.