Giúp người dùng đăng ký
Biểu mẫu đăng ký thường là lượt tương tác đầu tiên với một biểu mẫu trên trang web của bạn. Thiết kế biểu mẫu đăng ký phù hợp là yếu tố quan trọng và biểu mẫu an toàn là yếu tố cần thiết.
Xem biểu mẫu đăng ký để tìm hiểu cách bạn có thể giúp người dùng đăng ký trên trang web của mình.
Giữ cho biểu mẫu đăng ký ở mức tối thiểu và chỉ hiện các chế độ kiểm soát biểu mẫu bắt buộc để tạo tài khoản. Đừng tăng gấp đôi các chế độ kiểm soát biểu mẫu để giúp người dùng nhập đúng thông tin tài khoản. Gửi email xác nhận thay thế.
Thông tin về tài khoản
Bạn có thể giúp người dùng điền thông tin tài khoản bằng cách sử dụng thuộc tính autocomplete thích hợp. Dùng autocomplete="email" cho trường email và autocomplete="new-password" cho trường mật khẩu mới.
Tìm hiểu thêm về các chế độ kiểm soát đầu vào tự động điền.
Bạn cũng có thể giúp người dùng nhập mật khẩu an toàn bằng cách cung cấp một <button>hiện mật khẩu. Tìm hiểu thêm về mẫu hiển thị mật khẩu.
Bảo mật biểu mẫu đăng ký
Không bao giờ lưu trữ hoặc truyền mật khẩu dưới dạng văn bản thuần tuý. Đảm bảo bạn thêm chuỗi ngẫu nhiên và băm mật khẩu, đồng thời đừng cố gắng tự tạo thuật toán băm.
Cung cấp xác thực đa yếu tố, đặc biệt nếu bạn lưu trữ dữ liệu cá nhân hoặc dữ liệu nhạy cảm. Các phương pháp hay nhất về OTP qua tin nhắn SMS và Bật tính năng xác thực mạnh bằng WebAuthn giải thích cách triển khai tính năng xác thực đa yếu tố.
Đảm bảo người dùng không sử dụng mật khẩu bị lộ. Ví dụ: sử dụng API của Have I Been Pwned để phát hiện mật khẩu bị lộ, đồng thời đề xuất người dùng điền một mật khẩu mới khác hoặc cảnh báo họ nếu mật khẩu của họ bị lộ.
Giúp người dùng đăng nhập
Xem cách tạo biểu mẫu đăng nhập để đảm bảo người dùng có thể đăng nhập vào trang web của bạn.
Đặt các nút đăng ký và đăng nhập ở vị trí dễ thấy. Đảm bảo biểu mẫu của bạn có thể sử dụng trên thiết bị cảm ứng:
- Kích thước đích nhấn của các nút tối thiểu là 48 px.
font-sizecủa các phần tử trong biểu mẫu đủ lớn (20pxlà kích thước phù hợp trên thiết bị di động).- Có đủ khoảng trống (
margin) giữa các thành phần điều khiển biểu mẫu và các thành phần đầu vào đủ lớn (sử dụng ít nhấtpadding: 15pxtrên thiết bị di động).
Giúp người dùng điền email và mật khẩu
Giúp trình duyệt và trình quản lý mật khẩu tự động điền thông tin tài khoản.
Dùng autocomplete="email" cho trường email và autocomplete="current-password" cho trường mật khẩu hiện tại.
Để giúp người dùng điền thông tin tài khoản theo cách thủ công, hãy sử dụng type="email" cho trường email để hiện bàn phím ảo phù hợp trên thiết bị di động.
Sử dụng thuộc tính required cho trường email và mật khẩu để bạn có thể cảnh báo về các giá trị không hợp lệ khi người dùng gửi biểu mẫu. Hãy cân nhắc sử dụng tính năng xác thực theo thời gian thực để giúp người dùng sửa dữ liệu không hợp lệ ngay khi họ nhập dữ liệu đó, thay vì đợi người dùng gửi biểu mẫu.
Đảm bảo người dùng có thể thấy mật khẩu mà họ đã nhập
Theo mặc định, văn bản bạn điền vào <input type="password"> sẽ bị che khuất để tôn trọng quyền riêng tư của người dùng.
Giúp người dùng nhập mật khẩu bằng cách hiện <button> để bật/tắt chế độ hiển thị văn bản đã nhập.
Tìm hiểu thêm về cách triển khai biểu tượng hiện mật khẩu <button>.
Đảm bảo rằng biểu mẫu đăng nhập và đăng ký của bạn có thể sử dụng được
Thường xuyên kiểm thử biểu mẫu đăng nhập và đăng ký với người dùng thực để đảm bảo quy trình xác thực hoạt động như mong đợi. Sử dụng số liệu phân tích và đo lường người dùng thực (RUM) để thu thập dữ liệu thực tế, cũng như các công cụ như Lighthouse và PageSpeed Insights để tự chạy các kiểm thử. Tìm hiểu thêm về kiểm thử khả năng sử dụng và thu thập dữ liệu phân tích.
Đảm bảo biểu mẫu của bạn hoạt động trên nhiều trình duyệt và nền tảng. Kiểm thử biểu mẫu của bạn trên nhiều kích thước màn hình, chỉ sử dụng bàn phím hoặc sử dụng trình đọc màn hình như VoiceOver trên máy Mac hoặc NVDA trên Windows.
Giúp người dùng thay đổi chế độ cài đặt tài khoản
Đảm bảo rằng người dùng có thể thay đổi mọi chế độ cài đặt tài khoản, bao gồm cả địa chỉ email, mật khẩu và tên người dùng.
Hãy minh bạch về dữ liệu bạn đang lưu trữ và giúp người dùng tải xuống tất cả dữ liệu cá nhân của họ bất cứ lúc nào. Đảm bảo người dùng có thể xoá tài khoản của họ nếu muốn. Các tính năng quản lý tài khoản như thế này có thể là yêu cầu pháp lý ở một số khu vực.
Đảm bảo người dùng có thể cập nhật mật khẩu
Giúp người dùng dễ dàng cập nhật mật khẩu hơn.
Yêu cầu người dùng cung cấp mật khẩu hiện tại trước khi thay đổi mật khẩu, đồng thời gửi email về việc thay đổi mật khẩu kèm theo lựa chọn khôi phục và khoá tài khoản.
Thêm lựa chọn yêu cầu mật khẩu mới và cân nhắc cung cấp URL .well-known để yêu cầu mật khẩu mới.