सेटअप

अपनी वेबसाइट पर 'Google से साइन इन करें' बटन या One Tap और अपने-आप साइन इन होने की सुविधा के प्रॉम्प्ट जोड़ने के लिए, आपको पहले:

1. OAuth 2.0 क्लाइंट आईडी पाएं,
2. OAuth ब्रैंडिंग और सेटिंग कॉन्फ़िगर करना,
3. Google Identity Services की क्लाइंट लाइब्रेरी लोड करें और
4. कॉन्टेंट की सुरक्षा के लिए नीति सेट अप करें. हालांकि, ऐसा करना ज़रूरी नहीं है
5. क्रॉस-ओरिजिन ओपनर नीति अपडेट करना

ध्यान दें: 'Google से साइन इन करें' सुविधा को कॉन्फ़िगर करने और अपने बैकएंड पर आईडी टोकन की पुष्टि करने के लिए, आपके पास क्लाइंट आईडी होना चाहिए. क्लाइंट आईडी कैसा दिखता है, यह जानने के लिए यहां दिया गया उदाहरण देखें: 1234567890-abc123def456.apps.googleusercontent.com

अपना Google API क्लाइंट आईडी पाना

अपनी वेबसाइट पर Google Identity Services चालू करने के लिए, आपको पहले Google API क्लाइंट आईडी सेट अप करना होगा. ऐसा करने के लिए, यह तरीका अपनाएं:

1. का खोलें.
2. कोई प्रोजेक्ट बनाएं या चुनें. अगर आपके पास पहले से ही 'Google से साइन इन करें' बटन या Google One Tap के लिए कोई प्रोजेक्ट है, तो मौजूदा प्रोजेक्ट और वेब क्लाइंट आईडी का इस्तेमाल करें. प्रोडक्शन ऐप्लिकेशन बनाते समय, एक से ज़्यादा प्रोजेक्ट बनाने पड़ सकते हैं. ऐसे में, मैनेज किए जा रहे हर प्रोजेक्ट के लिए, इस सेक्शन के बाकी चरणों को दोहराएं.
3. नया क्लाइंट आईडी बनाने के लिए, क्लाइंट बनाएं पर क्लिक करें. इसके बाद, ऐप्लिकेशन टाइप के लिए वेब ऐप्लिकेशन चुनें. किसी मौजूदा क्लाइंट आईडी का इस्तेमाल करने के लिए, वेब ऐप्लिकेशन टाइप में से कोई एक चुनें.

4. अनुमति वाले JavaScript ऑरिजिन में अपनी वेबसाइट का यूआरआई जोड़ें. यूआरआई में सिर्फ़ स्कीम और पूरी तरह से क्वालिफ़ाइड होस्टनेम शामिल होता है. उदाहरण के लिए, https://www.example.com.

   अहम जानकारी: स्थानीय टेस्ट या डेवलपमेंट के लिए, http://localhost और http://localhost:<port_number>, दोनों को जोड़ें
   अहम जानकारी: Google One Tap सिर्फ़ एचटीटीपीएस डोमेन में दिखाया जा सकता है.

5. इसके अलावा, क्रेडेंशियल को JavaScript कॉलबैक के बजाय, आपके होस्ट किए गए एंडपॉइंट पर रीडायरेक्ट करके भी दिखाया जा सकता है. अगर ऐसा है, तो अनुमति वाले रीडायरेक्ट यूआरआई में अपने रीडायरेक्ट यूआरआई जोड़ें. रीडायरेक्ट यूआरआई में स्कीम, पूरी तरह से क्वालिफ़ाइड होस्टनेम, और पाथ शामिल होता है. साथ ही, यह रीडायरेक्ट यूआरआई की पुष्टि करने के नियमों का पालन करता है. उदाहरण के लिए, https://www.example.com/auth-receiver.

data-client_id या client_id फ़ील्ड का इस्तेमाल करके, अपने वेब ऐप्लिकेशन में क्लाइंट आईडी शामिल करें.

अहम जानकारी: http और localhost का इस्तेमाल करके टेस्ट करते समय, अपने वेब ऐप्लिकेशन में Referrer-Policy हेडर को Referrer-Policy: no-referrer-when-downgrade पर सेट करें.

OAuth की सहमति वाली स्क्रीन को कॉन्फ़िगर करना

'Google से साइन इन करें' और एक टैप की पुष्टि करने की सुविधा, दोनों में सहमति वाली स्क्रीन शामिल होती है. इससे उपयोगकर्ताओं को पता चलता है कि ऐप्लिकेशन उनके डेटा का ऐक्सेस मांग रहा है, किस तरह का डेटा मांगा जा रहा है, और उस पर लागू होने वाले नियम क्या हैं.

1. के Google Auth Platform सेक्शन में जाकर, खोलें.
2. अगर कहा जाए, तो वह प्रोजेक्ट चुनें जो आपने अभी-अभी बनाया है.

3. पर, फ़ॉर्म भरें और "सेव करें" बटन पर क्लिक करें.

   1. ऐप्लिकेशन का नाम: सहमति मांगने वाले ऐप्लिकेशन का नाम. नाम से आपके ऐप्लिकेशन के बारे में सटीक जानकारी मिलनी चाहिए. साथ ही, यह नाम, उपयोगकर्ताओं को कहीं और दिखने वाले ऐप्लिकेशन के नाम से मेल खाना चाहिए.

   2. ऐप्लिकेशन का लोगो: यह इमेज, सहमति वाली स्क्रीन पर दिखती है, ताकि उपयोगकर्ता आपके ऐप्लिकेशन को पहचान सकें. यह लोगो, 'Google से साइन इन करें' वाली सहमति वाली स्क्रीन और खाता सेटिंग पर दिखता है. हालांकि, यह One Tap डायलॉग पर नहीं दिखता.

   3. सहायता ईमेल पता: यह ईमेल पता, सहमति वाली स्क्रीन पर उपयोगकर्ता सहायता के लिए दिखाया जाता है. साथ ही, G Suite के उन एडमिन को भी दिखाया जाता है जो अपने उपयोगकर्ताओं के लिए आपके ऐप्लिकेशन के ऐक्सेस का आकलन कर रहे हैं. जब उपयोगकर्ता ऐप्लिकेशन के नाम पर क्लिक करता है, तो यह ईमेल पता, 'Google से साइन इन करें' की सहमति वाली स्क्रीन पर उपयोगकर्ताओं को दिखता है.

   4. अनुमति वाले डोमेन: Google, सिर्फ़ उन ऐप्लिकेशन को अनुमति वाले डोमेन का इस्तेमाल करने की अनुमति देता है जो OAuth का इस्तेमाल करके पुष्टि करते हैं. ऐसा आपके और आपके उपयोगकर्ताओं को सुरक्षित रखने के लिए किया जाता है. आपके ऐप्लिकेशन के लिंक, आधिकारिक डोमेन पर होस्ट होने चाहिए. ज़्यादा जानें.

   5. ऐप्लिकेशन के होम पेज का लिंक: यह लिंक, "Google से साइन इन करें" के लिए सहमति वाली स्क्रीन पर दिखता है. साथ ही, यह "इसी तरह जारी रखें" बटन के नीचे, जीडीपीआर के मुताबिक एक-टैप डिसक्लेमर की जानकारी में भी दिखता है. इसे किसी आधिकारिक डोमेन पर होस्ट किया जाना चाहिए.

   6. ऐप्लिकेशन की निजता नीति का लिंक: यह लिंक, "इसी तौर पर जारी रखें" बटन के नीचे, 'Google से साइन इन करें' की सहमति वाली स्क्रीन और जीडीपीआर के मुताबिक, एक-टैप डिसक्लेमर की जानकारी पर दिखता है. इसे किसी आधिकारिक डोमेन पर होस्ट किया जाना चाहिए.

   7. ऐप्लिकेशन की सेवा की शर्तों का लिंक (ज़रूरी नहीं): यह लिंक, "Google से साइन इन करें" के लिए सहमति वाली स्क्रीन पर दिखता है. साथ ही, यह "इसी तरह जारी रखें" बटन के नीचे, जीडीपीआर के मुताबिक एक-टैप डिसक्लेमर की जानकारी में भी दिखता है. इसे किसी आधिकारिक डोमेन पर होस्ट किया जाना चाहिए.

4. अपने ऐप्लिकेशन के लिए स्कोप कॉन्फ़िगर करने के लिए, पर जाएं.

   1. Google API के लिए स्कोप: स्कोप की मदद से, आपके ऐप्लिकेशन को उपयोगकर्ता का निजी डेटा ऐक्सेस करने की अनुमति मिलती है. पुष्टि करने के लिए, डिफ़ॉल्ट स्कोप (ईमेल, प्रोफ़ाइल, openid) काफ़ी है. आपको कोई संवेदनशील स्कोप जोड़ने की ज़रूरत नहीं है. आम तौर पर, सबसे सही तरीका यह है कि ऐक्सेस की ज़रूरत होने पर, स्कोप के लिए धीरे-धीरे अनुरोध करें, न कि पहले से ही.

5. "पुष्टि की स्थिति" देखें. अगर आपके आवेदन की पुष्टि करनी है, तो "पुष्टि के लिए सबमिट करें" बटन पर क्लिक करके, आवेदन सबमिट करें. ज़्यादा जानकारी के लिए, OAuth की पुष्टि से जुड़ी ज़रूरी शर्तें देखें.

साइन इन करने के दौरान OAuth सेटिंग दिखाना

FedCM का इस्तेमाल करके One Tap

Chrome में उपयोगकर्ता की सहमति के दौरान, अनुमति वाला टॉप-लेवल डोमेन दिखता है. क्रॉस-ऑरिजिन, लेकिन एक ही साइट के iframes में सिर्फ़ One Tap का इस्तेमाल करना, काम करने वाला तरीका है.

FedCM के बिना One Tap

उपयोगकर्ता की सहमति के दौरान, ऐप्लिकेशन का नाम दिखता है.

पहली इमेज. Chrome में One Tap की मदद से दिखाई गई, OAuth की सहमति से जुड़ी सेटिंग.

क्लाइंट लाइब्रेरी लोड करना

Google Identity Services क्लाइंट लाइब्रेरी को ऐसे किसी भी पेज पर लोड करना न भूलें जिस पर उपयोगकर्ता साइन इन कर सकता है. यह कोड स्निपेट इस्तेमाल करें:

<script src="https://accounts.google.com/gsi/client" async></script>

async एट्रिब्यूट के साथ स्क्रिप्ट लोड करके, पेजों के लोड होने की स्पीड को ऑप्टिमाइज़ किया जा सकता है.

लाइब्रेरी के साथ काम करने वाले तरीकों और प्रॉपर्टी की सूची के लिए, HTML और JavaScript एपीआई रेफ़रंस देखें.

कॉन्टेंट की सुरक्षा के बारे में नीति

कॉन्टेंट की सुरक्षा से जुड़ी नीति का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, हमारा सुझाव है कि आप अपने ऐप्लिकेशन को सुरक्षित रखने और क्रॉस-साइट स्क्रिप्टिंग (XSS) के हमलों से बचाने के लिए, इस नीति का इस्तेमाल करें. ज़्यादा जानने के लिए, सीएसपी के बारे में जानकारी और सीएसपी और XSS लेख पढ़ें.

कॉन्टेंट की सुरक्षा से जुड़ी आपकी नीति में एक या उससे ज़्यादा डायरेक्टिव शामिल हो सकते हैं. जैसे, connect-src, frame-src, script-src, style-src या default-src.

अगर आपके सीएसपी में ये शामिल हैं:

• connect-src डायरेक्टिव में https://accounts.google.com/gsi/ जोड़ें, ताकि पेज, Google Identity Services के सर्वर-साइड एंडपॉइंट के लिए पैरंट यूआरएल को लोड कर सके.
• frame-src डायरेक्टिव में, https://accounts.google.com/gsi/ जोड़ें, ताकि One Tap और 'Google से साइन इन करें' बटन के iframes के पैरंट यूआरएल को अनुमति दी जा सके.
• script-src डायरेक्टिव में, https://accounts.google.com/gsi/client जोड़ें, ताकि Google Identity Services JavaScript लाइब्रेरी के यूआरएल को अनुमति दी जा सके.
• style-src डायरेक्टिव में, https://accounts.google.com/gsi/style जोड़ें, ताकि Google Identity Services स्टाइलशीट के यूआरएल को अनुमति दी जा सके.
• अगर default-src डायरेक्टिव का इस्तेमाल किया जाता है, तो यह फ़ॉलबैक होता है. ऐसा तब होता है, जब पहले दिए गए किसी भी डायरेक्टिव (connect-src, frame-src, script-src या style-src) के बारे में नहीं बताया गया है. किसी पेज को Google Identity Services के सर्वर साइड एंडपॉइंट के लिए पैरंट यूआरएल लोड करने की अनुमति देने के लिए, https://accounts.google.com/gsi/ जोड़ें.

connect-src का इस्तेमाल करते समय, अलग-अलग जीआईएस यूआरएल की सूची बनाने से बचें. इससे जीआईएस को अपडेट करते समय, गड़बड़ियों की संख्या कम हो जाती है. उदाहरण के लिए, https://accounts.google.com/gsi/status जोड़ने के बजाय, जीआईएस के पैरंट यूआरएल का इस्तेमाल करेंhttps://accounts.google.com/gsi/.

इस उदाहरण में दिए गए रिस्पॉन्स हेडर की मदद से, Google Identity Services को लोड और सही तरीके से लागू किया जा सकता है:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

क्रॉस-ओरिजिन ओपनर पॉलिसी

पॉप-अप बनाने के लिए, हो सकता है कि आपको 'Google से साइन इन करें' बटन और Google One Tap में, अपने Cross-Origin-Opener-Policy (COOP) में बदलाव करने पड़ें.

FedCM चालू होने पर, ब्राउज़र सीधे पॉप-अप रेंडर करता है और इसके लिए किसी बदलाव की ज़रूरत नहीं होती.

हालांकि, FedCM बंद होने पर, COOP हेडर सेट करें:

• same-origin और
• same-origin-allow-popups शामिल करें.

सही हेडर सेट न करने पर, विंडो के बीच कम्यूनिकेशन बंद हो जाता है. इससे खाली पॉप-अप विंडो या मिलते-जुलते गड़बड़ियां हो सकती हैं.