चेतावनी: इस डेटा के तहत प्रदान की जाती है गूगल उपयोगकर्ता डेटा नीति । कृपया नीति की समीक्षा करें और उसका अनुपालन करें। ऐसा करने में विफलता के परिणामस्वरूप परियोजना या खाता निलंबन हो सकता है।

एक आइफ्रेम के माध्यम से एक टैप को एकीकृत करें

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

मध्यवर्ती iframe आधारित एकीकरण कुछ लचीलापन और जोखिम लाता है:

  • एक टैप के लिए UX एंबेडेड और बाद में UX फ्लो

    वन टैप यूएक्स किए जाने के बाद, आप मध्यवर्ती आइफ्रेम के अंदर बाद के यूएक्स प्रवाह को प्रदर्शित कर सकते हैं। इस प्रकार, एक टैप और बाद में UX दोनों को वर्तमान सामग्री पृष्ठ में एम्बेड किया जा सकता है। नीचे एक उदाहरण देखें।

    मध्यवर्ती iframe के साथ एम्बेडेड UX का एक उदाहरण।

    मध्यवर्ती iframe के बिना, आम तौर पर आपको बाद के UX प्रवाह को प्रदर्शित करने के लिए एक पूर्ण पृष्ठ नेविगेशन की आवश्यकता होती है, जो कुछ मामलों में घुसपैठ हो सकती है।

  • एक बार एकीकृत करें, और हर जगह प्रदर्शित करें

    सभी एक टैप एकीकरण कोड (वन टैप एपीआई इनवोकेशन और बाद में UX हैंडलिंग) मध्यवर्ती iframe में समझाया गया है। सामग्री पृष्ठों पर, जहां वन टैप प्रदर्शित हो सकता है, आपको केवल मध्यवर्ती आइफ्रेम को एम्बेड करना है।

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

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

    मध्यवर्ती टोकन द्वारा सीधे आईडी टोकन का उपभोग किया जाता है। वे सामग्री पृष्ठों के संपर्क में कभी नहीं आते हैं। यह आर्किटेक्चर नाटकीय रूप से आईडी टोकन जोखिम दायरे को कम कर सकता है।

    मध्यवर्ती iframe तरीका उन वेबसाइटों के साथ भी अच्छा काम करता है जिनके पास पहले से ही एक समर्पित लॉगिन-संबंधित उप डोमेन है (जैसे, login.example.com) और कई सामग्री से संबंधित उप डोमेन (जैसे sports.example.com और games.example.com) ।

  • एक टैप प्रदर्शित डोमेन

    Google की OAuth नीतियों के अनुसार , OAuth प्रतिक्रियाओं को प्राप्त करने वाले सभी डोमेन को Google API कंसोल में पूर्व-पंजीकृत होना चाहिए। सामान्य वन टैप एकीकरण के साथ, डेवलपर्स को उन सभी डोमेन को प्री-रजिस्टर करने की आवश्यकता होती है जो वन टैप प्रदर्शित कर सकते हैं, क्योंकि आईडी टोकन इन डोमेन पर वापस आ जाएंगे। कुछ वेबसाइटें अपने उपयोगकर्ताओं को गतिशील रूप से उप डोमेन बनाने की अनुमति देती हैं, जो पहले से पंजीकृत होना असंभव है। परिणामस्वरूप, इन टैप को गतिशील रूप से निर्मित उप डोमेन में प्रदर्शित नहीं किया जा सकता है।

    यह मुद्दा मध्यवर्ती iframe का लाभ उठाकर तय किया जा सकता है। इस स्थिति में, केवल मध्यवर्ती iframe के डोमेन को पूर्व-पंजीकृत होना चाहिए। सामग्री पृष्ठ डोमेन पंजीकृत करने की कोई आवश्यकता नहीं है, क्योंकि आईडी टोकन इन सामग्री पृष्ठों के संपर्क में नहीं हैं।

  • एएमपी समर्थन

    डिफ़ॉल्ट रूप से, Google One Tap को नीचे दिए गए कुछ कारणों के कारण AMP पृष्ठों में प्रदर्शित नहीं किया जा सकता है।

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

    2. एएमपी कैश पेज फॉर्म को दूसरे (एएमपी व्यूअर) डोमेन को प्रस्तुत कर सकता है।

    यह मुद्दा मध्यवर्ती iframe वास्तुकला का लाभ उठाकर तय किया जा सकता है। वन टैप एकीकरण के बाद एक मध्यवर्ती iframe में किया जाता है, डेवलपर्स इसे <amp-onetap-google> घटक जोड़कर AMP पृष्ठों में एम्बेड कर सकते हैं।

    एक ही मध्यवर्ती iframe AMP पृष्ठों और गैर- AMP HTML पृष्ठों दोनों द्वारा पुन: उपयोग किया जा सकता है।

  • गोपनीयता जोखिम

    डेवलपर्स को मध्यवर्ती डोमेन को अनपेक्षित डोमेन में एम्बेड करने से रोकने के लिए उपाय करना चाहिए। उदाहरण के लिए, malicious.com आपके मध्यवर्ती iframe को एम्बेड कर सकता है, और इस प्रकार आपकी One Tap UX को उनकी वेबसाइट पर हटा सकता है। यह निश्चित रूप से अंतिम उपयोगकर्ताओं से बहुत सारी गोपनीयता की चिंता का कारण होगा।

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

    उपर्युक्त अप्रत्याशित फ्रेमिंग मुद्दे के कारण, आपके मध्यवर्ती iframe को कभी भी अपने पैरेंट फ्रेम में सुरक्षा या गोपनीयता संवेदनशील डेटा नहीं भेजना चाहिए, जैसे ID टोकन, सत्र कुकी मान, उपयोगकर्ता डेटा, आदि। खतरा।

इंटरमीडिएट के इफ्रे में रेंडर वन टैप

मध्यवर्ती iframe के अंदर एक टैप प्रदर्शित करने के लिए, निम्नलिखित कोड स्निपेट को मध्यवर्ती iframe के HTML कोड में रखें:

<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 मोड में चलेगा। आप एक डोमेन या अल्पविराम से अलग की गई डोमेन सूची को विशेषता मान के रूप में सेट कर सकते हैं। वाइल्डकार्ड सबडोमेन भी समर्थित हैं।

(वैकल्पिक) इंटरमीडिएट इफ्रे में रेंडर सबरेंडेट यूएक्स

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

आपके पास नीचे दिए गए मध्यवर्ती iframe का आकार बदलने का भी विकल्प है।

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

सारांश में, मध्यवर्ती iframe के साथ, पूर्ण साइन-इन या साइन-अप UX प्रवाह एम्बेडेड UX के रूप में कार्यान्वित किया जा सकता है।

वन टैप यूएक्स के बाद पहले पेज के लिए, आपको नीचे दिए गए कारणों के कारण दो बार notifyParentResize() विधि को कॉल करना notifyParentResize()

  1. जब एक टैप UX किया जाता है, तो मध्यवर्ती iframe को छिपाया जाता है।

  2. एक तत्व का offsetHeight विशेषता मान 0 है जब यह छिपा हुआ है।

पहली कॉल में, आप इसे दिखाई देने के लिए iframe की ऊँचाई को 1px तक बढ़ा सकते हैं। फिर, offsetHeight विशेषता मान उपलब्ध होने के बाद, आप इसे उपयुक्त ऊंचाई पर आकार दे सकते हैं।

निम्न उदाहरण कोड दिखाता है कि मूल टैप को मान्य करने के लिए कैसे करें और एक टैप UX के बाद UI के लिए मध्यवर्ती आइफ्रेम का आकार बदलें।

<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 डन पर इंटरमीडिएट इफ्रामी निकालें

UX प्रवाह होने पर आपको मध्यवर्ती iframe को हटाने के लिए मूल सामग्री पृष्ठ को सूचित करना चाहिए। इसके लिए, आप निम्न कोड स्निपेट को अपने लॉगिन प्रतिक्रिया कोड में रख सकते हैं।

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

यदि UX प्रवाह को छोड़ दिया जाता है, तो इसके बजाय notifyParentClose विधि को notifyParentClose करने की आवश्यकता होती है।

HTML पृष्ठों में इंटरमीडिएट iframe एम्बेड करें

निम्नलिखित कोड स्निपेट को उन HTML पृष्ठों में रखें, जिन्हें आप 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 का URI है।