מדריך למתחילים בנושא JavaScript

במדריכים למתחילים מוסבר איך להגדיר ולהפעיל אפליקציה שקוראת ל-Google Workspace API.

כדי לטפל בפרטים מסוימים בתהליך האימות וההרשאה, המדריכים למתחילים של Google Workspace משתמשים בספריות לקוח ה-API. אנחנו ממליצים להשתמש בספריות הלקוח של האפליקציות שלכם. המדריך למתחילים משתמש בגישת אימות פשוטה שמתאימה לסביבת הבדיקה. בסביבת ייצור, מומלץ ללמוד על אימות והרשאה לפני לבחור את פרטי הכניסה שמתאימים לאפליקציה.

יוצרים אפליקציית אינטרנט ב-JavaScript ששולחת בקשות ל-Google Classroom API.

מטרות

הגדרת הסביבה.
מגדירים את הדוגמה.
מריצים את הדוגמה.

דרישות מוקדמות

Node.js ו-npm מותקנים.
פרויקט ב-Google Cloud.

חשבון Google for Education שמופעל בו Google Classroom.

הגדרת הסביבה

כדי להשלים את המדריך למתחילים, צריך להגדיר את הסביבה.

הפעלת ה-API

כדי להשתמש ב-Google APIs, צריך להפעיל אותם בפרויקט ב-Google Cloud. אפשר להפעיל ממשק API אחד או יותר בפרויקט אחד ב-Google Cloud.

מפעילים את Google Classroom API במסוף Google Cloud.

הפעלת ה-API

הגדרת מסך ההסכמה של OAuth

אם אתם משתמשים בפרויקט חדש ב-Google Cloud כדי להשלים את המדריך למתחילים, צריך להגדיר את מסך ההסכמה של OAuth ולהוסיף את עצמכם כמשתמשי בדיקה. אם כבר השלמתם את השלב הזה בפרויקט Cloud, דלגו לקטע הבא.

במסוף Google Cloud, נכנסים לתפריט > APIs & Services > מסך ההסכמה של OAuth.
מעבר למסך ההסכמה של OAuth
בהגדרה סוג משתמש, בוחרים באפשרות פנימי ולוחצים על יצירה.
ממלאים את טופס ההרשמה לאפליקציה ולוחצים על שמירה והמשך.
בינתיים, אפשר לדלג על הוספת היקפים וללחוץ על שמירה והמשך. בעתיד, כשיוצרים אפליקציה לשימוש מחוץ לארגון ב-Google Workspace, צריך לשנות את סוג המשתמש לחיצוני ואז להוסיף את היקפי ההרשאות שנדרשים לאפליקציה.
לבדוק את הסיכום של רישום האפליקציה. כדי לבצע שינויים, לוחצים על עריכה. אם הרישום של האפליקציה נראה בסדר, לוחצים על Back to Dashboard (חזרה למרכז השליטה).

אישור פרטי כניסה לאפליקציית אינטרנט

כדי לאמת משתמשי קצה ולגשת לנתוני המשתמשים באפליקציה, צריך ליצור מזהה לקוח אחד או יותר של OAuth 2.0. מזהה הלקוח משמש לזיהוי אפליקציה יחידה לשרתי OAuth של Google. אם האפליקציה פועלת בכמה פלטפורמות, צריך ליצור מזהה לקוח נפרד לכל פלטפורמה.

במסוף Google Cloud, נכנסים לתפריט > APIs & Services > Credentials.
כניסה לדף Credentials
לוחצים על יצירת פרטי כניסה > מזהה לקוח OAuth.
לוחצים על Application type (סוג האפליקציה) > Web application (אפליקציית אינטרנט).
בשדה שם, מקלידים שם לפרטי הכניסה. השם הזה מוצג רק במסוף Google Cloud.
מוסיפים מזהי URI מורשים שקשורים לאפליקציה:
- אפליקציות בצד הלקוח (JavaScript) – בקטע מקורות JavaScript מורשים, לוחצים על הוספת URI. לאחר מכן מזינים URI שישמש לבקשות דפדפן. מזהה את הדומיינים שמהם האפליקציה שלך יכולה לשלוח בקשות API לשרת OAuth 2.0.
- אפליקציות בצד השרת (Java, Python ועוד) – בקטע Authorized redirect URIs (אפליקציות בצד השרת, Java, Python ועוד) – לוחצים על Add URI (הוספת URI). לאחר מכן מזינים URI של נקודת קצה שאליה שרת OAuth 2.0 יכול לשלוח תגובות.
לוחצים על יצירה. מופיע המסך של לקוח OAuth שנוצר, ומוצגים בו מזהה הלקוח וסוד הלקוח החדשים.
יש לציין את מזהה הלקוח. סודות לקוח לא משמשים לאפליקציות אינטרנט.
לוחצים על אישור. פרטי הכניסה החדשים שנוצרו מופיעים בקטע מזהי לקוח ב-OAuth 2.0.

יש לרשום את פרטי הכניסה האלה כי תצטרכו אותם בהמשך המדריך למתחילים.

יצירה של מפתח API

במסוף Google Cloud, נכנסים לתפריט > APIs & Services > Credentials.
כניסה לדף Credentials
לוחצים על Create credentials > API key.
מפתח ה-API החדש מוצג.
- לוחצים על סמל ההעתקה כדי להעתיק את מפתח ה-API ולהשתמש בו בקוד של האפליקציה. אפשר למצוא את מפתח ה-API גם בקטע API Keys (מפתחות API) של פרטי הכניסה לפרויקט.
- לוחצים על Restrict key כדי לעדכן הגדרות מתקדמות ולהגביל את השימוש במפתח ה-API. פרטים נוספים זמינים במאמר החלת הגבלות על מפתחות API.

הגדרת הדוגמה

בספריית העבודה, יוצרים קובץ בשם index.html.

בקובץ 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: מפתח ה-API שיצרתם כדרישה מוקדמת.

הרצת הדוגמה

בספריית העבודה, מתקינים את חבילת http-server:
```
npm install http-server
```
בספריית העבודה, מפעילים שרת אינטרנט:
```
npx http-server -p 8000
```

בדפדפן, עוברים אל http://localhost:8000.
תופיע בקשה למתן הרשאת גישה:
1. אם עדיין לא נכנסתם לחשבון Google, נכנסים כשמוצגת בקשה לעשות זאת. אם נכנסת לכמה חשבונות, צריך לבחור חשבון אחד שישמש לצורך הרשאה.
2. לוחצים על אישור.

אפליקציית ה-JavaScript מפעילה את Google Classroom API וקוראת לו.