Django by example Book

Building a Social Website with Django – Phần 6

Dịch từ: Django by example – Antonio Melé

Trong phần 6 của series này, chúng ta sẽ cover qua các mục chính sau:

  • Using the message framework
  • Building a custom authentication backend
  • Authentication using Facebook
  • Authentication using Twitter
  • Authentication using Google

Using the message framework

Khi thao tác với các hành động của người dùng, bạn có thể muốn thông báo cho người dùng về các hành động của họ. Django có hỗ trợ một framework message cho phép bạn hiển thị thông báo đến người dùng. Framework message lưu tại django.contrib.messages và nó bao gồm trong danh sách INSTALLED_APPS mặc định của file setting.py khi bạn tạo một project mới sử dụng câu lệnh python manage.py startproject. Bạn sẽ nhận thấy file cài đặt chứa một middleware tên là django.contrib.messages.middleware.MessageMiddleware trong danh sách của MIDDLEWARE_CLASSES.

phan_6 (1)

Framework messages cung cấp một cách đơn giản để thêm message đến người dùng. Các message được lưu trữ trong database và được hiển thị trong các yêu cầu tiếp theo của người dùng. Bạn có thể sử dụng framework message trong các views bằng cách import module messages và thêm các message mới với các phím tắt đơn giản như sau:

from django.contrib import messages

messages.error(request, ‘Something went wrong’)

Bạn có thể tạo một message mới bằng cách sử dụng method add_message() hay bất kỳ các method ngắn gọn sau:

  • success(): Success message hiển thị sau một hành động đã hoàn thành.
  • info(): Message hiển thị thông tin.
  • warning(): Message hiển thị cảnh báo. Một vài thứ chưa có lỗi nhưng có thể xảy ra lỗi sau đó.
  • error(): Hiển thị message lỗi.
  • debug(): Message debug sẽ bị xóa hoặc loại bỏ trong môi trường production.

Để hiển thị message đến người dùng. Từ khi framework message được áp dụng toàn cục đến project, chúng ta có thể hiển thị message cho người dùng trong template base. Mở template base.html và thêm vào đoạn code sau:

phan_6 (2)

Framework message bao gồm một context processor để thêm một biến messages đến request context. Vì thế bạn có thể sử dụng biến này trong template của mình để hiển thị message hiện tại đến người dùng.

Bây giờ, chúng ta sẽ thay đổi view để sử dụng framework message. Thay đổi  file views.py như sau:

phan_6 (3)

Ở đây chúng ta thêm một message success khi người dùng update thành công profile của họ. Nếu có bất kỳ form nào không hợp lệ, chúng ta thêm một message lỗi.

Bây giờ, truy cập địa chỉ http://127.0.0.1:8000/account/edit/ trên trình duyệt và edit profile. Khi profile được cập nhật thành công, bạn sẽ thấy một message hiển thị như sau:

phan_6 (4)

Khi form không hợp lệ, bạn sẽ nhìn thấy message lỗi sau:

phan_6 (5)

Building a custom authentication backend

Django cho phép bạn xác thực đối với các nguồn khác nhau. Cài đặt AUTHENTICATION_BACKENDS bao gồm danh sách các xác thực backend cho project  của bạn. Mặc định, cài đặt này được thiết lập như sau:

(‘django.contrib.auth.backends.ModelBackend’,)

Bất cứ khi nào bạn sử dụng function authentication() của django.contrib.auth, Django cố xác thực người dùng với  mỗi backend từng cái một được định nghĩa trong AUTHENTICATION_BACKENDS cho đến khi xác thực thành công. Chỉ đến khi tất cả xác thực backend lỗi, khi đó người dùng không thể truy cập đến website của bạn.

Django cung cấp một cách đơn giản để định nghĩa các xác thực cá nhân của bạn. Một xác thực backend là một class cung cấp 2 method sau:

  • authenticate(): nhận thông tin người dùng như parameters. Return  True nếu người dùng xác thực thành công, ngược lại return False.
  • get_user(): nhận user ID và return một object User.

Tạo một tùy chỉnh xác thực backend đơn giản như cách viết một class trong Python thực hiện của hai method. Chúng ta sẽ tạo một xác thực backend để xác thực người dùng bằng cách sử dụng địa chỉ email thay vì username.

Tạo một file bên trong ứng dụng account và đặt tên là authentication.py . Thêm vào đoạn code sau:

phan_6 (6)

Đây là một xác thực backend đơn giản. Method authenticate() nhận 2 đối số tùy chọn usernamepassword . Chúng ta có thể sử dụng các đối số khác, nhưng ở đây chúng ta sử dụng username password để tạo cho backend làm việc với framework authentication views. Code trên làm việc như sau:

  • authenticate(): Chúng ta sẽ get một user bằng cách truyền vào một địa chỉ email và kiểm tra password bằng cách sử dụng method check_password() của model User. Method này xử lý băm password và so sánh nó với password được lưu trữ trong database.
  • get_user(): Chúng ta sẽ get một user bởi user ID truyền vào.

Edit file setting.py của project và thêm vào cài đặt sau:

phan_6 (7)

Chúng ta giữ ModelBackend mặc định để sử dụng xác thực với username password , và bao gồm xác thực backend dựa trên email. Bây giờ, mở địa chỉ http://127.0.0.1:8000/account/login/ trên trình duyệt . Nhớ rằng Django thử xác thực đến người dùng với mỗi backend được định nghĩa , vì thế bạn nên login sử dụng username hoặc email của người dùng.

phan_6 (8)

Chú ý:

Thứ tự của danh sách backend trong cài đặt AUTHENTICATION_BACKENDS là vấn đề. Nếu các xác thực backend hợp lệ giống nhau, Django sẽ sử dụng backend đầu tiên để xác thực người dùng.

Add Social Authentication to your site

Bạn cũng có thể muốn thêm xác thực mạng xã hội đến website bằng cách sử dụng các dịch vụ như Facebook, Twitter, hoặc Google. Python-social-auth là một module Python đơn giản hóa xử lý xác thực xã hội đến website của bạn. Bằng cách sử dụng module này, bạn có thể cho phép người dùng login đến website sử dụng các tài khoản dịch vụ của họ. Bạn có thể tìm thấy code của module này tại địa chỉ trên github:

https://github.com/omab/python-social-auth

Module này sử dụng xác thực backend cho các framework Python khác nhau bao gồm Django.

Để cài đặt gói này trên pip, mở console và chạy dòng lệnh sau:

phan_6 (9)

Khi đó thêm social.apps.django_app.default đến cài đặt INSTALLED_APPS trong file setting.py của project.

phan_6 (10)

Đây là ứng dụng mặc định để thêm python-social-auth đến project Django. Bây giờ, chạy dòng lệnh sau để đồng bộ các models python-social-auth đến database.

phan_6 (11)

Python-social-auth bao gồm các backend cho nhiều dịch vụ. Bạn có thể tham khảo danh sách của tất cả các backend tại địa chỉ:

https://python-social-auth.readthedocs.org/en/latest/backends/index.html#supported-backends

Chúng ta sẽ tích hợp các xác thực backend cho Facebook, Twitter, và Google.

Bạn cần thêm pattern URL login mạng xã hội đến project. Mở file urls.py của project Bookmarks và thêm vào pattern URL sau:

phan_6 (12)

Để thực hiện việc xác thực mạng xã hội, bạn sẽ cần cung cấp một hostname, bởi vì nhiều dịch vụ sẽ không cho phép điều hướng đến 127.0.0.1 hoặc localhost. Nếu bạn sử dụng Windows, bạn cần edit trong file host tại đường dẫn C:\Windows\System32\Drivers\etc\hosts như sau:

127. 0.0.1 mysite.com

Để xác nhận mọi thứ làm việc, chỉ cần mở http://mysite.com:8000/account/login trên trình duyệt. Nếu bạn nhìn thấy trang login của ứng dụng, tất cả mọi thứ đều thực hiện một cách chính xác.

phan_6 (13)

Authentication using Facebook

Để người dùng có thể sử dụng tài khoản Facebook login đến website, bạn cần thêm dòng sau vào cài đặt AUTHENTICATION_BACKENDS trong file settings.py của project:

phan_6 (14)

Để thêm xác thực xã hôi với Facebook, bạn cần một tài khoản dành cho các dành phát triển của Facebook, và bạn phải tạo ra một ứng dụng Facebook mới.  Mở https://developers.facebook.com/apps/?action=create  trên trình duyệt và click vào button Create a New App :

phan_6 (15)

Điền vào các thông tin sau và click Create App ID

phan_6 (16)

Đi đến trang Dashboard, bạn sẽ thấy một vài thứ giống như sau:

phan_6 (17)

Click chọn Choose a Platform , chọn Website để điền Site URL của bạn:

phan_6 (18)

Nhập liên kết http://mysite.com:8000/ vào Site URL và click Next:

phan_6 (19)

Sau đó bạn cần trở về trang Dashboard để thêm các thông tin của App IDApp Secrect trong file setting.py của project như sau:

phan_6 (20)

Tùy chọn, bạn có thể định nghĩa thêm cài đặt SOCIAL_AUTH_FACEBOOK_SCOPE với các quyền hạn mà bạn muốn yêu cầu người dùng Facebook như:

SOCIAL_AUTH_FACEBOOK_SCOPE = [‘email’]

Cuối cùng, mở template registration/login.html  và thêm vào đoạn code sau trong block content:

phan_6 (21)

Mở địa chỉ http://mysite.com:8000/account/login/ trên trình duyệt , page login bây giờ trông như sau:

phan_6 (22)

Click button Sign in with Facebook bạn sẽ được điều hướng đến Facebook, và bạn sẽ nhìn thấy một modal dialog yêu cầu quyền hạn của bạn để ứng dụng Bookmarks truy cập vào hồ sơ Facebook của bạn:

phan_6 (23)

Click button Ok. Python-social-auth xử lý việc xác thực. Nếu mọi thứ diễn ra tốt đẹp, bạn sẽ được login và điều hướng đến page Dashboard của website.

Chú ý:

Hiện tại ứng dụng của bạn đang ở chế độ của nhà phát triển, nếu bạn login sẽ gặp lỗi như sau:

phan_6 (24)

Vì thế để public ứng dụng bạn cần trở về trang Dashboard, click chế độ App Review ở bên cột trái và đánh dấu Yes trong mục Make Bookmarks public? .  Trở về trang Dashboard bạn sẽ thấy hiện icon màu xanh bên cạnh chữ Bookmarks cho thấy mọi thứ đều ổn. Tham khảo hình sau: (Người dịch)

phan_6 (25)

Authentication using Twitter

Để xác thực xã hội sử dụng Twitter, thêm vào dòng sau trong cài đặt AUTHENTICATION_BACKENDS của file setting.py :

phan_6 (26)

Bạn cần tạo một ứng dụng mới trong tài khoản Twitter. Mở https://apps.twitter.com/app/new trên trình duyệt và điền chi tiết ứng dụng bao gồm các cài đặt sau:

phan_6 (27)

Chắc chắn rằng bạn đánh dấu checkbox Allow this application to be used to Sign in with Twitter. Sau đó click button Create your Twitter application. Khi đó bạn sẽ nhìn thấy thông tin sau, click vào Keys and Access Tokens, bạn sẽ nhận được thông tin của Consumer Key and Consumer Secret:

phan_6 (28)

Sao chép Consumer KeyConsumer Secret key đến cài đặt trong file setting.py của project:

phan_6 (29)

Bây giờ, thay đổi template login.html và thêm vào đoạn code sau dưới phần tử <ul> :

phan_6 (30)

Mở địa chỉ http://mysite.com:8000/account/login/ trên trình duyệt và click Login with Twitter. Bạn sẽ được điều hướng đến Twitter và nó sẽ yêu cầu bạn xác thực ứng dụng:

phan_6 (31)

phan_6 (32)

Click button Đăng Nhập, bạn sẽ được điều hướng đến page Dashboard của website.

Authentication using Google

Google cung cấp xác thực OAuth2. Bạn có thể đọc làm thế nào áp dụng Google OAuth2  tại địa chỉ:

https://developers.google.com/accounts/docs/OAuth2

Trước tiên, bạn cần tạo một key API trong Google Console Developer. Mở https://console.developers.google.com/project trên trình duyệt và click button Create Project. Điền tên và click button Create như hình sau:

phan_6 (33)

Nhập Project Name: Bookmarks

phan_6 (34)

Sau khi project được tạo, click vào liên kết Credentials trên menu bên trái và sau đó chọn OAuth client ID như hình sau:

phan_6 (35)

Google sẽ hỏi bạn Configure consent screen trước tiên. Đây là page sẽ hiển thị cho người dùng xác nhận đồng ý  truy cập đến website với tài khoản Google của họ. Click button Configure consent screen:

phan_6 (36)

Chọn địa chỉ email và điền Bookmarks vào Product Name, và click button Save.

phan_6 (37)

Màn hình xác nhận ứng dụng của bạn được configure và bạn sẽ được điều hướng đến page hoàn thành việc tạo Client ID.

Điền vào form dưới các thông tin sau:

phan_6 (38)

Click button Create. Bạn sẽ lấy được Client ID và key Client Secret.

phan_6 (39)

Thêm chúng vào file setting.py như sau:

phan_6 (40)

Bạn cũng cần thêm vào đoạn code sau trên AUTHENTICATION_BACKENDS:

phan_6 (41)

Tại bước này, bạn cần trở về trang Overview của Google APIs để Enable Google+API.

phan_6 (42)

Click button Enable:

phan_6 (43)

Thay đổi template login.html và thêm vào đoạn code sau dưới phần tử  <ul>:

phan_6_44

Mở địa chỉ http://mysite.com:8000/account/login trên trình duyệt. Page login trông như sau:

phan_6_45_5

Click button Login with Google bạn sẽ được điều hướng đến Google và yêu cầu quyền truy cập với màn hình mà chúng ta đã configure ở trên:

phan_6 (46)

Click button Allow. Bạn sẽ được login và điều hướng đến page Dashboard của website.

Chúng ta đã thêm các xác thực từ mạng xã hội đến project. Module python-social-auth cũng chứa backends cho các dịch vụ phổ biến khác.

Đọc tiếp:

Advertisements

5 thoughts on “Building a Social Website with Django – Phần 6

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s