Iframe का इस्तेमाल करके One Tap को इंटिग्रेट करें

Google One Tap को आपकी वेबसाइट पर होस्ट किए गए किसी iframe (इसके बाद, इंटरमीडिएट Iframe के रूप में जाना जाता है) के अंदर रेंडर किया जा सकता है. इंटरमीडिएट iframe का इस्तेमाल करने पर, One Tap UX पर कोई समझे जाने वाला बदलाव नहीं है.

इंटरमीडिएट iframe पर आधारित इंटिग्रेशन में कुछ सुविधाएं और जोखिम होते हैं:

  • एक टैप और बाद के UX फ़्लो के लिए, एम्बेड किया गया UX.

    One Tap UX के पूरा होने के बाद, आपके पास इंटरमीडिएट iframe में बाद का UX फ़्लो दिखाया जा सकता है. इसलिए, One Tap और उसका बाद का UX, दोनों को मौजूदा कॉन्टेंट पेज में एम्बेड किया जा सकता है. एक उदाहरण देखें.

    इंटरमीडिएट iframe के साथ एम्बेड किए गए UX का उदाहरण.

    इंटरमीडिएट iframe के बिना, बाद में UX फ़्लो दिखाने के लिए, आपको आम तौर पर पूरे पेज पर नेविगेशन की ज़रूरत होती है. इससे कुछ मामलों में रुकावट आ सकती है.

  • एक बार इंटिग्रेट करें और हर जगह दिखाएं.

    सभी One Tap इंटिग्रेशन कोड (One Tap API के साथ एपीआई को शुरू करने और उसके बाद UX को मैनेज करने) को इंटरमीडिएट iframe में एन्क्रिप्ट (सुरक्षित) किया जाता है. कॉन्टेंट वाले ऐसे पेजों पर जहां One Tap की सुविधा दिख सकती है, आपको सिर्फ़ इंटरमीडिएट iframe एम्बेड करना होगा.

    इस आर्किटेक्चर से समस्याओं को अलग-अलग किया जा सकता है. इससे इंटिग्रेशन और रखरखाव का खर्च कम हो जाता है.

  • आईडी टोकन के एक्सपोज़र का दायरा सीमित करें.

    आईडी टोकन का इस्तेमाल सीधे इंटरमीडिएट iframe के ज़रिए किया जाता है. उन्हें कभी भी कॉन्टेंट के पेजों पर नहीं दिखाया जाता. इस आर्किटेक्चर से, आईडी टोकन के एक्सपोज़र का दायरा काफ़ी कम हो सकता है.

    इंटरमीडिएट iframe तरीका उन वेबसाइटों के साथ भी अच्छी तरह से काम करता है जिनमें पहले से ही लॉगिन से जुड़ा एक सब-डोमेन (जैसे, username.example.com) और कॉन्टेंट से जुड़े कई सब-डोमेन (जैसे, Sports.example.com और Games.example.com) हों.

  • एक टैप में दिखने वाले डोमेन.

    Google की OAuth की नीतियों के मुताबिक, OAuth रिस्पॉन्स पाने वाले सभी डोमेन को Google Cloud Console में पहले से रजिस्टर करना होगा. सामान्य One Tap इंटिग्रेशन के साथ, डेवलपर को उन सभी डोमेन को पहले से रजिस्टर करना होगा जो One Tap दिखा सकता है. ऐसा इसलिए, क्योंकि आईडी टोकन इन डोमेन पर वापस भेज दिए जाएंगे. कुछ वेबसाइटें अपने उपयोगकर्ताओं को डाइनैमिक तौर पर सब डोमेन बनाने की सुविधा देती हैं. ऐसे सब डोमेन के लिए पहले से रजिस्टर नहीं किया जा सकता. इस वजह से, डाइनैमिक तौर पर बनाए गए इन सब-डोमेन में One Tap नहीं दिखाया जा सकता.

    इस समस्या को इंटरमीडिएट iframe का इस्तेमाल करके ठीक किया जा सकता है. इस मामले में, सिर्फ़ इंटरमीडिएट iframe के डोमेन को पहले से रजिस्टर करना होगा. कॉन्टेंट पेज के डोमेन को रजिस्टर करने की ज़रूरत नहीं होती, क्योंकि आईडी टोकन इन कॉन्टेंट पेजों पर सार्वजनिक नहीं किए जाते.

  • एएमपी सहायता.

    डिफ़ॉल्ट रूप से, Google One Tap को एएमपी पेजों पर नहीं दिखाया जा सकता, क्योंकि इसकी कुछ वजहें नीचे दी गई हैं.

    1. पसंद के मुताबिक बनाई गई JS लाइब्रेरी या कोड की अनुमति नहीं है.

    2. एएमपी कैश की वजह से, पेज किसी दूसरे (एएमपी व्यूअर) डोमेन के रूप में रेंडर हो सकता है.

    इस समस्या को इंटरमीडिएट iframe आर्किटेक्चर का इस्तेमाल करके ठीक किया जा सकता है. इंटरमीडिएट iframe में One Tap इंटिग्रेशन पूरा होने के बाद, डेवलपर एक <amp-onetap-google> कॉम्पोनेंट जोड़कर उसे एएमपी पेजों में एम्बेड कर सकते हैं.

    एक ही इंटरमीडिएट iframe को एएमपी पेज और बिना एएमपी वाले एचटीएमएल पेज, दोनों में फिर से इस्तेमाल किया जा सकता है.

  • निजता से जुड़े जोखिम.

    डेवलपर को इंटरमीडिएट iframe को अनचाहे डोमेन में एम्बेड किए जाने से रोकने के लिए कदम उठाने होंगे. उदाहरण के लिए, abuse.com आपके इंटरमीडिएट iframe को जोड़ सकता है और इस तरह आपका One Tap UX उनकी वेबसाइट पर दिखा सकता है. इससे असली उपयोगकर्ताओं को निजता से जुड़ी कई समस्याएं पैदा होंगी.

  • सुरक्षा से जुड़े जोखिम.

    ऊपर बताई गई अनचाहे फ़्रेमिंग से जुड़ी समस्या की वजह से, आपके इंटरमीडिएट को अपने पैरंट फ़्रेम पर सुरक्षा या निजता से जुड़ा संवेदनशील डेटा कभी नहीं भेजना चाहिए. जैसे, आईडी टोकन, सेशन कुकी वैल्यू, उपयोगकर्ता का डेटा वगैरह. इस नियम का पालन न करने पर, आपकी वेबसाइट खतरे में पड़ सकती हैं.

इंटरमीडिएट Iframe में एक टैप में रेंडर करें

इंटरमीडिएट iframe के अंदर One Tap की सुविधा का इस्तेमाल करने के लिए, इस कोड स्निपेट को इंटरमीडिएट iframe के एचटीएमएल कोड में डालें:

<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 एट्रिब्यूट का इस्तेमाल किया जाता है, तो Google One Tap बीच के iframe मोड में चलता है. आपके पास एट्रिब्यूट की वैल्यू के तौर पर एक डोमेन या कॉमा लगाकर अलग की गई डोमेन सूची को सेट करने का विकल्प होता है. वाइल्डकार्ड सबडोमेन भी काम करते हैं.

(ज़रूरी नहीं) इंटरमीडिएट Iframe में बाद के UX को रेंडर करें

लॉगिन के रिस्पॉन्स में, कोई भी एचटीएमएल कोड दिखाया जा सकता है. इससे असली उपयोगकर्ताओं को दिखने वाला कुछ कॉन्टेंट दिख सकता है. उदाहरण के लिए, प्रोफ़ाइल की अतिरिक्त जानकारी मांगना या सेवा की शर्तों पर सहमति देना. पेज सबमिट होने के बाद, आगे के पेज दिखाए जा सकते हैं. उदाहरण के लिए, पेमेंट या सदस्यता के लिए.

आपके पास इंटरमीडिएट iframe का साइज़ बदलने का विकल्प होता है:

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

खास जानकारी में, इंटरमीडिएट iframe के साथ, पूरे साइन इन या साइन-अप UX फ़्लो को एम्बेड किए गए UX के तौर पर लागू किया जा सकता है.

One Tap UX के बाद वाले पहले पेज के लिए, आपको इन वजहों से notifyParentResize() तरीके को दो बार कॉल करना होगा.

  1. One Tap UX पूरा होने पर बीच के iframe को 'छिपाया गया' पर सेट कर दिया जाता है.

  2. जब किसी एलिमेंट को छिपाया जाता है, तो offsetHeight एट्रिब्यूट की वैल्यू 0 होती है.

पहली कॉल में, iframe को दिखाने के लिए उसकी लंबाई को 1px तक बदलें. इसके बाद, offsetHeight एट्रिब्यूट की वैल्यू उपलब्ध होने के बाद, उसका साइज़ बदलकर सही ऊंचाई किया जा सकता है.

इस उदाहरण में दिए गए कोड में बताया गया है कि One Tap UX के बाद, पैरंट ऑरिजिन की पुष्टि कैसे की जा सकती है और यूज़र इंटरफ़ेस (यूआई) के लिए इंटरमीडिएट 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>

UX हो गया पर इंटरमीडिएट Iframe हटाएं

UX फ़्लो पूरा होने पर, इंटरमीडिएट iframe को हटाने के लिए, आपको पैरंट कॉन्टेंट पेज को सूचना देनी होगी. इसके लिए, अपने लॉगिन रिस्पॉन्स कोड में इस कोड स्निपेट को डाला जा सकता है.

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

अगर UX फ़्लो को स्किप किया जाता है, तो notifyParentClose वाले तरीके को कॉल करना होगा.

इंटरमीडिएट Iframe को एचटीएमएल पेजों में एम्बेड करें

नीचे दिए गए कोड स्निपेट को ऐसे किसी भी एचटीएमएल पेज में डालें जिसे आपको Google One Tap की मदद से दिखाना है:

<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 एट्रिब्यूट, आपके इंटरमीडिएट iframe का यूआरआई है.