Nội dung
Bài này sẽ giới thiệu những nội dung sau:
- Built-in user authentication system
- Thiết kế template đăng nhập và đăng xuất
Built-in user authentication system
Tại vì Django đã giúp cho chúng ta thiết kế 1 hệ thống user có sẵn, vì vậy Django đã hỗ trợ cho chúng ta những chức năng đăng nhập và đăng xuất của hệ thống. Vì vậy, trong bài này Kteam chỉ hướng dẫn các bạn cách config các chức năng đó
Ở urls app home, ta sẽ import views từ authentication để dùng các function đã xây dựng sẵn:
from django.urls import path
from . import views
from django.contrib.auth import views as auth_views
urlpatterns = [
path('', views.index),
path('contact/', views.contact, name='contact'),
path('register/', views.register, name="register"),
path('login/',auth_views.LoginView.as_view(template_name="pages/login.html"), name="login"),
path('logout/',auth_views.LogoutView.as_view(next_page='/'),name='logout'),
]
- Để tránh nhầm lẫn views của app home, Kteam định danhviews của auth là auth_views.
- tạo path login/: dùng class LoginView gọi function as_view để xử lý đăng nhập, truyền tham số template_name để custom lại template đăng nhập.
- tạo path logout/: dùng class LogoutView gọi function as_view để xử lý đăng xuất,
- truyền tham số next_page để thực hiện sau khi đăng xuất sẽ về đâu (ở đây Kteam sẽ cho về trang chủ).
Tiếp theo, Kteam sẽ tạo template login, LoginView có thiết kế Form login để đăng nhập, tuy nhiên Kteam muốn custom lại form để Việt hóa:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login</title>
</head>
<body>
<form method="POST">
{% csrf_token %}
{% for key, value in form.errors.items %}
{{value}}
{% endfor %}
<p><label>Tài khoản:</label>{{form.username}}</p>
<p><label>Mật khẩu:</label>{{form.password}}</p>
<input type="hidden" name="next" value="/"/>
<input type="submit" value="Đăng nhập"/>
</form>
</body>
</html>
- thiết kế label tiếng Việt, rồi sau đó tạo các thẻ input thông qua các field của form đăng nhập.
- tạo input next để sau khi đăng nhập sẽ đi về đâu.
- tạo input submit có value là Đăng nhập
- Để tính trường hợp lỗi, nên dùng vòng lặp for lấy value từ form.errors.
Bây giờ ta thử kiểm tra kết quả
Sau khi đăng nhập, nếu về trang chủ thì đăng nhập thành công. Tương tự với path đăng xuất.
Thiết kế template đăng nhập và đăng xuất
Bây giờ, Kteam sẽ thiết kế lại ở base.html cho 2 đường link đăng nhập và đăng xuất để người dùng có thể nhấn vào. Ta chỉnh ở mục header lại như sau:
<div class="row">
<div class="col-sm-2">
<center><img src="{% static 'images/L.jpg' %}" class="responsive-img" style="max-height:150px"/></center>
</div>
<div class="col-sm-9">
<center><h1>Blog Làm từ Python Django</h1></center>
</div>
<div class="col-sm-1">
{% if user.username %}
<p>Xin chào {{user.username}}</p>
<p><a href="/redirect?Id=bPkSKQqMZ9erlLi6p21Q4A%3d%3d" url 'logout' %}">Đăng xuất</a></p>
{% else %}
<p><a href="/redirect?Id=bPkSKQqMZ9erlLi6p21Q4A%3d%3d" url 'register' %}">Đăng ký</a>|<a href="/redirect?Id=bPkSKQqMZ9erlLi6p21Q4A%3d%3d" url 'login' %}">Đăng nhập</a></p>
{% endif %}
</div>
</div>
Kiểm tra nếu user đã đăng nhập thì hiển thị xin chào user và có đăng xuất. Kteam sửa lại thêm 1 col góc bên phải chiếm 1/12.
Nếu chưa đăng nhập thì hiển thị đăng ký và đăng nhập.
Bây giờ ta thử kiểm tra lại:
Chức năng thì khá ổn, do Kteam không tập trung thiết kế giao diện cho bài học nên các bạn có thể custom lại cho đẹp hơn.
