Конструктор сайтов

Это приложение или веб сервис, с набором готовых решений и шаблонов, для создания сайтов.

Это менеджер баз данных во фреймворке Django. Реализованно в виде класов и наследования в Python

Джанго фреймворк

Это высокоуровневый веб-фреймворк на языке программирования Python, который позволяет разработчикам создавать веб-приложения быстрее и с меньшими затратами на время благодаря своим мощным инструментам и встроенным функциям. Он был разработан для упрощения разработки сложных веб-сайтов и предоставляет множество «из коробки» функций

Джанго мидлвари

Это компонент, выполняющийся на уровне обработки запросов и ответов в веб-приложении. Мидлвары позволяют обрабатывать запросы и ответы глобально, применяя различные функции к каждому запросу, прежде чем он достигнет представления (view), или к каждому ответу перед его отправкой клиенту.

Это совокупность связанных между собой веб-страниц, доступных через интернет и имеющих одно общее доменное имя. Каждый веб-сайт может содержать текстовую информацию, изображения, видео и другие мультимедийные элементы. Веб-сайты могут выполнять различные функции, включая предоставление информации, общение, онлайн-торговлю и множество других взаимодействий.

Почему, создавая сайт ты предпочёл django, а не конструкторы сайтов ?

Довольно сложный вопрос. Наверное я люблю разбираться и копаться в сложных вещах, хотя вроде бы и не стоило. Тут похожая история с играми. Вместо того, чтобы делать игры на игровых движках, я делал свой собственный, **DI**. Ну, я просто не ищу простых путей ;)

Я не переношу язык шаблонов Django. Мне обязательно его использовать?

Я думаю, что этот шаблонизатор — лучшее, что когда-либо было, но я знаю, что выбор языка шаблонов — это почти религия. В Django нет ничего, что требовало бы использования языка шаблонов, так что если вы привязаны к Jinja2, Mako или чему-то еще, то это нормально.

Удалить все

ЗАГРУЗКА ...

Содержание

Сделать систему авторизации и регистрации пользователей на Django

16.10.2023

11.03.2026

6 минут

906

Теги:

Джанго

Задача

Реализовать систему аутентификации пользователей. Для этого создаётся форма регистрации и форма для входа и выхода на сайте timthewebmaster.com.

Форма регистрации должна содержать следующие элементы:

имя пользователя ( требовать обязательно )
почту пользователя ( требовать обязательно )
пароль пользователя ( требовать обязательно )
повтор пароля пользователя ( требовать обязательно )
поле об самом пользователе
запрос аватарки пользователя
кнопки регистрации соответственно

Форма входа должна состоять только из двух полей:

имя пользователя
пароля пользователя

Ещё должна быть кнопка, которая бы позволяла выйти из режима аутентифицированного пользователя.

Решение

Подключение jQuery

Для решения данного кейса мне потребуется подключить одну библиотеку JS, jQuery. Это популярная , простая библиотека. И изменить настройки безопасности сайта написаного на django. То есть подправить файл settings.py

Предварительная настройка django для регистрации пользователей

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

В файле settings.py добавь

CSRF_USE_SESSIONS = True

В приложении которое выполняет регистрацию открой urls.py и добавь 2 путя

from django.urls import path from .views import signup, signup_verify urlpatterns = [ … # Это путь на страницу которая будет видна пользователю path('signup/', signup, name='signup'), # Это путь/адрес который мы будем использовать чтобы общаться с сервером path('signup/verify-signup/', signup_verify, name='signup_verify'), ]

Пишем ajax запрос для формы регистрации

Теперь пишется JS-скрипт с запросом.

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

При неудаче, мы сообщим об этом пользователю тоже.

Пишем функцию обработки ajax формы регистрации

В главе предварительной настройки мы импортировали в utls.py функцию signup_verify давай определим её

from django.shortcuts import render from django.http import JsonResponse, HttpResponseRedirect from django.template.defaultfilters import slugify import re from MyBlog import settings from .models import User ... def signup_verify(request): message = { 'common': '', 'username': 'обязательно', 'email': 'обязательно', 'password': 'обязательно', 'repassword': 'обязательно', } status = 200 # Будем обрабатывать только POST запросы if request.method == 'POST': # Общий паттерн почты для сравнения regex = r'\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,7}\b' # Собираем данные которые отправили username = request.POST['username'] email = request.POST['email'] password = request.POST['password'] repeated_password = request.POST['repeated_password'] about = request.POST['about'] avatar = None try: avatar = request.FILES['file'] except: avatar = None message['common']='✖ не могу зарегестрировать нового пользователя' # Имя, почта, пароль пусты if len(username) == 0: message['username']='⚠ поле пользователя не заполнено' status = 406 if len(email) == 0: message['email']='⚠ поле почты не заполнено' status = 406 if len(password) == 0: message['password']='⚠ поле пароля не заполнено’ status = 406 # Проверка если пользователь уже существует if User.objects.filter(name=username).exists() or User.objects.filter(slug=slugify(username)).exists(): message['username']='⚠ пользователь с таким именем уже существует' status = 406 # Проверка если пользователь уже существует if User.objects.filter(email=email).exists(): message['email']='⚠ такая почта уже используется' status = 406 # Проверка если имя достаточно длинное if len(username) < 3: message['username']='⚠ введённое имя слишком короткое' status = 406 # Проверка если имя слишком длинное if len(username) > 25: message['username']='⚠ введённое имя слишком длинное' status = 406 # Проверка если пароль достаточно длинный if len(password) < 6: message['password']='⚠ введённый пароль слишком короткий' status = 406 # Совпадают ли пароли if password != repeated_password: message['password']='⚠ пароль не совпадает' message['repassword']='⚠ пароль не совпадает' status = 406 # Правильный ли формат у почты if not re.fullmatch(regex, email): message['email']='⚠ неправильный формат адреса почты' status = 406 if status == 200: message['common'] = '✔ вы успешно зарегестрировались, перенаправление' message['username'] = '✔ Хорошо' message['email'] = '✔ Хорошо' message['password'] = '✔ Хорошо' message['repassword'] = '✔ Хорошо' # Сохраняем данные из отправленной формы user = User(name=username, about=about, avatar=avatar, email=email, password=password) user.save() return JsonResponse(message, status=status) else: status = 403 return JsonResponse(message, status=status)

Вот таким образом я выявляю “ошибки” форм в django.

Собираем всё вместе в html шаблоне. Страница регистрации

Теперь, чтобы всё заработало, мне нужно создать шаблон, который бы загрузил соответствующий скрипт и стили, использовал токен. Вот код формы

{% csrf_token %} <div class="form"> <form enctype="multipart/form-data" class="form_form" id="toSignup" action="send_new_user" method="get"> <div> <input class="form_el" placeholder="имя" type="text" name="username" id="username"> <div class="hint-container"> <p id="username-error" class="hint-required">обязательно</p> <p class="hint-error">от 3 до 25 букв</p> </div> </div> <div> <input class="form_el" placeholder="почта" type="email" name="email" id="email"> <div class="hint-container"> <p id="email-error" class="hint-required">обязательно</p> <p class="hint-error">корректный адрес почты</p> </div> </div> <div> <input class="form_el" placeholder="пароль" type="password" name="password" id="password"> <div class="hint-container"> <p id="password-error" class="hint-required">обязательно</p> <p class="hint-error">от 6 букв</p> </div> </div> <div> <input class="form_el" placeholder="повтори пароль" type="password" name="repeated_password" id="repeated_password"> <div class="hint-container"> <p id="repassword-error" class="hint-required">обязательно</p> <p class="hint-error">должен совпадать с паролем</p> </div> </div> <textarea class="form_el__about" placeholder="Раскажи немного о себе" name="about" rows=4 id="about"></textarea> </form> </div> <div class="sel_file"> <label for="texta">Выбери себе аватар.</label> <input class="form_el__file" placeholder="выбрать файл" type="file" name="file" id="file"> </div> <div class="buttons"> <div id="signup" class="button button-middle"> <a>Регистрация</a> </div> </div>

А в самом низу перед тегом body вставить написаный заранее скрипт

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> {% csrf_token %}  <script> const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value; </script>  <script src="{% static 'User/js/signup.js' %}"></script>

Донастраиваем URLs для формы аутентификации пользователей

Нужно добавить 2 дополнительных путя и импортировать соответствующие функции

... from .views import login, login_verify, logout urlpatterns = [ … # Эта функция очистит сессию от созданных ранее переменных path('logout/', logout, name='logout'), # Эта функция отобразит форму входа для пользователя path('login/', login, name='login'), # Эта функция задаст соответствующие переменные сессии для соответствующего пользователя и решит можен ли он войти или нет path('login/verify-login/', login_verify, name='login_verify'), ]

Пишем ajax запрос для формы аутентификации пользователя

Принцип тот же что и при регистрации. Указываем тип запроса, url-запроса и данные которые хотим передать. Ну и дополнительно, конечно, обратная связь для пользователя. Чтобы он знал об ошибках которые он допустил при заполнении формы. Всё это в отдельном файле login.js

function OnLogin(){ var username = $("#username").val() var password = $("#password").val() $.ajax({ type: "POST", url: 'verify-login/', data: { 'username': username, 'password': password, }, headers: {'X-CSRFToken': csrftoken}, mode: 'same-origin', success: function(result){ $(".hint-required").css("color","green") $("#common-error").text(result.common) $("#username-error").text(result.username) $("#password-error").text(result.password) setTimeout(function(){ window.location.href = '/' + language_code + '/' },1000) }, error: function(jqXHR, textStatus, errorThrown){ $(".hint-required").css("color","red") $("#common-error").text(jqXHR.responseJSON.common) $("#username-error").text(jqXHR.responseJSON.username) $("#password-error").text(jqXHR.responseJSON.password) } }) } // Документ готов и загружен $(document).ready( function(){ // Пользователь нажал на кнопку входа $("#login").on('click',OnLogin) })

Пишем функцию/форму обработки ajax запроса аутентификации пользователя

Вот готовые функции для обработки и проверки данных введённых пользователем

def login_verify(request): message = { 'common': '', 'username': 'обязательно', 'password': 'обязательно', } status = 200 if request.method == 'POST': username = request.POST['username'] password = request.POST['password'] message['common']='✖ не могу войти' if len(username) == 0: message['username']='⚠ пользователь пуст' status = 406 if len(password) == 0: message['password']='⚠ пароль пуст' status = 406 required_user = User.objects.filter(name=username) # Пользователь существует if required_user.exists(): Введённый пароль совпадает с сохранённым if required_user.first().password == password: status = 200 # Задаём статус текущей сессии как зарегестрированной request.session["is_auth"] = True # Сохраняем имя пользователя в переменной текущей сессии # Это может пригодиться для отображения информации предназначеной # Только пользователю request.session["username"] = username message['common'] = '✔ Вы успешно вошли, перенаправление ... ' message['username'] = '✔ Хорошо' message['password'] = '✔ Хорошо' else: message['password'] = '⚠ Неправильный пароль' status = 406 else: message['username'] = '⚠ Такого пользователя не существует' status = 406 return JsonResponse(message, status=status)

Функция выхода пользователя. Я просто очищаю текущую сессию пользователя на моём сайте. И перенаправляю на страницу входа на сайт.

def logout(request): request.session.flush() return HttpResponseRedirect("/login")

Пишем шаблон аутентификации на сайт

Ну и конечно мой шаблон для входа на сайт

<div id="common-error" class="hint-container hint-required hint-common_error"></div> {% csrf_token %} <div class="form"> <form class="form_form form_login" id="toLogin" action="send_new_user" method="get"> <div> <input class="form_el" placeholder="имя" type="text" name="username" autocomplete="off" id="username"><br><br> <div class="hint-container"> <p id="username-error" class="hint-required">обязательно</p> </div> </div> <div> <input class="form_el" placeholder="пароль" type="password" name="password" autocomplete="off" id="password"><br><br> <div class="hint-container"> <p id="password-error" class="hint-required">обязательно</p> </div> </div> </form> </div> <div class="buttons"> <div id="login" class="button button-middle"> <a>Вход</a> </div> <div class="button button-middle"> <a href="{% url 'signup' %}"> Регистрация </a> </div> </div>

И конечно же незабываем вставить скрипт в шаблон. Написаный нами login.js и jQuery библиотеку

Вывод

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

Сразу хочу оговориться, я не добавлял сюда капчу или проверку почты по одной простой причине. Это аутентификация на моём сайте и мне этого не требовалось. В моей деятельности важно не количество пользователей, а их качество. То есть, если человек захочет связаться со мной он свяжется, если нет ну это его дело.

Дополнительные материалы

Github репозиторий

Репозиторий, который я использую чтобы разрабатывать данный сайт

GitHub repo

Конкретно в данном кейсе вас будут интересовать следующие файлы:

Материалы которыми пользовался

Как я создал телеграм бота вопросов. Или квиз бота | Тим зе Вебмастер

Следующая статья

Как реализовать регистрацию и логирование пользователей

Предыдущая статья

Не забудь поделиться, лайкнуть и оставить комментарий)

Внешние ссылки

Другое

Использованные термины

Конструктор сайтов ⟶ Это приложение или веб сервис, с набором готовых решений и шаблонов, для создания сайтов.
Django модель ⟶ Это менеджер баз данных во фреймворке Django. Реализованно в виде класов и наследования в Python
Джанго фреймворк ⟶ Это высокоуровневый веб-фреймворк на языке программирования Python, который позволяет разработчикам создавать веб-приложения быстрее и с меньшими затратами на время благодаря своим мощным инструментам и встроенным функциям. Он был разработан для упрощения разработки сложных веб-сайтов и предоставляет множество «из коробки» функций
Джанго мидлвари ⟶ Это компонент, выполняющийся на уровне обработки запросов и ответов в веб-приложении. Мидлвары позволяют обрабатывать запросы и ответы глобально, применяя различные функции к каждому запросу, прежде чем он достигнет представления (view), или к каждому ответу перед его отправкой клиенту.
Вебсайт ⟶ Это совокупность связанных между собой веб-страниц, доступных через интернет и имеющих одно общее доменное имя. Каждый веб-сайт может содержать текстовую информацию, изображения, видео и другие мультимедийные элементы. Веб-сайты могут выполнять различные функции, включая предоставление информации, общение, онлайн-торговлю и множество других взаимодействий.

Релевантные вопросы

Почему, создавая сайт ты предпочёл django, а не конструкторы сайтов ? Довольно сложный вопрос. Наверное я люблю разбираться и копаться в сложных вещах, хотя вроде бы и не стоило. Тут похожая история с играми. Вместо того, чтобы делать игры на игровых движках, я делал свой собственный, **DI**. Ну, я просто не ищу простых путей ;)
Я не переношу язык шаблонов Django. Мне обязательно его использовать? Я думаю, что этот шаблонизатор — лучшее, что когда-либо было, но я знаю, что выбор языка шаблонов — это почти религия. В Django нет ничего, что требовало бы использования языка шаблонов, так что если вы привязаны к Jinja2, Mako или чему-то еще, то это нормально.