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

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

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

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

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

अपने लॉगिन पेज पर बटन जोड़ने से पहले, ये काम पूरे करें:

बटन रेंडरिंग

'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 का इस्तेमाल करके, 'साइन-इन' बटन रेंडर करें और JWT को ब्राउज़र के JavaScript कॉलबैक हैंडलर को वापस लाएं.

<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() को डिसप्ले करने के लिए कहा जाता है. साइन अप या साइन इन करने के लिए, बटन का इस्तेमाल करने के बजाय, एक टैप को दूसरे विकल्प के तौर पर दिखाया जाता है.

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 पैरामीटर जोड़कर, बटन की भाषा को फ़्रेंच में कैसे दिखाया जाए. साथ ही, 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 का इस्तेमाल करके रेंडर किया है या नहीं और पॉप-अप या रीडायरेक्ट UX मोड का इस्तेमाल किया गया है या नहीं.

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

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

एचटीएमएल

इनमें से किसी एक को सेट किया जा सकता है:

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

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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