API xác thực web, còn gọi là WebAuthn, cho phép máy chủ sử dụng tiêu chuẩn mã hoá khoá công khai thay vì mật khẩu để đăng ký và xác thực người dùng. Trình xác thực này thực hiện việc này bằng cách cho phép tích hợp giữa các máy chủ này và các trình xác thực mạnh. Những ứng dụng xác thực này có thể là các thiết bị thực chuyên dụng (ví dụ: khoá bảo mật) hoặc được tích hợp với các nền tảng (ví dụ: trình đọc vân tay). Bạn có thể đọc thêm về WebAuthn tại đây tại webauthn.guide.
Vấn đề của nhà phát triển
Trước dự án này, WebAuthn thiếu hỗ trợ gỡ lỗi gốc trên Chrome. Một nhà phát triển tạo ứng dụng sử dụng WebAuth yêu cầu quyền truy cập vào các trình xác thực thực. Điều này đặc biệt khó khăn vì hai lý do:
Có nhiều phiên bản trình xác thực. Việc gỡ lỗi hàng loạt cấu hình và chức năng đòi hỏi nhà phát triển phải có quyền truy cập vào nhiều trình xác thực khác nhau, đôi khi tốn kém.
Theo thiết kế, trình xác thực vật lý rất bảo mật. Do đó, việc kiểm tra trạng thái của chúng thường là không thể.
Chúng tôi muốn làm việc này dễ dàng hơn bằng cách thêm tính năng hỗ trợ gỡ lỗi ngay trong Công cụ của Chrome cho nhà phát triển.
Giải pháp: thẻ WebAuthn mới
Thẻ Công cụ cho nhà phát triển của WebAuthn giúp việc gỡ lỗi WebAuthn trở nên dễ dàng hơn bằng cách cho phép các nhà phát triển mô phỏng những trình xác thực này, tuỳ chỉnh khả năng và kiểm tra trạng thái của chúng.
Triển khai
Việc thêm tính năng hỗ trợ gỡ lỗi vào WebAuthn là quá trình gồm hai phần.
Phần 1: Thêm miền WebAuthn vào Giao thức công cụ của Chrome cho nhà phát triển
Trước tiên, chúng tôi đã triển khai một miền mới trong Giao thức công cụ của Chrome cho nhà phát triển (CDP). Miền này kết nối vào một trình xử lý giao tiếp với phần phụ trợ WebAuthn.
CDP kết nối giao diện người dùng của Công cụ cho nhà phát triển với Chromium. Trong trường hợp của chúng tôi, chúng tôi đã sử dụng các hành động miền WebAuthn để làm cầu nối giữa thẻ WebAuthn Công cụ cho nhà phát triển và việc triển khai WebAuthn của Chromium.
Miền WebAuthn cho phép bật và tắt Môi trường xác thực ảo, điều này sẽ ngắt kết nối trình duyệt khỏi Khám phá Authenticator thực và thay vào đó sẽ được kết nối với Khám phá ảo.
Chúng tôi cũng hiển thị các phương thức trong miền đóng vai trò là một lớp mỏng cho giao diện Virtual Authenticator và Khám phá ảo hiện có. Đây là một phần trong quá trình triển khai WebAuthn của Chromium. Các phương thức này bao gồm thêm và xoá trình xác thực, cũng như tạo, nhận và xoá thông tin xác thực đã đăng ký.
(Đọc mã)
Phần 2: Xây dựng thẻ dành cho người dùng
Thứ hai, chúng tôi đã xây dựng một thẻ dành cho người dùng trong giao diện người dùng của DevTools. Thẻ này bao gồm khung hiển thị và mô hình. Một nhân viên hỗ trợ được tạo tự động sẽ kết nối miền bằng thẻ.
Mặc dù cần có 3 thành phần cần thiết, nhưng chúng ta chỉ cần quan tâm đến hai thành phần: model và model. Thành phần thứ 3 – tác nhân đại diện, được tạo tự động sau khi thêm miền. Nói ngắn gọn, tác nhân là lớp thực hiện lệnh gọi giữa giao diện người dùng và CDP.
Mô hình
Mô hình này là lớp JavaScript kết nối tác nhân người dùng và khung hiển thị. Đối với trường hợp của chúng ta, mô hình này khá đơn giản. Phương thức này lấy các lệnh từ chế độ xem, xây dựng yêu cầu sao cho CDP có thể sử dụng các lệnh đó, sau đó gửi chúng qua tác nhân. Những yêu cầu này thường có tính một chiều và không có thông tin nào được gửi lại cho chế độ xem.
Tuy nhiên, đôi khi chúng tôi trả về phản hồi từ mô hình để cung cấp mã nhận dạng cho trình xác thực mới tạo hoặc để trả về thông tin xác thực được lưu trữ trong trình xác thực hiện có.
(Đọc mã)
Chế độ xem
Chúng tôi sử dụng khung hiển thị để cung cấp giao diện người dùng mà nhà phát triển có thể tìm thấy khi truy cập vào Công cụ cho nhà phát triển. Bảng này gồm có:
- Thanh công cụ để bật môi trường trình xác thực ảo.
- Một mục để thêm trình xác thực.
- Một mục dành cho trình xác thực đã tạo.
(Đọc mã)
Thanh công cụ giúp bật môi trường trình xác thực ảo
Vì hầu hết các tương tác của người dùng tại một thời điểm là với một trình xác thực thay vì toàn bộ thẻ, nên chức năng duy nhất mà chúng tôi cung cấp trong thanh công cụ là bật và tắt môi trường ảo.
Vì sao việc này cần thiết? Điều quan trọng là người dùng phải chuyển đổi rõ ràng môi trường vì làm như vậy sẽ ngắt kết nối trình duyệt khỏi Khám phá Authenticator thực sự. Do đó, khi bạn bật chế độ này, các trình xác thực vật lý đã kết nối, chẳng hạn như trình đọc vân tay, sẽ không được nhận dạng.
Chúng tôi nhận thấy rằng nút bật/tắt rõ ràng sẽ mang lại trải nghiệm tốt hơn cho người dùng, đặc biệt là đối với những người truy cập vào thẻ WebAuthn mà không muốn dùng tính năng khám phá thực sự.
Thêm mục Trình xác thực
Khi bật môi trường trình xác thực ảo, chúng tôi sẽ cung cấp cho nhà phát triển một biểu mẫu cùng dòng cho phép họ thêm trình xác thực ảo. Trong biểu mẫu này, chúng tôi cung cấp các tuỳ chọn tuỳ chỉnh cho phép người dùng quyết định giao thức và phương thức truyền của trình xác thực, cũng như việc trình xác thực có hỗ trợ khoá thường trú và quy trình xác minh người dùng hay không.
Sau khi người dùng nhấp vào Add (Thêm), các tuỳ chọn này sẽ được đóng gói và gửi tới mô hình để thực hiện lệnh gọi để tạo trình xác thực. Sau khi quá trình này hoàn tất, giao diện người dùng sẽ nhận được phản hồi và sau đó sửa đổi giao diện người dùng để bao gồm trình xác thực mới tạo.
Chế độ xem Authenticator
Mỗi lần một trình xác thực được mô phỏng, chúng ta thêm một phần vào chế độ xem trình xác thực để đại diện cho trình xác thực đó. Mỗi phần trình xác thực bao gồm tên, mã nhận dạng, tuỳ chọn cấu hình, các nút để xoá hoặc đặt trình xác thực ở trạng thái hoạt động và bảng thông tin xác thực.
Tên Authenticator
Tên của trình xác thực có thể tuỳ chỉnh được và tên mặc định là "Authenticator" nối với 5 ký tự cuối của mã xác thực. Ban đầu, tên của trình xác thực này là mã nhận dạng đầy đủ và không thể thay đổi. Chúng tôi triển khai các tên có thể tuỳ chỉnh để người dùng có thể gắn nhãn trình xác thực dựa trên khả năng của trình xác thực đó, trình xác thực vật lý mà công cụ này mô phỏng hoặc bất kỳ biệt hiệu nào dễ hiểu hơn so với mã nhận dạng gồm 36 ký tự.
Bảng thông tin xác thực
Chúng tôi đã thêm một bảng vào mỗi phần trình xác thực để hiển thị tất cả thông tin xác thực mà một trình xác thực đăng ký. Trong mỗi hàng, chúng ta cung cấp thông tin về thông tin xác thực, cũng như các nút để xoá hoặc xuất thông tin xác thực.
Hiện tại, chúng tôi thu thập thông tin để điền vào các bảng này bằng cách thăm dò CDP để lấy thông tin đăng ký cho từng trình xác thực. Trong tương lai, chúng tôi dự định thêm một sự kiện để tạo thông tin xác thực.
Nút Đang hoạt động
Chúng tôi cũng đã thêm nút chọn Đang hoạt động vào từng mục trình xác thực. Trình xác thực hiện được đặt là đang hoạt động sẽ là trình xác thực duy nhất lắng nghe và đăng ký thông tin xác thực. Nếu không có điều này, việc đăng ký thông tin xác thực được cung cấp cho nhiều trình xác thực sẽ không xác định được, đây sẽ là một lỗi nghiêm trọng khi cố gắng kiểm thử WebAuthn bằng các trình xác thực đó.
Chúng tôi đã triển khai trạng thái đang hoạt động bằng phương thức SetUserPresence trên trình xác thực ảo. Phương thức SetUserPresence sẽ xác định xem các hoạt động kiểm tra sự hiện diện của người dùng có thành công đối với một trình xác thực nhất định hay không. Nếu chúng ta tắt chế độ này, trình xác thực sẽ không thể nghe thông tin xác thực. Do đó, bằng cách đảm bảo rằng chế độ này được bật cho tối đa một trình xác thực (trình xác thực được đặt là đang hoạt động) và vô hiệu hoá sự hiện diện của người dùng đối với tất cả trình xác thực khác, chúng ta có thể buộc thực hiện hành vi tất định.
Một thử thách thú vị mà chúng tôi gặp phải khi thêm nút đang hoạt động là tránh được một tình huống tương tranh. Hãy xem xét trường hợp sau:
Người dùng nhấp vào nút chọn Đang hoạt động cho Authenticator X, gửi yêu cầu tới CDP để đặt X ở trạng thái đang hoạt động. Nút chọn Đang hoạt động cho X được chọn và tất cả các nút khác đều được bỏ chọn.
Ngay sau đó, người dùng nhấp vào nút chọn Đang hoạt động cho Authenticator Y, gửi yêu cầu tới CDP để đặt Y ở trạng thái đang hoạt động. Nút chọn Đang hoạt động cho Y được chọn và tất cả các nút chọn khác, bao gồm cả X, đều được bỏ chọn.
Trong phần phụ trợ, lệnh gọi để đặt Y thành đang hoạt động đã hoàn tất và được giải quyết. Y hiện đang hoạt động còn mọi trình xác thực khác thì không.
Trong phần phụ trợ, lệnh gọi để đặt X ở trạng thái đang hoạt động đã hoàn tất và được giải quyết. X hiện đang hoạt động còn mọi trình xác thực khác, bao gồm cả Y, thì không.
Bây giờ, tình huống kết quả sẽ như sau: X là trình xác thực đang hoạt động. Tuy nhiên, nút chọn Active (Đang hoạt động) cho X không được chọn. B không phải là trình xác thực đang hoạt động. Tuy nhiên, nút chọn Đang hoạt động cho Y được chọn. Có sự bất đồng giữa giao diện người dùng và trạng thái thực tế của trình xác thực. Rõ ràng, đó là một vấn đề.
Giải pháp của chúng tôi: Thiết lập giao tiếp giả hai chiều giữa các nút chọn và trình xác thực đang hoạt động. Trước tiên, chúng ta duy trì một biến activeId trong khung hiển thị để theo dõi mã nhận dạng của trình xác thực đang hoạt động. Sau đó, chúng ta đợi lệnh gọi để thiết lập một trình xác thực đang hoạt động để trả về rồi đặt activeId thành mã nhận dạng của trình xác thực đó. Cuối cùng, chúng ta sẽ lặp lại từng phần về trình xác thực. Nếu mã nhận dạng của phần đó bằng activeId, chúng ta sẽ đặt nút này thành đã chọn. Nếu không, chúng ta sẽ đặt nút này thành không chọn.
Quảng cáo sẽ có dạng như sau:
async _setActiveAuthenticator(authenticatorId) {
await this._clearActiveAuthenticator();
await this._model.setAutomaticPresenceSimulation(authenticatorId, true);
this._activeId = authenticatorId;
this._updateActiveButtons();
}
_updateActiveButtons() {
const authenticators = this._authenticatorsView.getElementsByClassName('authenticator-section');
Array.from(authenticators).forEach(authenticator => {
authenticator.querySelector('input.dt-radio-button').checked =
authenticator.getAttribute('data-authenticator-id') === this._activeId;
});
}
async _clearActiveAuthenticator() {
if (this._activeId) {
await this._model.setAutomaticPresenceSimulation(this._activeId, false);
}
this._activeId = null;
}
Chỉ số về mức sử dụng
Chúng tôi muốn theo dõi việc sử dụng tính năng này. Ban đầu, chúng tôi đưa ra hai lựa chọn.
Đếm mỗi lần thẻ WebAuthn trong Công cụ cho nhà phát triển được mở. Tuỳ chọn này có thể dẫn đến tính toán dư vì người dùng có thể mở thẻ mà không thực sự sử dụng.
Theo dõi số lần hộp đánh dấu "Bật môi trường trình xác thực ảo" trên thanh công cụ được bật/tắt. Tuỳ chọn này cũng có khả năng xảy ra sự cố đếm thừa vì một số tuỳ chọn có thể bật và tắt môi trường nhiều lần trong cùng một phiên.
Cuối cùng, chúng tôi quyết định chọn cách thứ hai nhưng hạn chế cách tính bằng cách kiểm tra xem môi trường đã được bật trong phiên hoạt động chưa. Do đó, chúng ta sẽ chỉ tăng số lượng thêm 1 bất kể nhà phát triển đã chuyển đổi môi trường bao nhiêu lần. Phương pháp này có hiệu quả vì một phiên mới được tạo mỗi khi thẻ được mở lại, do đó đặt lại việc kiểm tra và cho phép chỉ số được tăng trở lại.
Tóm tắt
Cảm ơn bạn đã đọc! Nếu bạn có đề xuất cải thiện thẻ WebAuthn, hãy cho chúng tôi biết bằng cách báo cáo lỗi.
Sau đây là một số tài nguyên nếu bạn muốn tìm hiểu thêm về WebAuthn:
- Tài liệu thiết kế giao diện người dùng cho Công cụ cho nhà phát triển WebAuthn
- Tài liệu thiết kế cho API kiểm tra Xác thực web
- Thông số kỹ thuật của API xác thực web (WebAuthn)
- Nội dung giải thích và hướng dẫn về WebAuthn
Tải các kênh xem trước xuống
Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Những kênh xem trước này cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, kiểm thử API nền tảng web tiên tiến và tìm ra các sự cố trên trang web của bạn trước khi người dùng làm việc đó!
Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển
Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất kỳ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.
- Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
- Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng mục Tuỳ chọn khác
> Trợ giúp > Báo cáo sự cố Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển. - Tweet tại @ChromeDevTools.
- Để lại nhận xét về Video trên YouTube của chúng tôi về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc mẹo Công cụ cho nhà phát triển.