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

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

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

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

मकसद

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

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

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

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

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

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

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

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

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

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

  2. अगर आपने Google Auth platform को पहले ही कॉन्फ़िगर कर लिया है, तो ब्रैंडिंग, ऑडियंस, और डेटा ऐक्सेस में जाकर, OAuth के लिए सहमति की स्क्रीन की इन सेटिंग को कॉन्फ़िगर किया जा सकता है. अगर आपको Google Auth platform को अब तक कॉन्फ़िगर नहीं किया गया है मैसेज दिखता है, तो शुरू करें पर क्लिक करें:
    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 platform > क्लाइंट पर जाएं.

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

  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 फ़ाइल में, यह सैंपल कोड चिपकाएं:

    adminSDK/directory/index.html
    <!DOCTYPE html>
<html>
  <head>
    <title>Directory API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Directory 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/admin/directory_v1/rest';

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

        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 first 10 users in the domain.
       */
      async function listUsers() {
        let response;
        try {
          const request = {
            'customer': 'my_customer',
            'maxResults': 10,
            'orderBy': 'email',
          };
          response = await gapi.client.directory.users.list(request);
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }

        const users = response.result.users;
        if (!users || users.length == 0) {
          document.getElementById('content').innerText = 'No users found.';
          return;
        }
        // Flatten to string to display
        const output = users.reduce(
            (str, user) => `${str}${user.primaryEmail} (${user.name.fullName})\n`,
            'Users:\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 ऐप्लिकेशन चलता है और Directory API को कॉल करता है.

अगले चरण