वेब के लिए '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 का मिला-जुला रूप है. यह कई काम करता है:

  • Google Identity Services की इस लाइब्रेरी को g_id_onload के साथ कॉन्फ़िगर करती है,
  • यह g_id_signin का इस्तेमाल करके, 'Google से साइन इन करें' बटन दिखाता है,
  • Google से उपयोगकर्ता का साइन-इन क्रेडेंशियल पाने के लिए, handleCredentialResponse नाम का एक JavaScript कॉलबैक फ़ंक्शन हैंडलर जोड़ता है और
  • JSON Web Token (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 ID टोकन क्रेडेंशियल है, तो उसकी जानकारी यहां लॉग की जाएगी.

'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 आईडी टोकन को डिकोड किया है, और बटन के लुक को पसंद के मुताबिक बनाने का तरीका जाना है.

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

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