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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • सुरक्षा से जुड़े खतरे.

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

बीच के 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 में बाद में उपयोगकर्ता अनुभव दें

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

इंटरमीडिएट iframe का साइज़ बदला जा सकता है:

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

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

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

  1. One Tap UX पूरा होने पर, इंटरमीडिएट iframe छिपा हुआ सेट हो जाता है.

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

पहले कॉल में, iframe का साइज़ बदलने के लिए उसका साइज़ 1 पिक्सल पर सेट करें दृश्य. इसके बाद, 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 हटाएं

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

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