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

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

आपके हिसाब से साइन इन करने का बटन.

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

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

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

बटन रेंडर करना

'Google से साइन इन करें' बटन दिखाने के लिए, अपने लॉगिन पेज पर बटन को रेंडर करने के लिए, HTML या 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 के पहले पैरामीटर के तौर पर तय किया गया एलिमेंट, 'Google से साइन इन करें' बटन के तौर पर दिखता है. इस उदाहरण में, पेज पर बटन को रेंडर करने के लिए buttonDiv का इस्तेमाल किया गया है. renderButton के दूसरे पैरामीटर में बताए गए एट्रिब्यूट का इस्तेमाल करके, बटन को पसंद के मुताबिक बनाया जाता है.

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

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

बटन की भाषा

बटन की भाषा, ब्राउज़र की डिफ़ॉल्ट भाषा या Google सेशन के उपयोगकर्ता की प्राथमिकता के हिसाब से अपने-आप तय होती है. लाइब्रेरी लोड करते समय, src डायरेक्टिव में hl पैरामीटर और भाषा कोड जोड़कर, भाषा को मैन्युअल तरीके से भी चुना जा सकता है. इसके अलावा, एचटीएमएल में वैकल्पिक data-locale या locale पैरामीटर 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 पैरामीटर जोड़कर, बटन की भाषा को फ़्रेंच में दिखाने का तरीका बताया गया है. इसके लिए, locale पैरामीटर को फ़्रेंच पर सेट करके, google.accounts.id.renderButton तरीके को कॉल किया गया है:

<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 वेब टोकन (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 POST अनुरोध का इस्तेमाल करके, सीधे आपके लॉगिन एंडपॉइंट पर जेडब्लयूटी भेजता है. आम तौर पर, यह उपयोगकर्ताओं के लिए परेशानी भरा होता है. हालांकि, इसे साइन इन करने का सबसे सुरक्षित तरीका माना जाता है.

बटन को रेंडर करते समय, इनका इस्तेमाल करने पर:

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

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

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

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

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

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