Xác thực Django với Facebook, Instagram và LinkedIn
Đăng ký thủ công và đăng nhập vào account trực tuyến đôi khi có thể gây khó khăn. Các ứng dụng web hiện đại giải quyết vấn đề này thông qua xác thực xã hội, chủ yếu là một cách cho phép user đăng nhập (và đăng ký) ứng dụng bằng thông tin đăng nhập từ nhà cung cấp mạng xã hội mà họ đã có account . Trong hướng dẫn này, ta sẽ xây dựng một ứng dụng Django cho phép user đăng nhập thông qua account Facebook, Instagram và LinkedIn của họ. Để làm điều này, ta sẽ sử dụng thư viện social-auth-app-django . Ta cũng sẽ học cách extract thông tin bổ sung như ảnh profile và tên user từ các account xã hội tương ứng.
Vào cuối hướng dẫn này, ta sẽ có ứng dụng cuối cùng hoạt động như sau:
Mã nguồn của dự án này có sẵn trên GitHub .
Yêu cầu
Bạn cần cài đặt các mục sau trên máy của bạn để làm theo hướng dẫn này:
- Python3
- Pipenv
Pipenv là một công cụ sẵn sàng production nhằm mục đích mang lại những gì tốt nhất trong tất cả các thế giới đóng gói cho thế giới Python. Nó khai thác Pipfile, pip và virtualenv thành một lệnh duy nhất.
Hướng dẫn này giả định người đọc có kiến thức làm việc cơ bản với Django. Bạn cũng cần có account Facebook, Instagram và LinkedIn.
Hãy đi sâu vào ngay!
Bước 1 - Cài đặt ứng dụng Django
Trong phần này, ta sẽ tạo một dự án Django mới và cài đặt các phụ thuộc. Hãy bắt đầu bằng cách tạo một folder mới và đặt nó trở thành folder làm việc hiện tại:
$ mkdir django_social_app $ cd django_social_app Ta sẽ tạo và kích hoạt một môi trường ảo mới bằng Pipenv; điều này có tác dụng tạo ra một môi trường Python cô lập và ngăn ta làm ô nhiễm folder gói global khi ta cài đặt các phụ thuộc Django. Ta cũng sẽ cài đặt django và social-auth-app-django :
$ pipenv shell $ pipenv install django social-auth-app-django social-auth-app-django giới thiệu việc triển khai xác thực xã hội với Django.
Hãy tạo (và chuyển vào) một dự án Django mới, ta sẽ gọi nó là social_app:
$ (django_social_app) $ django-admin startproject social_app $ (django_social_app) $ cd social_app Lưu ý : Điều quan trọng là ta phải chạy các lệnh từ terminal có nguồn root trong môi trường ảo, tức là hiển thị (django_social_app) ở đầu mỗi dòng lệnh.
Tiếp theo, ta sẽ tạo một ứng dụng Django có tên là core , ứng dụng này sẽ chứa tất cả các khung nhìn và mẫu của ta :
(django_social_app) $ python manage.py startapp core Lưu ý : Bạn cần ở trong folder social_app mẹ để chạy các lệnh 'python management.py *'.
Hãy tìm file settings.py trong dự án social_app và thêm cả core và social-auth-app-django dưới dạng INSTALLED_APPS :
#social_app/settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'social_django', # add this 'core' # add this ] Cuối cùng, hãy di chuyển database :
(django_social_app) $ python manage.py migrate Cấu hình các lớp xác thực
Đằng sau mức thấp , Django duy trì một danh sách " backend xác thực" mà nó kiểm tra trong quá trình xác thực user . Nếu phương pháp xác thực đầu tiên không thành công, Django sẽ thử phương pháp thứ hai, v.v., cho đến khi tất cả các backend đã được thử.
Mảng AUTHENTICATION_BACKENDS chứa danh sách các lớp backend xác thực (dưới dạng chuỗi) và theo mặc định được đặt thành:
['django.contrib.auth.backends.ModelBackend'] Ta có thể cập nhật nó và thêm các lớp xác thực mới để cho phép xác thực với các nền tảng xã hội mà ta đang xem xét trong hướng dẫn này.
Để cập nhật nó, hãy thêm mã sau vào file settings.py :
#social_app/settings.py #add this AUTHENTICATION_BACKENDS = [ 'social_core.backends.linkedin.LinkedinOAuth2', 'social_core.backends.instagram.InstagramOAuth2', 'social_core.backends.facebook.FacebookOAuth2', 'django.contrib.auth.backends.ModelBackend', ] Ta vừa thêm các lớp backend xác thực cho Linkedin, Instagram và Facebook.
Bạn có thể tìm thấy danh sách các lớp backend xác thực được hỗ trợ bởi social-auth-app-django tại đây.
Thêm mẫu và file tĩnh
Ta chỉ làm việc về cài đặt và cấu hình ứng dụng, hãy chuyển sang một cái gì đó trực quan ngay bây giờ. Trong phần này, ta sẽ xây dựng nền tảng của các mẫu sẽ hiển thị ứng dụng.
Hãy tạo một folder mới trong folder core , ta sẽ gọi đây là các templates folder :
(django_social_app) $ cd core/ (django_social_app) $ mkdir templates/ Tạo ba file trong folder templates và gọi chúng:
-
base.html -
login.html -
home.html
Bây giờ, hãy mở file base.html và paste vào đoạn mã sau:
<!-- templates/base.html --> {% load static %} <!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" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" /> <link rel="stylesheet" href="{% static 'css/index.css' %}" /> <title>Social Auth with Django</title> </head> <body> <div class="container-fluid"> <div> <h1 class="text-white text-center">{% block title %}{% endblock %}</h1> <div class="card p-5"> {% block content %} {% endblock %} </div> </div> </div> </body> </html> Dán đoạn mã sau vào file login.html :
<!-- templates/login.html --> {% extends 'base.html' %} {% block title %} Sign in {% endblock %} {% block content %} <div class="row"> <div class="col-md-8 mx-auto social-container my-2 order-md-1"> <button class="btn btn-danger mb-2"> <a href="#">Login with Instagram</a> </button> <button class="btn btn-primary mb-2"> <a href="#">Login with Facebook </a> </button> <button class="btn btn-info mb-2"> <a href="#">Login with LinkedIn</a> </button> </div> </div> </div> {% endblock %} Cuối cùng, cập nhật file home.html với mã bên dưới:
<!-- templates/home.html --> {% extends 'base.html' %} {% block title %} Home {% endblock %} {% block content %} <div class="row"> <div class="col-sm-12 mb-3"> <h4 class="text-center"> Welcome {{ user.username }} </h4> </div> </div> {% endblock %} Ta cần một số kiểu để giúp mã của ta trông đẹp mắt khi hiển thị, vì vậy hãy tạo một folder có tên static trong folder root của folder core và ta sẽ lưu trữ các kiểu của bạn ở đó.
Tạo một folder được gọi là folder css trong folder static và cuối cùng, tạo file index.css trong folder css .
Bây giờ, hãy mở file index.css và cập nhật nó bằng mã sau:
/_ index.css _/ img { border: 3px solid #282c34; } .container-fluid { height: 100vh; background-color: #282c34; display: flex; justify-content: center; align-items: center; } .container-fluid > div { width: 85%; min-width: 300px; max-width: 500px; } .card { width: 100%; } .social-container { display: flex; flex-direction: column; justify-content: center; } .btn a, .btn a:hover { color: white; text-decoration: none ; } Cài đặt Chế độ xem và URL
Trong phần này, ta sẽ xác định Chế độ xem và đăng ký các URL mà ứng dụng cần để hoạt động, vì vậy hãy mở file core/views.py và thay thế nội dung của nó bằng đoạn mã bên dưới:
# core/views.py from django.shortcuts import render from django.contrib.auth.decorators import login_required # Create your views here. def login(request): return render(request, 'login.html') @login_required def home(request): return render(request, 'home.html') Tiếp theo, ta sẽ đăng ký các tuyến đường cho ứng dụng và đính kèm các chức năng xem phù hợp của chúng. Thay thế nội dung của social_app/urls.py bằng mã bên dưới:
# social_app/urls.py from django.contrib import admin from django.urls import path, include from django.contrib.auth import views as auth_views from core import views urlpatterns = [ path('admin/', admin.site.urls), path("login/", views.login, name="login"), path("logout/", auth_views.LogoutView.as_view(), name="logout"), path('social-auth/', include('social_django.urls', namespace="social")), path("", views.home, name="home"), ] Trong file settings.py , ta cần đặt bốn giá trị mới - LOGIN_URL , LOGOUT_URL , LOGIN_REDIRECT_URL và LOGOUT_REDIRECT_URL - vì chúng sẽ được sử dụng để chuyển hướng user khi quá trình xác thực hoàn tất:
# social_app/settings.py # [...] LOGIN_URL = 'login' LOGIN_REDIRECT_URL = 'home' LOGOUT_URL = 'logout' LOGOUT_REDIRECT_URL = 'login' # [...] Tuyệt diệu! Bây giờ ta có thể chạy ứng dụng để xem những gì ta đã xây dựng cho đến nay. Hãy khởi động server bằng lệnh này:
(django_social_app) $ python manage.py runserver Lưu ý : Bạn cần ở trong folder social_app mẹ để chạy các lệnh 'python management.py *'.
Ta có thể xem ứng dụng trên http: // localhost: 8000 , mặc dù ta sẽ được chuyển hướng đến /login vì ta không được xác thực:
Trông được! Trong các phần tiếp theo, ta sẽ đăng ký ứng dụng của bạn với các nhà cung cấp mạng xã hội để user có thể được xác thực thông qua các nền tảng xã hội.
Bước 2 - Xác thực Facebook
Trong phần này, ta sẽ thực hiện các thao tác nâng cao và cài đặt xác thực qua Facebook.
Nhận thông tin đăng nhập Facebook
Trụ sở để các nhà phát triển Facebook trang , sau khi đăng nhập, click vào Add a App mới và nhập các chi tiết cho các ứng dụng trên cửa sổ modal đó xuất hiện:
Khi ứng dụng đã được tạo, bạn sẽ được chuyển hướng đến trang tổng quan của ứng dụng. Ở phía bên trái của màn hình, nhấp vào ** Cài đặt , sau đó nhấp vào tùy chọn ** Cơ bản xuất hiện ngay bên dưới nó.
Khi màn hình mới tải, trong phần Tên domain ứng dụng , hãy thêm server localhost như sau:
Bây giờ hãy cuộn xuống cho đến khi bạn thấy một tùy chọn cho biết Thêm nền tảng , hãy nhấp vào nó và chọn tùy chọn Trang web . Thao tác này sẽ tạo một phần trang web nơi bạn sẽ thấy URL của trang web , thêm http://localhost:8000/ vào đầu vào và nhấp vào nút Lưu thay đổi :
Bây giờ, sao chép ID ứng dụng và bí mật ứng dụng từ trang tổng quan ứng dụng và thêm chúng vào file settings.py :
# social_app/settings.py #[...] SOCIAL_AUTH_FACEBOOK_KEY = YOUR_APP_KRY # App ID SOCIAL_AUTH_FACEBOOK_SECRET = YOUR_APP_SECRET # App Secret #[...] Thay thế các phím YOUR_APP_ * bằng các giá trị từ console ứng dụng Facebook của bạn.
Hãy cập nhật URL của nút Đăng nhập bằng Facebook trong file login.html bằng file này:
<!-- templates/login.html --> <button class="btn btn-primary mb-2"> <a href="{% url 'social:begin' 'facebook' %}">Login with Facebook</a> </button> Khởi động web server và truy cập localhost:8000/login để kiểm tra rằng bây giờ ta có thể đăng nhập vào ứng dụng thông qua Facebook:
(django_social_app) $ python manage.py runserver Lưu ý : Bạn cần ở trong folder social_app mẹ để chạy các lệnh 'python management.py *'.
Khi ta nhấp vào nút Đăng nhập bằng Facebook , ta sẽ được chuyển hướng đến một trang tương tự như bên dưới:
Nhấp vào Tiếp tục vì USERNAME sẽ chuyển hướng đến trang chủ và tên user của bạn sẽ được hiển thị. Ta đã được xác thực thành công qua Facebook:
Bạn muốn biết những gì vừa xảy ra ở mức thấp ? Hãy cùng tìm hiểu; ta sẽ tạo một account superuser để truy cập bảng quản trị:
(django_social_app) $ python manage.py createsuperuser Bạn sẽ nhận được dấu nhắc nhập tên user , email và password cho superuser. Đảm bảo nhập các chi tiết mà bạn có thể nhớ vì bạn cần chúng để đăng nhập vào console quản trị trong thời gian ngắn.
Sau khi tạo account superuser, ta sẽ chạy server và truy cập bảng quản trị trên địa chỉ này - http: // localhost: 8000 / admin / :
Ta có thể thấy rằng một User mới (ngoài siêu user ) đã được tạo trong danh mục User :
Ta cũng sẽ thấy rằng có một account mới trong danh mục Xác thực mạng xã hội của user :
Lời giải thích cho sự tồn tại của các account này mới là: Khi user đăng nhập vào các ứng dụng sử dụng Facebook (hoặc bất kỳ nhà cung cấp mạng xã hội), một user mới và user Auth xã hội dụ được tạo ra. User Social Auth được liên kết với account User lần đầu tiên, sau đó, version User được truy vấn từ database .
Cá thể User được tạo bằng cách sử dụng các chi tiết nhận được từ nhà cung cấp mạng xã hội. Trong trường hợp này, Facebook đã gửi lại trường first_name và last_name của Trường hợp người dùng đã tạo và tên user là sự ghép nối của first_name và last_name .
Một số nhà cung cấp xã hội (như Instagram) sẽ trả lại tên user của user trên nền tảng của họ và điều này được sử dụng (thay vì nối) cho cá thể User đã tạo trên ứng dụng.
Ta không muốn ứng dụng của bạn chỉ hiển thị tên user , ta muốn nhận thêm dữ liệu * User * chẳng hạn như ảnh profile , vì vậy hãy yêu cầu thêm dữ liệu từ Facebook.
Lưu ý : Bạn cần đăng xuất khỏi bảng quản trị để tiếp tục.
Mở file settings.py và cập nhật nó cho phù hợp:
# settings.py TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', 'social_django.context_processors.backends', # add this 'social_django.context_processors.login_redirect', # add this ], }, }, ] SOCIAL_AUTH_FACEBOOK_KEY = YOUR_APP_SECRET # App ID SOCIAL_AUTH_FACEBOOK_SECRET = YOUR_APP_SECRET # App Secret SOCIAL_AUTH_FACEBOOK_SCOPE = ['email', 'user_link'] # add this SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS = { # add this 'fields': 'id, name, email, picture.type(large), link' } SOCIAL_AUTH_FACEBOOK_EXTRA_DATA = [ # add this ('name', 'name'), ('email', 'email'), ('picture', 'picture'), ('link', 'profile_url'), ] Thay thế các phím YOUR_APP_ * bằng các giá trị từ console ứng dụng Facebook của bạn.
Bộ xử lý ngữ cảnh social_django giúp thêm dữ liệu backend và liên kết vào ngữ cảnh mẫu. Điều này giúp ta có thể truy cập dữ liệu về user đã xác thực bằng cách sử dụng thẻ mẫu. Bạn có thể đọc thêm về nó ở đây .
Khi user đăng nhập vào ứng dụng qua Facebook, ta có thể truy cập vào một tập hợp con dữ liệu của user bằng cách sử dụng quyền; quyền là cách ta hỏi liệu ta có thể truy cập dữ liệu trên Facebook hay không. Trong đoạn mã trên, SOCIAL_AUTH_FACEBOOK_SCOPE chứa danh sách các quyền để truy cập các thuộc tính dữ liệu mà ứng dụng của ta yêu cầu. Quyền email và user_link yêu cầu quyền truy cập vào liên kết profile và email Facebook của user tương ứng.
Hãy khởi động server ngay bây giờ, truy cập http: // localhost: 8000 / login / và thử đăng nhập qua Facebook:
Nhấp vào Tiếp tục với quyền USERNAME sẽ cấp cho ứng dụng quyền truy cập vào dữ liệu cá nhân của user trên Facebook và vì lý do này, để yêu cầu một số quyền, bạn cần gửi đơn đăng ký của bạn để được group Facebook xem xét đảm bảo rằng dữ liệu được trả lại không sử dụng sai mục đích. Bạn có thể tìm thấy danh sách các quyền của Facebook tại đây.
SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS có một khóa - fields - trong đó giá trị là danh sách các thuộc tính sẽ được Facebook trả về khi user đăng nhập thành công. Các giá trị phụ thuộc vào SOCIAL_AUTH_FACEBOOK_SCOP .
Khi user đăng nhập bằng Facebook, API Facebook trả về dữ liệu được yêu cầu trong SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS . Để lưu trữ dữ liệu trong database , ta cần chỉ định chúng trong SOCIAL_AUTH_FACEBOOK_EXTRA_DATA .
Dữ liệu bổ sung sẽ được lưu trữ trong trường extra_data của version User Social Auth :
Bây giờ, hãy cập nhật giao diện user để hiển thị dữ liệu bổ sung mà ta nhận được từ Facebook, ta sẽ mở file home.html và thay thế nội dung của nó bằng file này:
<!-- home.html --> {% extends 'base.html' %} {% block title %} Home {% endblock %} {% block content %} <div class="row"> <div class="col-sm-12 mb-3"> <h4 class="text-center">Welcome {{ user.username }}</h4> </div> <!-- Add from here --> {% for ass in backends.associated %} {% if ass.provider == 'facebook' %} <div class="col-md-6 text-center"> <img src="{{ass.extra_data.picture.data.url}}" alt="" width="150" height="150" style="border-radius: 50%"> </div> <div class="col-md-6 social-container my-2"> <p> Signed in via: {{ ass.provider }} </p> <p> Name: {{ ass.extra_data.name }} </p> <p> Provider url: <a href="{{ass.extra_data.profile_url}}">link</a></p> </div> {% endif %} {% endfor %} <div class="col-sm-12 mt-2 text-center"> <button class="btn btn-danger"> <a href="{% url 'logout' %}">Logout</a> </button> </div> <!-- End here --> </div> {% endblock %} Bây giờ ta có thể truy cập địa chỉ trang chủ của ứng dụng - http: // localhost: 8000 / - trên trình duyệt web và xem dữ liệu bổ sung:
Lưu ý: Bây giờ ta có quyền truy cập vào dữ liệu được lưu trữ trong trường `extra_data` bởi vì ta đã thêm bộ xử lý ngữ cảnh vào` TEMPLATES`; điều này cho phép ta truy cập dữ liệu ` backend ` trong giao diện user .
Xin chúc mừng! ta đã xác thực thành công qua Facebook và bây giờ có thể chuyển sang cài đặt nhà cung cấp mạng xã hội tiếp theo.
Bước 3 - Xác thực Instagram
Thấy rằng ta đã đi vào chi tiết về cách mọi thứ hoạt động đằng sau mức thấp , ta có thể cài đặt xác thực Instagram chỉ trong ba bước:
Nhận thông tin đăng nhập API
Cài đặt chương trình backend
Cài đặt giao diện user
Đi nào!
Nhận thông tin đăng nhập API
Hãy truy cập trang nhà phát triển Instagram và nhấp vào Đăng ký ứng dụng của bạn:
Trên màn hình xuất hiện tiếp theo, nhấp vào Đăng ký Khách hàng Mới và điền thông tin chi tiết cho đơn đăng ký:
Lưu ý : Instagram (và hầu hết các nhà cung cấp mạng xã hội) yêu cầu URL chuyển hướng sẽ là địa chỉ mà trình duyệt của user sẽ được chuyển đến sau khi xác thực. Đối với hướng dẫn này, ta sẽ sử dụng địa chỉ này http: // localhost: 8000 / social-auth / complete / instagram / . Bạn có thể tìm hiểu thêm về điều này ở đây .
Đăng ký thành công ứng dụng sẽ trả về màn hình như sau:
Bây giờ, ta sẽ nhấp vào tùy chọn Quản lý để lấy ID khách hàng và Bí mật khách hàng của ứng dụng:
Lưu ý : Ta cần ID và Bí mật để cấu hình phần backend .
Cài đặt chương trình backend
Hãy thêm mã này vào file settings.py :
# settings.py #[...] # add this code SOCIAL_AUTH_INSTAGRAM_KEY = YOUR_CLIENT_ID #Client ID SOCIAL_AUTH_INSTAGRAM_SECRET = YOUR_CLIENT_SECRET #Client SECRET SOCIAL_AUTH_INSTAGRAM_EXTRA_DATA = [ ('user', 'user'), ] #[...] Thay thế các khóa YOUR_CLIENT_ * bằng các giá trị từ ứng dụng Instagram của bạn.
Với đoạn mã trên, một khi user được xác thực qua Instagram, một đối tượng user sẽ được gửi lại ứng dụng. Ta thêm đối tượng này vào SOCIAL_AUTH_INSTAGRAM_EXTRA_DATA vì ta muốn nó được lưu trữ trong database để tham khảo.
Đối tượng user được trả về ở định dạng này:
{ "id": ..., "username": ..., "profile_picture": ..., "full_name": ..., "bio": ..., "website": ..., "is_business": ..., } Cài đặt giao diện user
Ta muốn hiển thị một giao diện user đẹp khi user được xác thực qua Instagram, vì vậy hãy thay thế nội dung của file home.html bằng mã bên dưới:
<!-- home.html --> {% extends 'base.html' %} {% block title %} Home {% endblock %} {% block content %} <div class="row"> <div class="col-sm-12 mb-3"> <h4 class="text-center">Welcome {{ user.username }}</h4> </div> <!-- Add from here --> {% for ass in backends.associated %} {% if ass.provider == 'facebook' %} <div class="col-md-6 text-center"> <img src="{{ass.extra_data.picture.data.url}}" alt="" width="150" height="150" style="border-radius: 50%"> </div> <div class="col-md-6 social-container my-2"> <p> Signed in via: {{ ass.provider }} </p> <p> Name: {{ ass.extra_data.name }} </p> <p> Provider url: <a href="{{ass.extra_data.profile_url}}">link</a></p> </div> {% endif %} <!-- Add from here --> {% if ass.provider == 'instagram' %} <div class="col-md-6 text-center"> <img src="{{ ass.extra_data.user.profile_picture }}" alt="" width="150" height="150" style="border-radius: 50%"> </div> <div class="col-md-6 social-container my-2"> <p>Signed in via: {{ ass.provider }} </p> <p> Name: {{ ass.extra_data.user.full_name }} </p> <p>Provider url: <a href="https://instagram.com/{{ ass.username }}">link</a></p> {% endif %} <!-- End here --> {% endfor %} <div class="col-sm-12 mt-2 text-center"> <button class="btn btn-danger"> <a href="{% url 'logout' %}">Logout</a> </button> </div> <!-- End here --> </div> {% endblock %} Hãy cập nhật URL của nút * Đăng nhập bằng Instagram * trong file login.html :
<!-- templates/login.html --> <button class="btn btn-danger mb-2"> <a href="{% url 'social:begin' 'instagram' %}">Login with Instagram</a> </button> Bây giờ ta có thể khởi động server , truy cập http: // localhost: 8000 / login và thử đăng nhập bằng Instagram:
Lưu ý : Ứng dụng Instagram đang ở chế độ sandbox (thử nghiệm). Để làm cho nó hoạt động, bạn sẽ phải gửi nó để được xem xét. Bạn có thể tìm hiểu thêm về điều này ở đây .
Sau khi ứng dụng được ủy quyền, user sẽ đăng nhập và được chuyển hướng đến trang chủ:
Bước 4 - Xác thực Linkedin
Ta sẽ cài đặt xác thực LinkedIn trong ba bước:
Nhận thông tin đăng nhập API
Cài đặt chương trình backend
Cài đặt giao diện user
Nhận thông tin đăng nhập API
Hãy truy cập trang nhà phát triển Linkedin và nhấp vào Tạo ứng dụng :
Điền vào chi tiết ứng dụng:
Hầu hết các trường này là bắt buộc và bạn sẽ phải điền vào chúng với dữ liệu có cấu trúc hợp lệ.
Khi ứng dụng đã được tạo thành công, bạn sẽ được chuyển hướng đến trang tổng quan của ứng dụng. Tại đây, thêm http: // localhost: 8000 / social-auth / complete / linkedin-oauth2 / làm URL chuyển hướng và cập nhật ứng dụng:
Hãy ghi lại ID khách hàng và Bí mật, ta cần nó khi cài đặt chương trình backend .
Cài đặt chương trình backend
Hãy thêm mã này vào file settings.py :
# settings.py #[...] # add this code SOCIAL_AUTH_LINKEDIN_OAUTH2_KEY = YOUR_CLIENT_ID #Client ID SOCIAL_AUTH_LINKEDIN_OAUTH2_SECRET = YOUR_CLIENT_SECRET #Client Secret SOCIAL_AUTH_LINKEDIN_OAUTH2_SCOPE = ['r_basicprofile', 'r_emailaddress'] SOCIAL_AUTH_LINKEDIN_OAUTH2_FIELD_SELECTORS = ['email-address', 'formatted-name', 'public-profile-url', 'picture-url'] SOCIAL_AUTH_LINKEDIN_OAUTH2_EXTRA_DATA = [ ('id', 'id'), ('formattedName', 'name'), ('emailAddress', 'email_address'), ('pictureUrl', 'picture_url'), ('publicProfileUrl', 'profile_url'), ] #[...] Thay thế các khóa YOUR_CLIENT_ * bằng các giá trị từ ứng dụng LinkedIn của bạn.
SOCIAL_AUTH_LINKEDIN_OAUTH2_SCOPE chứa các quyền cần thiết để truy cập vào dữ liệu của user , tương tự như những gì ta đã thấy khi cài đặt xác thực qua Facebook.
SOCIAL_AUTH_LINKEDIN_OAUTH_FIELD_SELECTORS chứa danh sách dữ liệu sẽ được trả lại khi user được xác thực thành công qua Linkedin. Nó tương tự như mảng SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS cho Facebook. Bạn có thể tìm thấy danh sách đầy đủ các mục dữ liệu có thể được yêu cầu tại đây.
SOCIAL_AUTH_LINKEDIN_OAUTH2_EXTRA_DATA chứa dữ liệu mà ta muốn lưu trữ trong database để tham khảo sau này.
Cài đặt giao diện user
Hãy thay thế nội dung của file home.html bằng mã bên dưới:
<!-- home.html --> {% extends 'base.html' %} {% block title %} Home {% endblock %} {% block content %} <div class="row"> <div class="col-sm-12 mb-3"> <h4 class="text-center">Welcome {{ user.username }}</h4> </div> <!-- Add from here --> {% for ass in backends.associated %} {% if ass.provider == 'facebook' %} <div class="col-md-6 text-center"> <img src="{{ass.extra_data.picture.data.url}}" alt="" width="150" height="150" style="border-radius: 50%"> </div> <div class="col-md-6 social-container my-2"> <p> Signed in via: {{ ass.provider }} </p> <p> Name: {{ ass.extra_data.name }} </p> <p> Provider url: <a href="{{ass.extra_data.profile_url}}">link</a></p> </div> {% endif %} {% if ass.provider == 'instagram' %} <div class="col-md-6 text-center"> <img src="{{ ass.extra_data.user.profile_picture }}" alt="" width="150" height="150" style="border-radius: 50%"> </div> <div class="col-md-6 social-container my-2"> <p>Signed in via: {{ ass.provider }} </p> <p> Name: {{ ass.extra_data.user.full_name }} </p> <p>Provider url: <a href="https://instagram.com/{{ ass.username }}">link</a></p> {% endif %} <!-- Add from here --> {% if ass.provider == 'linkedin-oauth2' %} <div class="col-md-6 text-center"> <img src="{{ass.extra_data.picture_url}}" alt="" width="150" height="150" style="border-radius: 50%"> </div> <div class="col-md-6 social-container my-2"> <p> Signed in via: Linkedin </p> <p> Name: {{ ass.extra_data.name }} </p> <p> Provider url: <a href="{{ass.extra_data.profile_url}}">link</a></p> </div> {% endif %} <!-- End here --> {% endfor %} <div class="col-sm-12 mt-2 text-center"> <button class="btn btn-danger"> <a href="{% url 'logout' %}">Logout</a> </button> </div> <!-- End here --> </div> {% endblock %} Ta cũng sẽ cập nhật URL của nút Đăng nhập bằng LinkedIn trong file login.html :
<!-- templates/login.html --> <button class="btn btn-info mb-2"> <a href="{% url 'social:begin' 'linkedin-oauth2' %}">Login with LinkedIn</a> </button> Bây giờ ta có thể khởi động server , truy cập http: // localhost: 8000 / login và thử đăng nhập bằng LinkedIn:
Khi ta cho phép ứng dụng bằng cách nhấp vào Cho phép , ta sẽ được dẫn đến trang chủ:
Kết luận
Ta đã đến phần cuối của hướng dẫn này và đã học cách cài đặt xác thực xã hội trong Django bằng cách sử dụng thư viện social-auth-app-django với cấu hình tối thiểu. Ta cũng đã học cách yêu cầu dữ liệu user bổ sung sau khi user đã được xác thực thông qua nhà cung cấp mạng xã hội.
Như ta đã thảo luận ở phần đầu của bài viết này, tầm quan trọng của xác thực xã hội trong các ứng dụng web hiện đại không thể bị nhấn mạnh quá mức.
Mã cho bài viết này có sẵn tại đây trên GitHub.
Các tin liên quan
