Подразумевани шаблони дјанго-аллаутх изгледају тупи и можда неће одговарати вашим потребама. Ево како их можете заменити.

дјанго-аллаутх је Дјанго пакет који вам омогућава да брзо и лако направите систем аутентикације за ваше Дјанго апликације. Има уграђене шаблоне који вам омогућавају да се фокусирате на друге важне делове апликације.

Иако су уграђени шаблони корисни, пожелећете да их промените јер немају најбољи кориснички интерфејс.

Како инсталирати и конфигурисати дјанго-аллаутх

Пратећи неколико једноставних корака, можете неприметно да инсталирате дјанго-аллаутх у свој Дјанго пројекат.

  1. Можете инсталирати дјанго-аллаутх пакет користећи Пип менаџер пакета:
    pip install django-allauth
  2. У датотеку поставки вашег пројекта додајте ове апликације инсталираним апликацијама:
    INSTALLED_APPS = [

     Add your other apps here
    # Djang-allauth configuration apps
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount', # add this if you want to enable social authentication
    ]
  3. Додајте позадину аутентификације у датотеку подешавања:
    instagram viewer 
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Додајте ИД сајта свом пројекту:
    SITE_ID = 1
  5. Конфигуришите УРЛ адресе за дјанго-аллаутх:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Ако правилно урадите горенаведене конфигурације, требало би да видите овакав шаблон када дођете до њега http://127.0.0.1:8000/accounts/signup/:

Можете да видите листу доступних УРЛ адреса тако што ћете отићи на http://127.0.0.1:8000/accounts/ са ДЕБУГ=Тачно у вашој датотеци са подешавањима.

Како заменити шаблон за пријаву у дјанго-аллаутх-у

Прво, морате да конфигуришете свој шаблони фолдер ако то нисте урадили. Отворите датотеку са подешавањима и идите на ШАБЛОНИ листа. Унутар њега пронађите ДИРС листу и модификујте је овако:

'DIRS': [BASE_DIR/'templates'],

Уверите се да имате а шаблони фолдер у основном директоријуму вашег пројекта. Можете заменити подразумевани шаблон за пријаву у дјанго-аллаутх пратећи следеће кораке.

Корак 1: Креирајте своје датотеке шаблона

У вашем шаблони фолдер, креирајте нову фасциклу под називом рачун да садржи шаблоне везане за дјанго-аллаутх.

Шаблони за регистрацију и пријаву треба да буду сигнуп.хтмл и логин.хтмл редом. Можете одредити тачан назив шаблона тако што ћете отворити свој Питхон виртуелно окружење и навигацију до Либ > сите-пацкагес > аллаутх > темплатес > аццоунт фолдер да бисте пронашли шаблоне. Требало би да прођете кроз код да бисте разумели како функционишу шаблони. На пример, шаблон за пријаву има овај код у себи:

Корак 2: Додајте ХТМЛ код у своје датотеке шаблона

Након креирања датотека, требало би да додате прилагођени ХТМЛ код за свој шаблон. На пример, да бисте заменили горњи шаблон за пријаву, можда ћете желети да копирате све из {% елсе %} блок, који садржи образац и дугме за подношење, и додајте га у свој прилагођени шаблон. Ево примера:

{% extends 'base.html' %}
{% block content %}
<p>If you have not created an account yet, then please
<ahref="{{ signup_url }}">sign upa> first.p>

<formclass="login"method="POST"action="{% url 'account_login' %}">
 {% csrf_token %}
 {{ form.as_p }}
 {% if redirect_field_value %}
<inputtype="hidden"name="{{ redirect_field_name }}"value="{{ redirect_field_value }}" />
 {% endif %}
<aclass="button secondaryAction"href="{% url 'account_reset_password' %}">Forgot password?a>
<buttonclass="primaryAction"type="submit">SIgn inbutton>
form>
 {% endblock content %}

Код изнад користи Наслеђе Дјанго шаблона да наследи карактеристике од басе.хтмл шаблон. Обавезно уклоните непотребне ознаке као што је {% блоцктранс %} таг. Ако сте то урадили, ваша страница за пријаву треба да буде слична овој:

Заглавље и подножје на горњој слици ће се разликовати од вашег.

Корак 3: Додајте прилагођене стилове свом обрасцу

У претходном кораку, образац за пријаву се приказује као параграф користећи {{ форм.ас_п }} таг. Да бисте додали стилове свом обрасцу, морате знати вредност име атрибут повезан са сваким пољем за унос.

Можете да прегледате своју страницу да бисте добили вредности које су вам потребне.

Слика изнад приказује атрибут наме повезан са емаил поље форме.

Сада можете појединачно додати поља обрасца у свој пројекат. На пример, можете додати поље е-поште овако:

{{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
{{ form.login.errors|safe }}

Можете користите Боотстрап са својим Дјанго пројектом да лако стилизујете своју форму. Ево примера:

<divclass="form-floating form-group">
 {{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
 {{ form.login.errors|safe }}
div>

Горњи код додаје класе Боотстрап обрасца у образац. Сада можете да додате друга поља која су вам потребна и да их стилизујете по жељи. Ако не волите да користите Боотстрап за стилизовање, дјанго-цриспи-формс је алтернатива за стилизовање ваших образаца. Пример испод користи Боотстрап за стилизовање.

<divclass="container d-flex justify-content-center align-items-center vh-100">
<formmethod="post"class="login"id="signup_form"action="{% url 'account_login' %}">
<divclass="text-center mb-4">
<h1class="h3 mb-3 font-weight-normal">Sign inh1>
div>
 {{ form.non_field_errors | safe }}
 {% csrf_token %}
<divclass="row g-3">
<divclass="col-12">
<divclass="form-floating form-group">
 {{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
 {{ form.login.errors|safe }}
div>
div>
<divclass="col-12">
<divclass="form-floating form-group my-3">
 {{ form.password }}
<labelfor="{{form.password.id_for_label}}">Passwordlabel>
 {{ form.password.errors|safe }}
div>
div>
<divclass="col-12">
<divclass="form-check">
<labelfor="{{form.remember.id_for_label}}"class="form-check-label">Remember melabel>
 {{ form.remember }}
div>
div>
<divclass="col-6">
 {% if redirect_field_value %}
<inputtype="hidden"name="{{ redirect_field_name }}"value="{{ redirect_field_value }}" />
 {% endif %}
<buttonclass="btn btn-primary w-100 py-3 bg-accent"type="submit">Sign inbutton>
<aclass="button secondaryAction text-accent"href="{% url 'account_reset_password' %}">Forgot
 Password?a>
div>
div>
form>
div>

Горњи блок кода ће произвести излаз сличан следећој слици:

Можете сазнати више о облицима у дјанго-аллаутх читајући званична документација.

Замени било који шаблон у дјанго-аллаутх

дјанго-аллаутх садржи много подразумеваних шаблона које можете заменити. Корацима у овом водичу можете заменити било који шаблон у дјанго-аллаутх-у. Требало би да размислите о коришћењу овог пакета за руковање вашим системом аутентикације, тако да се можете фокусирати на изградњу других важних карактеристика ваше апликације.