Bắt đầu nhanh JavaScript

Hướng dẫn bắt đầu nhanh này giải thích cách thiết lập một trang đơn giản để đưa ra yêu cầu đối với YouTube Data API. Hướng dẫn bắt đầu nhanh này thực sự giải thích cách đưa ra 2 yêu cầu API:

  1. Bạn sẽ sử dụng một khoá API (xác định ứng dụng của bạn) để truy xuất thông tin về kênh YouTube GoogleDevelopers.
  2. Bạn sẽ sử dụng mã ứng dụng khách OAuth 2.0 để gửi một yêu cầu đã được uỷ quyền nhằm truy xuất thông tin về kênh YouTube của riêng bạn.

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

Để chạy hướng dẫn bắt đầu nhanh này, bạn cần có:

  • Node.js và npm (để chạy một máy chủ web cục bộ)
  • Quyền truy cập vào Internet và một trình duyệt web.
  • Tài khoản Google.

Bước 1: Thiết lập dự án và thông tin xác thực

Tạo hoặc chọn một dự án trong Cloud Console. Hoàn tất các việc sau trong Cloud Console cho dự án của bạn:

  1. Trong bảng điều khiển thư viện, hãy tìm YouTube Data API v3. Nhấp vào danh sách cho API đó và đảm bảo API này được bật cho dự án của bạn.

  2. Trong bảng điều khiển thông tin xác thực, hãy tạo 2 thông tin xác thực:

    1. Tạo một khoá API Bạn sẽ sử dụng khoá API để đưa ra các yêu cầu API không yêu cầu người dùng uỷ quyền. Ví dụ: bạn không cần người dùng uỷ quyền để truy xuất thông tin về một kênh YouTube công khai.

    2. Tạo mã ứng dụng khách OAuth 2.0 Đặt loại ứng dụng thành Ứng dụng web. Bạn cần sử dụng thông tin xác thực OAuth 2.0 cho các yêu cầu cần người dùng uỷ quyền. Ví dụ: bạn cần người dùng uỷ quyền để truy xuất thông tin về kênh YouTube của người dùng hiện đã xác thực.

      Trong trường Authorized JavaScript origins (Nguồn gốc JavaScript được uỷ quyền), hãy nhập URL http://localhost:8000. Bạn có thể để trống trường Authorized redirect URIs (URI chuyển hướng được uỷ quyền).

Bước 2: Thiết lập và chạy mẫu

Sử dụng tiện ích APIs Explorer trong bảng điều khiển bên để lấy mã mẫu nhằm truy xuất thông tin về kênh YouTube GoogleDevelopers. Yêu cầu này sử dụng một khoá API để xác định ứng dụng của bạn và không yêu cầu người dùng uỷ quyền hoặc bất kỳ quyền đặc biệt nào từ người dùng chạy mẫu.

  1. Mở tài liệu cho phương thức channels.list của API.

  2. Trên trang đó, phần "Common use cases" (Các trường hợp sử dụng phổ biến) chứa một bảng giải thích một số cách phổ biến để sử dụng phương thức này. Danh sách đầu tiên trong bảng là để liệt kê kết quả theo mã nhận dạng kênh.

    Nhấp vào biểu tượng mã cho danh sách đầu tiên để mở và điền sẵn thông tin vào APIs Explorer ở chế độ toàn màn hình.

    Hình ảnh xác định vị trí của đường liên kết tượng trưng đến mã trong bảng liệt kê các trường hợp sử dụng cho tài liệu channels.list. Văn bản thay thế cho hình ảnh đó xác định hình ảnh là một biểu tượng mã và chỉ định trường hợp sử dụng được liên kết với đường liên kết đó.

  3. Bên trái trình Khám phá API ở chế độ toàn màn hình cho thấy những nội dung sau:

    1. Bên dưới tiêu đề Request parameters (Tham số yêu cầu), có một danh sách các tham số mà phương thức này hỗ trợ. Bạn nên đặt giá trị tham số part và id. Giá trị tham số id, UC_x5XG1OV2P6uZZ5FSM9Ttw, là mã cho kênh YouTube GoogleDevelopers.

    2. Bên dưới các tham số, có một tên mục là Credentials (Thông tin xác thực). Trình đơn kéo xuống trong phần đó sẽ hiển thị giá trị API key (Khoá API). Theo mặc định, APIs Explorer sử dụng thông tin xác thực bản minh hoạ để giúp bạn dễ dàng bắt đầu. Tuy nhiên, bạn sẽ sử dụng khoá API của riêng mình để chạy mẫu cục bộ.

      Hình ảnh cho thấy "Thông tin đăng nhập" trong APIs Explorer ở chế độ toàn màn hình và trình đơn kéo xuống có lựa chọn "Khoá API" được chọn.

  4. Bên phải APIs Explorer ở chế độ toàn màn hình cho thấy các thẻ có mã mẫu bằng nhiều ngôn ngữ. Chọn thẻ JavaScript.

  5. Sao chép mã mẫu và lưu vào một tệp có tên là example.html.

  6. Trong mẫu mà bạn đã tải xuống, hãy tìm chuỗi YOUR_API_KEY rồi thay thế bằng khoá API mà bạn đã tạo ở bước 1 của hướng dẫn bắt đầu nhanh này.

  7. Khởi động máy chủ web bằng cách sử dụng lệnh sau đây từ thư mục làm việc của bạn:

    npx http-server -p 8000

  8. Mở tệp example.html trong trình duyệt. Ngoài ra, hãy mở công cụ dành cho nhà phát triển của trình duyệt, chẳng hạn như "Công cụ cho nhà phát triển" trong trình duyệt Chrome.

    1. Nhấp vào nút load (tải) trên trang để tải Thư viện ứng dụng Google API cho JavaScript. Sau khi bạn nhấp vào nút này, bảng điều khiển dành cho nhà phát triển sẽ hiển thị một lưu ý cho biết rằng ứng dụng GAPI đã tải.

    2. Nhấp vào nút execute (thực thi) để gửi yêu cầu API. Sau đó, bảng điều khiển dành cho nhà phát triển sẽ hiển thị phản hồi của API.

Bước 3: Chạy một yêu cầu được uỷ quyền

Ở bước này, bạn sẽ sửa đổi mã mẫu để thay vì truy xuất thông tin về kênh YouTube GoogleDevelopers, mã này sẽ truy xuất thông tin về kênh YouTube của bạn. Yêu cầu này cần người dùng uỷ quyền.

  1. Quay lại tài liệu cho phương thức channels.list của API.

  2. Trong phần "Common use cases" (Các trường hợp sử dụng phổ biến), hãy nhấp vào biểu tượng mã cho danh sách thứ ba trong bảng. Trường hợp sử dụng đó là gọi phương thức list cho "kênh của tôi".

  3. Một lần nữa, ở bên trái trình APIs Explorer ở chế độ toàn màn hình, bạn sẽ thấy một danh sách các tham số, tiếp theo là phần Credentials (Thông tin xác thực). Tuy nhiên, có 2 thay đổi so với ví dụ mà bạn đã truy xuất thông tin về kênh GoogleDevelopers:

    1. Trong phần tham số, thay vì đặt giá trị tham số id, bạn nên đặt giá trị tham số mine thành true. Điều này hướng dẫn máy chủ API truy xuất thông tin về kênh của người dùng hiện đã xác thực.

    2. Trong phần Credentials (Thông tin xác thực), trình đơn kéo xuống sẽ chọn tuỳ chọn Google OAuth 2.0.

      Ngoài ra, nếu bạn nhấp vào đường liên kết Show scopes (Hiện các phạm vi), thì phạm vi https://www.googleapis.com/auth/youtube.readonly sẽ được đánh dấu.

      Hình ảnh cho thấy các phạm vi trong APIs Explorer ở chế độ toàn màn hình và lựa chọn sử dụng thông tin xác thực "Google OAuth 2.0" đã chọn.

  4. Giống như ví dụ trước, hãy chọn thẻ JavaScript , sao chép mã mẫu và lưu vào example.html.

    Trong mã, hãy tìm chuỗi YOUR_CLIENT_ID rồi thay thế bằng mã ứng dụng khách mà bạn đã tạo ở bước 1 của hướng dẫn bắt đầu nhanh này.

  5. Khởi động máy chủ web bằng cách sử dụng lệnh sau đây từ thư mục làm việc của bạn:

    npx http-server -p 8000

  6. Chuyển đến tệp http://localhost:8000/example.html trong trình duyệt. Mở công cụ dành cho nhà phát triển của trình duyệt, chẳng hạn như "Công cụ dành cho nhà phát triển" trong trình duyệt Chrome.

  7. Nhấp vào nút authorize and load (uỷ quyền và tải) trên trang để tải Thư viện ứng dụng Google API cho JavaScript và bắt đầu quy trình uỷ quyền. Bạn sẽ được nhắc cấp cho ứng dụng quyền đọc dữ liệu từ tài khoản YouTube của bạn.

    Nếu bạn cấp quyền, bảng điều khiển dành cho nhà phát triển sẽ hiển thị các thông báo cho biết rằng quá trình đăng nhập đã thành công và ứng dụng API đã tải.

  8. Nhấp vào nút execute (thực thi) để gửi yêu cầu API. Sau đó, bảng điều khiển dành cho nhà phát triển sẽ hiển thị phản hồi của API.

Tài liệu đọc thêm