شروع سریع جاوا اسکریپت

یک برنامه وب جاوا اسکریپت ایجاد کنید که درخواست هایی را به Google Classroom API ارسال می کند.

Quickstarts نحوه راه‌اندازی و اجرای برنامه‌ای را توضیح می‌دهد که Google Workspace API را فراخوانی می‌کند. این شروع سریع از یک رویکرد احراز هویت ساده استفاده می کند که برای یک محیط آزمایشی مناسب است. برای یک محیط تولید، توصیه می‌کنیم قبل از انتخاب اعتبارنامه‌های دسترسی مناسب برای برنامه‌تان، درباره احراز هویت و مجوز یاد بگیرید.

این شروع سریع از کتابخانه های سرویس گیرنده API توصیه شده Google Workspace برای رسیدگی به برخی از جزئیات جریان احراز هویت و مجوز استفاده می کند.

اهداف

  • محیط خود را تنظیم کنید.
  • نمونه را تنظیم کنید
  • نمونه را اجرا کنید.

پیش نیازها

  • یک حساب Google for Education با Google Classroom فعال است.

محیط خود را تنظیم کنید

برای تکمیل این شروع سریع، محیط خود را تنظیم کنید.

API را فعال کنید

قبل از استفاده از Google API، باید آنها را در پروژه Google Cloud روشن کنید. می‌توانید یک یا چند API را در یک پروژه Google Cloud روشن کنید.

اگر از یک پروژه Google Cloud جدید برای تکمیل این شروع سریع استفاده می‌کنید، صفحه رضایت OAuth را پیکربندی کنید. اگر قبلاً این مرحله را برای پروژه Cloud خود انجام داده اید، به بخش بعدی بروید.

  1. در کنسول Google Cloud، به > بروید > برندسازی

    به برندینگ بروید

  2. اگر قبلاً آن را پیکربندی کرده اید ، می توانید تنظیمات صفحه رضایت OAuth زیر را در نام تجاری ، مخاطب و دسترسی به داده پیکربندی کنید. اگر پیامی دیدید که می گوید هنوز پیکربندی نشده است ، روی شروع کلیک کنید:
    1. در قسمت اطلاعات برنامه ، در نام برنامه ، نامی برای برنامه وارد کنید.
    2. در ایمیل پشتیبانی کاربر ، آدرس ایمیل پشتیبانی را انتخاب کنید که در صورت داشتن رضایت، کاربران بتوانند با شما تماس بگیرند.
    3. روی Next کلیک کنید.
    4. در قسمت Audience ، Internal را انتخاب کنید.
    5. روی Next کلیک کنید.
    6. در قسمت اطلاعات تماس ، آدرس ایمیلی را وارد کنید که در آن می‌توانید از هرگونه تغییر در پروژه خود مطلع شوید.
    7. روی Next کلیک کنید.
    8. در قسمت پایان ، خط‌مشی داده‌های کاربر سرویس‌های API Google را مرور کنید و در صورت موافقت، من با خدمات Google API موافقم: خط‌مشی داده‌های کاربر را انتخاب کنید.
    9. روی Continue کلیک کنید.
    10. روی ایجاد کلیک کنید.
  3. در حال حاضر، می توانید از افزودن دامنه ها صرف نظر کنید. در آینده، وقتی برنامه‌ای را برای استفاده خارج از سازمان Google Workspace خود ایجاد می‌کنید، باید نوع کاربر را به خارجی تغییر دهید. سپس محدوده های مجوز مورد نیاز برنامه خود را اضافه کنید. برای کسب اطلاعات بیشتر، راهنمای کامل Configure OAuth رضایت را ببینید.

اعتبارنامه یک برنامه وب را تأیید کنید

برای احراز هویت کاربران نهایی و دسترسی به داده های کاربر در برنامه خود، باید یک یا چند شناسه مشتری OAuth 2.0 ایجاد کنید. شناسه مشتری برای شناسایی یک برنامه واحد در سرورهای OAuth Google استفاده می شود. اگر برنامه شما روی چندین پلتفرم اجرا می شود، باید برای هر پلتفرم یک شناسه مشتری جداگانه ایجاد کنید.
  1. در کنسول Google Cloud، به > بروید > مشتریان

    به مشتریان بروید

  2. روی Create Client کلیک کنید.
  3. روی نوع برنامه > برنامه وب کلیک کنید.
  4. در قسمت نام ، نامی را برای اعتبارنامه تایپ کنید. این نام فقط در کنسول Google Cloud نشان داده می شود.
  5. URI های مجاز مرتبط با برنامه خود را اضافه کنید:
    • برنامه‌های سمت کلاینت (جاوا اسکریپت) - در زیر مبدا مجاز جاوا اسکریپت ، روی افزودن URI کلیک کنید. سپس، یک URI را برای استفاده برای درخواست های مرورگر وارد کنید. این دامنه‌هایی را که برنامه شما می‌تواند درخواست‌های API را به سرور OAuth 2.0 ارسال کند، مشخص می‌کند.
    • برنامه‌های سمت سرور (جاوا، پایتون و موارد دیگر) - در زیر URI‌های مجاز تغییر مسیر ، روی Add URI کلیک کنید. سپس، یک URI نقطه پایانی را وارد کنید که سرور OAuth 2.0 می‌تواند پاسخ‌ها را به آن ارسال کند.
  6. روی ایجاد کلیک کنید.

    اعتبار جدید ایجاد شده در شناسه های مشتری OAuth 2.0 ظاهر می شود.

    به شناسه مشتری توجه کنید. اسرار مشتری برای برنامه های کاربردی وب استفاده نمی شود.

این اعتبارنامه ها را یادداشت کنید زیرا بعداً در این شروع سریع به آنها نیاز خواهید داشت.

یک کلید API ایجاد کنید

  1. در کنسول Google Cloud، به > APIs & Services > Credentials بروید.

    به Credentials بروید

  2. روی ایجاد اعتبارنامه > کلید API کلیک کنید.
  3. کلید API جدید شما نمایش داده می شود.
    • روی Copy کلیک کنید تا کلید API خود را برای استفاده در کد برنامه خود کپی کنید. کلید API را می‌توانید در بخش «کلیدهای API» اعتبار پروژه‌تان پیدا کنید.
    • برای به‌روزرسانی تنظیمات پیشرفته و محدود کردن استفاده از کلید API، روی Restrict key کلیک کنید. برای جزئیات بیشتر، به اعمال محدودیت‌های کلید API مراجعه کنید.

نمونه را تنظیم کنید

  1. در پوشه کاری خود، یک فایل به نام index.html ایجاد کنید.

  2. در فایل index.html کد نمونه زیر را قرار دهید:

    classroom/quickstart/index.html
    <!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>

    موارد زیر را جایگزین کنید:

نمونه را اجرا کنید

  1. در پوشه کاری خود، بسته http-server را نصب کنید: 

    npm install http-server

  2. در فهرست کاری خود، یک وب سرور راه اندازی کنید: 

    npx http-server -p 8000
  1. در مرورگر خود به http://localhost:8000 بروید.
  2. یک اعلان برای مجوز دسترسی می بینید:
    1. اگر قبلاً وارد حساب Google خود نشده اید، هنگامی که از شما خواسته شد وارد شوید. اگر به چندین حساب وارد شده اید، یک حساب را برای استفاده از مجوز انتخاب کنید.
    2. روی Accept کلیک کنید.

برنامه جاوا اسکریپت شما اجرا می شود و با Google Classroom API تماس می گیرد.

مراحل بعدی

بعدی
Go