Настройка библиотеки django-allauth, часть 1

    blazer |   24.05.2019 |   07:13:14 |   Django |

Библиотека django-allauth предназначена для регистрации и авторизации пользователей на сайте. Это очень гибкий интерумент с множеством различных настроек и возможностей.

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

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

После установки приложение будет доступно по этому адресу /accounts/login/, если прейти по этому адресу, то увидим страницу авторизации.

Если ввести свой логин и пароли, то нас перебросит на не существующую страницу /accounts/profile/ - создайте этустраницу. Я у себя создал ее в приложении profiles и прокинул на нее маршрут в главном urls.py проекта path('accounts/profile/', include('profiles.urls')),

Теперь эту форму можно стилизовать. Я особо не заморачивался, поскольку у меня уже есть свой дизайн со всеми стилизоваными формами я просто подключил код формы библиотеки в шаблон своей формы. Так же можно загуглить html form templates или что то в этом роде и подобрать себе нужную форму, добавить этот код в свой шаблон и внедрить в нее код от формы django-allauth в данном случае это шаблон login.html.  

Как подключить код формы расскажу на примере формы авторизации - шаблон login.html. Открываете в редакторе этот шаблон у меня он находится по этому пути /home/blazer/myshop3/profiles/templates/allauth/account/login.html и в него добавляете чуть выше html код вашей формы. 
Должно получиться что то типа такого

т.е. вверху у меня html код новой формы а внизу это код формы который поумолчанию выводит библиотека django-allauth.

Теперь переносим все переменные которые есть в форме поумолчанию в нашу форму, это в основном будут {% blocktrans %},{% csrf_token %}, {% if redirect_field_value %} и др. так же не забываем перенести <form class="login" method="POST" action="{% url 'account_login' %}"> в свою форму. Доходим до самого интересного, сама форма выводится переменной {{ form.as_p }}, эта переменная выводит все поля формы. Но как быть если нам нужно вывести каждое поле по отдельности согласно нашего дизайна формы? Тут все просто. Нам нужно узнать name этих двух полей для этого ставим курсор в поле логина и правой кнопкой мыши вызывает контекстное меню в котором выбираем "Иследовать элемент" или "код элемента" в разных браузерах по разному. И смотрим какой name у данного поля у меня это login.

Берем этот атрибут и вставляем в строку input своей формы. 

<input id="login-username" type="text" class="form-control" name="login" value="" placeholder="username or email" required>

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

<button class="btn btn-success" type="submit">{% trans "Sign In" %}  </button>

Добавление нового поля в форму.

Что делать, если нужно добавить еще одно поле в форму? К примеру мне нужно было в этой форме вывести капчу, чтоб была хоть какая то защита от спамеров. Капчу я устанавливал ранее, это отдельное приложение, как установить и настроить капчу я писал в этой статье.

Открываем доку django-allauth раздел forms и видим, что есть такой словарь

ACCOUNT_FORMS = {
    'login': 'allauth.account.forms.LoginForm',
    'signup': 'allauth.account.forms.SignupForm',
    'add_email': 'allauth.account.forms.AddEmailForm',
    'change_password': 'allauth.account.forms.ChangePasswordForm',
    'set_password': 'allauth.account.forms.SetPasswordForm',
    'reset_password': 'allauth.account.forms.ResetPasswordForm',
    'reset_password_from_key': 'allauth.account.forms.ResetPasswordKeyForm',
    'disconnect': 'allauth.socialaccount.forms.DisconnectForm',
}

и ниже есть пример создания доп.поля

from allauth.account.forms import LoginForm
class MyCustomLoginForm(LoginForm):

    def login(self, *args, **kwargs):

        # Add your own processing here.

        # You must return the original result.
        return super(MyCustomLoginForm, self).login(*args, **kwargs)

В общем я в своем приложении profiles создал файл forms.py в нем я сделал импорт как указано в доке и импортировал капчу, создал свой класс формы с одним полем капчи.

from allauth.account.forms import LoginForm, SignupForm, ChangePasswordForm
from captcha.fields import CaptchaField


class SignIn(LoginForm):
    captcha = CaptchaField(label='Are you an human? ', )

Далее в settings.py я вывел словарь ACCOUNT_FORMS в котором для ключа login я указал путь до моего класса SignIn.

ACCOUNT_FORMS = {

    'login': 'profiles.forms.SignIn',


}

И в шаблоне формы я вывел html капчи

                            <div class="input-group">
                                {{ form.captcha }}
                                <button class='captcha-refresh'>
                                    <img src="{% static 'info/news/icon/reload.png' %}" alt="reload">
                                </button>
                            </div>
                            <br>
                        <!-- Вывод сообщения о неверно введенной капчи  -->
                        {% if form.captcha.errors %}
                            <div class="alert alert-danger alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                    &times;
                                </button>
                                <strong>{{ form.captcha.errors }}</strong>
                            </div>
                        {% endif %}

И все, таким образом добавляются свои поля в формы. Но это еще не все, поскольку мы с вами модные программисты, то мы обязаны сделать все по модному))) Чтоб пользователь мог видить свои не правильные действия т.е. он ввел логин или пароль с ошибкой, то мы должны ему как то это сообщить. Это можно сделать для формы авторизации так.
Вывести в форме эту переменную {{ form.non_field_errors }}

                        {% if form.non_field_errors %}
                            <div class="alert alert-warning">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                    &times;
                                </button>
                                <ul class="errorlist nonfield">
                                    {{ form.non_field_errors }}
                                </ul>
                            </div>
                        {% endif %}

Результат будет примерно таким, если пользователь ввел не верный логи или пароль ему отобразится сообщение.

На этом пока все.

Продолжение в следующей части. Будем разбирать форму регистрации )))

Ваши комментарии

Комментарии могут оставлять только зарегистрированые пользователи!

Disqus - комментарии

blog comments powered by Disqus