वेब के लिए 'Google से साइन इन करें' बटन

1. खास जानकारी

इस कोडलैब में, हम उपयोगकर्ता के साइन-इन के लिए एक वेब पेज बनाएंगे. 'Google से साइन इन करें' बटन को दिखाने और उसे पसंद के मुताबिक बनाने के लिए, Google Identity Services JavaScript लाइब्रेरी का इस्तेमाल किया जाएगा.

आपको क्या सीखने को मिलेगा

किसी वेब पेज पर 'Google से साइन इन करें' बटन जोड़ने का तरीका
OAuth 2.0 वेब ऐप्लिकेशन को सेट अप करने का तरीका
आईडी टोकन को डिकोड करने का तरीका
'Google से साइन इन करें' बटन को पसंद के मुताबिक बनाने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

टेक्स्ट एडिटर और वेब पेज को होस्ट करने की जगह. इस कोडलैब में हम इन एनवायरमेंट के बारे में बताएंगे:
- आपकी मशीन पर टर्मिनल में लोकल तौर पर चल रहा हो या
- Glitch जैसे प्लैटफ़ॉर्म का इस्तेमाल करके.
वह एनवायरमेंट चुनें जिसमें आपको सबसे ज़्यादा आसानी हो.
Google Cloud प्रोजेक्ट. आपके पास मौजूदा प्रोजेक्ट का इस्तेमाल करने या नया प्रोजेक्ट बनाने का विकल्प होता है. Google Cloud Platform खाता और प्रोजेक्ट मुफ़्त में बनाया जा सकता है.
एचटीएमएल, सीएसएस, JavaScript, और Chrome DevTools (या इसके जैसा कोई अन्य टूल) की बुनियादी जानकारी.

आइए, शुरू करते हैं.

2. साइन-इन पेज बनाना

इस कोड सैंपल को index.html नाम की फ़ाइल में जोड़ें. इसके लिए, अपने कंप्यूटर पर पसंदीदा टेक्स्ट एडिटर का इस्तेमाल करें या Glitch जैसे किसी प्लैटफ़ॉर्म का इस्तेमाल करें.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://accounts.google.com/gsi/client" async></script>

    <script>
      function decodeJWT(token) {

        let base64Url = token.split(".")[1];
        let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
        let jsonPayload = decodeURIComponent(
          atob(base64)
            .split("")
            .map(function (c) {
              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
            })
            .join("")
        );
        return JSON.parse(jsonPayload);
      }

      function handleCredentialResponse(response) {

        console.log("Encoded JWT ID token: " + response.credential);

        const responsePayload = decodeJWT(response.credential);

        console.log("Decoded JWT ID token fields:");
        console.log("  Full Name: " + responsePayload.name);
        console.log("  Given Name: " + responsePayload.given_name);
        console.log("  Family Name: " + responsePayload.family_name);
        console.log("  Unique ID: " + responsePayload.sub);
        console.log("  Profile image URL: " + responsePayload.picture);
        console.log("  Email: " + responsePayload.email);
      }
    </script>
  </head>
  <body>
    <!-- g_id_onload contains Google Identity Services settings -->
    <div
      id="g_id_onload"
      data-auto_prompt="false"
      data-callback="handleCredentialResponse"
      data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
    ></div>
    <!-- g_id_signin places the button on a page and supports customization -->
    <div class="g_id_signin"></div>
  </body>
</html>

यह कोड, एचटीएमएल और JavaScript का मिक्सचर है. इससे कई काम किए जा सकते हैं:

यह कुकी, g_id_onload का इस्तेमाल करके Google Identity Services लाइब्रेरी को कॉन्फ़िगर करती है,
g_id_signin का इस्तेमाल करके, 'Google से साइन इन करें' बटन दिखाता है,
यह handleCredentialResponse नाम का JavaScript कॉलबैक फ़ंक्शन हैंडलर जोड़ता है, ताकि Google से उपयोगकर्ता के साइन-इन क्रेडेंशियल मिल सकें.
decodeJWT फ़ंक्शन, JSON वेब टोकन (JWT) क्रेडेंशियल को सिर्फ़ सादे JSON में बदलने के लिए.

ऐसा हो सकता है कि data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE" में कुछ गड़बड़ी हो.

फ़िलहाल, इसे अनदेखा करें. हम इस पर थोड़ी देर में वापस आएंगे.

3. वेब पेज दिखाना

हम ब्राउज़र पर index.html दिखाने के लिए, दो एनवायरमेंट के बारे में चर्चा करेंगे:

अपनी मशीन पर वेब सर्वर को स्थानीय तौर पर चलाना
Glitch जैसे रिमोट प्लैटफ़ॉर्म पर.

वह तरीका चुनें जो आपको सबसे सही लगे. सेटअप के बाद, हम इस यूआरएल का इस्तेमाल करके OAuth वेब क्लाइंट को कॉन्फ़िगर करेंगे.

अपनी मशीन से स्थानीय तौर पर

पक्का करें कि आपके सिस्टम पर Python3 इंस्टॉल हो. सेटअप की प्रोसेस, ओएस और प्लैटफ़ॉर्म के हिसाब से अलग-अलग होती है. अगर आपको अपने कंप्यूटर पर Python इंस्टॉल करना है, तो Python का सेटअप और इस्तेमाल लेख पढ़ें.

index.html वाली डायरेक्ट्री में Python वेब सर्वर शुरू करें:

$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

अब वेब सर्वर, पोर्ट 8000 पर कनेक्शन के लिए सुन रहा है और आपके साइन-इन पेज को दिखाने के लिए तैयार है. यूआरएल यह है

http://localhost:8000

वेब डेवलपमेंट प्लैटफ़ॉर्म से

अगर आपने Glitch (या इसके जैसा कोई अन्य टूल) का इस्तेमाल करके, साइन-इन पेज में बदलाव करने और उसे होस्ट करने का विकल्प चुना है, तो आपको index.html को प्रीव्यू पैन या ब्राउज़र के नए टैब में खोलने का विकल्प मिलेगा.

आम तौर पर, आपको उस प्रोजेक्ट के नाम का यूआरएल इस्तेमाल करना होगा जिसे आपने glich.com प्रोजेक्ट को सेट अप करते समय डाला था. उदाहरण के लिए, अगर आपके Glitch प्रोजेक्ट का नाम gis-example है, तो यूआरएल https://gis-example.glitch.me होगा. आपने कोई दूसरा प्रोजेक्ट नाम चुना होगा और इस नाम का दोबारा इस्तेमाल नहीं किया जा सकता. यूआरएल यह है

https://<var>your-project-name</var>.glitch.me

पेज लोड करना

थोड़ी देर इंतज़ार करें...

सबसे पहले, हमें OAuth 2.0 वेब क्लाइंट बनाना होगा और उसे कॉन्फ़िगर करना होगा.

यूआरएल को कॉपी करें या लिख लें. इसका इस्तेमाल अगले चरण में किया जाता है.

4. OAuth वेब क्लाइंट सेट अप करना

चलिए, OAuth को कॉन्फ़िगर करते हैं, ताकि लोग साइन इन कर सकें.

OAuth 2.0 वेब क्लाइंट बनाने के लिए, इस लिंक पर क्लिक करें. ज़रूरत पड़ने पर, विज़र्ड की मदद से नया Google Cloud प्रोजेक्ट बनाया और सेट अप किया जा सकता है.
ऐप्लिकेशन टाइप ड्रॉपडाउन में जाकर, वेब ऐप्लिकेशन चुनें.
अनुमति वाले JavaScript ऑरिजिन में जाकर, यूआरआई जोड़ें बटन दबाएं
उस यूआरएल को डालें जो वेब पेज दिखाने के तीसरे चरण में index.html को होस्ट कर रहा है.
आपके कंप्यूटर पर होस्ट किया गया हो

किसी रिमोट प्लैटफ़ॉर्म पर होस्ट किया गया हो
बनाएं पर क्लिक करें
नए क्लाइंट आईडी को कॉपी करें.

मैं आपसे पूछना चाहूँगा कि

हमें वापस जाकर, नए क्लाइंट आईडी का इस्तेमाल करने के लिए index.html को अपडेट करना होगा. अपने एडिटर में, PUT_YOUR_WEB_CLIENT_ID_HERE की जगह अपना नया क्लाइंट आईडी डालें. क्लाइंट आईडी कैसा दिखता है, यह जानने के लिए यहां दिया गया उदाहरण देखें: 1234567890-abc123def456.apps.googleusercontent.com.

चलिए, साइन इन करते हैं!

5. साइन इन करें

सबसे पहले, अपने ब्राउज़र का डेवलपर कंसोल खोलें. Google से मिली किसी भी गड़बड़ी और JWT आईडी टोकन क्रेडेंशियल को यहां लॉग किया जाएगा.

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

इसके बाद क्या होगा, यह थोड़ा अलग हो सकता है:

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

खाता चुनने और सहमति देने के बाद, Google आपको JWT भेजता है. ब्राउज़र में चल रहा handleCredentialResponse कॉलबैक फ़ंक्शन, JWT को स्वीकार करता है.

इस कोडलैब में, हम JWT के कॉन्टेंट को डिकोड करके प्रिंट करते हैं. प्रोडक्शन वेब ऐप्लिकेशन में, डिकोड किए गए JWT की पुष्टि की जाएगी और उसका इस्तेमाल ज़्यादा काम के लिए किया जाएगा. जैसे, अपने बैकएंड प्लैटफ़ॉर्म पर नया खाता बनाना या उपयोगकर्ता के लिए नया सेशन शुरू करना.

6. JWT आईडी टोकन की जांच करना

एन्कोड किए गए JWT को डेवलपर कंसोल में लॉग किया जाता है. JWT को डिकोड करने के बाद, आईडी टोकन के कुछ ऐसे फ़ील्ड भी कंसोल में लॉग किए जाते हैं जिनका इस्तेमाल आम तौर पर किया जाता है.

JWT को डिकोड करने के लिए, jwt.io जैसे ऑनलाइन टूल इस्तेमाल किए जा सकते हैं.

इसके अलावा, आपके टर्मिनल में मौजूद jq का इस्तेमाल, JWT को डिकोड करने और देखने के लिए भी किया जा सकता है. इसके लिए, आपको अपने पैकेज मैनेजर का इस्तेमाल करके jq इंस्टॉल करना पड़ सकता है. सबसे पहले, एन्कोड की गई JWT स्ट्रिंग को दोहरे उद्धरण चिह्नों में चिपकाएं:

$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"

इसके बाद, इसे डिकोड करने के लिए इस कमांड का इस्तेमाल करें

$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
  "alg": "RS256",
  "kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
  "typ": "JWT"
}
{
  "iss": "https://accounts.google.com",
  "azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
  "sub": "2718281828459045",
  "email": "example@example.com",
  "email_verified": true,
  "nbf": 1744645148,
  "name": "Brian Daugherty",
  "picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
  "given_name": "Brian",
  "family_name": "Daugherty",
  "iat": 1744645448,
  "exp": 1744649048,
  "jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}

ईमेल, नाम, और फ़ोटो जैसी कुछ कुंजियों और वैल्यू को समझना आसान होना चाहिए. इनके अलावा, अन्य वैल्यू का इस्तेमाल JWT की पुष्टि करने के लिए किया जाता है, ताकि आप इसका इस्तेमाल कर सकें. आईडी टोकन से उपयोगकर्ता की जानकारी पाना लेख में, सभी फ़ील्ड के बारे में ज़्यादा जानकारी दी गई है.

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

7. बटन को अपनी पसंद के हिसाब से बनाना

किसी पेज पर डिफ़ॉल्ट साइन-इन बटन इस तरह से रखा जाता है

    <div class="g_id_signin"></div>

इसके बाद, आपको यह बटन दिखेगा

हालांकि, हो सकता है कि आपको अपनी साइट की थीम से मेल खाने के लिए, रंग, साइज़ या टेक्स्ट बदलना हो.

बटन के रंग को नीले रंग में बदलते हैं और इस पर Google से साइन अप करें लिखते हैं.

index.html खोलें, g_id_signin एलिमेंट ढूंढें, और data-theme="filled_blue" और data-text="signup_with" एट्रिब्यूट जोड़ें:

    <div
      class="g_id_signin"
      data-theme="filled_blue"
      data-text="signup_with"
    ></div>

पेज को सेव करने और फिर से लोड करने के बाद, आपको नया टेक्स्ट वाला नीला बटन दिखेगा.

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

8. अतिरिक्त संसाधन

बधाई हो!

आपने किसी वेब पेज पर 'Google से साइन इन करें' बटन जोड़ा है. साथ ही, OAuth 2.0 वेब क्लाइंट को कॉन्फ़िगर किया है, JWT आईडी टोकन को डिकोड किया है, और बटन के लुक को पसंद के मुताबिक बनाने का तरीका सीखा है.

इन लिंक से, आपको अगले चरणों के बारे में जानकारी मिल सकती है:

Google Identity Services HTML API
Google Identity Services JavaScript API
वेब के लिए, 'Google से साइन इन करें' सुविधा को सेटअप करने का तरीका
Google आईडी टोकन की पुष्टि करना
Google Cloud के प्रोजेक्ट के बारे में ज़्यादा जानें.
Google Identity के पुष्टि करने के तरीके

अक्सर पूछे जाने वाले सवाल

StackOverflow