चेतावनी: यह डेटा Google उपयोगकर्ता डेटा नीति के तहत दिया जाता है. कृपया समीक्षा करें और नीति का पालन करें. ऐसा न करने पर, प्रोजेक्ट या खाता निलंबित हो सकता है.

Iframe की मदद से एक टैप में इंटिग्रेट करें

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

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

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

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

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

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

  • एक बार जोड़ें और हर जगह दिखाएं.

    सभी एक टैप वाले इंटिग्रेशन कोड (एक टैप में एपीआई शुरू करने और उसके बाद के UX को हैंडल करने) का तरीका, बीच के iframe में समझाया जाता है. कॉन्टेंट पेजों पर, जहां एक टैप दिख सकता है, आपको बीच के iframe को एम्बेड करना होगा.

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

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

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

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

  • एक टैप में डिसप्ले डोमेन.

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

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

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

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

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

    2. एएमपी कैश, पेज फ़ॉर्म को एक दूसरे {0}एएमपी व्यूअर's) डोमेन के रूप में रेंडर कर सकता है.

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

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

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

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

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

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

मध्यम Iframe में एक टैप रेंडर करें

बीच के iframe में मौजूद 'एक टैप' को दिखाने के लिए, नीचे दिए गए कोड स्निपेट को बीच के 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 का टैप इंटरमीडिएट 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 टैप UX पूरा होने पर मध्यवर्ती iframe छिपे हुए पर सेट हो जाता है.

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

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

नीचे दिए गए उदाहरण में दिखाया गया है कि पैरंट ऑरिजिन की पुष्टि कैसे की जाती है. साथ ही, वन टैप 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 पर दिखाना चाहते हैं दिखाने के लिए टैप करें:

<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 का यूआरआई है.