דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

מטרות

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

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

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

חשבון Google.

הגדרת הסביבה

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

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

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

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

להפעלת ה-API

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

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

במסוף Google Cloud, עוברים אל תפריט > Google Auth platform > Branding.
מעבר לדף Branding
אם כבר הגדרתם את Google Auth platform, אתם יכולים לקבוע את ההגדרות הבאות של מסך ההסכמה ל-OAuth בקטעים Branding,‏ Audience וData Access. אם מופיעה ההודעה Google Auth platform not configured yet, לוחצים על Get Started:

בקטע App Information בשדה App name, מזינים שם לאפליקציה.
בקטע User support email, בוחרים כתובת אימייל לתמיכה שאליה משתמשים יפנו אם יש להם שאלות לגבי ההסכמה שלהם.
לוחצים על Next.
בקטע Audience, לוחצים על Internal.
לוחצים על Next.
בקטע Contact Information, מזינים כתובת אימייל שאליה אפשר לשלוח התראות על שינויים בפרויקט.
לוחצים על Next.
בקטע Finish, קוראים את המדיניות של Google בנושא נתוני משתמשים בשירותי API. אם אתם מסכימים, מסמנים את התיבה I agree to the Google API Services: User Data Policy.
לוחצים על Continue.
לוחצים על Create.

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

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

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

במסוף Google Cloud, עוברים אל תפריט > Google Auth platform > Clients.
כניסה לדף Clients
לוחצים על Create Client.
לוחצים על Application type‏ > Web application.
בשדה Name, מקלידים שם לפרטי הכניסה. השם הזה מוצג רק במסוף Google Cloud.
מוסיפים מזהי URI מורשים שקשורים לאפליקציה:
- אפליקציות בצד הלקוח (JavaScript) – בקטע מקורות מורשים של JavaScript, לוחצים על הוספת URI. לאחר מכן, מזינים URI לשימוש בבקשות של הדפדפן. הפרמטר הזה מזהה את הדומיינים שמהם האפליקציה יכולה לשלוח בקשות API לשרת OAuth 2.0.
- אפליקציות בצד השרת (Java,‏ Python ועוד) – בקטע כתובות URI מורשות להפניה אוטומטית, לוחצים על הוספת כתובת URI. לאחר מכן, מזינים URI של נקודת קצה שאליה שרת OAuth 2.0 יכול לשלוח תגובות.
לוחצים על יצירה.
פרטי הכניסה החדשים שנוצרו מופיעים בקטע מזהי לקוח ב-OAuth 2.0.

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

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

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

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

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

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

בקובץ index.html, מדביקים את דוגמת הקוד הבאה:

docs/quickstart/index.html

הצגת הקוד ב-GitHub

<!DOCTYPE html>
<html>
  <head>
    <title>Google Docs API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Google Docs 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://docs.googleapis.com/$discovery/rest?version=v1';

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

        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';
        }
      }

      /**
       * Prints the title of a sample doc:
       * https://docs.google.com/document/d/195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE/edit
       */
      async function printDocTitle() {
        try {
          const response = await gapi.client.docs.documents.get({
            documentId: '195j9eDD3ccgjQRttHhJPymLJUCOUjs-jmwTrekvdjFE',
          });
          const doc = response.result;
          const output = `Document ${doc.title} successfully found.\n`;
          document.getElementById('content').innerText = output;
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
      }
    </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. לוחצים על Accept.

אפליקציית JavaScript פועלת ומפעילה את Google Docs API.

השלבים הבאים

התנסות עם ממשקי Google Workspace API ב-API Explorer

מדריך למתחילים ב-JavaScript קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.