Xác thực người dùng

Giao thức xác thực web sử dụng các tính năng HTTP, nhưng Ứng dụng Chrome chạy bên trong vùng chứa ứng dụng; chúng không tải qua HTTP và không thể thực hiện các lệnh chuyển hướng hoặc đặt cookie.

Sử dụng Chrome Identity API để xác thực người dùng: getAuthToken cho người dùng đã đăng nhập Tài khoản Google của họ và launchWebAuthFlow cho những người dùng đã đăng nhập vào tài khoản không phải của Google. Nếu ứng dụng sử dụng máy chủ riêng để xác thực người dùng, bạn sẽ cần phải sử dụng máy chủ sau.

Cách hoạt động

Người dùng ứng dụng Chrome có tài khoản Google được liên kết với hồ sơ của họ. Ứng dụng có thể nhận mã thông báo OAuth2 cho những người dùng này bằng cách sử dụng API getAuthToken.

Ứng dụng muốn xác thực với các nhà cung cấp danh tính không phải của Google phải gọi launchWebAuthFlow. Phương thức này sử dụng cửa sổ bật lên của trình duyệt để hiển thị các trang của nhà cung cấp và ghi lại sẽ chuyển hướng đến mẫu URL cụ thể. URL chuyển hướng được chuyển đến ứng dụng và ứng dụng trích xuất mã thông báo khỏi URL.

Xác thực Tài khoản Google

Sau đây là năm bước bạn cần phải hoàn tất:

  1. Thêm quyền vào tệp kê khai và tải ứng dụng của bạn lên.
  2. Sao chép khoá trong manifest.json đã cài đặt vào tệp kê khai nguồn để mã ứng dụng của bạn sẽ không đổi trong quá trình phát triển.
  3. Nhận mã ứng dụng khách OAuth2 cho ứng dụng Chrome.
  4. Cập nhật tệp kê khai của bạn để bao gồm mã ứng dụng khách và phạm vi.
  5. Lấy mã thông báo xác thực.

Thêm quyền và tải ứng dụng lên

Bạn cần đảm bảo quyền truy cập danh tính có trong tệp kê khai. Sau đó, bạn có thể tải ứng dụng lên trang quản lý ứng dụng và tiện ích (xem Xuất bản).

"permissions": [
  "identity"
]

Sao chép khoá vào tệp kê khai

Khi đăng ký ứng dụng trong bảng điều khiển OAuth của Google, bạn sẽ cung cấp mã nhận dạng. Mã này sẽ được kiểm tra trong quá trình yêu cầu mã thông báo. Do đó, điều quan trọng là phải có sự nhất quán mã ứng dụng trong quá trình phát triển.

Để mã ứng dụng không đổi, bạn cần sao chép khoá trong manifest.json đã cài đặt để tệp kê khai nguồn của bạn. Đây không phải là nhiệm vụ thú vị nhất, nhưng sau đây là tiến trình:

  1. Chuyển đến thư mục dữ liệu người dùng. Ví dụ trên MacO: ~/Library/Application\ Support/Google/Chrome/Default/Extensions
  2. Liệt kê các ứng dụng và tiện ích đã cài đặt, đồng thời so khớp mã ứng dụng của bạn trên các ứng dụng và tiện ích đó với cùng một mã nhận dạng ở đây.
  3. Chuyển tới thư mục ứng dụng đã cài đặt (phiên bản này sẽ nằm trong mã ứng dụng). Mở ứng dụng đã cài đặt manifest.json (pico là một cách nhanh chóng để mở tệp).
  4. Sao chép "khoá" trong manifest.json đã cài đặt rồi dán vào tệp kê khai nguồn của ứng dụng .

Lấy mã ứng dụng khách OAuth2

Bạn cần đăng ký ứng dụng của mình trong Google API Console để nhận ID ứng dụng khách:

  1. Đăng nhập vào Google API Console bằng chính tài khoản Google đã dùng để tải ứng dụng của bạn lên Cửa hàng Chrome trực tuyến.
  2. Tạo dự án mới bằng cách mở rộng trình đơn thả xuống ở góc trên cùng bên trái rồi chọn Tạo... mục trong trình đơn.
  3. Sau khi tạo và đặt tên, hãy chuyển đến phần "Dịch vụ" và bật bất kỳ mục trong trình đơn điều hướng nào của Google các dịch vụ mà ứng dụng của bạn cần.
  4. Chuyển đến phần "Quyền truy cập API" mục trong trình đơn điều hướng và nhấp vào tuỳ chọn Tạo ứng dụng OAuth 2.0 nút màu xanh dương ID....
  5. Nhập thông tin thương hiệu được yêu cầu, chọn loại Ứng dụng đã cài đặt.
  6. Chọn Ứng dụng Chrome và nhập ID ứng dụng của bạn (cùng một ID được hiển thị trong ứng dụng và trang quản lý tiện ích).

Cập nhật tệp kê khai bằng phạm vi và mã ứng dụng OAuth2

Bạn cần cập nhật tệp kê khai để thêm mã ứng dụng khách và phạm vi. Dưới đây là mẫu "oauth2" với mẫu gdrive:

"oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  }

Nhận mã truy cập

Giờ đây, bạn đã sẵn sàng nhận mã thông báo xác thực bằng cách gọi identity.getAuthToken.

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
  // Use the token.
});

Tương tác của người dùng

Khi gọi getAuthToken, bạn có thể truyền một cờ ('interactive': true trong ví dụ trên) cho biết liệu bạn muốn API được gọi ở chế độ tương tác hay chế độ im lặng. Nếu bạn gọi API ở chế độ tương tác, người dùng sẽ thấy giao diện người dùng đăng nhập và/hoặc phê duyệt khi cần thiết, như được minh hoạ trong ảnh chụp màn hình dưới đây:

ảnh chụp màn hình cho thấy giao diện người dùng khi một ứng dụng dùng API Nhận dạng để xác thực Tài khoản Google

Nếu bạn gọi API ở chế độ im lặng, API sẽ chỉ trả về một mã thông báo nếu có thể tạo mà không cho thấy giao diện người dùng nào. Điều này rất hữu ích trong trường hợp ứng dụng đang thực hiện luồng lúc khởi động ứng dụng, ví dụ: hoặc nói chung trong các trường hợp không liên quan đến cử chỉ nào của người dùng.

Phương pháp hay nhất chúng tôi đề xuất là sử dụng chế độ im lặng khi không có cử chỉ nào của người dùng được liên kết và sử dụng chế độ tương tác nếu có cử chỉ của người dùng (ví dụ: người dùng đã nhấp vào nút Đăng nhập trong ứng dụng của bạn). Xin lưu ý rằng chúng tôi không thực thi yêu cầu nào về cử chỉ.

Lưu vào bộ nhớ đệm

Chrome có bộ nhớ đệm chứa mã truy cập trong bộ nhớ. Vì vậy, bạn có thể gọi getAuthToken bất cứ khi nào cần hãy sử dụng một mã thông báo. Bộ nhớ đệm sẽ tự động xử lý thời hạn của mã thông báo.

Bạn có thể xem trạng thái hiện tại của bộ nhớ đệm mã thông báo trên chrome://identity-internals.

Có một số trường hợp, chẳng hạn như khi người dùng thay đổi mật khẩu, khi mã truy cập chưa hết hạn sẽ ngừng hoạt động. Các lệnh gọi API sử dụng mã thông báo này sẽ bắt đầu trả về với mã trạng thái HTTP 401. Nếu bạn phát hiện thấy điều này đã xảy ra, bạn có thể xoá mã thông báo không hợp lệ khỏi bộ nhớ đệm của Chrome bằng cách gọi identity.removeCachedAuthToken.

Ví dụ về cách sử dụng removeCachedAuthToken:

// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
  var retry = true;
  function getTokenAndXhr() {
    chrome.identity.getAuthToken({/* details */},
                                 function (access_token) {
      if (chrome.runtime.lastError) {
        callback(chrome.runtime.lastError);
        return;
      }

      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader('Authorization',
                           'Bearer ' + access_token);

      xhr.onload = function () {
        if (this.status === 401 && retry) {
          // This status may indicate that the cached
          // access token was invalid. Retry once with
          // a fresh token.
          retry = false;
          chrome.identity.removeCachedAuthToken(
              { 'token': access_token },
              getTokenAndXhr);
          return;
        }

        callback(null, this.status, this.responseText);
      }
    });
  }
}

Phương thức xác thực không phải là Tài khoản Google

Sau đây là 3 bước bạn cần phải hoàn tất:

  1. Đăng ký với nhà cung cấp.
  2. Thêm quyền cho tài nguyên của nhà cung cấp mà ứng dụng của bạn sẽ truy cập.
  3. Lấy mã thông báo xác thực.

Đăng ký với nhà cung cấp

Bạn cần đăng ký mã ứng dụng khách OAuth2 với nhà cung cấp và định cấu hình mã ứng dụng khách đó làm một trang web. Để nhập URI chuyển hướng trong quá trình đăng ký, hãy sử dụng URL của biểu mẫu: https://<extension-id>.chromiumapp.org/<anything-here>

Ví dụ: nếu mã ứng dụng của bạn là abcdefghijklmnopqrstuvwxyzabcdef và bạn muốn đặt provider_cb đường dẫn để phân biệt với URI chuyển hướng từ nhà cung cấp khác, bạn nên sử dụng: https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb

Thêm quyền cho nhà cung cấp

Để tạo XHR trên nhiều nguồn gốc cho các điểm cuối API của nhà cung cấp, bạn cần đưa các điểm cuối thích hợp vào danh sách cho phép trong phần quyền:

"permissions": [
  ...
  "https://www.website-of-provider-with-user-photos.com/photos/*"
]

Lấy mã thông báo

Cách nhận mã thông báo:

chrome.identity.launchWebAuthFlow(
  {'url': '<url-to-do-auth>', 'interactive': true},
  function(redirect_url) { /* Extract token from redirect_url */ });

<url-to-do-auth> là bất kỳ URL nào để xác thực nhà cung cấp trên một trang web. Ví dụ: giả sử bạn đang thực hiện quy trình OAuth2 với một nhà cung cấp và đã đăng ký ứng dụng của bạn với client id 123456789012345 và bạn muốn truy cập vào ảnh của người dùng trên trang web của nhà cung cấp: https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos

Nhà cung cấp sẽ thực hiện việc xác thực và nếu thích hợp, sẽ hiển thị giao diện người dùng đăng nhập và/hoặc phê duyệt để người dùng. Sau đó, URL này sẽ chuyển hướng đến https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>

Chrome sẽ nắm bắt thông tin đó và thực hiện lệnh gọi lại của ứng dụng bằng URL chuyển hướng đầy đủ. Ứng dụng cần trích xuất mã thông báo từ URL.

Chế độ tương tác so với chế độ im lặng

Khi gọi launchWebAuthFlow, bạn có thể truyền một cờ ('interactive': true trong ví dụ trên) cho biết liệu bạn có muốn gọi API ở chế độ tương tác hay không (còn gọi là chế độ im lặng). Nếu bạn gọi API ở chế độ tương tác, người dùng sẽ thấy giao diện người dùng (nếu cần) để nhận mã thông báo (đăng nhập Giao diện người dùng và/hoặc giao diện người dùng yêu cầu phê duyệt; hoặc cho bất kỳ giao diện người dùng cụ thể nào của nhà cung cấp).

Nếu bạn gọi API ở chế độ im lặng, API sẽ chỉ trả về mã thông báo nếu nhà cung cấp có thể cung cấp mã thông báo mà không cho thấy giao diện người dùng nào. Điều này rất hữu ích trong trường hợp một ứng dụng đang thực hiện luồng tại ứng dụng khởi động hoặc nói chung trong các trường hợp không liên quan đến cử chỉ của người dùng.

Phương pháp hay nhất chúng tôi đề xuất là sử dụng chế độ im lặng khi không có cử chỉ nào của người dùng được liên kết và sử dụng chế độ tương tác nếu có cử chỉ của người dùng (ví dụ: người dùng đã nhấp vào nút Đăng nhập trong ứng dụng của bạn). Xin lưu ý rằng chúng tôi không thực thi yêu cầu về cử chỉ.