Hướng dẫn bắt đầu nhanh về JavaScript

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

Hướng dẫn bắt đầu nhanh về Google Workspace sử dụng thư viện ứng dụng API để xử lý một số thông tin về quy trình xác thực và uỷ quyền. Bạn nên sử dụng các thư viện ứng dụng cho ứng dụng của riêng mình. Trước khi có thể chạy ứng dụng mẫu, mỗi lần bắt đầu nhanh yêu cầu bạn bật tính năng xác thực và uỷ quyền. Nếu bạn chưa hiểu rõ về tính năng xác thực và uỷ quyền cho các API Google Workspace, hãy đọc bài viết Tổng quan về việc xác thực và uỷ quyền.

Tạo một ứng dụng web JavaScript gửi yêu cầu tới API Gmail.

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

  • Tài khoản Google đã bật Gmail.

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 Google API, bạn cần bật các API đó trong dự án Google Cloud. Bạn có thể bật một hoặc nhiều API trong một dự án Google Cloud.
  • Trong bảng điều khiển của Google Cloud, hãy bật API Gmail.

    Bật API

Cho phép thông tin xác thực cho một ứng dụng web

Để xác thực là người dùng cuối và truy cập dữ liệu người dùng trong ứng dụng của bạn, 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 duy nhất cho 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, thì bạn phải tạo một mã ứng dụng khách riêng cho từng nền tảng.
  1. Trong bảng điều khiển của 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 Thông tin xác thực

  2. Nhấp vào Tạo thông tin xác thực > Mã ứng dụng khách OAuth.
  3. Nhấp vào Loại ứng dụng > Ứng dụng web.
  4. Trong trường Tên, hãy nhập tên cho thông tin xác thực. Tên này chỉ hiển thị trong bảng điều khiển Google Cloud.
  5. Thêm các URI được ủy quyền liên quan đến ứng dụng của bạn:
    • Ứng dụng phía máy khách (JavaScript) – Trong Nguồn gốc JavaScript được cho phép, hãy nhấp vào Thêm URI. Sau đó, nhập URI để dùng cho yêu cầu của trình duyệt. Thông tin này xác định các miền mà từ đó ứ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 URI chuyển hướng được ủy 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.
  6. Nhấp vào Tạo. Màn hình tạo ứng dụng OAuth xuất hiện, hiển thị mã ứng dụng khách và mật khẩu ứng dụng khách mới của bạn.

    Ghi lại mã ứng dụng khách. Mật khẩu ứng dụng khách không được sử dụng cho các ứng dụng web.

  7. Nhấp vào OK. Thông tin xác thực mới tạo xuất hiện trong Mã ứng dụng khách OAuth 2.0.
  8. Không bắt buộc: Nếu đang tạo thông tin xác thực làm điều kiện tiên quyết để bắt đầu nhanh JavaScript, bạn cũng phải tạo khoá API.

Ghi chú về những thông tin đăng nhập này vì sau này bạn sẽ cần đến chúng.

Thiết lập mẫu

  1. Trong thư mục đang hoạt động, hãy tạo một tệp có tên là index.html.
  2. Trong tệp index.html, hãy dán mã mẫu sau:

    gmail/quickstart/index.html
    <!DOCTYPE html>
    <html>
      <head>
        <title>Gmail API Quickstart</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <p>Gmail 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/gmail/v1/rest';
    
          // Authorization scopes required by the API; multiple scopes can be
          // included, separated by spaces.
          const SCOPES = 'https://www.googleapis.com/auth/gmail.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 listLabels();
            };
    
            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 all Labels in the authorized user's inbox. If no labels
           * are found an appropriate message is printed.
           */
          async function listLabels() {
            let response;
            try {
              response = await gapi.client.gmail.users.labels.list({
                'userId': 'me',
              });
            } catch (err) {
              document.getElementById('content').innerText = err.message;
              return;
            }
            const labels = response.result.labels;
            if (!labels || labels.length == 0) {
              document.getElementById('content').innerText = 'No labels found.';
              return;
            }
            // Flatten to string to display
            const output = labels.reduce(
                (str, label) => `${str}${label.name}\n`,
                'Labels:\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 mục sau:

Chạy mẫu

  1. Trong thư mục đang hoạt động, hãy khởi động một máy chủ web:

    Python

    python -m SimpleHTTPServer 8000
    

    Python

    python3 -m http.server 8000
    
  2. Trên trình duyệt, hãy chuyển đến http://localhost:8000.

  3. Trong lần đầu tiên chạy mẫu, bạn sẽ nhận được lời nhắc cấp quyền truy cập:

    1. Nếu chưa đăng nhập vào Tài khoản Google, bạn sẽ được nhắc đăng nhập. 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 để sử dụng khi uỷ quyền.
    2. Hãy nhấp vào Chấp nhận.
    3. Sao chép mã từ trình duyệt, dán vào lời nhắc dòng lệnh và nhấn Enter.

    Thông tin uỷ quyền được lưu trữ trong hệ thống tệp, vì vậy, vào lần tiếp theo chạy mã mẫu, bạn sẽ không được nhắc uỷ quyền.

Bạn đã tạo thành công ứng dụng JavaScript đầu tiên để yêu cầu API Gmail.

Các bước tiếp theo