JavaScript के बारे में खास जानकारी

JavaScript वेब ऐप्लिकेशन बनाएं, जो Gmail API को अनुरोध भेजता हो.

क्विकस्टार्ट में, Google Workspace API को कॉल करने वाले ऐप्लिकेशन को सेट अप करने और चलाने का तरीका बताया गया है. इस क्विकस्टार्ट में, पुष्टि करने का एक आसान तरीका इस्तेमाल किया जाता है. यह तरीका, टेस्ट एनवायरमेंट के लिए सही है. प्रोडक्शन एनवायरमेंट के लिए, हमारा सुझाव है कि आप अपने ऐप्लिकेशन के लिए सही ऐक्सेस क्रेडेंशियल चुनने से पहले, पुष्टि और अनुमति के बारे में जानें.

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

मकसद

  • अपना एनवायरमेंट सेट अप करें.
  • सैंपल सेट अप करें.
  • सैंपल चलाएं.

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

  • एक ऐसा Google खाता जिसमें Gmail की सुविधा चालू हो.

अपना एनवायरमेंट सेट अप करने का तरीका

इस क्विकस्टार्ट को पूरा करने के लिए, अपना एनवायरमेंट सेट अप करें.

एपीआई को चालू करना

Google API का इस्तेमाल करने से पहले, आपको उन्हें Google Cloud प्रोजेक्ट में चालू करना होगा. एक Google Cloud प्रोजेक्ट में एक या इससे ज़्यादा एपीआई चालू किए जा सकते हैं.

ऐसी स्क्रीन को कॉन्फ़िगर करना जहां OAuth के लिए सहमति दी जाती है

अगर इस क्विकस्टार्ट को पूरा करने के लिए, किसी नए Google Cloud प्रोजेक्ट का इस्तेमाल किया जा रहा है, तो OAuth की सहमति वाली स्क्रीन को कॉन्फ़िगर करें. अगर आपने अपने क्लाउड प्रोजेक्ट के लिए यह चरण पहले ही पूरा कर लिया है, तो अगले सेक्शन पर जाएं.

  1. Google API Console में, मेन्यू > Google Auth प्लैटफ़ॉर्म > ब्रैंडिंग पर जाएं.

    ब्रैंडिंग पर जाएं

  2. अगर आपने Google Auth प्लैटफ़ॉर्म को पहले ही कॉन्फ़िगर कर लिया है, तो ब्रैंडिंग, ऑडियंस, और डेटा ऐक्सेस में जाकर, OAuth के लिए सहमति वाली स्क्रीन की ये सेटिंग कॉन्फ़िगर की जा सकती हैं. अगर आपको Google Auth प्लैटफ़ॉर्म को अभी तक कॉन्फ़िगर नहीं किया गया है मैसेज दिखता है, तो शुरू करें पर क्लिक करें:
    1. ऐप्लिकेशन की जानकारी में जाकर, ऐप्लिकेशन का नाम में ऐप्लिकेशन का नाम डालें.
    2. उपयोगकर्ता सहायता ईमेल में, सहायता के लिए वह ईमेल पता चुनें जिस पर उपयोगकर्ता, सहमति से जुड़े सवाल पूछने के लिए आपसे संपर्क कर सकें.
    3. आगे बढ़ें पर क्लिक करें.
    4. ऑडियंस में जाकर, इंटरनल को चुनें.
    5. आगे बढ़ें पर क्लिक करें.
    6. संपर्क जानकारी में जाकर, वह ईमेल पता डालें जिस पर आपको अपने प्रोजेक्ट में होने वाले किसी भी बदलाव की सूचना मिल सके.
    7. आगे बढ़ें पर क्लिक करें.
    8. पूरा करें में जाकर, Google API सेवाओं के उपयोगकर्ता के डेटा से जुड़ी नीति पढ़ें. अगर आप सहमत हैं, तो मैं Google API सेवाओं के उपयोगकर्ता के डेटा से जुड़ी नीति से सहमत हूं को चुनें.
    9. जारी रखें पर क्लिक करें.
    10. बनाएं पर क्लिक करें.
  3. फ़िलहाल, स्कोप जोड़ने की प्रोसेस को छोड़ा जा सकता है. आने वाले समय में, जब आपको अपने Google Workspace संगठन से बाहर इस्तेमाल करने के लिए कोई ऐप्लिकेशन बनाना होगा, तो आपको उपयोगकर्ता टाइप को बदलकर बाहरी करना होगा. इसके बाद, अनुमति के वे स्कोप जोड़ें जिनकी आपके ऐप्लिकेशन को ज़रूरत है. ज़्यादा जानने के लिए, OAuth सहमति को कॉन्फ़िगर करने की पूरी गाइड देखें.

किसी वेब ऐप्लिकेशन के लिए क्रेडेंशियल को अनुमति देना

असली उपयोगकर्ताओं की पुष्टि करने और अपने ऐप्लिकेशन में उपयोगकर्ता का डेटा ऐक्सेस करने के लिए, आपको एक या उससे ज़्यादा OAuth 2.0 क्लाइंट आईडी बनाने होंगे. क्लाइंट आईडी का इस्तेमाल, Google के OAuth सर्वर पर किसी एक ऐप्लिकेशन की पहचान करने के लिए किया जाता है. अगर आपका ऐप्लिकेशन कई प्लैटफ़ॉर्म पर चलता है, तो आपको हर प्लैटफ़ॉर्म के लिए एक अलग क्लाइंट आईडी बनाना होगा.
  1. Google Cloud Console में, मेन्यू > Google Auth प्लैटफ़ॉर्म > क्लाइंट पर जाएं.

    क्लाइंट पर जाएं

  2. क्लाइंट बनाएं पर क्लिक करें.
  3. ऐप्लिकेशन टाइप > वेब ऐप्लिकेशन पर क्लिक करें.
  4. नाम फ़ील्ड में, क्रेडेंशियल के लिए कोई नाम टाइप करें. यह नाम सिर्फ़ Google Cloud Console में दिखता है.
  5. अपने ऐप्लिकेशन से जुड़े ऐसे यूआरआई जोड़ें जिन्हें अनुमति मिली हो:
    • क्लाइंट-साइड ऐप्लिकेशन (JavaScript)–अनुमति वाले JavaScript ऑरिजिन में जाकर, यूआरआई जोड़ें पर क्लिक करें. इसके बाद, ब्राउज़र के अनुरोधों के लिए इस्तेमाल किया जाने वाला यूआरआई डालें. इससे उन डोमेन की पहचान होती है जिनसे आपका ऐप्लिकेशन, OAuth 2.0 सर्वर को एपीआई अनुरोध भेज सकता है.
    • सर्वर-साइड ऐप्लिकेशन (Java, Python वगैरह)–अनुमति वाले रीडायरेक्ट यूआरआई में जाकर, यूआरआई जोड़ें पर क्लिक करें. इसके बाद, वह एंडपॉइंट यूआरआई डालें जिस पर OAuth 2.0 सर्वर जवाब भेज सके.
  6. ज़रूरी नहीं: अगर आपका ऐप्लिकेशन एक एआई एजेंट है, जो उपयोगकर्ताओं की ओर से कार्रवाइयां करता है, तो एआई की मदद से काम करने वाले एजेंट के लिए इस क्लाइंट का इस्तेमाल करें को चुनें. अगर आपका ऐप्लिकेशन, एआई एजेंट के वर्कफ़्लो और स्टैंडर्ड उपयोगकर्ता सुविधाओं, दोनों के साथ काम करता है, तो दोनों के लिए अलग-अलग OAuth क्लाइंट बनाएं. क्लाइंट बनाने के बाद, इस सेटिंग को नहीं बदला जा सकता.
  7. बनाएं पर क्लिक करें.

    नया क्रेडेंशियल, OAuth 2.0 क्लाइंट आईडी में दिखता है.

    ध्यान दें कि वेब ऐप्लिकेशन के लिए क्लाइंट सीक्रेट का इस्तेमाल नहीं किया जाता.

  8. क्लाइंट आईडी को सेव करें, ताकि इस क्विकस्टार्ट में बाद में इसका इस्तेमाल किया जा सके.

एपीआई पासकोड बनाना

  1. Google Cloud Console में, मेन्यू > एपीआई और सेवाएं > क्रेडेंशियल पर जाएं.

    क्रेडेंशियल पर जाएं

  2. क्रेडेंशियल बनाएं > एपीआई पासकोड पर क्लिक करें.
  3. आपको नया एपीआई पासकोड दिखेगा.
    • अपने ऐप्लिकेशन के कोड में इस्तेमाल करने के लिए, एपीआई पासकोड को कॉपी करें. इसके लिए, कॉपी करें पर क्लिक करें. एपीआई पासकोड को आपके प्रोजेक्ट के क्रेडेंशियल के "एपीआई पासकोड" सेक्शन में भी देखा जा सकता है.
    • बिना अनुमति के इस्तेमाल को रोकने के लिए, हमारा सुझाव है कि आप एपीआई पासकोड के इस्तेमाल पर पाबंदी लगाएं. इससे यह तय किया जा सकेगा कि एपीआई पासकोड का इस्तेमाल कहां और किन एपीआई के लिए किया जा सकता है. ज़्यादा जानकारी के लिए, एपीआई से जुड़ी पाबंदियां जोड़ना लेख पढ़ें.

सैंपल सेट अप करना

  1. अपनी वर्किंग डायरेक्ट्री में, index.html नाम की एक फ़ाइल बनाएं.

  2. index.html फ़ाइल में, यह सैंपल कोड चिपकाएं:

    gmail/quickstart/index.html
    <!DOCTYPE html>
<html>
  <head>
    <title>Gmail API Quickstart</title>
    <meta charset="utf>-8&<quot;> /
<  /h>ead
 < >body
    pGmail API <Qu>icksta<rt/p

    !--Add buttons to initiate auth sequence and >sign <out--
    button id="authorize_button" onclick>="ha<ndleAut>hClic<k()"Authorize/button
    button id="signout_but>ton"<; oncli>ck=&qu<ot;handleSignoutClick()"Sign Out/button

 ><   p>re id=<"content" style=&qu>ot;white-space: pre-wrap;"/pre

    script type="text/javascript"
      /* exported gapiLoaded */
      /* exported gisLoaded */
      /* exported handleAuthClick */
      /* exported handleSignoutClick */

      // TODO(developer): S<et to client I>D and API key from the Dev<eloper Conso>le
      const CLIENT_ID = 'YOUR_CLIENT_ID';
      const API_KEY = 'YOUR_API_KEY';

      // Discovery doc URL for APIs used by the quickstart
      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/gmail.readonly';

      let tokenClient;
      let gapiInited = false;
      let gisInited = false;

      document.getElementById('authorize_button').style.visibility = 'hidden';
      document.getElementById('signout_button').style.visibility = 'hidden';

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load('client', initializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function initializeGapiClient() {
        await gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: [DISCOVERY_DOC],
        });
        gapiInited = true;
        maybeEnableButtons();
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: CLIENT_ID,
          scope: SCOPES,
          callback: '', // defined later
        });
        gisInited = true;
        maybeEnableButtons&&();
      }

      /**
       * Enables user interaction after all libraries are loaded.
       */
      function maybeEnableButtons() {
        if (gapiInited  gisInited) {
          document.getElementById('authorize_button').style.visibility = 'vis>ible';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick() {
        tokenClient.callback = async (resp) = {
          if (resp.error !== undefined) {
            throw (resp);
          }
          document.getElementById('signout_button').style.visibility = 'visible';
          document.getElementById('authorize_button').innerText = 'Refresh';
          await listLabels();
        };

        if (gapi.client.getToken() === null) {
          // Prompt the user to select a Google Account and ask for consent to share their data
          // when establishing a new session.
          tokenClient.requestAccessToken({prompt: 'consent'});
        } else {
          // Skip display of account chooser and consent dialog for an existing session.
          tokenClient.requestAccessToken({prompt: ''});
        }
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick() {
        const token = gapi.client.getToken();
        if (token !== null) {
          google.accounts.oauth2.revoke(token.access_token);
          gapi.client.setToken('');
          document.getElementById('content').innerText = '';
          document.getElementById('authorize_button').innerText = 'Authorize';
          document.getElementById('signout_button').style.visibility = 'hidden';
        }
      }

      /**
       * Print all Labels in the authorized user's inbox. If no labels
       * are found an appropriate message is printed.
       */
      async function listLabels() {
        let response;
        try {
          response = await gapi.client.gmail.users.labels.list({
            'userId': 'me',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
   >     }
        const labels = response.result.labels;
        if (!labels || labels.length == 0) {
          document.getElemen<tById(&>#39;c<ontent').innerText = 'No labels found.';
          return;
        }><
      >  // <Flatten to string to display
        const output = labels.reduce(
            (str,>< label)> = <`${st>r<}${la>bel.name}\n`,
            'Labels:\n');
        document.getElementById('content').innerText = output;
      }
    /script
    script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"/script
    script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"/script
  /body
/html

    इनकी जगह ये डालें:

सैंपल चलाना

  1. अपनी वर्किंग डायरेक्ट्री में, http-server पैकेज इंस्टॉल करें:

    npm install http-server

  2. अपनी वर्किंग डायरेक्ट्री में, कोई वेब सर्वर शुरू करें:

    npx http-server -p 8000
  1. अपने ब्राउज़र में, http://localhost:8000 पर जाएं.
  2. आपको ऐक्सेस देने के लिए एक प्रॉम्प्ट दिखेगा:
    1. अगर आपने Google खाते में पहले से साइन इन नहीं किया है, तो पूछे जाने पर साइन इन करें. अगर आपने एक से ज़्यादा खातों में साइन इन किया हुआ है, तो अनुमति देने के लिए कोई एक खाता चुनें.
    2. स्वीकार करें पर क्लिक करें.

आपका JavaScript ऐप्लिकेशन चलता है और Gmail API को कॉल करता है.

अगले चरण