Como substituir os modelos padrão no django-allauth

django-allauth é um pacote Django que lhe permite construir um sistema de autenticação para as suas aplicações Django de forma rápida e fácil. Ele tem modelos embutidos para permitir que você se concentre em outras partes importantes da sua aplicação.

Enquanto os modelos padrão fornecidos podem ser úteis, muitas vezes é necessário modificá-los, pois sua interface de usuário (UI) pode não se alinhar com as preferências ou requisitos de alguém.

Como Instalar e Configurar o django-allauth

Integrar o django-allauth em um projeto Django requer aderir a um conjunto simples de diretrizes que asseguram um processo de instalação suave e ininterrupto.

⭐ Você pode instalar o pacote django-allauth usando o gerenciador de pacotes Pip:

 pip install django-allauth

⭐ No arquivo de configurações do seu projeto, adicione estes aplicativos aos aplicativos instalados:

 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
]

⭐ Adicione backends de autenticação ao seu arquivo de configurações:

 AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

⭐ Adicione um ID de site ao seu projeto:

 SITE_ID = 1

⭐ Configure as URLs para o django-allauth:

 from django.urls import path, include

urlpatterns = [
    # Djang-allauth url pattern
    path('accounts/', include('allauth.urls')),
]

Se a sua configuração for executada com precisão, navegar para http://127.0.0.1:8000/accounts/signup/ deve exibir um modelo parecido com o seguinte:

Para aceder a uma lista de URLs acessíveis, navegue para " http://127.0.0.1:8000/accounts/ " dentro da definição “DEBUG=True” no seu ficheiro de configuração.

Como sobrescrever o modelo de login no django-allauth

Para utilizar nosso sistema de modelos, é preciso primeiro garantir que seu diretório “templates” foi configurado corretamente. Para fazer isso, por favor acesse o arquivo de configuração da sua aplicação e navegue até a seção “TEMPLATES”. Nesta secção, localize a sub-lista “DIRS” e ajuste-a em conformidade, conforme demonstrado abaixo:

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

Para facilitar a integração do Django-Allauth, é crucial estabelecer a presença de uma pasta “templates” localizada dentro do diretório principal do seu projeto. Pode-se optar por modificar o modelo de login padronizado fornecido pelo Django-Allauth através da adesão ao conjunto de instruções subsequente.

Passo 1: Crie seus arquivos de modelos

Para organizar e gerenciar adequadamente os modelos associados com o Django Allauth dentro do seu projeto, é recomendado que você estabeleça uma pasta designada intitulada “account” dentro do seu diretório “templates” existente. Isso irá permitir uma organização eficiente e acessibilidade simplificada a esses modelos específicos quando necessário.

Para identificar corretamente os modelos de registo e início de sessão para o Allauth, é necessário navegar para o diretório “Lib” no seu ambiente virtual Python e avançar para a pasta “site-packages”. A partir daí, navegue até a pasta “allauth” e localize a subpasta “templates”. Ao examinar o conteúdo desta subpasta, especificamente a pasta “account”, descobrirá os nomes dos modelos apropriados para as páginas de registo e de início de sessão, que são “signup.html” e “login.html”, respetivamente. Para compreender melhor o funcionamento destes modelos, pode ser necessário rever o código relevante.

Passo 2: Adicione o código HTML aos seus ficheiros de modelo

Depois de gerar os seus ficheiros, é essencial incorporar o código HTML personalizado no seu modelo. A título de exemplo, para modificar o modelo de início de sessão predefinido, pode optar-se por replicar todo o conteúdo contido no bloco {% else %} , que engloba o formulário e o botão enviar, e integrá-lo num modelo personalizado. Um exemplo de implementação poderia ser o seguinte:

 {% extends 'base.html' %}
{% block content %}
<p>If you have not created an account yet, then please
    <a href="{{ signup_url }}">sign up</a> first.</p>
    
    <form class="login" method="POST" action="{% url 'account_login' %}">
      {% csrf_token %}
      {{ form.as_p }}
      {% if redirect_field_value %}
      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
      {% endif %}
      <a class="button secondaryAction" href="{% url 'account_reset_password' %}">Forgot password?</a>
      <button class="primaryAction" type="submit">SIgn in</button>
    </form>
    {% endblock content %}

O Django emprega uma técnica conhecida como herança de modelo dentro de seu framework que permite a customização de modelos herdando atributos e características de modelos base pré-existentes. Nesse caso específico, o código utiliza o recurso interno do Django para herança de modelo para incorporar o layout e os elementos de estilo encontrados no arquivo “base.html” na página de login. Para garantir uma funcionalidade ótima, é recomendado eliminar qualquer componente HTML indesejado ou redundante, incluindo a tag " {% blocktrans %}" “. Ao fazer isso, a página de login resultante será muito parecida com a estrutura de exemplo fornecida.

O gráfico acima mencionado contém cabeçalhos e rodapés que variam dos aqui representados.

Etapa 3: Adicionar estilos personalizados ao formulário

Para dar ao nosso formulário de início de sessão um toque estético e visual, é necessário compreender o significado de atribuir nomes específicos a campos de entrada individuais no referido formulário. Ao utilizar a etiqueta {{ form.as_p }}, podemos efetivamente apresentar o nosso formulário de início de sessão como uma narrativa coesa para uma interação perfeita com o utilizador. No entanto, para melhorar o aspeto deste formulário e dar-lhe uma sensação de requinte, é crucial que estejamos cientes do identificador único atribuído a cada componente individual do formulário.

Para obter os dados necessários, recomenda-se que se examine a sua página Web.

O gráfico mostra uma etiqueta atribuída a um campo de entrada num formulário, correspondente à entrada de endereço de correio eletrónico.

De facto, é possível incluir campos de formulário individuais no seu projeto específico. A título de exemplo, a incorporação de um campo de correio eletrónico pode ser executada da seguinte forma:

 {{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}

Pode-se empregar a utilização do Bootstrap em conjunto com um projeto Django para dar ao formulário uma aparência visual apelativa sem esforço. Considere a seguinte ilustração como um ponto de referência:

 <div class="form-floating form-group">
 {{ form.login }}
 <label for="{{form.login.id_for_label}}">Email</label>
 {{ form.login.errors|safe }}
</div>

O código fornecido aplica a formatação Bootstrap a um determinado formulário, permitindo a adição de outros campos, bem como preferências de design personalizadas. Para aqueles que não desejam utilizar Bootstrap em seu estilo, uma opção alternativa conhecida como “django-crispy-forms” pode ser considerada. Como demonstrado no exemplo a seguir, Bootstrap é empregado com o propósito de modelar o formulário.

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

Espera-se que o segmento de código acima mencionado gere um resultado parecido com a ilustração abaixo:

Você pode aprender mais sobre formulários no django-allauth lendo a documentação oficial .

Override Any Template in django-allauth

O Django Allauth fornece uma infinidade de modelos padronizados que podem ser adaptados de acordo com as preferências individuais. Os procedimentos descritos neste recurso oferecem a flexibilidade para modificar qualquer um desses modelos. É altamente recomendável empregar o Django Allauth como uma solução completa para gerenciar a autenticação de usuários, permitindo assim que os desenvolvedores concentrem seus esforços exclusivamente na criação e melhoria de aspectos críticos adicionais de suas aplicações de software.