सेटअप

अपनी वेबसाइट में 'Google से साइन इन करें', One Tap या अपने-आप साइन-इन होने की सुविधा जोड़ने से पहले, अपना OAuth कॉन्फ़िगरेशन सेटअप करें. साथ ही, अपनी साइट के लिए कॉन्टेंट की सुरक्षा के बारे में नीति को भी कॉन्फ़िगर किया जा सकता है.

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

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

  1. Google API कंसोल का क्रेडेंशियल पेज खोलें.
  2. Google API प्रोजेक्ट बनाएं या कोई मौजूदा प्रोजेक्ट चुनें. अगर आपके पास पहले से ही 'Google से साइन इन करें' बटन या Google One Tap के लिए कोई प्रोजेक्ट है, तो मौजूदा प्रोजेक्ट और वेब क्लाइंट आईडी का इस्तेमाल करें. प्रोडक्शन ऐप्लिकेशन बनाते समय, एक से ज़्यादा प्रोजेक्ट बनाना पड़ सकता है. मैनेज किए जा रहे हर प्रोजेक्ट के लिए, इस सेक्शन के बाकी चरणों को दोहराएं.
  3. नया क्लाइंट आईडी बनाने के लिए, क्रेडेंशियल बनाएं > OAuth क्लाइंट आईडी पर क्लिक करें. इसके बाद, ऐप्लिकेशन टाइप के लिए वेब ऐप्लिकेशन चुनें. मौजूदा क्लाइंट आईडी का इस्तेमाल करने के लिए, वेब ऐप्लिकेशन का कोई एक टाइप चुनें.
  4. अनुमति वाले JavaScript ऑरिजिन में अपनी वेबसाइट का यूआरआई जोड़ें. यूआरआई में सिर्फ़ स्कीम और पूरी तरह से क्वालिफ़ाइड होस्टनेम शामिल होता है. उदाहरण के लिए, https://www.example.com.

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

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

  1. Google Developer Console के एपीआई और सेवाओं वाले सेक्शन में, OAuth के लिए सहमति देने की स्क्रीन पेज खोलें.
  2. अगर कहा जाए, तो अभी-अभी बनाया गया प्रोजेक्ट चुनें.
  3. "OAuth की सहमति वाली स्क्रीन" पर, फ़ॉर्म भरें और "सेव करें" बटन पर क्लिक करें.

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

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

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

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

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

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

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

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

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

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

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

FedCM का इस्तेमाल करके, Chrome One Tap की ओर से दिखाई गई OAuth सहमति की सेटिंग

Chrome में उपयोगकर्ता की सहमति के दौरान, टॉप लेवल अनुमति वाला डोमेन दिखाया जाता है.

FedCM के बिना One Tap

OAuth के लिए सहमति की सेटिंग, One Tap की मदद से दिखती है

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

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

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

कॉन्टेंट की सुरक्षा से जुड़ी नीति का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, हमारा सुझाव है कि आप अपने ऐप्लिकेशन को सुरक्षित रखने और क्रॉस-साइट स्क्रिप्टिंग (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 से साइन इन करें' बटन के iframe के पैरंट यूआरएल को अनुमति दी जा सके.
  • script-src डायरेक्टिव में, https://accounts.google.com/gsi/client जोड़ें, ताकि Google Identity Services JavaScript लाइब्रेरी के यूआरएल को अनुमति दी जा सके.
  • style-src डायरेक्टिव में, Google Identity Services स्टाइलशीट के यूआरएल को अनुमति देने के लिए https://accounts.google.com/gsi/style जोड़ें.
  • अगर 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 शामिल करें.

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