Bắt đầu nhanh JavaScript

Hướng dẫn bắt đầu nhanh giải thích cách thiết lập và chạy một ứng dụng gọi API Google Workspace.

Trình bắt đầu nhanh của Google Workspace sử dụng thư viện ứng dụng API để xử lý một số chi tiết của quy trình xác thực và uỷ quyền. Bạn nên sử dụng thư viện ứng dụng cho các ứng dụng của riêng mình. Hướng dẫn bắt đầu nhanh này sử dụng phương pháp xác thực được đơn giản hoá, phù hợp với môi trường kiểm thử. Đối với môi trường phát hành chính thức, bạn nên tìm hiểu về phương thức xác thực và uỷ quyền trước khi chọn thông tin xác thực truy cập phù hợp với ứng dụng của mình.

Tạo một ứng dụng web JavaScript để gửi yêu cầu đến API Google Lớp học.

Mục tiêu

Thiết lập môi trường.
Thiết lập mẫu.
Chạy mẫu.

Điều kiện tiên quyết

Đã cài đặt Node.js và npm.
Một dự án của Google Cloud.

Có tài khoản Google for Education đã bật Google Lớp học.

Thiết lập môi trường

Để hoàn tất quá trình bắt đầu nhanh này, hãy thiết lập môi trường của bạn.

Bật API

Trước khi sử dụng các API của Google, bạn cần bật những API đó trong một dự án trên Google Cloud. Bạn có thể bật một hoặc nhiều API trong một dự án trên Google Cloud.

Trong bảng điều khiển Google Cloud, hãy bật API Google Lớp học.

Bật API

Định cấu hình màn hình xin phép bằng OAuth

Nếu bạn đang sử dụng một dự án mới của Google Cloud để hoàn tất thao tác bắt đầu nhanh này, hãy định cấu hình màn hình xin phép bằng OAuth và tự thêm chính bạn làm người dùng thử nghiệm. Nếu bạn đã hoàn tất bước này cho dự án trên Google Cloud, hãy chuyển sang phần tiếp theo.

Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > API và dịch vụ > màn hình đồng ý OAuth.
Chuyển đến màn hình xin phép bằng OAuth
Đối với Loại người dùng, hãy chọn Nội bộ, rồi nhấp vào Tạo.
Hoàn tất biểu mẫu đăng ký ứng dụng, sau đó nhấp vào Lưu và tiếp tục.
Hiện tại, bạn có thể bỏ qua bước thêm phạm vi và nhấp vào Lưu và tiếp tục. Sau này, khi tạo một ứng dụng để dùng bên ngoài tổ chức Google Workspace của mình, bạn phải thay đổi Loại người dùng thành Bên ngoài, sau đó thêm phạm vi uỷ quyền mà ứng dụng của bạn yêu cầu.
Xem lại tóm tắt đăng ký ứng dụng của bạn. Để chỉnh sửa, hãy nhấp vào Chỉnh sửa. Nếu quá trình đăng ký ứng dụng có vẻ ổn, hãy nhấp vào Back to Dashboard (Quay lại Trang tổng quan).

Ủy quyền thông tin đăng nhập cho ứng dụng web

Để xác thực người dùng cuối và truy cập vào dữ liệu người dùng trong ứng dụng, bạn cần tạo một hoặc nhiều Mã ứng dụng khách OAuth 2.0. Mã ứng dụng khách được dùng để xác định một ứng dụng cho các máy chủ OAuth của Google. Nếu ứng dụng của bạn chạy trên nhiều nền tảng, bạn phải tạo một mã ứng dụng khách riêng cho từng nền tảng.

Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > API và dịch vụ > Thông tin xác thực.
Chuyển đến phần Thông tin xác thực
Nhấp vào Tạo thông tin xác thực > Mã ứng dụng khách OAuth.
Nhấp vào Application type (Loại ứng dụng) > Web application (Ứng dụng web).
Trong trường Tên, nhập tên cho thông tin đăng nhập. Tên này chỉ hiển thị trong bảng điều khiển Google Cloud.
Thêm URI được uỷ quyền liên quan đến ứng dụng của bạn:
- Ứng dụng phía máy khách (JavaScript) – Trong phần Nguồn gốc JavaScript được cho phép, hãy nhấp vào Thêm URI. Sau đó, nhập URI để sử dụng cho các yêu cầu của trình duyệt. Mã này xác định các miền mà ứng dụng của bạn có thể gửi yêu cầu API đến máy chủ OAuth 2.0.
- Ứng dụng phía máy chủ (Java, Python, v.v.) – Trong phần URI chuyển hướng được uỷ quyền, hãy nhấp vào Thêm URI. Sau đó, hãy nhập URI điểm cuối mà máy chủ OAuth 2.0 có thể gửi phản hồi.
Nhấp vào Tạo. Màn hình ứng dụng OAuth đã tạo sẽ xuất hiện, cho thấy Mã ứng dụng khách và Mật khẩu ứng dụng khách mới.
Ghi lại Mã ứng dụng khách. Mật khẩu ứng dụng khách không được dùng cho các ứng dụng web.
Nhấp vào OK. Thông tin đăng nhập mới tạo sẽ xuất hiện trong phần Mã ứng dụng OAuth 2.0.

Hãy ghi lại những thông tin đăng nhập này vì bạn sẽ cần sử dụng sau trong hướng dẫn nhanh này.

Tạo một khoá API

Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > API và dịch vụ > Thông tin xác thực.
Chuyển đến phần Thông tin xác thực
Nhấp vào Create credentials (Tạo thông tin xác thực) > API key (Khoá API).
Khoá API mới của bạn sẽ xuất hiện.
- Nhấp vào biểu tượng Sao chép để sao chép khoá API nhằm sử dụng trong mã của ứng dụng. Bạn cũng có thể tìm thấy khoá API trong phần "Khoá API" trong thông tin xác thực của dự án.
- Nhấp vào Restrict key (Hạn chế khoá) để cập nhật chế độ cài đặt nâng cao và hạn chế việc sử dụng khoá API. Để biết thêm thông tin chi tiết, hãy xem phần Áp dụng các hạn chế đối với khoá API.

Thiết lập mẫu

Trong thư mục đang làm việc, hãy tạo một tệp có tên index.html.

Trong tệp index.html, dán mã mẫu sau đây:

classroom/quickstart/index.html

Xem trên 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>

Thay thế các đoạn mã sau:

YOUR_CLIENT_ID: mã ứng dụng khách mà bạn đã tạo khi uỷ quyền thông tin đăng nhập cho một ứng dụng web.
YOUR_API_KEY: khoá API mà bạn đã tạo làm Điều kiện tiên quyết.

Chạy mẫu

Trong thư mục đang làm việc, hãy cài đặt gói http-server:
```
npm install http-server
```
Trong thư mục đang làm việc, hãy khởi động một máy chủ web:
```
npx http-server -p 8000
```

Trong trình duyệt, hãy chuyển đến http://localhost:8000.
Bạn sẽ thấy lời nhắc cấp quyền truy cập:
1. Nếu bạn chưa đăng nhập vào Tài khoản Google của mình, hãy đăng nhập khi được nhắc. Nếu bạn đã đăng nhập vào nhiều tài khoản, hãy chọn một tài khoản để uỷ quyền.
2. Nhấp vào Chấp nhận.

Ứng dụng JavaScript của bạn chạy và gọi API Google Lớp học.