Hướng dẫn nhanh về JavaScript

Tạo một ứng dụng web JavaScript gửi yêu cầu đến API Google Drive.

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 một API Google Workspace. Hướng dẫn bắt đầu nhanh này sử dụng một phương pháp xác thực đơn giản phù hợp với môi trường kiểm thử. Đối với môi trường phát hành công khai, bạn nên tìm hiểu về xác thực và uỷ quyền trước khi chọn thông tin đăng nhập để truy cập phù hợp với ứng dụng của bạn.

Hướng dẫn nhanh này sử dụng các thư viện ứng dụng API được đề xuất của Google Workspace để xử lý một số thông tin chi tiết về quy trình xác thực và uỷ quyền.

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

• Node.js và npm đã được cài đặt.
• Một dự án trên Google Cloud.

• Tài khoản Google có bật Google Drive.

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

Để hoàn tất hướng dẫn 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 API của Google, bạn cần bật các API đó trong một 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 Google Cloud Console, hãy bật Google Drive API.

  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 trên Google Cloud để hoàn tất hướng dẫn bắt đầu nhanh này, hãy định cấu hình màn hình đồng ý OAuth. Nếu bạn đã hoàn tất bước này cho dự án trên Cloud, hãy chuyển sang phần tiếp theo.

1. Trong bảng điều khiển Google Cloud, hãy chuyển đến phần Trình đơn > > Thương hiệu.

   Chuyển đến phần Thương hiệu

2. Nếu đã định cấu hình , bạn có thể định cấu hình các chế độ cài đặt sau đây cho Màn hình đồng ý OAuth trong phần Thương hiệu, Đối tượng và Quyền truy cập vào dữ liệu. Nếu bạn thấy thông báo chưa được định cấu hình, hãy nhấp vào Bắt đầu:
1. Trong mục Thông tin về ứng dụng, trong phần Tên ứng dụng, hãy nhập tên cho ứng dụng.
2. Trong phần Email hỗ trợ người dùng, hãy chọn một địa chỉ email hỗ trợ mà người dùng có thể liên hệ với bạn nếu họ có thắc mắc về sự đồng ý của mình.
3. Nhấp vào Tiếp theo.
4. Trong phần Đối tượng người xem, hãy chọn Nội bộ.
5. Nhấp vào Tiếp theo.
6. Trong phần Thông tin liên hệ, hãy nhập Địa chỉ email để bạn có thể nhận thông báo về mọi thay đổi đối với dự án của mình.
7. Nhấp vào Tiếp theo.
8. Trong phần Hoàn tất, hãy xem kỹ Chính sách dữ liệu người dùng của dịch vụ API của Google. Nếu bạn đồng ý, hãy chọn Tôi đồng ý với Chính sách dữ liệu người dùng của dịch vụ API của Google.
9. Nhấp vào Tiếp tục.
10. Nhấp vào Tạo.
3. Hiện tại, bạn có thể bỏ qua bước thêm phạm vi. Trong tương lai, khi tạo một ứng dụng để sử dụng bên ngoài tổ chức Google Workspace, bạn phải thay đổi Loại người dùng thành Bên ngoài. Sau đó, hãy thêm các phạm vi uỷ quyền mà ứng dụng của bạn yêu cầu. Để tìm hiểu thêm, hãy xem hướng dẫn đầy đủ về cách Định cấu hình sự đồng ý của OAuth.

Uỷ quyền thông tin đăng nhập cho một ứ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 của mình, bạn cần tạo một hoặc nhiều Mã ứng dụng OAuth 2.0. Mã ứng dụng khách được dùng để xác định một ứng dụng duy nhất 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ã nhận dạng ứng dụng riêng cho mỗi nền tảng.

1. Trong bảng điều khiển Google Cloud, hãy chuyển đến Trình đơn > > Clients (Ứng dụng).

   Chuyển đến mục Khách hàng

2. Nhấp vào Tạo ứng dụng.
3. Nhấp vào Loại ứng dụng > Ứng dụng web.
4. Trong trường Name (Tên), hãy nhập tên cho thông tin đăng nhập. Tên này chỉ xuất hiện trong Google Cloud Console.
5. Thêm các 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 uỷ quyền, hãy nhấp vào Thêm URI. Sau đó, hãy nhập một URI để sử dụng cho các yêu cầu của trình duyệt. Tham số này xác định những 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à các ứng dụng khác) – Trong mục URI chuyển hướng được uỷ quyền, hãy nhấp vào Thêm URI. Sau đó, hãy nhập một 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.

   Thông tin xác thực mới tạo sẽ xuất hiện trong phần Mã ứng dụng OAuth 2.0.

   Ghi lại Mã ứng dụng khách. Khoá bí mật ứng dụng không được dùng cho các ứng dụng Web.

Ghi lại thông tin đăng nhập này vì bạn sẽ cần đến chúng sau này trong hướng dẫn nhanh này.

Tạo một khoá API

1. Trong bảng điều khiển Google Cloud, hãy chuyển đến phần Trình đơn > API và Dịch vụ > Thông tin xác thực.

   Chuyển đến phần Thông tin đăng nhập

2. Nhấp vào Tạo thông tin xác thực > Khoá API.
3. 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" của thông tin đăng nhập dự án.
   • Nhấp vào Hạn chế khoá để cập nhật chế độ cài đặt nâng cao và giới hạn 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 quy tắc hạn chế đối với khoá API.

Thiết lập mẫu

1. Trong thư mục làm việc, 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:

   drive/quickstart/index.html

   Xem trên GitHub
   <!DOCTYPE html>
   <html>
     <head>
       <title>Drive API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Drive 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/drive/v3/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.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 listFiles();
           };
   
           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 metadata for first 10 files.
          */
         async function listFiles() {
           let response;
           try {
             response = await gapi.client.drive.files.list({
               'pageSize': 10,
               'fields': 'files(id, name)',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const files = response.result.files;
           if (!files || files.length == 0) {
             document.getElementById('content').innerText = 'No files found.';
             return;
           }
           // Flatten to string to display
           const output = files.reduce(
               (str, file) => `${str}${file.name} (${file.id})\n`,
               'Files:\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ế nội dung 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 dưới dạng Điều kiện tiên quyết.

Chạy mẫu

1. Trong thư mục đang hoạt động, hãy cài đặt gói http-server:

   npm install http-server
   

2. Trong thư mục làm việc, hãy khởi động một máy chủ web:

   npx http-server -p 8000
   

3. Trong trình duyệt, hãy truy cập vào http://localhost:8000.
4. Bạn sẽ thấy lời nhắc cho phép truy cập:
   1. Nếu bạn chưa đăng nhập vào Tài khoản Google, 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 để dùng cho việc 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 Drive.

Các bước tiếp theo

• Khắc phục sự cố về xác thực và uỷ quyền
• Tài liệu tham khảo về Drive API
• Mục google-api-javascript-client của GitHub