Como substituir os modelos padrão em Django-allauth

Como substituir os modelos padrão em Django-allauth
Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

django-allauth é um pacote Django que permite construir um sistema de autenticação para seus aplicativos Django de forma rápida e fácil. Possui modelos integrados para permitir que você se concentre em outras partes importantes do seu aplicativo.





MUO Vídeo do dia ROLE PARA CONTINUAR COM O CONTEÚDO

Embora os modelos integrados sejam úteis, você desejará alterá-los porque eles não têm a melhor IU.





Como instalar e configurar Django-allauth

Seguindo alguns passos simples, você pode instalar facilmente o django-allauth em seu projeto Django.





  1. Você pode instalar Django-allauth pacote usando o gerenciador de pacotes Pip:
     pip install django-allauth 
  2. 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
    ]
  3. Adicione backends de autenticação ao seu arquivo de configurações:
     AUTHENTICATION_BACKENDS = [ 
        'django.contrib.auth.backends.ModelBackend',
        'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Adicione um ID de site ao seu projeto:
     SITE_ID = 1 
  5. Configure as URLs para django-allauth:
     from django.urls import path, include 

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

Se você fizer as configurações acima corretamente, deverá ver um modelo como este ao navegar para http://127.0.0.1:8000/accounts/signup/ :

  um formulário de inscrição

Você pode ver a lista de URLs disponíveis navegando até http://127.0.0.1:8000/accounts/ com DEBUG = Verdadeiro no seu arquivo de configurações.



  Uma página 404 no modo Django DEBUG, mostrando uma lista de padrões de URL disponíveis em django-allauth

Como substituir o modelo de login em Django-allauth

Primeiro você precisa configurar seu modelos pasta, caso ainda não tenha feito isso. Abra seu arquivo de configurações e navegue até o MODELOS lista. Dentro dele, localize o DIRS list e modifique-o assim:

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

Certifique-se de ter um modelos pasta no diretório raiz do seu projeto. Você pode substituir o modelo de login padrão em Django-allauth seguindo estes próximos passos.





Etapa 1: crie seus arquivos de modelo

Na tua modelos pasta, crie uma nova pasta chamada conta para armazenar os templates relacionados ao Django-allauth.

Os modelos de registro e login devem ser inscrição.html e login.html respectivamente. Você pode determinar o nome correto do modelo abrindo seu Ambiente virtual Python e navegando para Lib > pacotes de sites > allauth > modelos > conta pasta para encontrar os modelos. Você deve percorrer o código para entender como os modelos funcionam. Por exemplo, o modelo de login contém este código:





  bloco de código de login padrão do django allauth

Etapa 2: adicione código HTML aos seus arquivos de modelo

Depois de criar seus arquivos, você deve adicionar o código HTML personalizado ao seu modelo. Por exemplo, para substituir o modelo de login acima, você pode querer copiar tudo do {% outro %} bloco, que contém o formulário e o botão de envio, e adicione-o ao seu modelo personalizado. Aqui está um exemplo:

 {% 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 código acima usa Herança de templates do Django herdar características do base.html modelo. Certifique-se de remover tags desnecessárias, como {% blocktrans%} marcação. Se você fez isso, sua página de login deverá ser semelhante a esta:

  uma página de login com um belo cabeçalho e rodapé

O cabeçalho e rodapé da imagem acima serão diferentes dos seus.

Etapa 3: adicione estilos personalizados ao seu formulário

Na etapa anterior, o formulário de login é renderizado como um parágrafo usando o {{form.as_p}} marcação. Para adicionar estilos ao seu formulário, você precisa saber o valor do nome atributo associado a cada campo de entrada.

Você pode inspecionar sua página para obter os valores necessários.

  Um navegador's dev tools showing the code for a login page

A imagem acima mostra o atributo name associado ao e-mail campo do formulário.

Agora você pode adicionar os campos do formulário individualmente em seu projeto. Por exemplo, você pode adicionar o campo de e-mail assim:

como consertar um controlador ps4
 {{ form.login }} 
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}

Você pode use Bootstrap com seu projeto Django para estilizar facilmente seu formulário. Aqui está um exemplo:

 <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 acima adiciona classes de formulário Bootstrap ao formulário. Agora, você pode adicionar os outros campos necessários e estilizá-los de acordo com sua preferência. Se você não gosta de usar o Bootstrap para estilizar, django-crispy-forms é uma alternativa para estilizar seus formulários . O exemplo abaixo usa Bootstrap para estilização.

 <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>

O bloco de código acima produzirá uma saída semelhante à imagem a seguir:

  Um formulário de login com três campos para e-mail, senha e lembre-se de mim. Tem um botão amarelo que diz

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

Substituir qualquer modelo em Django-allauth

django-allauth contém muitos modelos padrão que você pode substituir. Com as etapas deste guia, você pode substituir qualquer modelo no django-allauth. Você deve considerar usar este pacote para lidar com seu sistema de autenticação, para que possa se concentrar na construção de outros recursos importantes de seu aplicativo.