Để mang lại trải nghiệm tinh vi cho người dùng, bạn phải giúp người dùng tự xác thực họ với trang web của bạn. Người dùng được xác thực có thể tương tác với nhau thông qua một hồ sơ riêng, đồng bộ hoá dữ liệu giữa các thiết bị hoặc xử lý dữ liệu khi không có mạng; danh sách đó cứ lặp lại. Nhưng sáng tạo, ghi nhớ và gõ phím mật khẩu thường rườm rà đối với người dùng cuối, đặc biệt là trên màn hình thiết bị di động dẫn đến việc họ sử dụng lại cùng một mật khẩu trên các trang web khác nhau. Tất nhiên rồi là một rủi ro bảo mật.
Phiên bản Chrome mới nhất (51) hỗ trợ API Quản lý thông tin xác thực. Đó là đề xuất theo dõi tiêu chuẩn tại W3C cung cấp cho các nhà phát triển quyền truy cập có lập trình vào trình quản lý thông tin xác thực của trình duyệt và giúp người dùng đăng nhập dễ dàng hơn.
API Quản lý thông tin xác thực là gì?
API Quản lý thông tin xác thực cho phép nhà phát triển lưu trữ và truy xuất mật khẩu thông tin xác thực và thông tin xác thực liên kết, đồng thời cung cấp 3 chức năng:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
Bằng cách sử dụng các API đơn giản này, nhà phát triển có thể làm được những việc mạnh mẽ như:
- Cho phép người dùng đăng nhập chỉ bằng một lần nhấn.
- Nhớ tài khoản được liên kết mà người dùng đã sử dụng để đăng nhập.
- Đăng nhập lại người dùng khi phiên hết hạn.
Trong quá trình triển khai của Chrome, thông tin đăng nhập sẽ được lưu trữ trong mật khẩu của Chrome người quản lý. Nếu đã đăng nhập vào Chrome, người dùng có thể đồng bộ hoá mật khẩu của họ trên nhiều thiết bị. Bạn cũng có thể chia sẻ các mật khẩu đã đồng bộ hoá đó với các ứng dụng Android đã tích hợp API Smart Lock cho Mật khẩu cho Android để có được trải nghiệm liền mạch trên nhiều nền tảng.
Tích hợp API Quản lý thông tin xác thực với trang web của bạn
Bạn có thể thay đổi cách sử dụng API Quản lý thông tin xác thực với trang web của mình tuỳ thuộc vào cấu trúc của nó. Đó có phải là ứng dụng một trang không? Đó có phải là di sản không có chuyển đổi trang không? Có phải biểu mẫu đăng nhập chỉ nằm ở trên cùng không? Nút đăng nhập có nằm ở khắp mọi nơi không? Người dùng có thể duyệt mà không đăng nhập? Liên kết có hoạt động trong cửa sổ bật lên không? Hoặc làm yêu cầu tương tác trên nhiều trang?
Gần như không thể bao gồm tất cả các trường hợp đó, nhưng hãy xem xét ứng dụng một trang thông thường.
- Trang trên cùng là một biểu mẫu đăng ký.
- Bằng cách nhấn vào "Đăng nhập" , người dùng sẽ chuyển đến biểu mẫu đăng nhập.
- Cả biểu mẫu đăng ký và biểu mẫu đăng nhập đều có các tuỳ chọn điển hình là id/mật khẩu thông tin đăng nhập và liên kết, ví dụ: bằng tính năng Đăng nhập bằng Google và Đăng nhập bằng Facebook.
Bằng cách sử dụng API Quản lý thông tin xác thực, bạn sẽ có thể thêm các thông tin sau tính năng vào trang web, ví dụ:
- Hiển thị trình chọn tài khoản khi đăng nhập: Cho thấy giao diện người dùng của trình chọn tài khoản gốc khi người dùng nhấn vào "Đăng nhập".
- Thông tin đăng nhập vào cửa hàng: Sau khi đăng nhập thành công, hãy đề nghị lưu trữ thông tin xác thực vào trình quản lý mật khẩu của trình duyệt để sử dụng sau này.
- Cho phép người dùng tự động đăng nhập lại: Cho phép người dùng đăng nhập lại nếu phiên đã hết hạn.
- Tự động đăng nhập dàn xếp: Sau khi người dùng đăng xuất, hãy tắt tính năng tự động đăng nhập lần truy cập tiếp theo của người dùng đó.
Bạn có thể trải nghiệm những tính năng này được triển khai trong trang web minh hoạ bằng mã mẫu của trang web đó.
Hiển thị Trình chọn tài khoản khi đăng nhập
Giữa một lần nhấn của người dùng vào nút "Đăng nhập" và điều hướng đến một biểu mẫu đăng nhập, bạn có thể sử dụng navigator.credentials.get() để nhận thông tin chứng chỉ. Chrome sẽ hiển thị giao diện người dùng của trình chọn tài khoản người dùng có thể chọn một tài khoản.
Lấy đối tượng thông tin xác thực mật khẩu
Để hiển thị thông tin xác thực mật khẩu dưới dạng các tuỳ chọn tài khoản, hãy sử dụng password: true.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
Sử dụng thông tin đăng nhập bằng mật khẩu để đăng nhập
Sau khi người dùng lựa chọn tài khoản, chức năng giải quyết sẽ nhận được
thông tin xác thực mật khẩu. Bạn có thể gửi đường liên kết đến máy chủ bằng fetch():
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
Sử dụng thông tin đăng nhập được liên kết để đăng nhập
Để hiển thị các tài khoản liên kết cho người dùng, hãy thêm federated. Hàm này sẽ lấy một mảng
nhà cung cấp danh tính, vào các tuỳ chọn get().
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
Bạn có thể kiểm tra thuộc tính type của đối tượng thông tin xác thực để xem thuộc tính đó có PasswordCredential
(type == 'password') hoặc FederatedCredential (type == 'federated').
Nếu thông tin đăng nhập là
FederatedCredential,
bạn có thể gọi API thích hợp bằng thông tin chứa trong đó.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
Lưu trữ thông tin đăng nhập
Khi người dùng đăng nhập vào trang web của bạn bằng một biểu mẫu, bạn có thể sử dụng
navigator.credentials.store()
để lưu trữ thông tin xác thực. Người dùng sẽ được nhắc có lưu trữ mã đó hay không. Tuỳ thuộc vào
về loại thông tin đăng nhập, hãy sử dụng new
PasswordCredential()
hoặc new
FederatedCredential()
để tạo đối tượng thông tin xác thực mà bạn muốn lưu trữ.
Tạo và lưu trữ thông tin xác thực mật khẩu từ phần tử biểu mẫu
Mã sau đây sử dụng các thuộc tính autocomplete để tự động
bản đồ
các phần tử của biểu mẫu thành PasswordCredential
tham số của đối tượng.
HTML
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Tạo và lưu trữ thông tin xác thực được liên kết
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Cho phép người dùng tự động đăng nhập lại
Khi người dùng rời khỏi trang web của bạn và quay lại sau, có thể phiên đã hết hạn. Không bận tâm khi người dùng nhập mật khẩu mỗi khi họ quay lại. Cho phép người dùng tự động đăng nhập lại.
Lấy đối tượng thông tin xác thực
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
Mã sẽ trông giống như những gì bạn đã thấy trong phần "Hiển thị trình chọn tài khoản
khi đăng nhập" . Sự khác biệt duy nhất là bạn sẽ đặt
unmediated: true.
Thao tác này sẽ giải quyết hàm ngay lập tức và cung cấp cho bạn thông tin xác thực để tự động đăng nhập người dùng. Có một vài điều kiện:
- Người dùng đã xác nhận tính năng tự động đăng nhập trong lời chào mừng nồng nhiệt.
- Trước đó, người dùng này đã đăng nhập vào trang web bằng API Quản lý thông tin xác thực.
- Người dùng chỉ có một thông tin đăng nhập được lưu trữ cho máy chủ gốc của bạn.
- Người dùng không đăng xuất một cách rõ ràng trong phiên trước đó.
Nếu không đáp ứng bất kỳ điều kiện nào trong số này, hàm sẽ bị từ chối.
Dàn xếp quy trình tự động đăng nhập
Khi người dùng đăng xuất khỏi trang web của bạn, bạn có trách nhiệm đảm bảo
đảm bảo người dùng sẽ không tự động được đăng nhập lại. Để đảm bảo
điều này, API Quản lý thông tin xác thực cung cấp một cơ chế có tên là dàn xếp.
Bạn có thể bật chế độ dàn xếp bằng cách gọi
navigator.credentials.requireUserMediation().
Miễn là trạng thái dàn xếp của người dùng cho nguồn gốc được bật, sử dụng
unmediated: true có navigator.credentials.get(), hàm đó sẽ
phân giải bằng undefined.
Dàn xếp quy trình tự động đăng nhập
navigator.credentials.requireUserMediation();
Câu hỏi thường gặp
JavaScript trên trang web có thể truy xuất tệp thô không
mật khẩu?
Không. Bạn chỉ có thể lấy mật khẩu trong PasswordCredential chứ không phải
có thể tiết lộ dưới bất kỳ hình thức nào.
Tôi có thể lưu trữ 3 bộ chữ số cho một mã nhận dạng bằng Chứng chỉ danh tính không API Quản lý? Hiện tại thì chưa. Ý kiến phản hồi của bạn về bản đặc tả kỹ thuật sẽ rất được đánh giá cao.
Tôi có thể sử dụng API Quản lý thông tin xác thực trong iframe không?
API này chỉ dành cho các ngữ cảnh cấp cao nhất. Cuộc gọi đến .get() hoặc .store()
trong iframe sẽ phân giải ngay lập tức mà không có hiệu lực.
Tôi có thể tích hợp tiện ích quản lý mật khẩu của Chrome với thông tin xác thực không?
API Quản lý?
Bạn có thể ghi đè navigator.credentials rồi nối với Tiện ích của Chrome để
Thông tin đăng nhập get() hoặc store().
Tài nguyên
Để tìm hiểu thêm về API Quản lý thông tin xác thực, hãy xem Hướng dẫn tích hợp.