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

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

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

'Google से साइन इन करें' बटन.

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

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

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

  1. टेक्स्ट एडिटर और वेब पेज को होस्ट करने की जगह. इस कोडलैब में हम इन एनवायरमेंट के बारे में बताएंगे:
    • आपकी मशीन पर टर्मिनल में स्थानीय तौर पर चल रहा हो या
    • Glitch जैसे प्लैटफ़ॉर्म का इस्तेमाल करके.
    अपने हिसाब से कोई भी प्लैटफ़ॉर्म चुनें.
  2. Google Cloud प्रोजेक्ट. आपके पास अपने मौजूदा प्रोजेक्ट का इस्तेमाल करने या नया प्रोजेक्ट बनाने का विकल्प होता है. Google Cloud Platform खाता और प्रोजेक्ट मुफ़्त है.
  3. एचटीएमएल, सीएसएस, 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 से साइन इन करें' बटन दिखाता है,
  • Google से उपयोगकर्ता के साइन इन क्रेडेंशियल पाने के लिए, handleCredentialResponse नाम का JavaScript कॉलबैक फ़ंक्शन हैंडलर जोड़ता है. साथ ही,
  • JSON वेब टोकन (JWT) क्रेडेंशियल को सिर्फ़ सादे JSON में बदलने के लिए decodeJWT फ़ंक्शन.

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 प्रोजेक्ट को सेट अप करते समय डाला गया प्रोजेक्ट का नाम होता है. उदाहरण के लिए, अगर आपके गड़बड़ी वाले प्रोजेक्ट का नाम 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 का इस्तेमाल करने से पहले उसकी पुष्टि करने के लिए किया जाता है. आईडी टोकन से उपयोगकर्ता की जानकारी पाना लेख में, सभी फ़ील्ड के बारे में ज़्यादा जानकारी दी गई है.

7. बटन को पसंद के मुताबिक बनाना

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

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

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

&#39;Google से साइन इन करें&#39; बटन.

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

आइए, बटन का रंग नीला कर दें और उस पर 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>

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

&#39;Google से साइन अप करें&#39; बटन.

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

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

बधाई हो!

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

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

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