Cách tạo danh sách kiểm tra mật khẩu với Next.js
Trong thế giới ngày nay, bảo mật trực tuyến quan trọng hơn bao giờ hết. Với rất nhiều tài khoản trực tuyến để theo dõi, điều cần thiết là phải có một mật khẩu mạnh và duy nhất cho mỗi tài khoản.
Nếu bạn đang xây dựng một trang web, điều quan trọng hơn là phải đảm bảo mật khẩu an toàn nhất có thể. Bạn có thể trình bày danh sách kiểm tra cho những người sử dụng trang web của bạn và đảm bảo mật khẩu của họ đáp ứng các yêu cầu của bạn trước khi bạn chấp nhận.
Tìm hiểu cách triển khai danh sách kiểm tra mật khẩu bằng Next.js.
Mục Lục
Tại sao sử dụng danh sách kiểm tra mật khẩu?
Có nhiều lý do tại sao bạn có thể muốn sử dụng danh sách kiểm tra mật khẩu.
Đầu tiên, nó có thể giúp bạn đảm bảo rằng mật khẩu của người dùng của bạn là mạnh và duy nhất. Bằng cách có một danh sách kiểm tra các yêu cầu, bạn có thể chắc chắn rằng mỗi mật khẩu đáp ứng một tiêu chuẩn nhất định.
Người dùng của bạn có thể không cảm ơn bạn vì điều đó, nhưng bạn sẽ giúp họ. Bằng cách khuyến khích các mật khẩu mạnh, bạn sẽ ít có khả năng bị tin tặc truy cập vào một trong các tài khoản của người dùng của bạn.
Thứ hai, danh sách kiểm tra mật khẩu có thể giúp mang lại cảm giác an toàn. Bằng cách xuất bản các yêu cầu, bạn đang nói với người dùng của mình rằng bạn coi trọng bảo mật mật khẩu.
Tuy nhiên, bạn nên biết rằng danh sách kiểm tra mật khẩu không phải là giải pháp thần kỳ cho các vấn đề về mật khẩu. Trên thực tế, nếu bạn đặt mật khẩu của mình quá hạn chế, bạn có thể khiến tin tặc dễ dàng thu hẹp các tùy chọn của họ và cưỡng bức mật khẩu. Cuối cùng, mật khẩu an toàn và duy nhất mà người dùng lưu trữ trong trình quản lý mật khẩu là tốt nhất.
Cách tạo danh sách kiểm tra mật khẩu
Có hai cách để tạo danh sách kiểm tra mật khẩu trong Next.js. Bạn có thể sử dụng các tính năng được tích hợp sẵn hoặc bạn có thể sử dụng mô-đun bên ngoài.
Những gì bạn sẽ cần
Để tạo danh sách kiểm tra mật khẩu trong Next.js, bạn sẽ cần những thứ sau:
- Đã cài đặt Node.js
- Một trình soạn thảo văn bản
- Một dự án Next.js
Phương pháp 1: Sử dụng các tính năng tích hợp
Next.js đi kèm với các tính năng tích hợp như hook và context. Có nhiều loại móc khác nhau mà bạn có thể sử dụng để tạo danh sách kiểm tra mật khẩu.
Đầu tiên, tạo một tệp mới trong ứng dụng Next.js của bạn và đặt tên cho nó passwordChecklist.js. Trong tệp này, bạn có thể lấy mật khẩu nhập từ người dùng và bạn có thể kiểm tra xem mật khẩu có đáp ứng các yêu cầu hay không.
import React, { useState } from 'react'function PasswordChecklist() {
const [password, setPassword] = useState('')
const [error, setError] = useState(false)
function handleChange(e) {
setPassword(e.target.value)
}
function handleSubmit(e) {
e.preventDefault()
const requirements = [
password.length >= 8,
/[A-Z]/.test(password),
/[a-z]/.test(password),
/d/.test(password)
]
const isValid = requirements.every(Boolean)
if (isValid) {
alert('Password is valid!')
} else {
setError(true)
}
}
return (
<form onSubmit={handleSubmit}>
<label>
Password:
<input
type="password"
value={password}
onChange={handleChange}
/>
</label>
<input type="submit" value="Submit" />
{error && <p>Password is not valid!</p>}
</form>
)
}
export default PasswordChecklist
Trong đoạn mã trên, trước tiên bạn cần lấy mật khẩu nhập từ người dùng. Bạn có thể làm điều này bằng cách sử dụng useState cái móc. Cái móc này cho phép bạn tạo một biến trạng thái và một hàm để cập nhật biến đó. Trong trường hợp này, biến trạng thái là mật khẩu mở khóa và chức năng cập nhật nó là đặt mật khẩu.
Tiếp theo, bạn cần tạo một chức năng để xử lý việc gửi biểu mẫu. Chức năng này sẽ ngăn hành động mặc định của biểu mẫu (là gửi biểu mẫu) và nó sẽ kiểm tra xem mật khẩu có đáp ứng các yêu cầu hay không.
Yêu cầu mật khẩu là nó phải:
- dài ít nhất tám ký tự
- chứa ít nhất một chữ cái viết hoa
- Chứa ít nhất một chữ thường
- chứa ít nhất một số
Bạn có thể dùng mọi phương pháp để kiểm tra xem mật khẩu có đáp ứng tất cả các yêu cầu hay không. Nếu có, mật khẩu hợp lệ. Nếu không, mã sẽ hiển thị thông báo lỗi.
Phương pháp 3: Sử dụng Mô-đun danh sách kiểm tra mật khẩu phản ứng
Một cách khác để tạo danh sách kiểm tra mật khẩu trong Next.js là sử dụng phản ứng-mật khẩu-danh sách kiểm tra mô-đun. Mô-đun này rất dễ sử dụng và đi kèm với rất nhiều tính năng.
Đầu tiên, cài đặt mô-đun bằng lệnh sau:
npm install react-password-checklist Sau đó, nhập mô-đun trong passwordChecklist.js tập tin:
import React, {useState} from "react"
import PasswordChecklist from "react-password-checklist"const App = () => {
const [password, setPassword] = useState("")
return (
<form>
<label>Password:</label>
<input type="password" onChange={e => setPassword(e.target.value)}/>
<PasswordChecklist
rules={["minLength","specialChar","number","capital"]}
minLength={5}
value={password}
/>
</form>
)
}
export default App
Mã này chuyển các đạo cụ minLength, specialChar, number và capital cho PasswordChecklist thành phần. Thành phần sẽ sử dụng các đạo cụ này để kiểm tra xem mật khẩu có đáp ứng yêu cầu hay không.
Bạn cũng có thể thêm các thông báo đã dịch vào thành phần bằng cách chuyển tin nhắn chỗ dựa. Các chuỗi này ghi đè các lỗi mặc định để bạn có thể sử dụng chúng cho các ngôn ngữ hoặc biến thể khác.
import React, {useState} from "react"
import PasswordChecklist from "react-password-checklist"const App = () => {
const [password, setPassword] = useState("")
return (
<form>
<label>Password:</label>
<input type="password" onChange={e => setPassword(e.target.value)}/>
<PasswordChecklist
rules={["minLength", "specialChar", "number", "capital"]}
minLength={5}
value={password}
messages={{
minLength: "La contraseña tiene más de 8 caracteres.",
specialChar: "La contraseña tiene caracteres especially.",
number: "La contraseña tiene un número.",
capital: "La contraseña tiene una letra mayúscula.",
match: "Las contraseñas coinciden.",
}}
/>
</form>
)
}
export default App
Trong đoạn mã trên, tin nhắn prop lưu trữ các thông báo lỗi thay thế. Thành phần sẽ hiển thị các thông báo này khi mật khẩu không đáp ứng yêu cầu.
Phương pháp này thuận tiện hơn vì bạn không phải viết mã để kiểm tra xem mật khẩu có đáp ứng yêu cầu hay không. Ngoài ra còn có nhiều lợi ích khác khi sử dụng mô-đun này như:
- Hiển thị độ mạnh của mật khẩu: phản ứng-mật khẩu-danh sách kiểm tra có thể hiển thị độ mạnh của mật khẩu để người dùng có thể thấy mật khẩu của họ mạnh đến mức nào.
- Hiển thị thông báo lỗi: phản ứng-mật khẩu-danh sách kiểm tra cũng có thể hiển thị thông báo lỗi nếu mật khẩu không hợp lệ.
- Tạo kiểu: Bạn không phải thêm bất kỳ kiểu bổ sung nào vào danh sách kiểm tra. Mô-đun cung cấp kiểu mặc định mà bạn có thể sử dụng trong ứng dụng của mình. Nếu bạn muốn thêm một số kiểu bổ sung, thì bạn có thể sử dụng CSS bình thường hoặc các khung tạo kiểu khác như CSS tailwind.
Cải thiện sự an toàn của người dùng với danh sách kiểm tra mật khẩu
Mật khẩu mạnh là chìa khóa cho sự an toàn trực tuyến. Điều quan trọng là phải có một mật khẩu mạnh và duy nhất cho mỗi tài khoản trực tuyến. Bằng cách sử dụng danh sách kiểm tra mật khẩu, bạn có thể chắc chắn rằng mỗi mật khẩu đáp ứng một tiêu chuẩn nhất định.
Người dùng ứng dụng của bạn cũng sẽ đánh giá cao việc có thể thấy độ mạnh của mật khẩu. Bằng cách này, họ có thể chắc chắn rằng mật khẩu của họ đủ mạnh. Điều này sẽ cải thiện trải nghiệm người dùng đối với ứng dụng của bạn và nó cũng sẽ cải thiện sự an toàn của người dùng ứng dụng của bạn. Tương tự, bạn cũng có thể xác thực các biểu mẫu trong ứng dụng Next.js của mình.