'Google से साइन इन करें' बटन दिखाएं

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

साइन-इन करने का बटन, जिसे आपकी दिलचस्पी के हिसाब से बनाया गया है.

जब कोई उपयोगकर्ता Google खाता चुनता है और अपनी सहमति देता है, तो Google, JSON Web Token (JWT) का इस्तेमाल करके उपयोगकर्ता की प्रोफ़ाइल शेयर करता है. साइन इन करने और उपयोगकर्ता अनुभव के दौरान शामिल चरणों की खास जानकारी के लिए, यह कैसे काम करता है लेख पढ़ें. लोगों के हिसाब से बनाए गए बटन के बारे में जानें में, उन अलग-अलग शर्तों और स्थितियों के बारे में बताया गया है जिनसे यह तय होता है कि बटन उपयोगकर्ताओं को कैसे दिखेगा.

ज़रूरी शर्तें

OAuth के लिए सहमति की स्क्रीन वाले सेक्शन को कॉन्फ़िगर करने, क्लाइंट आईडी पाने, और क्लाइंट लाइब्रेरी लोड करने के लिए, सेटअप में बताया गया तरीका अपनाएं.

बटन रेंडरिंग

'Google से साइन इन करें' बटन दिखाने के लिए, अपने लॉगिन पेज पर बटन रेंडर करने के लिए, एचटीएमएल या JavaScript में से किसी एक को चुना जा सकता है:

एचटीएमएल

एचटीएमएल का इस्तेमाल करके, साइन इन बटन रेंडर करें. इससे JWT आपके प्लैटफ़ॉर्म के लॉगिन एंडपॉइंट पर वापस आ जाता है.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

g_id_signin क्लास वाला एलिमेंट, 'Google से साइन इन करें' बटन के तौर पर रेंडर होता है. बटन को डेटा एट्रिब्यूट में दिए गए पैरामीटर के हिसाब से बनाया जाता है.

'Google से साइन इन करें' बटन और Google One Tap को एक ही पेज पर दिखाने के लिए, data-auto_prompt="false" हटाएं. हमारा सुझाव है कि आप इसका इस्तेमाल करें, ताकि साइन इन करने में आने वाली रुकावटों को कम किया जा सके और साइन इन करने की दर को बेहतर बनाया जा सके.

डेटा एट्रिब्यूट की पूरी सूची देखने के लिए, g_id_signin रेफ़रंस पेज पर जाएं

JavaScript

JavaScript का इस्तेमाल करके, साइन इन बटन रेंडर करें. साथ ही, ब्राउज़र के JavaScript कॉलबैक हैंडलर को JWT वापस भेजें.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

renderButton फ़ंक्शन के पहले पैरामीटर के तौर पर तय किया गया एलिमेंट, 'Sign In With Google' बटन के तौर पर दिखता है. इस उदाहरण में, buttonDiv का इस्तेमाल करके पेज पर बटन रेंडर किया गया है. बटन को पसंद के मुताबिक बनाने के लिए, renderButton के दूसरे पैरामीटर में दिए गए एट्रिब्यूट का इस्तेमाल किया जाता है.

उपयोगकर्ता के लिए साइन-अप या साइन-इन करने के लिए, बटन का इस्तेमाल करने के दूसरे विकल्प के तौर पर One Tap दिखाने के लिए, google.accounts.id.prompt() को कॉल किया जाता है. इससे उपयोगकर्ता को आसानी होती है.

GIS लाइब्रेरी, एचटीएमएल दस्तावेज़ को पार्स करती है. ऐसा उन एलिमेंट के लिए किया जाता है जिनके आईडी एट्रिब्यूट को g_id_onload पर सेट किया गया है या जिनमें g_id_signin वाले क्लास एट्रिब्यूट शामिल हैं. अगर कोई मैचिंग एलिमेंट मिलता है, तो बटन को एचटीएमएल का इस्तेमाल करके रेंडर किया जाता है. भले ही, आपने JavaScript में भी बटन को रेंडर किया हो. बटन को दो बार दिखने से रोकने के लिए, अपने एचटीएमएल पेजों में इन नामों से मेल खाने वाले एचटीएमएल एलिमेंट शामिल न करें. ऐसा हो सकता है कि बटन दो बार दिखने पर, पैरामीटर अलग-अलग हों.

बटन की भाषा

बटन की भाषा, ब्राउज़र की डिफ़ॉल्ट भाषा या Google सेशन के उपयोगकर्ता की पसंद के हिसाब से अपने-आप तय होती है. लाइब्रेरी लोड करते समय, src डायरेक्टिव में hl पैरामीटर और भाषा कोड जोड़कर, भाषा को मैन्युअल तरीके से भी चुना जा सकता है. इसके अलावा, एचटीएमएल में data-locale या JavaScript में locale पैरामीटर जोड़कर भी भाषा को मैन्युअल तरीके से चुना जा सकता है.

एचटीएमएल

यहां दिए गए कोड स्निपेट में, क्लाइंट लाइब्रेरी के यूआरएल में hl पैरामीटर जोड़कर और data-locale एट्रिब्यूट को फ़्रेंच पर सेट करके, बटन की भाषा को फ़्रेंच में दिखाने का तरीका बताया गया है:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

यहां दिए गए कोड स्निपेट में बताया गया है कि क्लाइंट लाइब्रेरी के यूआरएल में hl पैरामीटर जोड़कर और google.accounts.id.renderButton पैरामीटर को फ़्रेंच पर सेट करके, locale तरीके को कॉल करके बटन की भाषा को फ़्रेंच में कैसे दिखाया जा सकता है:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

क्रेडेंशियल मैनेज करना

उपयोगकर्ता की सहमति मिलने के बाद, Google एक JSON Web Token (JWT) क्रेडेंशियल दिखाता है. इसे आईडी टोकन कहा जाता है. यह टोकन, उपयोगकर्ता के ब्राउज़र को या सीधे तौर पर आपके प्लैटफ़ॉर्म पर होस्ट किए गए लॉगिन एंडपॉइंट को दिखाया जाता है.

आपको JWT कहां मिलेगा, यह इस बात पर निर्भर करता है कि आपने बटन को रेंडर करने के लिए एचटीएमएल या JavaScript का इस्तेमाल किया है या नहीं. साथ ही, यह भी इस बात पर निर्भर करता है कि पॉप-अप या रीडायरेक्ट यूएक्स मोड का इस्तेमाल किया गया है या नहीं.

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

बटन को रेंडर करने के लिए, इनका इस्तेमाल किया जा रहा हो:

एचटीएमएल

इनमें से कोई एक विकल्प चुना जा सकता है:

  • data-callback का इस्तेमाल करके, अपने कॉलबैक हैंडलर को JWT वापस भेजें या
  • data-login_uri पर सेट करें, ताकि Google, POST अनुरोध का इस्तेमाल करके, JWT को सीधे आपके लॉगिन एंडपॉइंट पर भेज सके.

अगर दोनों वैल्यू सेट की गई हैं, तो data-callback को data-login_uri से ज़्यादा प्राथमिकता दी जाती है. डीबग करने के लिए कॉलबैक हैंडलर का इस्तेमाल करते समय, दोनों वैल्यू सेट करना फ़ायदेमंद हो सकता है.

JavaScript

आपको callback तय करना होगा. JavaScript में बटन रेंडर करते समय, पॉप-अप मोड रीडायरेक्ट करने की सुविधा के साथ काम नहीं करता. अगर इसे सेट किया जाता है, तो login_uri को अनदेखा कर दिया जाता है.

अपने JS कॉलबैक हैंडलर में JWT को डिकोड करने के बारे में ज़्यादा जानने के लिए, लौटाए गए क्रेडेंशियल के रिस्पॉन्स को हैंडल करना लेख पढ़ें.

रीडायरेक्ट मोड

redirect यूज़र एक्सपीरियंस (यूएक्स) मोड का इस्तेमाल करके, साइन-इन यूज़र एक्सपीरियंस (यूएक्स) फ़्लो पूरा किया जाता है. इसके लिए, उपयोगकर्ता के ब्राउज़र को पूरे पेज पर रीडायरेक्ट किया जाता है. साथ ही, Google सीधे तौर पर आपके लॉगिन एंडपॉइंट को JWT भेजता है. इसके लिए, POST अनुरोध का इस्तेमाल किया जाता है. आम तौर पर, यह उपयोगकर्ताओं के लिए ज़्यादा मुश्किल होता है. हालांकि, इसे साइन इन करने का सबसे सुरक्षित तरीका माना जाता है.

बटन को रेंडर करने के लिए, इनका इस्तेमाल किया जा रहा हो:

  • एचटीएमएल में, data-login_uri को लॉगिन एंडपॉइंट के यूआरआई पर सेट करें. यह ज़रूरी नहीं है.
  • JavaScript में, login_uri को अपने लॉगिन एंडपॉइंट के यूआरआई पर सेट करें. यह ज़रूरी नहीं है.

अगर कोई वैल्यू नहीं दी जाती है, तो Google, JWT को मौजूदा पेज के यूआरआई पर भेजता है.

आपके लॉगिन एंडपॉइंट का यूआरआई

data-login_uri या login_uri सेट करते समय, एचटीटीपीएस और पूरे यूआरआई का इस्तेमाल करें. उदाहरण के लिए, https://example.com/path.

डेवलपमेंट के दौरान, लोकल होस्ट का इस्तेमाल करते समय ही एचटीटीपी की अनुमति दी जाती है: http://localhost/path.

Google की ज़रूरी शर्तों और पुष्टि करने के नियमों के बारे में पूरी जानकारी के लिए, सुरक्षित JavaScript ऑरिजिन और रीडायरेक्ट यूआरआई का इस्तेमाल करना लेख पढ़ें.