Bắt đầu nhanh JavaScript

Quickstarts giải thích cách thiết lập và chạy một ứng dụng gọi API Google Workspace.

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

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

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 .
• Một Google Cloud dự án.

• Tài khoản Google

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

Để hoàn tất quy 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 các API này 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 Google Cloud.

• Trong bảng điều khiển Google Cloud, hãy bật Google Drive Activity API.

  Bật API

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

Nếu bạn đang dùng một dự án mới trên Google Cloud để hoàn tất quy trình bắt đầu nhanh này, hãy định cấu hình màn hình xin phép bằng OAuth và thêm chính bạn làm người dùng thử nghiệm. Nếu bạn đã đã hoàn thành bước này cho dự án Cloud của bạn, 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 Trình đơn > API và Dịch vụ > Màn hình xin phép bằng OAuth.

   Chuyển đến màn hình xin phép bằng OAuth

2. Đối với Loại người dùng, hãy chọn Nội bộ, rồi nhấp vào Tạo.
3. 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.

4. Hiện tại, bạn có thể bỏ qua bước thêm phạm vi rồi nhấp vào Lưu và tiếp tục. Trong tương lai, khi bạn tạo một ứng dụng để sử dụng bên ngoài Nếu là tổ chức Google Workspace, 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.

5. Xem lại thông tin tóm tắt về gói đă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 ứng dụng có vẻ ổn, hãy nhấp vào Quay lại trang tổng quan.

Cấp 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 của mình, bạn cần phải 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 vào 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.

1. 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

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, 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.
5. 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 mục 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 về trình duyệt. Phần 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 mục URI chuyển hướng được phép, hãy nhấp vào Thêm URI. Sau đó, 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 OAuth do ứng dụng tạo sẽ xuất hiện, cho biết Mã ứng dụng khách và Mật khẩu ứng dụng 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 dùng cho các ứng dụng web.

7. Nhấp vào OK. Thông tin đăng nhập mới được tạo sẽ xuất hiện trong phần Mã ứng dụng OAuth 2.0.

Hãy ghi lại các thông tin đăng nhập này vì bạn sẽ cần đến sau trong phần bắt đầu nhanh này.

Tạo một khoá API

1. 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 đăng nhập.

   Chuyển đến phần Thông tin xác thực

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 để dùng trong mã của ứng dụng. Khoá API cũng có thể là có trong "khoá API" trong thông tin đăng nhập của dự án.
   • Nhấp vào Hạn chế khoá để cập nhật các chế độ cài đặt nâng cao và hạn chế việc sử dụng của khoá API. Để biết thêm thông tin, 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 đang làm việc, hãy tạo một tệp có tên index.html.

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

   Drive/activity-v2/index.html

   Xem trên GitHub

   <!DOCTYPE html>
   <html>
     <head>
       <title>Drive Activity API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Drive Activity 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/driveactivity/v2/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/drive.activity.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 listActivities();
           };
   
           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 recent activity.
          */
         async function listActivities() {
           let response;
           try {
             response = await gapi.client.driveactivity.activity.query({
               'pageSize': 10,
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const activities = response.result.activities;
           if (!activities || activities.length == 0) {
             document.getElementById('content').innerText = 'No activities found.';
             return;
           }
           // Flatten to string to display
           const output = activities.reduce(
               (str, activity) => {
                 const time = getTimeInfo(activity);
                 const action = getActionInfo(activity['primaryActionDetail']);
                 const actors = activity.actors.map(getActorInfo);
                 const targets = activity.targets.map(getTargetInfo);
                 return `${str}${time}: ${truncated(actors)}, ${action}, ${truncated(targets)}\n`;
               },
               'Activities:\n');
           document.getElementById('content').innerText = output;
         }
   
         // Utility methods for formatting activity records
   
         /**
          * Returns a string representation of the first N elements in a list.
          * @param {string[]} array - Values to join
          * @param {number} limit - # of elements to show
          * @return {string} formatted string
          */
         function truncated(array, limit = 2) {
           const contents = array.slice(0, limit).join(', ');
           const more = array.length > limit ? ', ...' : '';
           return `[${contents}${more}]`;
         }
   
         /**
          * Returns the first found property name in an object.
          * @param {object} object - Object to search
          * @return {string} key name or 'unknown'
          */
         function getOneOf(object) {
           const props = Object.getOwnPropertyNames(object);
           if (props.length === 0) {
             return 'unknown';
           }
           return props[0];
         }
   
         /**
          * Returns a time associated with an activity.
          * @param {object} activity - Activity record
          * @return {string} Formatted timestamp
          */
         function getTimeInfo(activity) {
           if ('timestamp' in activity) {
             return activity.timestamp;
           }
           if ('timeRange' in activity) {
             return activity.timeRange.endTime;
           }
           return 'unknown';
         }
   
         /**
          * Returns the type of action.
          * @param {object} actionDetail
          * @return {string} Action type as string
          */
         function getActionInfo(actionDetail) {
           return getOneOf(actionDetail);
         }
   
         /**
          * Returns user information, or the type of user if not a known user.
          * @param {object} user - User record
          * @return {string} user type as string
          */
         function getUserInfo(user) {
           if ('knownUser' in user) {
             const knownUser = user['knownUser'];
             const isMe = knownUser['isCurrentUser'] || false;
             return isMe ? 'people/me' : knownUser['personName'];
           }
           return getOneOf(user);
         }
   
         /**
          * Returns actor information, or the type of actor if not a user.
          * @param {object} actor - Actor record
          * @return {string} actor type as string
          */
         function getActorInfo(actor) {
           if ('user' in actor) {
             return getUserInfo(actor['user']);
           }
           return getOneOf(actor);
         }
   
         /**
          * Returns the type of a target and an associated title.
          * @param {object} target - Activity target record
          * @return {string} target type as string
          */
         function getTargetInfo(target) {
           if ('driveItem' in target) {
             const title = target.driveItem.title || 'unknown';
             return `driveItem:"${title}"`;
           }
           if ('drive' in target) {
             const title = target.drive.title || 'unknown';
             return `drive:"${title}"`;
           }
           if ('fileComment' in target) {
             const parent = target.fileComment.parent || {};
             const title = parent.title || 'unknown';
             return `fileComment:"${title}"`;
           }
           return `${getOneOf(target)}:unknown`;
         }
       </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ế đoạn mã sau:

   • YOUR_CLIENT_ID: ID ứng dụng khách mà bạn đã tạo khi bạn thông tin đăng nhập được cấp phép cho một ứng dụng web.
   • YOUR_API_KEY: khoá API mà bạn đã tạo dưới dạng một Đ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 đang hoạt động, hãy khởi động một máy chủ web:

   npx http-server -p 8000
   

3. Trong trình duyệt, hãy chuyển đến 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 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 để dùng cho lệnh 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 Google Drive Activity API.

Các bước tiếp theo

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