מדריך למתחילים ב-JavaScript

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

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

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

מטרות

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

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

מגדירים את הסביבה

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

מפעילים את ה-API

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

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

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

  1. ב-Google API Console, נכנסים לתפריט > Google Auth platform > Branding.

    מעבר לדף Branding

  2. אם כבר הגדרתם את פלטפורמת האימות של Google, אתם יכולים לקבוע את ההגדרות הבאות של מסך ההסכמה ל-OAuth בקטעים Branding,‏ Audience וData Access. אם מופיעה ההודעה Google Auth platform not configured yet, לוחצים על Get Started:
    1. בקטע App Information בשדה App name, מזינים שם לאפליקציה.
    2. בקטע User support email, בוחרים כתובת אימייל לתמיכה שאליה משתמשים יפנו אם יש להם שאלות לגבי ההסכמה שלהם.
    3. לוחצים על Next.
    4. בקטע Audience, לוחצים על Internal.
    5. לוחצים על Next.
    6. בקטע Contact Information, מזינים כתובת אימייל שאליה אפשר לשלוח התראות על שינויים בפרויקט.
    7. לוחצים על Next.
    8. בקטע Finish, קוראים את המדיניות של Google בנושא נתוני משתמשים בשירותי API. אם אתם מסכימים, סמנו את התיבה I agree to the Google API Services: User Data Policy.
    9. לוחצים על Continue.
    10. לוחצים על Create.
  3. כרגע אתם יכולים לדלג על הוספת היקפי הרשאות. בעתיד, כשתיצרו אפליקציה לשימוש מחוץ לארגון שלכם ב-Google Workspace, תצטרכו לשנות את סוג המשתמש ל-External. לאחר מכן מוסיפים את היקפי ההרשאות שהאפליקציה דורשת. למידע נוסף, אפשר לעיין במדריך המלא בנושא הגדרת הסכמה ל-OAuth.

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

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

    מעבר אל "לקוחות"

  2. לוחצים על Create Client.
  3. לוחצים על Application type‏ > Web application.
  4. בשדה Name, מקלידים שם לפרטי הכניסה. השם הזה מוצג רק במסוף Google Cloud.
  5. מוסיפים מזהי URI מורשים שקשורים לאפליקציה:
    • אפליקציות בצד הלקוח (JavaScript) – בקטע מקורות מורשים של JavaScript, לוחצים על הוספת URI. אחר כך מזינים את ה-URI שבו רוצים להשתמש לבקשות מהדפדפן. הפרמטר הזה מזהה את הדומיינים שמהם האפליקציה יכולה לשלוח בקשות API לשרת OAuth 2.0.
    • אפליקציות בצד השרת (Java,‏ Python ועוד) – בקטע Authorized redirect URIs, לוחצים על Add URI. אחר כך מזינים את ה-URI של נקודת הקצה שאליו שרת OAuth 2.0 יכול לשלוח תגובות.
  6. אופציונלי: אם האפליקציה היא סוכן AI שמבצע פעולות בשם המשתמשים, בוחרים באפשרות שימוש בלקוח הזה לסוכן מבוסס-AI. אם האפליקציה תומכת גם בתהליכי עבודה של סוכני AI וגם בתכונות רגילות למשתמשים, צריך ליצור לקוחות OAuth נפרדים לכל אחד מהם. אי אפשר לשנות את ההגדרה הזו אחרי שיוצרים את הלקוח.
  7. לוחצים על יצירה.

    פרטי הכניסה החדשים שנוצרו מופיעים בקטע OAuth 2.0 Client IDs.

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

  8. שומרים את מזהה הלקוח לשימוש בהמשך המדריך למתחילים.

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

  1. במסוף Google Cloud, נכנסים לתפריט > APIs & Services > Credentials.

    כניסה לדף Credentials

  2. לוחצים על Create credentials > מפתח API.
  3. מפתח ה-API החדש מוצג.
    • לוחצים על סמל ההעתקה כדי להעתיק את מפתח ה-API ולהשתמש בו בקוד של האפליקציה. מפתח ה-API מופיע גם בקטע "מפתחות API" בפרטי הכניסה של הפרויקט.
    • כדי למנוע שימוש לא מורשה, מומלץ להגביל את המקומות שבהם אפשר להשתמש במפתח ה-API ואת ממשקי ה-API שאפשר להשתמש בו עבורם. פרטים נוספים זמינים במאמר בנושא הוספת הגבלות על ממשקי API.

מגדירים את הדוגמה

  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. לוחצים על Accept.

אפליקציית JavaScript פועלת ושולחת קריאה ל-Directory API.

השלבים הבאים