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

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

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

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

मकसद

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

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

• Node.js और npm इंस्टॉल होना चाहिए.
• Google Cloud प्रोजेक्ट.

• Google खाता

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

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

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

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

• Google Cloud Console में, Google Drive Activity API को चालू करें.

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

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

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

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

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

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 2.0 क्लाइंट आईडी में दिखता है.

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

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

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

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

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

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

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

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

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

   drive/activity-v2/index.html

   GitHub पर देखें
   <!DOCTYPE html>
   <html>
     <head>
       <title>Drive Activity API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Drive Activity 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/driveactivity/v2/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/drive.activity.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 listActivities();
           };
   
           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 recent activity.
          */
         async function listActivities() {
           let response;
           try {
             response = await gapi.client.driveactivity.activity.query({
               'pageSize': 10,
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const activities = response.result.activities;
           if (!activities || activities.length == 0) {
             document.getElementById('content').innerText = 'No activities found.';
             return;
           }
           // Flatten to string to display
           const output = activities.reduce(
               (str, activity) => {
                 const time = getTimeInfo(activity);
                 const action = getActionInfo(activity['primaryActionDetail']);
                 const actors = activity.actors.map(getActorInfo);
                 const targets = activity.targets.map(getTargetInfo);
                 return `${str}${time}: ${truncated(actors)}, ${action}, ${truncated(targets)}\n`;
               },
               'Activities:\n');
           document.getElementById('content').innerText = output;
         }
   
         // Utility methods for formatting activity records
   
         /**
          * Returns a string representation of the first N elements in a list.
          * @param {string[]} array - Values to join
          * @param {number} limit - # of elements to show
          * @return {string} formatted string
          */
         function truncated(array, limit = 2) {
           const contents = array.slice(0, limit).join(', ');
           const more = array.length > limit ? ', ...' : '';
           return `[${contents}${more}]`;
         }
   
         /**
          * Returns the first found property name in an object.
          * @param {object} object - Object to search
          * @return {string} key name or 'unknown'
          */
         function getOneOf(object) {
           const props = Object.getOwnPropertyNames(object);
           if (props.length === 0) {
             return 'unknown';
           }
           return props[0];
         }
   
         /**
          * Returns a time associated with an activity.
          * @param {object} activity - Activity record
          * @return {string} Formatted timestamp
          */
         function getTimeInfo(activity) {
           if ('timestamp' in activity) {
             return activity.timestamp;
           }
           if ('timeRange' in activity) {
             return activity.timeRange.endTime;
           }
           return 'unknown';
         }
   
         /**
          * Returns the type of action.
          * @param {object} actionDetail
          * @return {string} Action type as string
          */
         function getActionInfo(actionDetail) {
           return getOneOf(actionDetail);
         }
   
         /**
          * Returns user information, or the type of user if not a known user.
          * @param {object} user - User record
          * @return {string} user type as string
          */
         function getUserInfo(user) {
           if ('knownUser' in user) {
             const knownUser = user['knownUser'];
             const isMe = knownUser['isCurrentUser'] || false;
             return isMe ? 'people/me' : knownUser['personName'];
           }
           return getOneOf(user);
         }
   
         /**
          * Returns actor information, or the type of actor if not a user.
          * @param {object} actor - Actor record
          * @return {string} actor type as string
          */
         function getActorInfo(actor) {
           if ('user' in actor) {
             return getUserInfo(actor['user']);
           }
           return getOneOf(actor);
         }
   
         /**
          * Returns the type of a target and an associated title.
          * @param {object} target - Activity target record
          * @return {string} target type as string
          */
         function getTargetInfo(target) {
           if ('driveItem' in target) {
             const title = target.driveItem.title || 'unknown';
             return `driveItem:"${title}"`;
           }
           if ('drive' in target) {
             const title = target.drive.title || 'unknown';
             return `drive:"${title}"`;
           }
           if ('fileComment' in target) {
             const parent = target.fileComment.parent || {};
             const title = parent.title || 'unknown';
             return `fileComment:"${title}"`;
           }
           return `${getOneOf(target)}:unknown`;
         }
       </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: वह एपीआई पासकोड जिसे आपने ज़रूरी शर्त के तौर पर बनाया है.

सैंपल चलाना

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

   npm install http-server
   

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

   npx http-server -p 8000
   

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

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

अगले चरण

• APIs explorer में Google Workspace API आज़माएं
  • पुष्टि करने और अनुमति देने से जुड़ी समस्याओं को हल करना
  • Drive Activity API के बारे में जानकारी देने वाला दस्तावेज़
  • GitHub का google-api-javascript-client सेक्शन