Главная » Руководства

Добавьте функции аутентификации.

На чтение 18 мин. Просмотров 6 Опубликовано

Здравствуйте, добро пожаловать во вторую часть этого учебника-курса, в котором вы изучите и поймете основы Django, создав клон популярного сайта Netflix.

Мы собираемся добавить функции аутентификации. По сути, мы позволим пользователям входить и регистрироваться.
Давайте приступим.

Содержание
  1. Добавьте шаблоны сайта
  2. Создайте папку templates
  3. Django URLs
  4. Статические файлы
  5. Шаблоны регистрации и входа
  6. Django Forms: Добавьте формы регистрации и входа
  7. Обработайте отправку форм.
  8. Форма регистрации
  9. Валидация регистрационной формы
  10. Форма входа в систему
  11. Выход из системы
  12. Поздравляем.
  13. Резюме

Добавьте шаблоны сайта

Для этого проекта мы не будем писать собственные файлы Html или CSS. Вместо этого мы воспользуемся работой, проделанной Карлосом Авила, которая доступна здесь: Netflix Clone. Спасибо ему.
Если вы откроете этот codepen, то увидите HTML-код и некоторые CSS.

Создайте папку templates

Django рекомендует помещать наши Html файлы или шаблоны в каталог templates в корне проекта. Затем внутри этой директории мы можем создать папку для каждого приложения проекта, чтобы разделить шаблоны каждого приложения. Это возможно благодаря строке: 'BACKEND': 'django.template.backends.django.DjangoTemplates', в файле настроек.
Кроме того, измените строку 58 файла настроек следующим образом:

  • создайте папку templates в корне проекта:mkir templates.
  • создайте в ней папку netflix для нашего приложения netflix:
    • cd templates
    • mkir netflix
  • создайте в ней файл index.html:
    • cd netflix

Django URLs

Помните, в первой части мы видели, что файл urls.py содержит все маршруты нашего проекта.
У нас есть только один маршрут для доступа к странице администратора.
Теперь мы добавим маршрут для главной страницы с помощью этой строки:
Изменим ее следующим образом:

from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static

from netflix.views import index_view # Add this line

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index_view, name='home'), # Add this line
]
Войти в полноэкранный режим Выйти из полноэкранного режима

У нас должна возникнуть ошибка, потому что модуль index_view, импортированный строкой from netflix.views import index_view, еще не существует.
Это представление, которое будет выполняться, когда кто-то вызовет путь с именем home, который мы только что добавили в строке

Поэтому нам нужно создать index_view, который будет отображать домашнюю страницу для запрашивающих.

  • Откройте файл netflix/views.py и добавьте этот код:
def index_view(request, path):
    """Home page view."""
    return render(request, 'index.html')
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все.

  • запустите проект: ‘python manage.py runserver’.
  • Откройте браузер и перейдите по адресу http://localhost:8000Вы должны увидеть что-то вроде этого:

Это означает, что мы можем получить доступ к нашей домашней странице. Но рендеринг не правильный, потому что мы еще не добавили стили.

Этим мы сейчас и займемся.

Статические файлы

В Django CSS, js и изображения, необходимые для рендеринга сайта, называются statics, поэтому Django рекомендует помещать их в папку statics.
Приступим:

  • Во-первых, создайте каталог static в корне проекта. Django будет искать статические файлы там, подобно тому, как Django находит шаблоны внутри templates: mkdir static.
  • Создайте папку для приложения netflix аналогично шаблонам:
    • cd static
    • mkdir netflix
  • создайте в ней файл style.css: touch style.css и скопируйте в него CSS часть кодепена.

Мы уже указали URL файлов статики с помощью строки:

Это означает, что мы должны получить к ним доступ следующим образом:

  • Добавьте эти строки в файл settings.py:
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),  # Add this line
]
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Теперь добавим этот {% load static %} в начало файла index.html. Это добавляет тег static, который может быть использован для вставки ссылок из статических файлов. А затем используйте этот тег static для импорта нашего style.css.
  • Добавляет эту строку <link rel="stylesheet" href="{% static 'netflix/style.css' %}"> в тег <head> файла index.html.
  • Обновите главную страницу.

Вот и все.

Шаблоны регистрации и входа

Сначала мы добавим на главную страницу кнопки registration и login.

  • В файле index.html замените <a href="#">Account</a> на <a href="/register">Register</a><a href="/login">Login</a>.
    Нажатие на кнопку register должно перенаправить пользователя на маршрут register, который отобразит страницу регистрации, и таким же образом нажатие на кнопку login перенаправит пользователя на маршрут login, который отобразит страницу login.

  • Добавьте register_view и login_view в файл netflix/views.py:

def register_view(request):
    """Registration view."""
    return render(request, 'netflix/register.html')

def login_view(request):
    """Login view."""
    return render(request, 'netflix/login.html')
Вход в полноэкранный режим Выход из полноэкранного режима
  • Измените файл urls.py, чтобы добавить маршруты регистрации и входа:
...
from netflix.views import register_view # Add this line
from netflix.views import login_view # Add this line

urlpatterns = [
    ...
    path('register', register_view, name='register'), # Add this line
    path('login', login_view, name='login'), # Add this line
]
Войти в полноэкранный режим Выход из полноэкранного режима
  • Создайте файлы register.html и login.html внутри templates/netlfix/.Мы создадим регистрационный HTML, вдохновленный индексным файлом.
    • Для файла registration.html нужно просто скопировать и вставить следующий html-код:
{% load static %}
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Netflix</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"  crossorigin="anonymous"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="{% static 'netflix/style.css' %}">
</head>
<body>
  <div class="wrapper">

    <!-- HEADER -->
    <header>
      <div class="netflixLogo">
        <a id="logo" href="/"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/logo.PNG?raw=true" alt="Logo Image"></a>
      </div>      
      <nav class="main-nav">                
        <a href="/">Home</a>  
      </nav>
      <nav class="sub-nav">
        <a href="/login">Login</a>
      </nav>
    </header>
    <section class="main-container" >
      <div class="location" id="home">
          <div class="box">
          </div>
      </div>
    </section>
  </div>
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима
  • Для файла login.html нужно просто скопировать и вставить следующий html-код:
{% load static %}
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Netflix</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"  crossorigin="anonymous"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="{% static 'netflix/style.css' %}">
</head>
<body>
  <div class="wrapper">

    <!-- HEADER -->
    <header>
      <div class="netflixLogo">
        <a id="logo" href="/"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/logo.PNG?raw=true" alt="Logo Image"></a>
      </div>      
      <nav class="main-nav">                
        <a href="/">Home</a>  
      </nav>
      <nav class="sub-nav">
        <a href="/register">Register</a>
      </nav>
    </header>
    <section class="main-container" >
      <div class="location" id="home">
          <div class="box">
          </div>
      </div>
    </section>
  </div>
</body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Django Forms: Добавьте формы регистрации и входа

Django позволяет нам легко создавать и управлять формами.
Давайте создадим файл netlfix/forms.py для размещения форм, связанных с приложением Netflix:

  • внутри папки netlfix создайте файл forms.py: touch forms.py.
  • Добавьте в него этот код:
from django import forms
from django.contrib.auth.models import User


class RegisterForm(forms.Form):
    """Registration form class."""

    firstname = forms.CharField(label="First name")
    lastname = forms.CharField(label="Last name")
    email = forms.EmailField(label="Email Address")
    password = forms.CharField(label="Password", widget=forms.PasswordInput)
    password_conf = forms.CharField(label="Password confirmation", widget=forms.PasswordInput)


class LoginForm(forms.Form):
    """Login form class."""

    email = forms.EmailField(label="Email Address")
    password = forms.CharField(label="Password", widget=forms.PasswordInput)
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Измените register_view следующим образом:
from .forms import RegisterForm
...
...
def register_view(request):
    """Registration view."""
    register_form = RegisterForm()
    return render(request, 'netflix/register.html', locals())
Войти в полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, что аргумент locals(), переданный в render(), отправляет все локальные переменные в шаблон HTML (здесь register.html). Это означает, что мы можем получить доступ к нашей форме в register.html как к переменной с именем register_form. Эта функция настраивается.

  • В register.html измените тег <div class="box"> следующим образом:
<div class="box">
    <form id="registerForm" action="/register" method="POST">
        {% csrf_token %}
        {{ register_form.as_p }}
        <button type="submit">Register</button>
    </form>
</div>
Вход в полноэкранный режим Выйти из полноэкранного режима

Важное замечание: Вы заметите синтаксис {{ register_form.as_p }} и {% csrf_token %}. Помните, я говорил, что аргументы locals() отправляют все локальные переменные представления регистрации в шаблон, а переменная register_form отправляется в HTML шаблон (register.html). Затем для доступа к этим локальным переменным в register.html нам просто нужно обернуть имя переменной в {{ }}, как это сделано для {{ register_form.as_p }}. Теперь для {% csrf_token %} все немного иначе, поскольку он отображается не как переменная, а как Tag. Если вы хотите узнать больше, прочитайте эту часть документации. А {% csrf_token %} позволяет нам установить значение csrf_token пользовательской сессии для предотвращения CSRF-атак.

Обновите страницу регистрации.
Django автоматически сгенерирует HTML-код формы. Разве это не волшебство ^_^ ? И мы можем настроить его, но не в этом курсе.
Сейчас это должно выглядеть так:

  • Измените login_view следующим образом:
...
from .forms import LoginForm  # add this line
...
...
def login_view(request):
    """Login view."""
    login_form = LoginForm()
    return render(request, 'netflix/login.html', locals())
Вход в полноэкранный режим Выйти из полноэкранного режима
  • В login.html измените тег <div class="box"> следующим образом:
<div class="box">
    <form id="loginForm" action="/login" method="POST">
        {% csrf_token %}
        {{ login_form.as_p }}
        <button type="submit">Login</button>
    </form>
</div>
Вход в полноэкранный режим Выйти из полноэкранного режима

Обновите страницу входа в систему.
Теперь она должна выглядеть следующим образом:

Обработайте отправку форм.

Форма регистрации

Теперь, если пользователь заполнит форму и отправит ее, он должен иметь возможность зарегистрироваться.

Если вы посмотрите на HTML-код формы регистрации, то заметите, что значение свойства HTML формы action — это /register (маршрут регистрации в нашем url.py).
Мы изменим register_view для обработки отправки формы. (Но вы можете переместить пост в другое представление).

  • Измените register_view следующим образом:
from django.http import HttpResponseRedirect
from django.contrib.auth.models import User
from django.contrib.auth.hashers import make_password
...
...
def register_view(request):
    """Registration view."""
    if request.method == 'GET':
        # executed to render the registration page
        register_form = RegisterForm()
        return render(request, 'netflix/register.html', locals())
    else:
        # executed on registration form submission
        register_form = RegisterForm(request.POST)
        if register_form.is_valid():
            User.objects.create(
                first_name=request.POST.get('firstname'),
                last_name=request.POST.get('lastname'),
                email=request.POST.get('email'),
                username=request.POST.get('email'),
                password=make_password(request.POST.get('password'))
            )
            return HttpResponseRedirect('/login')
        return render(request, 'netflix/register.html', locals())
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь наш register_view обрабатывает как отображение страницы регистрации при условии if request.method == 'GET':, так и отправку формы регистрации при условии else. И, как я уже сказал, вам решать, как обрабатывать их с помощью двух разных представлений.
Давайте объясним, что мы делаем в условии else:

  • Если это так, то User.objects.create( выполняется для создания экземпляра модели User.
  • И return HttpResponseRedirect('/login') перенаправляет пользователя на login.page.
  • Если форма не действительна, то вместо этого выполняется условие else:.
  • Затем мы перенаправляем пользователя на страницу регистрации, и Django автоматически отобразит пользователю ошибки валидации, чтобы он мог исправить их и отправить форму снова. Это ли не волшебство ^_^.

Валидация регистрационной формы

У нас могут быть некоторые ограничения для наших данных.

  • Минимальная длина пароля равна 6, а максимальная — 20: внутри forms.py измените строку password = forms.CharField(label="Password", widget=forms.PasswordInput) на password = forms.CharField(label="Password", widget=forms.PasswordInput(render_value=True), min_length=6, max_length=20). (Вы заметили, что мы добавили render_value=True, это для того, чтобы сказать django сохранить значение пароля, когда форма возвращается обратно с ошибками).

  • подтверждение пароля должно совпадать с паролем, а email не должен существовать в базе данных. Чтобы обработать эти два ограничения валидации, мы переопределим поведение по умолчанию метода clean класса Django Form. Поэтому модифицируйте RegistrationForm следующим образом:

...
class RegisterForm(forms.Form):
    """Registration form class."""

    ....

    # Add this methods
    def clean(self):
        """Check if the form is validated."""
        # call the default `clean` method to perform 
        # default validation of the form (max_lenght and min_length defined for password for instance)
        super(RegisterForm, self).clean()

        # extract user input data
        email = self.cleaned_data.get('email')
        password = self.cleaned_data.get('password')
        password_conf = self.cleaned_data.get('password_conf')

        # Check if the password match the password confirmation
        if password != password_conf:
            self._errors['password_conf'] = self.error_class([
                "wrong confirmation"
            ])

        # Check if the email used doen't already exist
        if User.objects.filter(username=email).exists():
            self._errors['email'] = self.error_class(['Email already exist'])

        # return any errors if found
        return self.cleaned_data
Войти в полноэкранный режим Выйти из полноэкранного режима

Метод достаточно документирован, чтобы объяснить, что он делает.
Вот и все.

Примечание: Для валидаторов паролей вы можете использовать настройки AUTH_PASSWORD_VALIDATORS, использовать валидаторы Django по умолчанию или создать свои собственные. Но в этом руководстве мы будем использовать вместо этого Django форму. Дайте мне знать в комментариях, если вам нужен учебник по созданию собственных валидаторов паролей.

Попробуйте зарегистрировать пользователя с неправильным вводом, а затем с правильным.
После того, как вы закончите. Войдите в django admin с правами суперпользователя и перейдите в http://localhost:8000/admin/auth/user/. Вы увидите, что новый пользователь добавлен. Вы также можете проверить в оболочке django shell:

from django.contrib.auth.models import User
User.objects.all()
Войти в полноэкранный режим Выйдите из полноэкранного режима

. Вы должны увидеть нового пользователя.

Форма входа в систему

Теперь зарегистрированный пользователь должен иметь возможность войти в систему.

Если вы посмотрите на HTML-код формы входа, то заметите, что значение свойства HTML формы action — это /login (маршрут входа в нашем url.py).
Мы изменим login_view для обработки отправки формы.

  • Измените login_view следующим образом:
...
from django.contrib.auth import authenticate, login  # Add this line

from .forms import LoginForm # Add this line
...
...
def login_view(request):
    """Login view."""
    if request.method == 'GET':
        # executed to render the login page
        login_form = LoginForm()
        return render(request, 'netflix/login.html', locals())
    else:
        # get user credentials input
        username = request.POST['email']
        password = request.POST['password']
        # If the email provided by user exists and match the
        # password he provided, then we authenticate him.
        user = authenticate(username=username, password=password)
        if user is not None:
            # if the credentials are good, we login the user
            login(request, user)
            # then we redirect him to home page
            return HttpResponseRedirect('/')
        # if the credentials are wrong, we redirect him to login and let him know
        return render(
            request,
            'netflix/login.html',
            {
                'wrong_credentials': True,
                'login_form': LoginForm(request.POST)
            }
        )
Войти в полноэкранный режим Выйти из полноэкранного режима

Этот метод достаточно документирован.

  • Измените файл login.html следующим образом:
<form id="loginForm" action="/login" method="POST">
    {% csrf_token %}
    {{ login_form.as_p }}
    <button type="submit">Login</button>
</form>
Войти в полноэкранный режим Выйти из полноэкранного режима

в этот:

<form id="loginForm" action="/login" method="POST">
    {% csrf_token %}
    {% if wrong_credentials %}
        <p style="margin-top: 60px">Invalid credentials.</p>
    {% endif %}
    {{ login_form.as_p }}
    <button type="submit">Login</button>
</form>
Войти в полноэкранный режим Выход из полноэкранного режима

Обратите внимание, что мы только что добавили:

{% if wrong_credentials %}
    <p style="margin-top: 60px">Invalid credentials.</p>
{% endif %}
Войти в полноэкранный режим Выйти из полноэкранного режима

Важное замечание: Это называется шаблонный условный рендеринг. Django позволяет нам отображать HTML в соответствии с некоторыми условиями. Так, здесь мы выводим сообщение Invalid credentials, если представление возвращает переменную wrong_credentials со значением True.

  • Теперь, когда пользователь будет аутентифицирован и перенаправлен на главную страницу, мы отобразим его имя пользователя и кнопку выхода из системы вместо кнопок login и register. Измените строку
<a href="/register">Register</a><a href="/login">Login</a>
Войти в полноэкранный режим Выйти из полноэкранного режима

из файла index.html в эти:

{% if request.user.is_authenticated %}
  {{ request.user }}
  <a href="/logout"><i class="fas fa-power-off sub-nav-logo"></i>Logout</a>
{% else %}
  <a href="/register">Register</a><a href="/login">Login</a>
{% endif %}
Enter fullscreen mode Выйти из полноэкранного режима

Примечание: Здесь мы снова использовали условный рендеринг для достижения нашей цели с помощью {% if request.user.is_authenticated %}. Но вы можете спросить, что мы не отправили эту переменную (request) в HTML-шаблон. И вы правы. Мы можем получить доступ к переменной request, потому что это глобальная (контекстная) переменная, автоматически отправляемая Django, чтобы позволить нам получить полезную информацию о текущем запросе. Так, если {{ request.user.is_authenticated }} равно True, пользователь аутентифицирован, а request.user является экземпляром модели User аутентифицированного пользователя. И тогда мы можем отобразить email пользователя, используя request.user.username или непосредственно request.user. Но если вместо этого {{ request.user.is_authenticated }} будет False, мы отобразим кнопки регистрации и входа.

Если вы вошли в систему с правильными учетными данными, вы должны увидеть электронную почту аутентифицированного пользователя и кнопку выхода из системы, как показано здесь:

Выход из системы

Аутентифицированный пользователь должен иметь возможность выйти из системы.
У нас уже есть кнопка выхода из системы в файле index.html:

<a href="/logout"><i class="fas fa-power-off sub-nav-logo"></i>Logout</a>
Войти в полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, что ссылка указывает на маршрут logout, который еще не существует.
Давайте добавим его.

  • В нижней части файла views.py добавьте logout_view:
...
...
def logout_view(request):
    """Logout view."""
    # logout the request
    logout(request)
    # redirect user to home page
    return HttpResponseRedirect('/')
Войти в полноэкранный режим Выход из полноэкранного режима
  • Добавьте представление выхода из системы в файл urls.py:
...
...
from netflix.views import logout_view # Add this line

urlpatterns = [
    ...
    ...
    path('logout', logout_view, name='logout'), # Add this line
]
Войти в полноэкранный режим Выход из полноэкранного режима

Поздравляем.

Мы подошли к концу этой второй части.

Резюме

В этом руководстве вы узнали

  • как управлять шаблоном Django
  • как выводить переменные внутри шаблона
  • как условно выводить HTML внутри шаблона
  • как управлять статическими файлами Django
  • как создавать формы Django и обрабатывать валидацию
  • как получить доступ и использовать переменную request в шаблоне Django
  • как обрабатывать базовую аутентификацию в Django (регистрация, вход и выход).

NB: Полный исходный код доступен здесь: https://github.com/fayomihorace/django-netflix-clone.

Если вы столкнулись с какой-либо блокировкой или ошибкой при выполнении этого руководства, пожалуйста, оставьте комментарий, я отвечу и помогу вам как можно скорее. С нетерпением жду вас в третьей части этого учебника-курса.

Рекомендуем почитать:

Оцените статью
Procodings.ru
Добавить комментарий