Tìm hiểu chuyên sâu về thông tin xác thực có thể phát hiện

Eiji Kitamura
Maud Nalpas

Mặc dù thông tin xác thực FIDO (chẳng hạn như khoá truy cập) nhằm thay thế mật khẩu, nhưng hầu hết các thông tin xác thực này cũng có thể giúp người dùng không cần nhập tên người dùng. Tính năng này cho phép người dùng xác thực bằng cách chọn một tài khoản trong danh sách khoá truy cập mà họ có cho trang web hiện tại.

Các phiên bản khoá bảo mật trước đây được thiết kế làm phương pháp xác thực 2 bước và yêu cầu mã nhận dạng của thông tin xác thực tiềm năng, do đó yêu cầu nhập tên người dùng. Thông tin xác thực mà khoá bảo mật có thể tìm thấy mà không cần biết mã nhận dạng của thông tin xác thực đó được gọi là thông tin xác thực có thể tìm thấy. Hầu hết thông tin xác thực FIDO được tạo ngày nay đều là thông tin xác thực có thể phát hiện; đặc biệt là khoá truy cập được lưu trữ trong trình quản lý mật khẩu hoặc trên khoá bảo mật hiện đại.

Để đảm bảo thông tin xác thực của bạn được tạo dưới dạng khoá truy cập (thông tin xác thực có thể phát hiện), hãy chỉ định residentKey và requireResidentKey khi tạo thông tin xác thực.

Các bên tin cậy (RP) có thể sử dụng thông tin xác thực có thể phát hiện bằng cách bỏ qua allowCredentials trong quá trình xác thực bằng khoá truy cập. Trong những trường hợp này, trình duyệt hoặc hệ thống sẽ hiển thị cho người dùng danh sách các khoá truy cập hiện có, được xác định bằng thuộc tính user.name được đặt tại thời điểm tạo. Nếu người dùng chọn một, giá trị user.id sẽ được đưa vào chữ ký kết quả. Sau đó, máy chủ có thể sử dụng mã nhận dạng đó hoặc mã nhận dạng thông tin đăng nhập được trả về để tra cứu tài khoản thay vì tên người dùng đã nhập.

Giao diện người dùng của bộ chọn tài khoản, chẳng hạn như giao diện người dùng đã thảo luận trước đó, không bao giờ hiển thị thông tin xác thực không thể phát hiện.

requireResidentKey và residentKey

Để tạo khoá truy cập, hãy chỉ định authenticatorSelection.residentKey và authenticatorSelection.requireResidentKey trên navigator.credentials.create() với các giá trị được chỉ định như sau.

async function register () {
  // ...

  const publicKeyCredentialCreationOptions = {
    // ...
    authenticatorSelection: {
      authenticatorAttachment: 'platform',
      residentKey: 'required',
      requireResidentKey: true,
    }
  };

  const credential = await navigator.credentials.create({
    publicKey: publicKeyCredentialCreationOptions
  });

  // This does not run until the user selects a passkey.
  const credential = {};
  credential.id = cred.id;
  credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
  credential.type = cred.type;

  // ...
}

residentKey:

  • 'required': Bạn phải tạo thông tin xác thực có thể phát hiện. Nếu không tạo được, NotSupportedError sẽ được trả về.
  • 'preferred': Bên phụ thuộc ưu tiên tạo thông tin xác thực có thể phát hiện, nhưng chấp nhận thông tin xác thực không thể phát hiện.
  • 'discouraged': Bên phụ thuộc ưu tiên tạo thông tin xác thực không thể khám phá, nhưng chấp nhận thông tin xác thực có thể khám phá.

requireResidentKey:

  • Thuộc tính này được giữ lại để đảm bảo khả năng tương thích ngược với WebAuthn Cấp 1, một phiên bản cũ hơn của thông số kỹ thuật. Đặt giá trị này thành true nếu residentKey là 'required', nếu không, hãy đặt thành false.

allowCredentials

Bên tin cậy có thể sử dụng allowCredentials trên navigator.credentials.get() để kiểm soát trải nghiệm xác thực bằng khoá truy cập. Thường có 3 loại trải nghiệm xác thực bằng khoá truy cập:

Với thông tin xác thực có thể phát hiện, RP có thể hiển thị bộ chọn tài khoản theo phương thức để người dùng chọn một tài khoản để đăng nhập, sau đó là quy trình xác minh người dùng. Điều này phù hợp với quy trình xác thực khoá truy cập được bắt đầu bằng cách nhấn vào nút dành riêng cho việc xác thực khoá truy cập.

Để đạt được trải nghiệm người dùng này, hãy bỏ qua hoặc truyền một mảng trống đến tham số allowCredentials trong navigator.credentials.get().

async function authenticate() {
  // ...

  const publicKeyCredentialRequestOptions = {
    // Server generated challenge:
    challenge: ****,
    // The same RP ID as used during registration:
    rpId: 'example.com',
    // You can omit `allowCredentials` as well:
    allowCredentials: []
  };

  const credential = await navigator.credentials.get({
    publicKey: publicKeyCredentialRequestOptions,
    signal: abortController.signal
  });

  // This does not run until the user selects a passkey.
  const credential = {};
  credential.id = cred.id;
  credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
  credential.type = cred.type;
  
  // ...
}

Hiện tính năng tự động điền biểu mẫu khoá truy cập

Trình chọn tài khoản theo phương thức được mô tả ở trên hoạt động hiệu quả nếu hầu hết người dùng sử dụng khoá truy cập và có sẵn khoá truy cập trên thiết bị cục bộ. Đối với người dùng không có khoá truy cập cục bộ, hộp thoại phương thức vẫn xuất hiện và sẽ đề nghị người dùng cung cấp khoá truy cập từ một thiết bị khác. Trong khi chuyển đổi người dùng sang khoá truy cập, bạn nên tránh giao diện người dùng đó cho những người dùng chưa thiết lập khoá truy cập.

Thay vào đó, lựa chọn khoá truy cập có thể được đưa vào lời nhắc tự động điền cho các trường trong biểu mẫu đăng nhập truyền thống, cùng với tên người dùng và mật khẩu đã lưu. Bằng cách này, người dùng có khoá truy cập có thể "điền" vào biểu mẫu đăng nhập bằng cách chọn khoá truy cập của họ, người dùng có cặp tên người dùng/mật khẩu đã lưu có thể chọn các cặp đó và người dùng không có cả hai vẫn có thể nhập tên người dùng và mật khẩu của họ.

Trải nghiệm người dùng này là lý tưởng khi bên Relying Party đang trong quá trình di chuyển với việc sử dụng kết hợp mật khẩu và khoá truy cập.

Để đạt được trải nghiệm người dùng này, ngoài việc truyền một mảng trống đến thuộc tính allowCredentials hoặc bỏ qua tham số, hãy chỉ định mediation: 'conditional' trên navigator.credentials.get() và chú thích trường nhập dữ liệu HTML username bằng autocomplete="username webauthn" hoặc trường nhập dữ liệu password bằng autocomplete="password webauthn".

Lệnh gọi đến navigator.credentials.get() sẽ không hiển thị giao diện người dùng, nhưng nếu người dùng tập trung vào trường nhập dữ liệu có chú thích, thì mọi khoá truy cập hiện có sẽ được đưa vào các lựa chọn tự động điền. Nếu người dùng chọn một phương thức, họ sẽ thực hiện quy trình xác minh mở khoá thiết bị thông thường và chỉ khi đó, lời hứa do .get() trả về mới được giải quyết bằng một kết quả. Nếu người dùng không chọn khoá truy cập, thì lời hứa sẽ không bao giờ được thực hiện.

async function authenticate() {
  // ...

  const publicKeyCredentialRequestOptions = {
    // Server generated challenge:
    challenge: ****,
    // The same RP ID as used during registration:
    rpId: 'example.com',
    // You can omit `allowCredentials` as well:
    allowCredentials: []
  };

  const cred = await navigator.credentials.get({
    publicKey: publicKeyCredentialRequestOptions,
    signal: abortController.signal,
    // Specify 'conditional' to activate conditional UI
    mediation: 'conditional'
  });

  // This does not run until the user selects a passkey.
  const credential = {};
  credential.id = cred.id;
  credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
  credential.type = cred.type;
  
  // ...
}

<input type="text" name="username" autocomplete=&qu>ot;username webauthn" ...

Bạn có thể tìm hiểu cách xây dựng trải nghiệm người dùng này tại bài viết Đăng nhập bằng khoá truy cập thông qua tính năng tự động điền biểu mẫu, cũng như lớp học lập trình Triển khai khoá truy cập bằng tính năng tự động điền biểu mẫu trong ứng dụng web.

Xác thực lại

Trong một số trường hợp, chẳng hạn như khi sử dụng khoá truy cập để xác thực lại, giá trị nhận dạng của người dùng đã được xác định. Trong trường hợp này, chúng tôi muốn sử dụng khoá truy cập mà không cần trình duyệt hoặc hệ điều hành hiển thị bất kỳ biểu mẫu nào của bộ chọn tài khoản. Bạn có thể thực hiện việc này bằng cách truyền danh sách mã thông tin xác thực trong tham số allowCredentials.

Trong trường hợp đó, nếu có bất kỳ thông tin xác thực nào được đặt tên trên thiết bị, thì người dùng sẽ được nhắc mở khoá thiết bị ngay lập tức. Nếu không, người dùng sẽ được nhắc sử dụng một thiết bị khác (điện thoại hoặc khoá bảo mật) có chứa thông tin xác thực hợp lệ.

Để đạt được trải nghiệm người dùng này, hãy cung cấp danh sách mã thông tin xác thực cho người dùng đăng nhập. RP có thể truy vấn các thông tin xác thực này vì người dùng đã được xác định. Cung cấp mã thông tin xác thực dưới dạng đối tượng PublicKeyCredentialDescriptor trong thuộc tính allowCredentials của navigator.credentials.get().

async function authenticate() {
  // ...

  const publicKeyCredentialRequestOptions = {
    // Server generated challenge:
    challenge: ****,
    // The same RP ID as used during registration:
    rpId: 'example.com',
    // Provide a list of PublicKeyCredentialDescriptors:
    allowCredentials: [{
      id: ****,
      type: 'public-key',
      transports: [
        'internal',
        'hybrid'
      ]
    }, {
      id: ****,
      type: 'public-key',
      transports: [
        'internal',
        'hybrid'
      ]
    }, ...]
  };

  const credential = await navigator.credentials.get({
    publicKey: publicKeyCredentialRequestOptions,
    signal: abortController.signal
  });

  // This does not run until the user selects a passkey.
  const credential = {};
  credential.id = cred.id;
  credential.rawId = cred.id; // Pass a Base64URL encoded ID string.
  credential.type = cred.type;
  
  // ...
}

Đối tượng PublicKeyCredentialDescriptor bao gồm:

  • id: Mã nhận dạng của thông tin xác thực khoá công khai mà bên bị hạn chế đã nhận được khi đăng ký khoá truy cập.
  • type: Trường này thường là 'public-key'.
  • transports: Gợi ý về các phương thức truyền tải được thiết bị lưu giữ thông tin xác thực này hỗ trợ, được trình duyệt sử dụng để tối ưu hoá giao diện người dùng yêu cầu người dùng xuất trình thiết bị bên ngoài. Danh sách này (nếu được cung cấp) sẽ chứa kết quả của lệnh gọi getTransports() trong quá trình đăng ký từng thông tin đăng nhập.

Tóm tắt

Thông tin xác thực có thể phát hiện giúp trải nghiệm đăng nhập bằng khoá truy cập trở nên thân thiện hơn với người dùng bằng cách cho phép họ bỏ qua bước nhập tên người dùng. Khi kết hợp residentKey, requireResidentKey và allowCredentials, các bên Relying Party có thể mang đến trải nghiệm đăng nhập:

  • Hiện bộ chọn tài khoản theo phương thức.
  • Hiện tính năng tự động điền biểu mẫu khoá truy cập.
  • Xác thực lại.

Sử dụng thông tin xác thực có thể phát hiện một cách khôn ngoan. Bằng cách này, bạn có thể thiết kế trải nghiệm đăng nhập bằng khoá truy cập tinh vi mà người dùng sẽ thấy liền mạch và có nhiều khả năng tương tác hơn.