इस पेज का अनुवाद Cloud Translation API से किया गया है.

JavaScript क्विकस्टार्ट

क्विकस्टार्ट किसी Google Workspace API को कॉल करने वाले ऐप्लिकेशन को सेट अप करने और चलाने का तरीका बताता है.

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

एक JavaScript कमांड-लाइन ऐप्लिकेशन बनाएं, जो Google Calendar API का अनुरोध करता हो.

मकसद

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

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

एक Google खाता जिसमें Google Calendar चालू हो.

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

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

एपीआई चालू करें

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

Google Cloud Console में, Google Calendar API चालू करें.

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

वेब ऐप्लिकेशन के क्रेडेंशियल प्राधिकृत करें

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

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

इन क्रेडेंशियल को ध्यान में रखें क्योंकि बाद में आपको इस क्विकस्टार्ट में उनकी ज़रूरत पड़ेगी.

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

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

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

calendar/quickstart/index.html

GitHub पर देखें

<!DOCTYPE html>
<html>
  <head>
    <title>Google Calendar API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Google Calendar API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
    <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

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

      // TODO(developer): Set to client ID and API key from the Developer Console
      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/calendar/v3/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/calendar.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 = 'visible';
        }
      }

      /**
       *  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 listUpcomingEvents();
        };

        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 the summary and start datetime/date of the next ten events in
       * the authorized user's calendar. If no events are found an
       * appropriate message is printed.
       */
      async function listUpcomingEvents() {
        let response;
        try {
          const request = {
            'calendarId': 'primary',
            'timeMin': (new Date()).toISOString(),
            'showDeleted': false,
            'singleEvents': true,
            'maxResults': 10,
            'orderBy': 'startTime',
          };
          response = await gapi.client.calendar.events.list(request);
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }

        const events = response.result.items;
        if (!events || events.length == 0) {
          document.getElementById('content').innerText = 'No events found.';
          return;
        }
        // Flatten to string to display
        const output = events.reduce(
            (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
            'Events:\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>

इन्हें बदलें:

YOUR_CLIENT_ID: यह क्लाइंट आईडी, जब आपने किसी वेब ऐप्लिकेशन के लिए क्रेडेंशियल की पुष्टि की थी.
YOUR_API_KEY: वह एपीआई कुंजी जिसे आपने ज़रूरी शर्त के तौर पर बनाया है.

सैंपल चलाएं

अपनी चालू डायरेक्ट्री में वेब सर्वर शुरू करें:
Python 2.x
```
python -m SimpleHTTPServer 8000
```
Python 3.x
```
python3 -m http.server 8000
```
अपने ब्राउज़र में, http://localhost:8000 पर जाएं.
पहली बार सैंपल चलाने पर, आपको ऐक्सेस की अनुमति देने के लिए कहा जाता है:
1. अगर आपने पहले से ही अपने Google खाते में साइन इन नहीं किया है, तो आपको साइन इन करने के लिए कहा जाएगा. अगर आपने कई खातों में साइन इन किया हुआ है, तो अनुमति के लिए इस्तेमाल करने के लिए कोई एक खाता चुनें.
2. स्वीकार करें पर क्लिक करें.
3. ब्राउज़र से कोड कॉपी करें, उसे कमांड लाइन प्रॉम्प्ट में चिपकाएं, और Enter दबाएं.
अनुमति के बारे में जानकारी फ़ाइल सिस्टम में सेव की जाती है. इसलिए, अगली बार जब आप सैंपल कोड चलाएं, तब आपको पुष्टि करने के लिए नहीं कहा जाता.

आपने Google Calendar API का अनुरोध करने वाला अपना पहला JavaScript ऐप्लिकेशन बना लिया है.