8.2. Trải nghiệm login

Đặt vấn đề

• Một trong những chức năng quan trọng của một hệ thống là chức năng đăng nhập.
• Chức năng đăng nhập giúp hệ thống xác thực người dùng và cung cấp quyền truy cập vào hệ thống.
• Để đảm bảo an toàn cho hệ thống, chúng ta cần kiểm tra và xác thực thông tin đăng nhập của người dùng.

Yêu cầu (Requirements)

1. Email:

   • Nhãn (Label): "Email".
   • Lời dẫn nhập (Placeholder Text): "Nhập email của bạn".
   • Email bắt buộc người dùng phải nhập.
   • Email phải có định dạng hợp lệ (vd: example@domain.com).
   • Hiển thị thông báo lỗi nếu không nhập hoặc nhập sai định dạng email.
     • Cụ thể thông báo lỗi: "Email không hợp lệ."

2. Mật khẩu (Password):

   • Nhãn (Label): "Mật khẩu".
   • Lời dẫn nhập (Placeholder Text): "Nhập mật khẩu của bạn".
   • Mật khẩu bắt buộc người dùng phải nhập.
   • Mật khẩu phải có tối thiểu 8 ký tự và tối đa 30 ký tự.
   • Mật khẩu phải bao gồm ít nhất một chữ cái viết hoa, một chữ cái viết thường, một chữ số và một ký tự đặc biệt (!@#$%^&*()).
   • Hiển thị thông báo lỗi nếu mật khẩu không đáp ứng yêu cầu độ mạnh.
     • Cụ thể thông báo lỗi:
       • Nếu vi phạm số ký tự yêu cầu, hiển thị thông báo "Mật khẩu phải có ít nhất 8 ký tự và tối đa 30 ký tự."
       • Nếu vi phạm yêu cầu mật khẩu mạnh: "Mật khẩu phải bao gồm ít nhất một chữ cái viết hoa, một chữ cái viết thường, một chữ số và một ký tự đặc biệt."

3. Nút Đăng nhập:

   • Nhãn: Đăng nhập
   • Nút đăng nhập chỉ khả dụng khi người dùng đã nhập đầy đủ và hợp lệ email và mật khẩu.

4. Bảo mật:

   • Mật khẩu phải được mã hóa trước khi gửi lên máy chủ.

5. Đăng nhập:

   • Kiểm tra email và mật khẩu trên máy chủ.
   • Nếu email và mật khẩu hợp lệ, hiển thị thông báo "Đăng nhập thành công", sau 2 giây chuyển hướng người dùng đến trang chính.
   • Nếu email hoặc mật khẩu không hợp lệ, hiển thị thông báo "Đăng nhập thất bại".

Thiết kế giao diện (UI Design)

• Sử dụng Figma để thiết kế giao diện đăng nhập.
• Giao diện đăng nhập bao gồm:
  • Trường nhập email.
  • Trường nhập mật khẩu.
  • Nút đăng nhập.
  • Thông báo lỗi (nếu có).

SRS (Software Requirement Specification)

Flowchart Diagram (Optional - Not Recommended)

State Diagram (Optional - Not Recommended)

Sequence Diagram (Recommended)

Database (Dành cho Datbase Designer)

• Tạo bảng users để lưu thông tin người dùng.
• Cấu trúc bảng users:
  • id: int, primary key, auto increment.
  • email: varchar(255), unique.
  • password: varchar(255).
  • name: varchar(255).
  • created_at: timestamp, default current timestamp.
  • updated_at: timestamp, default current timestamp on update current timestamp.

Backend API

• Request:
  • URL: /api/login
  • Method: POST
  • Body:

    {
      "email": "admin@gmail.com",
      "password": "Abc@123456"
    }

• Response:
  • http status code: 200

  {
    "status": "success",
    "message": "Đăng nhập thành công",
    "data": {
      "access_token": "string-token"
    }
  }

  • http status code: 401

  {
    "status": "error",
    "message": "Email hoặc mật khẩu không đúng"
  }

Frontend HTML

• Căn cứ vào thiết kế giao diện Figma, tạo form đăng nhập với các trường:
  • Email
  • Mật khẩu
  • Nút đăng nhập
  • Thông báo lỗi
• Khi người dùng nhấn nút đăng nhập, gửi yêu cầu đăng nhập tới API.
• Hiển thị thông báo lỗi nếu có lỗi xảy ra.
• Chuyển hướng người dùng đến trang chính nếu đăng nhập thành công.

Use Cases (Frontend HTML)

Use Case 1: Đăng nhập thành công

• Mục tiêu (Goal): Người dùng có thể đăng nhập thành công vào hệ thống khi thông tin đúng.
• Diễn viên chính (Actor): Người dùng.
• Tiền điều kiện (Pre-condition): Người dùng đã có tài khoản với email và mật khẩu hợp lệ.
• Dòng sự kiện chính (Main flow):
  • Người dùng truy cập màn hình đăng nhập.
  • Người dùng nhập email và mật khẩu hợp lệ.
  • Hệ thống kiểm tra định dạng email.
  • Hệ thống kiểm tra độ mạnh của mật khẩu.
  • Hệ thống gửi yêu cầu xác thực tới máy chủ.
  • Máy chủ xác thực thông tin đăng nhập.
  • Hệ thống hiển thị thông báo đăng nhập thành công và chuyển hướng đến trang chính.
• Hậu điều kiện (Post-condition): Người dùng có quyền truy cập vào trang chính sau khi đăng nhập thành công.

Use Case 2: Đăng nhập thất bại (Email đúng, mật khẩu sai)

• Mục tiêu (Goal): Người dùng không thể đăng nhập vào hệ thống khi thông tin không đúng.
• Diễn viên chính (Actor): Người dùng.
• Tiền điều kiện (Pre-condition): Người dùng đã có tài khoản với email và mật khẩu không hợp lệ.
• Dòng sự kiện chính (Main flow):
  • Người dùng truy cập màn hình đăng nhập.
  • Người dùng nhập email hợp lệ và khớp với tài khoản đã đăng ký.
  • Người dùng nhập mật khẩu hợp lệ nhưng không khớp với tài khoản đã đăng ký.
  • Hệ thống gửi yêu cầu xác thực lên máy chủ.
  • Máy chủ kiểm tra và phát hiện thông tin không khớp.
  • Hệ thống hiển thị thông báo lỗi "Email hoặc mật khẩu không đúng".
• Hậu điều kiện (Post-condition): Người dùng cần nhập lại thông tin đúng để đăng nhập.

Use Case 3: Đăng nhập thất bại (Email sai, mật khẩu đúng)

• Mục tiêu (Goal): Người dùng không thể đăng nhập vào hệ thống khi thông tin không đúng.
• Diễn viên chính (Actor): Người dùng.
• Tiền điều kiện (Pre-condition): Người dùng đã có tài khoản với email và mật khẩu không hợp lệ.
• Dòng sự kiện chính (Main flow):
  • Người dùng truy cập màn hình đăng nhập.
  • Người dùng nhập email hợp lệ nhưng không khớp với tài khoản đã đăng ký.
  • Người dùng nhập mật khẩu hợp lệ và khớp với tài khoản đã đăng ký.
  • Hệ thống gửi yêu cầu xác thực lên máy chủ.
  • Máy chủ kiểm tra và phát hiện thông tin không khớp.
  • Hệ thống hiển thị thông báo lỗi "Email hoặc mật khẩu không đúng".
• Hậu điều kiện (Post-condition): Người dùng cần nhập lại thông tin đúng để đăng nhập.

Use Case 4: Đăng nhập thất bại (Email sai, mật khẩu sai)

• Mục tiêu (Goal): Người dùng không thể đăng nhập vào hệ thống khi thông tin không đúng.
• Diễn viên chính (Actor): Người dùng.
• Tiền điều kiện (Pre-condition): Người dùng đã có tài khoản với email và mật khẩu không hợp lệ.
• Dòng sự kiện chính (Main flow):
  • Người dùng truy cập màn hình đăng nhập.
  • Người dùng nhập email hợp lệ nhưng không khớp với tài khoản đã đăng ký.
  • Người dùng nhập mật khẩu hợp lệ nhưng không khớp với tài khoản đã đăng ký.
  • Hệ thống gửi yêu cầu xác thực lên máy chủ.
  • Máy chủ kiểm tra và phát hiện thông tin không khớp.
  • Hệ thống hiển thị thông báo lỗi "Email hoặc mật khẩu không đúng".
• Hậu điều kiện (Post-condition): Người dùng cần nhập lại thông tin đúng để đăng nhập.

Development

Testing

Đăng nhập thành công

• Mục tiêu (Goal): Xác minh rằng người dùng có thể đăng nhập thành công với thông tin hợp lệ.
• Điều kiện đầu vào (Test Data):
  • Email: example@domain.com
  • Mật khẩu: ValidPass@123
• Các bước thực hiện (Test Steps):
  • Truy cập màn hình đăng nhập.
  • Nhập email hợp lệ vào trường email.
  • Nhập mật khẩu hợp lệ vào trường mật khẩu.
  • Nhấn nút "Đăng nhập".
• Kết quả mong đợi (Expected Result):
  • Hệ thống kiểm tra định dạng email hợp lệ.
  • Hệ thống xác nhận mật khẩu đủ mạnh.
  • Đăng nhập thành công, người dùng được chuyển hướng đến trang chính.

Đăng nhập thất bại (Email đúng, mật khẩu sai)

• Mục tiêu (Goal): Xác minh rằng người dùng không thể đăng nhập khi mật khẩu không đúng.
• Điều kiện đầu vào (Test Data):
  • Email: example@domain.com
  • Mật khẩu: InvalidPass@123
• Các bước thực hiện (Test Steps):
  • Truy cập màn hình đăng nhập.
  • Nhập email hợp lệ vào trường email.
  • Nhập mật khẩu không hợp lệ vào trường mật khẩu.
  • Nhấn nút "Đăng nhập".
• Kết quả mong đợi (Expected Result):
  • Hệ thống kiểm tra định dạng email hợp lệ.
  • Hệ thống xác nhận mật khẩu đủ mạnh.
  • Hiển thị thông báo lỗi "Email hoặc mật khẩu không đúng".
  • Không chuyển hướng người dùng đến trang chính.

Đăng nhập thất bại (Email sai, mật khẩu đúng)

• Mục tiêu (Goal): Xác minh rằng người dùng không thể đăng nhập khi mật khẩu không đúng.
• Điều kiện đầu vào (Test Data):
  • Email: sample@domain.com
  • Mật khẩu: ValidPass@123
• Các bước thực hiện (Test Steps):
  • Truy cập màn hình đăng nhập.
  • Nhập email không hợp lệ vào trường email.
  • Nhập mật khẩu hợp lệ vào trường mật khẩu.
  • Nhấn nút "Đăng nhập".
• Kết quả mong đợi (Expected Result):
  • Hệ thống kiểm tra định dạng email hợp lệ.
  • Hệ thống xác nhận mật khẩu đủ mạnh.
  • Hiển thị thông báo lỗi "Email hoặc mật khẩu không đúng".
  • Không chuyển hướng người dùng đến trang chính.

Đăng nhập thất bại (Email sai, mật khẩu sai)

• Mục tiêu (Goal): Xác minh rằng người dùng không thể đăng nhập khi mật khẩu không đúng.
• Điều kiện đầu vào (Test Data):
  • Email: sample@domain.com
  • Mật khẩu: InvalidPass@123
• Các bước thực hiện (Test Steps):
  • Truy cập màn hình đăng nhập.
  • Nhập email không hợp lệ vào trường email.
  • Nhập mật khẩu không hợp lệ vào trường mật khẩu.
  • Nhấn nút "Đăng nhập".
• Kết quả mong đợi (Expected Result):
  • Hệ thống kiểm tra định dạng email hợp lệ.
  • Hệ thống xác nhận mật khẩu đủ mạnh.
  • Hiển thị thông báo lỗi "Email hoặc mật khẩu không đúng".
  • Không chuyển hướng người dùng đến trang chính.

Kiểm tra email hợp lệ.

• Mục tiêu:
  • Xác minh rằng hệ thống chấp nhận email hợp lệ.
• Kết quả mong đợi:
  • Hệ thống xác nhận email hợp lệ và không hiển thị thông báo lỗi liên quan đến email.

Kiểm tra email không hợp lệ

• Mục tiêu:
  • Xác minh rằng hệ thống từ chối do email không hợp lệ.
• Kết quả mong đợi:
  • Hệ thống hiển thị thông báo lỗi liên quan đến email không hợp lệ.
• Các trường hợp email không hợp lệ:
  • Không chứa ký tự @ => Hiển thị thông báo lỗi "Email không hợp lệ."
  • Không chứa tên domain => Hiển thị thông báo lỗi "Email không hợp lệ."
  • Không chứa phần sau dấu chấm của domain => Hiển thị thông báo lỗi "Email không hợp lệ."
  • Chứa ký tự đặc biệt không hợp lệ => Hiển thị thông báo lỗi "Email không hợp lệ."
  • Chứa khoảng trắng => Hiển thị thông báo lỗi "Email không hợp lệ."

Kiểm tra mật khẩu hợp lệ

• Mục tiêu:
  • Xác minh rằng hệ thống chấp nhận mật khẩu hợp lệ.
• Kết quả mong đợi:
  • Hệ thống xác nhận mật khẩu hợp lệ và không hiển thị thông báo lỗi liên quan đến mật khẩu.

Kiểm tra mật khẩu không hợp lệ

• Mục tiêu:

  • Xác minh rằng hệ thống từ chối do email không hợp lệ.

• Kết quả mong đợi:

  • Hệ thống hiển thị thông báo lỗi liên quan đến email không hợp lệ.

• Các trường hợp mật khẩu không hợp lệ:

  • Thiếu ký tự đặc biệt => Hiển thị thông báo lỗi "Mật khẩu phải bao gồm ít nhất một chữ cái viết hoa, một chữ cái viết thường, một chữ số và một ký tự đặc biệt."
  • Thiếu chữ cái viết hoa => Hiển thị thông báo lỗi "Mật khẩu phải bao gồm ít nhất một chữ cái viết hoa, một chữ cái viết thường, một chữ số và một ký tự đặc biệt."
  • Thiếu chữ cái viết thường => Hiển thị thông báo lỗi "Mật khẩu phải bao gồm ít nhất một chữ cái viết hoa, một chữ cái viết thường, một chữ số và một ký tự đặc biệt."
  • Thiếu chữ số => Hiển thị thông báo lỗi "Mật khẩu phải bao gồm ít nhất một chữ cái viết hoa, một chữ cái viết thường, một chữ số và một ký tự đặc biệt."
  • Mật khẩu quá ngắn (dưới 8 ký tự) => Hiển thị thông báo lỗi "Mật khẩu phải có ít nhất 8 ký tự và tối đa 30 ký tự."
  • Mật khẩu quá dài (trên 30 ký tự) => Hiển thị thông báo lỗi "Mật khẩu phải có ít nhất 8 ký tự và tối đa 30 ký tự."

• Kết quả mong đợi:

  • Hệ thống hiển thị thông báo lỗi liên quan đến mật khẩu không hợp lệ.

Kiểm tra nút đăng nhập khả dụng

• Mục tiêu:
  • Xác minh rằng nút đăng nhập chỉ khả dụng khi email và mật khẩu hợp lệ.
• Kết quả mong đợi:
  • Nút đăng nhập chỉ khả dụng khi email và mật khẩu hợp lệ.

Kiểm tra bảo mật

• Mục tiêu:
  • Xác minh rằng mật khẩu được mã hóa trước khi gửi lên máy chủ.
• Kết quả mong đợi:
  • Mật khẩu được mã hóa trước khi gửi lên máy chủ.

Phần mềm thực tế

https://aptech-tester.web.app