Xuất bản: Ngày 12 tháng 5 năm 2026
Chế độ giao diện người dùng tức thì cho hoạt động đăng nhập là một chức năng trên web được thiết kế để đơn giản hoá quy trình đăng nhập. Tính năng này cho phép bạn chủ động cung cấp khoá truy cập và mật khẩu được quản lý trực tiếp cho người dùng khi họ thực hiện thao tác đăng nhập, chẳng hạn như nhấp vào nút Đăng nhập hoặc Thanh toán.
Bản tóm tắt
Chế độ giao diện người dùng ngay lập tức cung cấp một chế độ sẽ nhanh chóng gặp lỗi nếu không có thông tin xác thực nào có sẵn trên thiết bị. Hành vi này phản ánh các API preferImmediatelyAvailableCredentials có trên các nền tảng di động như Android và iOS. Khi thông tin đăng nhập tồn tại, trình duyệt sẽ hiển thị ngay hộp thoại đăng nhập cho người dùng. Nếu không, phương thức này sẽ âm thầm từ chối lời hứa, cho phép bạn cung cấp các phương thức đăng nhập thay thế, chẳng hạn như biểu mẫu đăng nhập, mà không làm gián đoạn trải nghiệm người dùng.
Kể từ tháng 5 năm 2026, Chrome là trình duyệt duy nhất hỗ trợ chế độ giao diện người dùng ngay lập tức.
Kiểm tra các điều kiện tiên quyết
Để sử dụng chế độ giao diện người dùng tức thì, người dùng phải có sẵn thông tin đăng nhập đủ điều kiện trên thiết bị của họ. Trên Chrome, những thông tin đăng nhập này bao gồm:
- Khoá truy cập được lưu trong một trình cung cấp khoá truy cập, chẳng hạn như Trình quản lý mật khẩu của Google, Windows Hello hoặc Chuỗi khoá iCloud.
- Mật khẩu được lưu trong Trình quản lý mật khẩu của Google.
Nếu không có thông tin xác thực cục bộ, API sẽ từ chối yêu cầu mà không hiển thị hộp thoại đăng nhập ngay lập tức.
Phát hiện tính năng được hỗ trợ
Trước khi gọi chế độ giao diện người dùng tức thì, hãy xác minh xem trình duyệt có hỗ trợ khả năng immediateGet hay không bằng cách sử dụng phương thức PublicKeyCredential.getClientCapabilities(). Nếu không được hỗ trợ, hãy quay lại các phương thức đăng nhập hiện có, chẳng hạn như biểu mẫu email và mật khẩu, xác minh số điện thoại hoặc đăng nhập bằng tài khoản mạng xã hội.
async function checkImmediateAvailability() {
try {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.immediateGet) {
console.log("Immediate UI mode is supported.");
} else {
console.log("Immediate UI mode is NOT supported.");
}
} catch (error) {
console.error("Error checking client capabilities:", error);
}
}
Để có khả năng hỗ trợ trình duyệt rộng hơn, hãy sử dụng polyfill có trong kho lưu trữ WebAuthn Polyfills GitHub.
Yêu cầu thông tin đăng nhập
Để kích hoạt quy trình đăng nhập ngay lập tức, hãy gọi navigator.credentials.get() khi trường uiMode được đặt thành 'immediate'.
Bằng cách thêm password: true vào yêu cầu, người dùng có thể hưởng lợi từ trải nghiệm này nếu trình duyệt hỗ trợ thông tin đăng nhập bằng mật khẩu.
// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
event.preventDefault();
try {
const cred = await navigator.credentials.get({
password: true,
publicKey: {
challenge: serverGeneratedChallenge,
rpId: 'example.com'
},
uiMode: 'immediate',
});
// Handle successful sign-in
} catch (error) {
if (error.name === 'NotAllowedError') {
// Provide a fallback sign-in experience
showFallbackUI();
}
}
});
Bạn phải xử lý NotAllowedError trong khối catch để cung cấp trải nghiệm đăng nhập dự phòng.
Xử lý quy trình đăng nhập
Bạn có thể triển khai chế độ giao diện người dùng ngay lập tức cho 2 trường hợp chính. Để biết thêm hướng dẫn về trải nghiệm người dùng và các mẫu phản hồi cần tránh, hãy xem Các mẫu trải nghiệm người dùng cho chế độ Giao diện người dùng tức thì.
Đăng nhập bằng nút
Cung cấp một nút đăng nhập chuyên dụng mang lại trải nghiệm gọn gàng mà không có lời nhắc không mong muốn.
- Người dùng nhấp vào nút Đăng nhập.
- Cuộc gọi qua trang web của bạn
navigator.credentials.get()vớiuiMode: "immediate". - Trình duyệt sẽ kiểm tra thông tin đăng nhập cục bộ.
- Nếu tìm thấy thông tin đăng nhập, trình duyệt sẽ hiển thị ngay hộp thoại đăng nhập để người dùng chọn một tài khoản.
- Nếu không tìm thấy thông tin đăng nhập hoặc người dùng đóng hộp thoại đăng nhập ngay lập tức, thì trình duyệt sẽ gửi một
NotAllowedError. - Nếu một
NotAllowedErrorđược gửi, thì trang web của bạn sẽ tiếp tục với trang đăng nhập tiêu chuẩn.
Đăng nhập trước khi thanh toán
Chủ động cung cấp thông tin đăng nhập trước khi người dùng thực hiện một hành động có lợi cho việc xác thực, chẳng hạn như bắt đầu quy trình thanh toán tại một cửa hàng trực tuyến.
Trong thương mại điện tử, người dùng khách thường chọn giữa việc đăng nhập vào một tài khoản hiện có hoặc thanh toán với tư cách là khách. Việc cung cấp hộp thoại đăng nhập ngay lập tức có thể đơn giản hoá quy trình thanh toán cho khách hàng cũ.
- Người dùng bắt đầu một hành động, chẳng hạn như nhấp vào nút Thanh toán trong quy trình mua sắm.
- Cuộc gọi qua trang web của bạn
navigator.credentials.get()vớiuiMode: "immediate". - Nếu có thông tin đăng nhập, người dùng sẽ chọn một thông tin để hoàn tất quá trình đăng nhập.
- Nếu không có thông tin đăng nhập, trình duyệt sẽ gửi lỗi và không hiển thị hộp thoại đăng nhập ngay lập tức. Trải nghiệm người dùng vẫn không thay đổi và bạn có thể đưa người dùng đến màn hình thanh toán hiện có. Màn hình này có thể cung cấp các lựa chọn đăng nhập khác hoặc biểu mẫu thanh toán của khách.
Xem xét các biện pháp bảo mật và quyền riêng tư
Trình duyệt này triển khai các biện pháp quan trọng để bảo vệ quyền riêng tư của người dùng:
- Yêu cầu về cử chỉ của người dùng: Bạn phải bắt đầu lệnh gọi API bằng một cử chỉ của người dùng (chẳng hạn như một lượt nhấp) để ngăn chặn hoạt động thăm dò âm thầm. Lệnh gọi không sử dụng lượt kích hoạt.
- Các hạn chế ở Chế độ ẩn danh: Các yêu cầu trong phiên ẩn danh hoặc phiên riêng tư luôn gửi
NotAllowedError. - Không có danh sách cho phép: Các yêu cầu có danh sách
allowCredentialskhông trống sẽ gửi mộtNotAllowedErrorđể ngăn chặn hoạt động theo dõi trên nhiều phiên. - Không huỷ theo chương trình: Bạn không thể dùng tham số
signalđể đóng hộp thoại đăng nhập ngay lập tức theo chương trình.