Thông tin cập nhật mới nhất về API quản lý thông tin xác thực

Eiji Kitamura

Một số nội dung cập nhật được mô tả ở đây sẽ được giải thích trong phiên hội thảo Google I/O, Đăng nhập an toàn và liền mạch: Thu hút người dùng tương tác:

Chrome 57

Chrome 57 đã giới thiệu thay đổi quan trọng này đối với API Quản lý thông tin xác thực.

Bạn có thể chia sẻ thông tin xác thực từ một miền con khác

Giờ đây, Chrome có thể truy xuất thông tin xác thực được lưu trữ trong một miền con khác bằng API Quản lý thông tin xác thực. Ví dụ: nếu mật khẩu được lưu trữ trong login.example.com, thì tập lệnh trên www.example.com có thể hiển thị mật khẩu đó dưới dạng một trong các mục tài khoản trong hộp thoại trình chọn tài khoản.

Bạn phải lưu trữ mật khẩu một cách rõ ràng bằng navigator.credentials.store(), để khi người dùng chọn thông tin xác thực bằng cách nhấn vào hộp thoại, mật khẩu sẽ được truyền và sao chép vào nguồn hiện tại.

Sau khi được lưu trữ, mật khẩu sẽ có sẵn dưới dạng thông tin xác thực trong chính nguồn gốc www.example.com trở đi.

Trong ảnh chụp màn hình sau, thông tin xác thực được lưu trữ trong login.aliexpress.com sẽ hiển thị cho m.aliexpress.com và người dùng có thể chọn:

Lưu ý: Sắp ra mắt: Chúng tôi đang phát triển tính năng chia sẻ thông tin xác thực giữa các miền hoàn toàn khác nhau.

Chrome 60

Chrome 60 giới thiệu một số thay đổi quan trọng đối với API Quản lý thông tin xác thực:

• Đối tượng PasswordCredential hiện bao gồm mật khẩu.

• Vì hàm fetch() tuỳ chỉnh không còn cần thiết để tìm nạp mật khẩu, nên hàm này sẽ sớm ngừng hoạt động.

• navigator.credentials.get() hiện chấp nhận enum mediation thay vì cờ boolean unmediated.

• Đổi tên requireUserMediation() thành preventSilentAccess().

• Phương thức mới navigator.credentials.create() tạo các đối tượng thông tin xác thực một cách không đồng bộ.

Cần chú ý đến tính năng phát hiện

Để xem liệu có API Trình quản lý thông tin xác thực để truy cập vào thông tin xác thực liên kết và dựa trên mật khẩu hay không, hãy kiểm tra xem có window.PasswordCredential hoặc window.FederatedCredential hay không.

if (window.PasswordCredential || window.FederatedCredential) {
  // The Credential Management API is available
}

Cảnh báo: Việc phát hiện tính năng bằng cách kiểm tra navigator.credentials có thể làm hỏng trang web của bạn trên các trình duyệt hỗ trợ WebAuthn(PublicKeyCredential) nhưng không phải tất cả các loại thông tin xác thực (PasswordCredential và FederatedCredential) do API Quản lý thông tin xác thực xác định. Tìm hiểu thêm.

Đối tượng PasswordCredential hiện có chứa mật khẩu

API Quản lý thông tin xác thực áp dụng phương pháp xử lý mật khẩu thận trọng. Phương thức này che giấu mật khẩu khỏi JavaScript, yêu cầu nhà phát triển gửi trực tiếp đối tượng PasswordCredential đến máy chủ của họ để xác thực thông qua một tiện ích cho API fetch().

Tuy nhiên, phương pháp này cũng có một số hạn chế. Chúng tôi nhận được ý kiến phản hồi rằng nhà phát triển không thể sử dụng API này vì:

• Họ phải gửi mật khẩu dưới dạng một phần của đối tượng JSON.

• Họ phải gửi giá trị băm của mật khẩu đến máy chủ của họ.

Sau khi thực hiện phân tích bảo mật và nhận thấy rằng việc ẩn mật khẩu khỏi JavaScript không ngăn chặn được mọi vectơ tấn công hiệu quả như chúng tôi mong đợi, chúng tôi đã quyết định thay đổi.

API Quản lý thông tin xác thực hiện bao gồm một mật khẩu thô trong đối tượng thông tin xác thực được trả về để bạn có quyền truy cập vào mật khẩu đó dưới dạng văn bản thuần tuý. Bạn có thể sử dụng các phương thức hiện có để phân phối thông tin xác thực cho máy chủ:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(passwordCred => {
    if (passwordCred) {
    let form = new FormData();
    form.append('email', passwordCred.id);
    form.append('password', passwordCred.password);
    form.append('csrf_token', csrf_token);
    return fetch('/signin', {
        method: 'POST',
        credentials: 'include',
        body: form
    });
    } else {

    // Fallback to sign-in form
    }
}).then(res => {
    if (res.status === 200) {
    return res.json();
    } else {
    throw 'Auth failed';
    }
}).then(profile => {
    console.log('Auth succeeded', profile);
});

Tính năng tìm nạp tuỳ chỉnh sắp ngừng hoạt động

Cảnh báo: Hiện tại, mật khẩu đã được trả về trong đối tượng PasswordCredential, nên hàm fetch() tuỳ chỉnh sẽ ngừng hoạt động trong Chrome 64 (dự kiến vào ngày 23 tháng 1 năm 2018. Nhà phát triển phải cập nhật mã của mình.

Để xác định xem bạn đang sử dụng hàm fetch() tuỳ chỉnh hay không, hãy kiểm tra xem hàm đó sử dụng đối tượng PasswordCredential hay đối tượng FederatedCredential làm giá trị của thuộc tính credentials, ví dụ:

fetch('/signin', {
    method: 'POST',
    credentials: c
})

Bạn nên sử dụng hàm fetch() thông thường như trong ví dụ về mã trước hoặc sử dụng XMLHttpRequest.

navigator.credentials.get() hiện chấp nhận tính năng dàn xếp enum

Cho đến Chrome 60, navigator.credentials.get() chấp nhận thuộc tính unmediated không bắt buộc với cờ boolean. Ví dụ:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    unmediated: true
}).then(c => {

    // Sign-in
});

Việc đặt unmediated: true sẽ ngăn trình duyệt hiển thị bộ chọn tài khoản khi truyền thông tin xác thực.

Cờ này hiện được mở rộng dưới dạng tính năng dàn xếp. Việc dàn xếp người dùng có thể xảy ra khi:

• Người dùng cần chọn một tài khoản để đăng nhập.

• Người dùng muốn đăng nhập một cách rõ ràng sau lệnh gọi navigator.credentials.requireUseMediation().

Chọn một trong các tuỳ chọn sau cho giá trị mediation:

Giá trị mediation	So sánh với cờ boolean	Hành vi
silent	Bằng unmediated: true	Thông tin xác thực đã được truyền mà không hiển thị bộ chọn tài khoản.
optional	Bằng unmediated: false	Hiển thị bộ chọn tài khoản nếu preventSilentAccess() được gọi trước đó.
required	Một lựa chọn mới	Luôn hiển thị bộ chọn tài khoản. Hữu ích khi bạn muốn cho phép người dùng chuyển đổi tài khoản bằng hộp thoại bộ chọn tài khoản gốc.

Trong ví dụ này, thông tin đăng nhập được chuyển mà không hiển thị trình chọn tài khoản, tương đương với cờ trước, unmediated: true:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(c => {

    // Sign-in
});

Đổi tên requireUserMediation() thành preventSilentAccess().

Để điều chỉnh cho phù hợp với thuộc tính mediation mới được cung cấp trong lệnh gọi get(), phương thức navigator.credentials.requireUserMediation() đã được đổi tên thành navigator.credentials.preventSilentAccess().

Phương thức đã đổi tên này ngăn việc truyền thông tin xác thực mà không hiển thị trình chọn tài khoản (đôi khi được gọi mà không cần đến tính năng dàn xếp của người dùng). Điều này hữu ích khi người dùng đăng xuất khỏi một trang web hoặc huỷ đăng ký khỏi một trang web và không muốn tự động đăng nhập lại trong lần truy cập tiếp theo.

signoutUser();
if (navigator.credentials) {
    navigator.credentials.preventSilentAccess();
}

Tạo đối tượng thông tin xác thực không đồng bộ bằng phương thức mới navigator.credentials.create()

Giờ đây, bạn có thể tạo các đối tượng thông tin xác thực không đồng bộ bằng phương thức mới navigator.credentials.create(). Đọc tiếp để so sánh giữa cả phương pháp đồng bộ hoá và không đồng bộ.

Tạo đối tượng PasswordCredential

Phương pháp đồng bộ hoá

let c = new PasswordCredential(form);

Phương pháp không đồng bộ (mới)

let c = await navigator.credentials.create({
    password: form
});

hoặc:

let c = await navigator.credentials.create({
    password: {
    id: id,
    password: password
    }
});

Tạo đối tượng FederatedCredential

Phương pháp đồng bộ hoá

let c = new FederatedCredential({
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
});

Phương pháp không đồng bộ (mới)

let c = await navigator.credentials.create({
    federated: {
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
    }
});

Hướng dẫn di chuyển

Bạn hiện đã triển khai API Quản lý thông tin xác thực? Chúng tôi có tài liệu hướng dẫn di chuyển mà bạn có thể làm theo để nâng cấp lên phiên bản mới.