Thuộc tính HTML để cải thiện trải nghiệm xác thực hai yếu tố của người dùng của bạn

[ad_1]

    
    
      

Có rất nhiều cơ hội để ma sát trong trải nghiệm người dùng khi đăng nhập, đặc biệt là khi nhập mã xác thực hai yếu tố. Là nhà phát triển, chúng tôi nên xây dựng các ứng dụng hỗ trợ nhu cầu bảo mật tài khoản nhưng không làm mất đi trải nghiệm người dùng. Đôi khi nó có thể cảm thấy như thể những yêu cầu này là trong một trận chiến với nhau.

Trong bài đăng này, chúng tôi sẽ xem xét yếu tố khiêm tốn và các thuộc tính HTML sẽ giúp tăng tốc trải nghiệm xác thực hai yếu tố của người dùng của chúng tôi.

Trải nghiệm mặc định

Khi bạn triển khai xác thực hai yếu tố cho ứng dụng web, có lẽ với API xác thực hai yếu tố Authy, bạn sẽ cần một biểu mẫu để người dùng của bạn nhập mật khẩu một lần bạn sẽ gửi cho họ. Bạn có thể tạo một cái gì đó tương tự như HTML sau:

    
      

    

   <  mẫu   hành động   =   "/ session / check-2fa" ]  phương thức   =   "POST"  > 
   <  div  > 
   <  nhãn   cho   =   "mã thông báo"   Vui lòng nhập mã bạn đã gửi:  </   nhãn  > 
   <  đầu vào   loại   =   "văn bản"    =   "mã thông báo"   id   =   "mã thông báo"   /> [19459]
   </   div  > 
   <  nút   loại   =   "gửi"   Kiểm tra mã thông báo  </   nút  > 
   </   mẫu  > 
 

    
      

Đây là một kinh nghiệm tốt. có tên và ID duy nhất và đang sử dụng đúng cho thuộc tính để liên kết rõ ràng với nó, điều này rất quan trọng đối với nó khả năng tiếp cận. Bạn cũng có thể bọc xung quanh để có hiệu quả tương tự. Với một chút CSS, cái này có thể trông giống như thế này:

 Một trang web được hiển thị trong Safari Safari với lời nhắc xác thực hai yếu tố. Bàn phím chữ cái tiêu chuẩn đang mở. "Class =" richtext-image left "height =" 660 "src =" https://twilio-cms-prod.s3.amazonaws.com/images/tdOtbut7Vw6IDmTHzn9Py2mewd3Z48888 chiều rộng = "310" /> </p>
<p> Tuy nhiên, chúng ta có thể tăng dần trải nghiệm này chỉ bằng một vài thuộc tính nữa. </p>
<h2> Bắt đúng bàn phím </h2>
<p> Trên điện thoại di động hoặc thiết bị có bàn phím trên màn hình, điều đầu tiên cần chú ý là chúng tôi đang trình bày bàn phím alpha đầy đủ. Mật khẩu một lần được tạo bằng các ký tự số nên sẽ tốt hơn nhiều khi trình bày cho người dùng một phím số. </p>
<p> Bạn có thể nghĩ rằng việc chuyển loại <code> </code> thành <code> <input> </code> từ "văn bản" sang "số" là giải pháp ở đây: </p>
</p></div>
<p>    <br />
      </p>
<div class=     

   <  đầu vào   loại   =   "số"     =   "mã thông báo"   id   =   "mã thông báo"  / 
 

    
      

Mặc dù vậy, bạn sẽ sai. Điều này không kích hoạt một bàn phím khác trên iOS, nhưng nó vẫn bao gồm một số phím vô dụng.

 Một trang web được hiển thị trong Safari Safari với lời nhắc xác thực hai yếu tố. Lần này, bàn phím bao gồm các số và ký hiệu. "Class =" richtext-image left "height =" 660 "src =" https://twilio-cms-prod.s3.amazonaws.com/images/ry5zwd2VRCrlwfNzuuphCPErFtPj63t. png "width =" 310 "/> </p>
<p> Thay đổi loại trường thay đổi cách trình duyệt diễn giải trường đó. Nó cũng có thể gây ra lỗi; nếu mã xác thực hai yếu tố bắt đầu bằng 0, trường số có thể giảm xuống số 0 đó. </p>
<h3> mã đầu vào </h3>
<p> Thuộc tính đầu vào <code> </code> thay đổi bàn phím trình duyệt sẽ hiển thị mà không thay đổi ý nghĩa của dữ liệu mà trường thu thập. Chúng tôi muốn <code> <input> </code> nhận đầu vào văn bản, nhưng từ bàn phím số. Vì vậy, thay vào đó, hãy thêm <code> inputmode = "số" </code> </p>
</p></div>
<p>    <br />
      </p>
<div class=     

   <  đầu vào   loại   =   "văn bản"     =   "mã thông báo"   id   =   "mã thông báo"   =   "số"   /> 
 

    
      

inputmode có một số giá trị khác, bao gồm "tel" cho các số điện thoại, "email", "thập phân", "url", "tìm kiếm" và "không" trong trường hợp bạn muốn kết xuất bàn phím của riêng bạn. Bài viết này về CSS Tricks có tất cả các chi tiết bạn cần cho mã đầu vào khác nhau s.

Hỗ trợ trình duyệt cho đầu vào rất tốt cho các hệ điều hành di động ngày nay, nhưng một vài năm trước đây là ở nơi hoang dã. Đối với các trình duyệt cũ hơn, có một mẹo khác để kích hoạt bàn phím số và bao gồm một chút xác thực bổ sung miễn phí.

mẫu

Thuộc tính cho phép bạn xác thực nội dung của bằng cách sử dụng biểu thức chính quy. Sử dụng mẫu [0-9] * cho trình duyệt biết rằng chúng tôi chỉ chấp nhận các số trong trường và cũng kích hoạt bàn phím số trong các trình duyệt không có hỗ trợ đầu vào .

HTML của chúng tôi trông như thế này ngay bây giờ:

    
      

    

   <  đầu vào 
   loại   =   "văn bản" 
   tên   =   "mã thông báo" 
   id   =   "mã thông báo" 
   inputmode   =   "số" 
   mẫu   =   "[0-9] *" 
   /> 
 

    
      

Và bàn phím là một đầu vào số đơn giản hơn nhiều:

 Một trang web được hiển thị trong Safari Safari với lời nhắc xác thực hai yếu tố. Lần này, một bàn phím đơn giản chỉ xuất hiện các số. "Class =" richtext-image left "height =" 660 "src =" https://twilio-cms-prod.s3.amazonaws.com/images/-3g7a5ILNb1nxjivQFL2Ek_C1fUAG 500.png "width =" 310 "/> </p>
<p> Một điều khiến biểu mẫu này dễ điền hơn nữa là tự động hoàn thành mật khẩu một lần. </p>
<h2> Tự động hoàn tất HTML </h2>
<p> Theo MDN, "tự động hoàn tất cho phép các nhà phát triển web chỉ định điều gì nếu bất kỳ sự cho phép nào mà tác nhân người dùng phải cung cấp hỗ trợ tự động trong việc điền vào các giá trị trường biểu mẫu, cũng như hướng dẫn cho trình duyệt về loại thông tin dự kiến ​​trong trường." </p>
<p> Trong iOS và Safari trên macOS, chúng tôi có thể tận dụng lợi thế này để trình duyệt đề xuất hai mã xác thực yếu tố được gửi đến thiết bị qua SMS. Thêm thuộc tính <code> tự động hoàn thành </code> với giá trị "mã một lần" sẽ kích hoạt hành vi này. </p>
</p></div>
<p>    <br />
      </p>
<div class=     

   <  đầu vào 
   loại   =   "văn bản" 
   tên   =   "mã thông báo" 
   id   =   "mã thông báo" 
   inputmode   =   "số" 
   mẫu   =   "[0-9] *" 
   tự động hoàn thành   =   "mã một lần" 
   /> 
 

    
      

Với điều này, của chúng tôi đã hoàn tất và trải nghiệm cho người dùng giờ trông như thế này:

 Một trang web được hiển thị trong Safari Safari với lời nhắc xác thực hai yếu tố. Ngoài ra còn có một thông báo tin nhắn với mã xác thực hai yếu tố và bàn phím tự động đề xuất mã được điền vào. "Class =" richtext-image left "height =" 650 "src =" https: // twilio-cms- prod.s3.amazonaws.com/images/bB8dEBOY51SzwLMcPqra1NQd7hAEk3Hl_vZZ9uUjNKfBZ3. thong-500.png "width =" 300 "/> </p>
<h3> Các giá trị tự động hoàn thành hữu ích khác </h3>
<p> Có nhiều giá trị tự động hoàn thành có sẵn, bao gồm mọi thứ từ tên và địa chỉ đến thẻ tín dụng và các chi tiết tài khoản khác. Để đăng ký và đăng nhập, có một vài giá trị tự động hoàn thành nổi bật như những gợi ý hữu ích: <code> tên người dùng </code><code> email </code><code> mật khẩu mới </code><code> mật khẩu hiện tại </code>. </p>
<p> Trình duyệt và trình quản lý mật khẩu có khả năng tìm kiếm rất tốt để tìm các biểu mẫu đăng nhập trên các trang web, nhưng sử dụng các giá trị <code> </code> và <code> mật khẩu hiện tại </code> làm cho nó rất rõ ràng. Bạn chắc chắn muốn xem xét sử dụng các thuộc tính này nếu bạn đang xây dựng một biểu mẫu đăng nhập với tên người dùng và mật khẩu trên các trang khác nhau. </p>
<p> Trong biểu mẫu đăng ký, đảm bảo sử dụng giá trị "mật khẩu mới" vì nó kích hoạt đề xuất mật khẩu trong một số trình duyệt. </p>
<p> <img class=       

Tác giả

      

            

  •           
              Phil Nash
            
  •         
            
            
          

    

    

    
      

    
  


[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.