Trong hướng dẫn này, tôi sẽ dạy bạn cách bạn có thể tạo hệ thống đăng nhập PHP an toàn của riêng bạn. Mẫu đăng nhập là những gì khách truy cập trang web của bạn có thể sử dụng để đăng nhập vào trang web của bạn để truy cập nội dung bị hạn chế, chẳng hạn như trang hồ sơ. Chúng tôi sẽ tận dụng MySQL để truy xuất dữ liệu tài khoản từ cơ sở dữ liệu. Gói nâng cao bao gồm các tính năng bổ sung và liên kết tải xuống đến mã nguồn. 1. Bắt đầuCó một vài bước chúng ta cần thực hiện trước khi tạo hệ thống đăng nhập an toàn của mình. Chúng tôi cần thiết lập môi trường máy chủ web của mình và đảm bảo chúng tôi đã bật các tiện ích mở rộng cần thiết. 1.1. Yêu cầu- Nếu bạn chưa thiết lập máy chủ web cục bộ, tôi khuyên bạn nên tải xuống và cài đặt XAMPP.
- XAMPP là gói máy chủ web đa nền tảng bao gồm các yếu tố cần thiết cho các nhà phát triển back-end. Nó bao gồm PHP, MySQL, Apache, phpmyadmin, v.v. Không cần thiết phải cài đặt tất cả các phần mềm một cách riêng với XAMPP.
1.2. Những gì bạn sẽ học trong hướng dẫn này- Thiết kế hình thức - Thiết kế một hình thức đăng nhập với HTML5 và CSS3. — Design a login form with HTML5 and CSS3.
- Các truy vấn SQL đã chuẩn bị - Cách chuẩn bị đúng các truy vấn SQL để ngăn chặn tiêm SQL và do đó ngăn chặn cơ sở dữ liệu của bạn bị lộ. — How to properly prepare SQL queries to prevent SQL injection and therefore preventing your database from being exposed.
- Xác thực cơ bản - Xác thực dữ liệu biểu mẫu được gửi đến máy chủ bằng cách sử dụng các yêu cầu GET và POST (tên người dùng, mật khẩu, email, v.v.).
— Validating form data that is sent to the server using GET and POST requests (username, password, email, etc.).
- Quản lý phiên - Khởi tạo phiên và lưu trữ kết quả cơ sở dữ liệu. Các phiên được lưu trên máy chủ và được liên kết với một ID duy nhất được lưu trong trình duyệt. — Initialize sessions and store retrieved database results. Sessions are saved on the server and are associated with a unique ID that is saved in the browser.
1.3. Cấu trúc và thiết lập tệpBây giờ chúng tôi có thể khởi động máy chủ web của mình và tạo các tệp và thư mục mà chúng tôi sẽ sử dụng cho hệ thống đăng nhập của chúng tôi.
- Mở bảng điều khiển XAMPP
- Bên cạnh mô -đun Apache Nhấp vào Bắt đầu
- Bên cạnh mô -đun MySQL Nhấp vào Bắt đầu
- Điều hướng đến thư mục cài đặt của XAMPP (C: \ XAMPP)
- Mở thư mục HTDOCS
- Tạo các thư mục và tệp sau:
Cấu trúc tập tin \- phplogin & nbsp; & nbsp; |- index.html & nbsp; & nbsp; |- style.css & nbsp; & nbsp; | - home.php & nbsp; & nbsp; |- aborce.php
|-- index.html
|-- style.css
|-- authenticate.php
|-- logout.php
|--
home.php
|-- profile.php Mỗi tệp sẽ bao gồm các mục sau: - index.html - Mẫu đăng nhập được tạo bằng HTML5 và CSS3. Chúng tôi không cần sử dụng PHP trong tệp này. Do đó, chúng ta có thể lưu nó dưới dạng HTML đơn giản.
- Style.css - Hiển thị kiểu (CSS3) cho hệ thống đăng nhập an toàn của chúng tôi.
- xác thực.php - Xác thực người dùng, kết nối với cơ sở dữ liệu, xác thực dữ liệu biểu mẫu, truy xuất kết quả cơ sở dữ liệu và tạo các phiên mới.
- Đăng xuất.php-Phá hủy các phiên đăng nhập và chuyển hướng người dùng đến trang đăng nhập.
- home.php-trang chủ cơ bản cho người dùng đăng nhập.
- Cấu hình.php - Truy cập chi tiết tài khoản của người dùng từ cơ sở dữ liệu MySQL của chúng tôi và điền chúng với PHP và HTML.
2. Tạo thiết kế mẫu đăng nhậpBây giờ chúng tôi sẽ tạo một biểu mẫu mà người dùng của chúng tôi có thể sử dụng để nhập chi tiết của họ và gửi chúng để xử lý. Chúng tôi sẽ sử dụng HTML và CSS cho phần này của hướng dẫn vì PHP sẽ không cần thiết trên trang này. Chỉnh sửa tệp index.html với trình chỉnh sửa mã yêu thích của bạn và thêm mã sau: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div class="login">
<h2>Login</h2>
<form action="authenticate.php" method="post">
<label for="username">
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Username" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Password" id="password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
Nếu chúng tôi điều hướng đến trang chỉ mục trong trình duyệt web của chúng tôi, nó sẽ trông giống như sau: http://localhost/phplogin/index.html Khá cơ bản phải không? Hãy chỉnh sửa tệp và mã triển khai Style.CSS của chúng tôi sẽ cải thiện sự xuất hiện của biểu mẫu. Thêm mã sau vào tệp style.css: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
Chúng tôi cần đưa bảng kiểu của chúng tôi vào tệp index.html của chúng tôi và do đó chúng tôi phải thêm mã sau vào phần đầu: <link href="style.css" rel="stylesheet" type="text/css">
Và bây giờ nếu chúng tôi làm mới trang index.html trong trình duyệt web của chúng tôi, biểu mẫu đăng nhập của chúng tôi sẽ trông hấp dẫn hơn: http://localhost/phplogin/index.html Trông tốt hơn nhiều! Hãy thu hẹp các yếu tố hình thức, vì vậy chúng ta có thể hiểu rõ hơn về những gì đang diễn ra. - Hình thức - Chúng ta cần sử dụng cả hai thuộc tính hành động và bài. Thuộc tính hành động sẽ được đặt thành tệp xác thực. Khi biểu mẫu được gửi, dữ liệu biểu mẫu sẽ được gửi đến tệp xác thực để xử lý. Ngoài ra, phương thức được khai báo là bài đăng vì điều này sẽ cho phép chúng tôi xử lý dữ liệu biểu mẫu bằng phương thức yêu cầu POST. — We need to use both the action and post attributes. The action attribute will be set to the authentication file. When the form is submitted, the form data will be sent to the authentication file for processing. In addition, the method is declared as post as this will enable us to process the form data using the POST request method.
- Đầu vào (văn bản/mật khẩu) - Chúng tôi cần đặt tên cho các trường biểu mẫu của chúng tôi để máy chủ có thể nhận ra chúng. Giá trị của tên thuộc tính mà chúng tôi có thể khai báo là tên người dùng mà chúng tôi có thể sử dụng để truy xuất biến bài đăng trong tệp xác thực của chúng tôi để lấy dữ liệu, ví dụ: $ _Post ['tên người dùng']. — We need to name our form fields so the server can
recognize them. The value of the attribute name we can declare as username, which we can use to retrieve the post variable in our authentication file to get the data, for example: $_POST['username'].
- Đầu vào (gửi) - Khi gửi biểu mẫu, dữ liệu sẽ được gửi đến tệp xác thực của chúng tôi để xử lý. — On form submission, the data will be sent to our authentication file for processing.
3. Tạo cơ sở dữ liệu và bảng thiết lậpĐối với phần này, bạn sẽ cần truy cập cơ sở dữ liệu MySQL của mình, bằng cách sử dụng ứng dụng quản lý cơ sở dữ liệu MySQL ưa thích của bạn. Thực hiện theo các hướng dẫn dưới đây nếu bạn đang sử dụng phpmyadmin. - Điều hướng đến: http: // localhost/phpmyadmin/
- Nhấp vào tab Cơ sở dữ liệu ở trên cùng
- Trong Tạo cơ sở dữ liệu, nhập phplogin vào hộp văn bản
- Chọn UTF8_General_Ci làm đối chiếu
- Nhấp vào Tạo
Bạn có thể sử dụng tên cơ sở dữ liệu của riêng mình, nhưng đối với hướng dẫn này, chúng tôi sẽ sử dụng phplogin. Những gì chúng tôi cần bây giờ là bảng tài khoản vì điều này sẽ lưu trữ tất cả các tài khoản (tên người dùng, mật khẩu, email, v.v.) được đăng ký với hệ thống. Nhấp vào cơ sở dữ liệu ở bảng điều khiển bên trái (phplogin) và thực hiện câu lệnh SQL sau: CREATE TABLE IF NOT EXISTS `accounts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
INSERT INTO `accounts` (`id`, `username`, `password`, `email`) VALUES (1, 'test', '$2y$10$SfhYIDtn.iOuCW7zfoFLuuZHX6lja4lF4XA4JqNmpiH/.P3zB8JCa', '');
Trên phpmyadmin, điều này trông giống như:
http://localhost/phpmyadmin/ Mã câu lệnh SQL trên sẽ tạo bảng tài khoản với ID cột, tên người dùng, mật khẩu và email. Câu lệnh SQL sẽ chèn một tài khoản kiểm tra với tên người dùng: kiểm tra và mật khẩu: kiểm tra. Tài khoản thử nghiệm sẽ được sử dụng cho mục đích thử nghiệm để đảm bảo hệ thống đăng nhập của chúng tôi hoạt động chính xác. 4. Xác thực người dùng với PHPBây giờ chúng tôi đã thiết lập cơ sở dữ liệu của chúng tôi, chúng tôi có thể tiếp tục và bắt đầu mã hóa với PHP. Chúng tôi sẽ bắt đầu với tệp xác thực, sẽ xử lý và xác thực dữ liệu biểu mẫu mà chúng tôi sẽ gửi từ tệp index.html của chúng tôi. Chỉnh sửa tệp xác thực.php và thêm thông tin sau: <?php
session_start();
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
// If there is an error with the connection, stop the script and display the error.
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
Ban đầu, mã sẽ bắt đầu phiên vì điều này cho phép chúng tôi bảo quản chi tiết tài khoản trên máy chủ và sẽ được sử dụng sau này để ghi nhớ người dùng đã đăng nhập. Kết nối với cơ sở dữ liệu là điều cần thiết. Không có nó, làm thế nào chúng ta có thể truy xuất và lưu trữ thông tin liên quan đến người dùng của chúng tôi? Do đó, chúng tôi phải đảm bảo cập nhật các biến để phản ánh thông tin xác thực cơ sở dữ liệu MySQL của chúng tôi. Thêm bên dưới: // Now we check if the data from the login form was submitted, isset() will check if the data exists.
if ( !isset($_POST['username'], $_POST['password']) ) {
// Could not get the data that should have been sent.
exit('Please fill both the username and password fields!');
}
Mã trên sẽ đảm bảo dữ liệu biểu mẫu tồn tại, trong khi nếu người dùng cố gắng truy cập tệp mà không cần gửi biểu mẫu, nó sẽ xuất ra một lỗi đơn giản. Thêm bên dưới: // Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
// Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
// Store the result so we can check if the account exists in the database.
$stmt->store_result();
$stmt->close();
}
?>
Mã trên sẽ đảm bảo dữ liệu biểu mẫu tồn tại, trong khi nếu người dùng cố gắng truy cập tệp mà không cần gửi biểu mẫu, nó sẽ xuất ra một lỗi đơn giản. Mã trên sẽ chuẩn bị câu lệnh SQL sẽ chọn các cột ID và mật khẩu từ bảng tài khoản. Ngoài ra, nó sẽ liên kết tên người dùng với câu lệnh SQL, thực thi và sau đó lưu trữ kết quả. $stmt->store_result();
Add: if ($stmt->num_rows > 0) {
$stmt->bind_result($id, $password);
$stmt->fetch();
// Account exists, now we verify the password.
// Note: remember to use password_hash in your registration file to store the hashed passwords.
if (password_verify($_POST['password'], $password)) {
// Verification success! User has logged-in!
// Create sessions, so we know the user is logged in, they basically act like cookies but remember the data on the server.
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['username'];
$_SESSION['id'] = $id;
echo 'Welcome ' . $_SESSION['name'] . '!';
} else {
// Incorrect password
echo 'Incorrect username and/or password!';
}
} else {
// Incorrect username
echo 'Incorrect username and/or password!';
}
Sau dòng sau: Đầu tiên, chúng tôi cần kiểm tra xem truy vấn đã trả về bất kỳ kết quả nào. Nếu tên người dùng không tồn tại trong cơ sở dữ liệu thì sẽ không có kết quả. Nếu tên người dùng tồn tại, chúng ta có thể liên kết kết quả với cả biến mật khẩu $ ID và $. Sau đó, chúng tôi tiến hành xác minh mật khẩu với chức năng password_verify. Chỉ mật khẩu được tạo với chức năng password_hash sẽ hoạt động. if (password_verify($_POST['password'], $password)) {
With: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
0Nếu bạn không muốn sử dụng bất kỳ phương thức mã hóa mật khẩu nào, bạn chỉ cần thay thế mã sau: Tuy nhiên, tôi không khuyên bạn nên loại bỏ các hàm băm vì nếu bằng cách nào đó cơ sở dữ liệu của bạn bị lộ, tất cả các mật khẩu được lưu trong bảng tài khoản cũng sẽ bị lộ. Ngoài ra, người dùng sẽ có ý thức về quyền riêng tư khi biết mật khẩu của họ được mã hóa. Sau khi xác thực thành công từ người dùng, các biến phiên sẽ được khởi tạo và bảo quản cho đến khi chúng bị phá hủy bằng cách đăng xuất hoặc phiên hết hạn. Các biến phiên này được lưu trữ trên máy chủ và được liên kết với ID phiên được lưu trữ trong trình duyệt của người dùng. Chúng tôi sẽ sử dụng các biến này để xác định xem người dùng có đăng nhập hay không và liên kết các biến phiên với kết quả cơ sở dữ liệu MySQL đã truy xuất của chúng tôi.The session_regenerate_id() function will help prevent session hijacking as it regenerates the user's session ID that is stored on the server and as a cookie in the browser. Bạn có biết không? Chức năng session_regenerate_id () sẽ giúp ngăn chặn vụ cướp phiên khi nó tái tạo ID phiên của người dùng được lưu trữ trên máy chủ và như một cookie trong trình duyệt. Người dùng không thể thay đổi các biến phiên trong trình duyệt của họ và do đó bạn không cần phải quan tâm đến vấn đề đó. Biến duy nhất họ có thể thay đổi là ID phiên được mã hóa, được sử dụng để liên kết người dùng với các phiên máy chủ. Bây giờ chúng tôi có thể kiểm tra hệ thống đăng nhập và đảm bảo xác thực hoạt động chính xác. Điều hướng đến http: //localhost/phplogin/index.html trong trình duyệt của bạn.
http://localhost/phplogin/authenticate.php Nhập tên người dùng và mật khẩu ngẫu nhiên và nhấp vào nút Đăng nhập. Nó sẽ xuất hiện một lỗi trông giống như sau: http://localhost/phplogin/authenticate.php Đừng lo lắng, nó không bị hỏng! Nếu chúng tôi điều hướng trở lại biểu mẫu đăng nhập của mình và nhập kiểm tra cho cả trường người dùng và mật khẩu, trang xác thực sẽ trông giống như sau: Nếu bạn nhận được lỗi, hãy đảm bảo kiểm tra lại mã của bạn để đảm bảo bạn không bỏ lỡ bất cứ điều gì hoặc kiểm tra xem tài khoản kiểm tra có tồn tại trong cơ sở dữ liệu của bạn không.5. Tạo trang chủ Chỉnh sửa tệp home.php và thêm mã sau: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
1Về cơ bản, mã trên sẽ kiểm tra xem người dùng có đăng nhập không, nếu không, chúng sẽ được chuyển hướng đến trang đăng nhập. Bạn có nhớ biến $ _Session ['LoggedIn'] mà chúng tôi đã xác định trong tệp xác thực.php không? Đây là những gì chúng tôi có thể sử dụng để xác định xem người dùng có đăng nhập hay không. Bây giờ chúng tôi có thể thêm một số HTML vào trang chủ của chúng tôi. Bên dưới thẻ đóng, thêm mã sau: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
2Mã trên là mẫu cho trang chủ của chúng tôi. Trên trang này, người dùng sẽ gặp phải một tin nhắn chào mừng cùng với tên của họ được hiển thị. Chúng tôi cần thêm CSS cho trang chủ. Thêm mã sau vào tệp style.css: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
3Bây giờ chúng tôi đã thiết lập trang chủ của mình, chúng tôi có thể chuyển hướng người dùng của mình từ tệp xác thực.php sang trang chủ của chúng tôi, chỉnh sửa xác thực.php và thay thế dòng mã sau: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
4With: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
5Nếu bạn đăng nhập bằng tài khoản kiểm tra, bạn sẽ thấy một cái gì đó như thế này: http://localhost/phplogin/home.php Đây là một trang chủ khá cơ bản. Bạn có thể tùy chỉnh nó theo cách bạn muốn bây giờ khi bạn hiểu cách thức hoạt động của nó. 6. Tạo trang hồ sơTrang hồ sơ sẽ hiển thị thông tin tài khoản cho người dùng đã đăng nhập. Chỉnh sửa tệp hồ sơ.php và thêm mã sau: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
6Mã trên lấy lại thông tin tài khoản bổ sung từ cơ sở dữ liệu, như trước đây với trang chủ, chúng tôi không cần kết nối với cơ sở dữ liệu vì chúng tôi đã truy xuất dữ liệu được lưu trữ trong các phiên. Chúng tôi sẽ điền tất cả thông tin tài khoản cho người dùng và do đó chúng tôi phải truy xuất các cột mật khẩu và email từ cơ sở dữ liệu. Chúng tôi không cần truy xuất các cột tên người dùng hoặc ID vì chúng tôi đã lưu trữ trong các biến phiên được khai báo trong tệp xác thực.php. Sau khi thẻ đóng, thêm mã sau: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
7Một bố cục đơn giản sẽ điền thông tin tài khoản. Nếu bạn điều hướng đến tệp hồ sơ.php, nó sẽ trông giống như sau:
http://localhost/phplogin/profile.php Hãy nhớ rằng, mật khẩu được mã hóa, vì vậy bạn không thể thấy mật khẩu được giải mã trừ khi bạn tạo biến phiên mới và lưu trữ mật khẩu trong tệp xác thực.php. 7. Tạo tập lệnh đăng xuấtTạo tập lệnh đăng xuất là đơn giản. Tất cả những gì bạn cần làm là phá hủy các phiên được khai báo trong tệp xác thực. Chỉnh sửa tệp Logout.php và thêm mã sau: * {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h2 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
8Khởi tạo các phiên, phá hủy chúng và chuyển hướng người dùng đến trang đăng nhập. Chúng tôi sử dụng các phiên để xác định xem người dùng có đăng nhập hay không, vì vậy bằng cách xóa chúng, người dùng sẽ không đăng nhập. Sự kết luậnBây giờ bạn sẽ có một sự hiểu biết cơ bản về cách một hệ thống đăng nhập hoạt động với PHP và MySQL. Bạn tự do sử dụng mã nguồn và kết hợp nó vào các dự án của riêng bạn. Bước tiếp theo là tạo một hệ thống đăng ký cho phép khách truy cập đăng ký. Đừng quên theo dõi chúng tôi và chia sẻ bài viết vì nó sẽ giúp chúng tôi tạo các hướng dẫn trong tương lai và cập nhật nội dung hiện có với các tính năng mới. Hướng dẫn tiếp theo trong loạt bài này: Hệ thống đăng ký an toàn với PHP và MySQL Nếu bạn muốn hỗ trợ chúng tôi, hãy xem xét việc mua hệ thống đăng ký & đăng ký bảo mật nâng cao bên dưới vì nó sẽ giúp chúng tôi tạo thêm các hướng dẫn và giữ cho trang web của chúng tôi hoạt động. Gói nâng cao bao gồm mã được cải thiện và nhiều tính năng hơn. Mã nguồn Cơ sở dữ liệu Tệp SQL Hệ thống đăng ký và đăng nhập an toàn Trang chủ, Hồ sơ & Chỉnh sửa các trang hồ sơ Tính năng kích hoạt tài khoản Nhớ tôi tính năng Tích hợp Ajax PDO, MVC OOP & các phiên bản cơ bản bảng quản trị Bổ trợ: Quên mật khẩu Bổ trợ: Bảo vệ lực lượng vũ phu Bổ trợ: Bảo vệ CSRF Bổ trợ: Xác thực hai yếu tố Bổ trợ: Captcha Thiết kế đáp ứng (thân thiện với thiết bị di động) Tệp SCSS Mã nhận xét Cập nhật và hỗ trợ miễn phí (các vấn đề nhỏ) Hướng dẫn sử dụng Thêm: Mã nguồn hướng dẫn Hệ thống đăng ký và đăng nhập an toàn Hệ thống giỏ hàng Ứng dụng crud Hệ thống bán vé Hệ thống thư viện Hệ thống lịch sự kiện Hệ thống bỏ phiếu và bỏ phiếu Đánh giá hệ thống Hệ thống bình luận Mâu liên hệ Hệ thống trò chuyện hỗ trợ trực tiếp Bản tin & Hệ thống gửi thư Truy cập vào các tập lệnh trong tương lai
Chúng ta có thể sử dụng PHP và MySQL cùng nhau không?
Với PHP, bạn có thể kết nối và thao tác cơ sở dữ liệu. MySQL là hệ thống cơ sở dữ liệu phổ biến nhất được sử dụng với PHP.MySQL is the most popular database system used with PHP.
Làm thế nào được phê duyệt đăng ký người dùng mới trong PHP MySQL?
Bạn có thể dễ dàng thực hiện nó bằng cách thêm một cột IS_APPRED vào bảng người dùng của bạn.Khi người dùng đăng ký, bạn đặt trường này thành sai theo mặc định.Gửi cho quản trị viên một email về đăng ký mới và để phê duyệt người dùng chỉ cần thay đổi IS_APPRIVED thành true.adding a column is_approved to your user table. When a user registers you set this field to false by default. Send the admin an email about the new registration and to approve the user just change is_approved to true .
Làm thế nào chúng ta có thể kết nối cơ sở dữ liệu bằng PHP và MySQL?
2 Cách kết nối với cơ sở dữ liệu MySQL bằng PHP .. Tùy chọn 1: Kết nối với MySQL với phần mở rộng được cải tiến của MySQL.Thông tin giải thích .. Tùy chọn 2: Kết nối với MySQL với PDO.Cú pháp xác thực.Thử và bắt các khối .. Lỗi tiềm năng với MySQLI và PDO.Mật khẩu không đúng.Không thể kết nối với máy chủ MySQL .. Làm cách nào để tạo biểu mẫu đăng ký cơ sở dữ liệu trong MySQL?
Biểu mẫu đăng ký cơ bản trong PHP với kết nối cơ sở dữ liệu MySQL.. Bước 1: Tạo cơ sở dữ liệu để chèn các giá trị..... Bước 2: Mã mặt trước, tạo cấu trúc HTML của mẫu đăng ký của bạn..... Bước 3: Đối với kết nối cơ sở dữ liệu bằng MySQL..... Bước 4: Cuối cùng tạo ra một đăng ký..... Conclusion.. | 
