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

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

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

ऐसा JavaScript वेब ऐप्लिकेशन बनाएं जो Google Classroom एपीआई से अनुरोध करता हो.

मकसद

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

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

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

• आपके पास एक Google for Education खाता होना चाहिए, जिसमें Google Classroom की सुविधा चालू हो.

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

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

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

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

• Google Cloud कंसोल में, Google Classroom एपीआई को चालू करें.

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

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

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

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

   ऐसी स्क्रीन पर जाएं जहां OAuth के लिए सहमति दी जाती है

2. उपयोगकर्ता टाइप के लिए, अंदरूनी चुनें. इसके बाद, बनाएं पर क्लिक करें.
3. ऐप्लिकेशन रजिस्ट्रेशन फ़ॉर्म भरें. इसके बाद, सेव करें और जारी रखें पर क्लिक करें.

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

5. अपने ऐप्लिकेशन रजिस्ट्रेशन की खास जानकारी देखें. बदलाव करने के लिए, बदलाव करें पर क्लिक करें. अगर ऐप्लिकेशन रजिस्ट्रेशन ठीक लग रहा है, तो डैशबोर्ड पर वापस जाएं पर क्लिक करें.

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

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

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

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

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

   Client-ID नोट करें. क्लाइंट सीक्रेट का इस्तेमाल वेब ऐप्लिकेशन के लिए नहीं किया जाता है.

7. ठीक है पर क्लिक करें. नया क्रेडेंशियल, OAuth 2.0 Client ID में दिखता है.

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

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

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

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

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

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

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

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

   classroom/quickstart/index.html

   GitHub पर देखें

   <!DOCTYPE html>
   <html>
     <head>
       <title>Classroom API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Classroom 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://classroom.googleapis.com/$discovery/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/classroom.courses.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 listCourses();
           };
   
           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 names of the first 10 courses the user has access to. If
          * no courses are found an appropriate message is printed.
          */
         async function listCourses() {
           let response;
           try {
             response = await gapi.client.classroom.courses.list({
               pageSize: 10,
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const courses = response.result.courses;
           if (!courses || courses.length == 0) {
             document.getElementById('content').innerText = 'No courses found.';
             return;
           }
           // Flatten to string to display
           const output = courses.reduce(
               (str, course) => `${str}${course.name}\n`,
               'Courses:\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: वह एपीआई पासकोड जिसे आपने ज़रूरी शर्त के तौर पर बनाया है.

सैंपल चलाएं

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

   npm install http-server
   

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

   npx http-server -p 8000
   

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

आपका JavaScript ऐप्लिकेशन, Google Classroom एपीआई को चलाता और कॉल करता है.

अगले चरण

• पुष्टि करने और अनुमति देने से जुड़ी समस्याओं को हल करना
• Classroom API के रेफ़रंस के लिए दस्तावेज़
• GitHub का google-api-javascript-client सेक्शन