Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python
Code

Tạo một Ứng dụng Web từ đầu sử dụng Python Flask và MySQL: Phần 2

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL
Creating a Web App From Scratch Using Python Flask and MySQL: Part 3

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong phần trước của loạt bài này, chúng ta đã biết cách làm thế nào để bắt đầu với Python Flask và MySQL và cài đặt phần đăng ký người dùng của ứng dụng. Trong hướng dẫn này, chúng ta sẽ nâng nó lên một cấp độ cao hơn bằng cách cài đặt tính năng đăng nhập và đăng xuất cho ứng dụng của chúng ta.

Bắt đầu

Đầu tiên clone mã nguồn của hướng dẫn trước từ GitHub.

Một khi mã nguồn đã được clone, điều hướng đến thư mục PythonFlaskMySQLApp---Part-1 và khởi động máy chủ.

Trỏ trình duyệt đến http://localhost:5002 và bạn sẽ thấy ứng dụng đang chạy.

Tạo Giao diện Đăng nhập

Điều hướng đến PythonFlaskMySQLApp---Part-1/templates và tạo một tập tin mới có tên signin.html. Mở signin.html và thêm code HTML sau đây:

Mở app.py và thêm một tuyến (route) mới cho giao diện đăng nhập.

Tiếp theo, mở index.htmlsignup.html, và thêm liên kết href cho đăng nhập trên cả hai trang là /showSignin. Lưu tất cả những thay đổi và khởi động lại máy chủ.

Trỏ trình duyệt tới http://localhost:5002 và nhấp vào liên kết Sign In, và bạn sẽ có thể thấy trang đăng nhập.

Sign In page

Cài đặt Đăng nhập

Bây giờ, chúng ta cần phải tạo ra hàm để xác nhận đăng nhập người dùng. Khi nhấp vào Sign In chúng ta sẽ post địa chỉ email và mật khẩu đã nhập vào hàm kiểm tra người dùng.

Tạo một Thủ tục Lưu trữ

Để kiểm tra một người dùng, chúng ta sẽ cần một thủ tục lưu trữ MySQL. Vì vậy, hãy tạo một thủ tục lưu trữ MySQL như sau:

Chúng ta sẽ lấy các chi tiết của người dùng dựa trên username từ cơ sở dữ liệu MySQL sủ dụng sp_validateLogin. Một khi chúng ta đã có mật khẩu băm, chúng ta sẽ xác nhận nó với mật khẩu được nhập vào bởi người dùng.

Kiểm tra Phương thức Người dùng

Tạo một phương thức để kiểm tra người dùng mà chúng ta sẽ gọi khi người dùng submit form:

Như đã thấy trong đoạn code ở trên, chúng ta đã đọc địa chỉ email và mật khẩu được post lên vào _username_password. Bây giờ chúng ta sẽ gọi thủ tục sp_validateLogin với tham số _username. Vì vậy, hãy tạo một kết nối MySQL bên trong phương thức validateLogin:

Khi kết nối đã được tạo ra, hãy tạo một cursor bằng cách sử dụng kết nối con.

Sử dụng cursor, hãy gọi thủ tục lưu trữ MySQL như sau:

Lấy các record từ cursor như sau:

Nếu dữ liệu có một số record, chúng ta sẽ khớp mật khẩu lấy được với mật khẩu nhập vào bởi người dùng.

Như đã thấy trong đoạn code ở trên, chúng ta đã sử dụng một phương thức gọi là check_password_hash để kiểm tra xem mật khẩu băm trả về có trùng với mật khẩu được nhập vào bởi người dùng hay không. Nếu tất cả đều ổn thì chúng ta sẽ chuyển hướng người dùng đến userHome.html. Và nếu có bất kỳ lỗi nào, chúng ta sẽ hiển thị error.html với thông báo lỗi.

Dưới đây là code hoàn chỉnh cho validateLogin:

Tạo một trang gọi là userHome.html bên trong thư mục templates và thêm code HTML sau đây:

Đồng thời tạo một trang lỗi được gọi là error.html trong thư mục templates và thêm code HTML sau đây:

Bên trong error.html chúng ta có một phần tử như sau:

Giá trị cho biến có thể được truyền từ hàm render_template và có thể được thiết lập tự động.

Khi đăng nhập thành công, chúng ta chuyển hướng người dùng đến trang chủ, vì vậy chúng ta cần phải tạo ra một tuyến có tên là /userHome như sau:

Lưu tất cả những thay đổi và khởi động lại máy chủ. Nhấp vào liên kết Sign In trên trang chủ và thử đăng nhập bằng địa chỉ email và mật khẩu hợp lệ. Khi xác nhận người dùng thành công, bạn sẽ có một trang như hình dưới đây:

User home on successful user sign in

Khi xác nhận người dùng không thành công, người dùng sẽ được chuyển hướng đến một trang lỗi như hình dưới đây:

Error message on unsuccessful user sign in

Ở đây, chúng ta sử dụng một trang lỗi riêng biệt để hiển thị lỗi. Cũng tốt nếu bạn muốn sử dụng cùng một trang để hiển thị thông báo lỗi.

Hạn chế Truy cập Trái phép vào Trang chủ của Người dùng

Khi xác nhận người dùng thành công thì một người dùng được chuyển hướng đến trang chủ của người dùng. Nhưng ngay lúc này, ngay cả một người dùng trái phép cũng có thể xem trang chủ chỉ đơn giản bằng cách truy cập địa chỉ http://localhost:5002/userHome.

Để hạn chế người dùng truy cập trái phép, chúng ta sẽ kiểm tra một biến session mà chúng ta sẽ thiết lập khi người dùng đăng nhập thành công. Do đó, hãy import session từ flask:

Chúng ta cũng cần phải thiết lập một khóa bí mật cho session. Vì vậy, trong app.py, sau khi ứng dụng đã được khởi tạo, hãy thiết lập khóa bí mật như sau:

Bây giờ, bên trong phương thức validateLogin, trước khi chuyển hướng người dùng đến /userHome khi đăng nhập thành công, thiết lập biến session như sau:

Tiếp theo, bên trong phương thức userHome, kiểm tra biến session trước khi kết xuất userHome.html. Nếu biến session không được tìm thấy, chuyển hướng đến trang báo lỗi.

Lưu tất cả những thay đổi và khởi động lại máy chủ. Không cần đăng nhập, hãy thử truy cập đến http://localhost:5002/userHome và vì bạn vẫn chưa đăng nhập vào, nên bạn sẽ được chuyển hướng đến trang lỗi.

Unauthorized access error

Cài đặt Đăng xuất

Việc cài đặt tính năng đăng xuất là đơn giản nhất. Tất cả những gì chúng ta cần phải làm là làm cho biến session user thành null và chuyển hướng người dùng đến trang chủ.

Bên trong app.py, hãy tạo một tuyến mới và phương thức logout như dưới đây:

Chúng ta đã thiết lập href cho nút logout thành /logout. Do đó, hãy lưu tất cả những thay đổi và khởi động lại máy chủ. Từ trang chủ, nhấp vào Sign In và thử đăng nhập bằng địa chỉ email và mật khẩu hợp lệ. Một khi đã đăng nhập, nhấn vào nút Logout trong trang người dùng và bạn sẽ đăng xuất thành công khỏi ứng dụng.

Tóm tắt

Trong phần này của hướng dẫn, chúng ta đã học được cách để cài đặt tính năng người dùng đăng nhập và đăng xuất. Chúng ta cũng đã thấy cách để hạn chế truy cập trái phép vào các trang ứng dụng. Trong phần tiếp theo của hướng dẫn này, chúng ta sẽ cài đặt tính năng để cho người dùng đã đăng nhập thêm và chỉnh sửa một phần tử trong ứng dụng.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

Hãy cho chúng tôi biết những suy nghĩ của bạn trong phần bình luận ​​dưới đây nhé!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.