Les modèles par défaut de Django-allauth semblent grossiers et pourraient ne pas répondre à vos besoins. Voici comment vous pouvez les remplacer.

django-allauth est un package Django qui vous permet de créer rapidement et facilement un système d'authentification pour vos applications Django. Il dispose de modèles intégrés pour vous permettre de vous concentrer sur d'autres parties importantes de votre application.

Bien que les modèles intégrés soient utiles, vous souhaiterez les modifier car ils ne disposent pas de la meilleure interface utilisateur.

Comment installer et configurer Django-allauth

En suivant quelques étapes simples, vous pouvez installer en toute transparence Django-allauth dans votre projet Django.

  1. Vous pouvez installer Django-Allauth package en utilisant le gestionnaire de packages Pip :
    pip install django-allauth
  2. Dans le fichier de paramètres de votre projet, ajoutez ces applications à vos applications installées :
    INSTALLED_APPS = [

     Add your other apps here
    # Djang-allauth configuration apps
    




instagram viewer

    

    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount', # add this if you want to enable social authentication
    ]
  3. Ajoutez des backends d'authentification à votre fichier de paramètres :
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Ajoutez un identifiant de site à votre projet :
    SITE_ID = 1
  5. Configurez les URL pour Django-allauth :
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Si vous effectuez correctement les configurations ci-dessus, vous devriez voir un modèle comme celui-ci lorsque vous accédez à http://127.0.0.1:8000/accounts/signup/:

Vous pouvez voir la liste des URL disponibles en accédant à http://127.0.0.1:8000/accounts/ avec DEBUG=Vrai dans votre fichier de paramètres.

Comment remplacer le modèle de connexion dans Django-allauth

Tout d'abord, vous devez configurer votre modèles dossier si vous ne l’avez pas fait. Ouvrez votre fichier de paramètres et accédez au MODÈLES liste. À l'intérieur, localisez le DIRS list, et modifiez-la comme ceci :

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

Assurez-vous d'avoir un modèles dossier dans le répertoire racine de votre projet. Vous pouvez remplacer le modèle de connexion par défaut dans Django-allauth en suivant ces étapes suivantes.

Étape 1: Créez vos fichiers de modèle

Dans ton modèles dossier, créez un nouveau dossier appelé compte pour contenir les modèles liés à Django-allauth.

Les modèles d'inscription et de connexion doivent être inscription.html et connexion.html respectivement. Vous pouvez déterminer le nom correct du modèle en ouvrant votre Environnement virtuel Python et naviguer vers Lib > packages de site > allauth > modèles > compte dossier pour trouver les modèles. Vous devez parcourir le code pour comprendre comment fonctionnent les modèles. Par exemple, le modèle de connexion contient ce code :

Étape 2: ajoutez du code HTML à vos fichiers de modèle

Après avoir créé vos fichiers, vous devez ajouter le code HTML personnalisé pour votre modèle. Par exemple, pour remplacer le modèle de connexion ci-dessus, vous souhaiterez peut-être tout copier du {% autre %} bloc, qui contient le formulaire et le bouton de soumission, et ajoutez-le à votre modèle personnalisé. Voici un exemple :

{% 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 %}

Le code ci-dessus utilise L'héritage du modèle de Django pour hériter des fonctionnalités du base.html modèle. Assurez-vous de supprimer les balises inutiles telles que le {% bloctrans %} étiqueter. Si vous avez fait cela, votre page de connexion devrait ressembler à ceci :

L'en-tête et le pied de page de l'image ci-dessus seront différents des vôtres.

Étape 3: ajoutez des styles personnalisés à votre formulaire

À l'étape précédente, le formulaire de connexion est affiché sous forme de paragraphe en utilisant le {{ form.as_p }} étiqueter. Pour ajouter des styles à votre formulaire, vous devez connaître la valeur du nom attribut associé à chaque champ de saisie.

Vous pouvez inspecter votre page pour obtenir les valeurs dont vous avez besoin.

L'image ci-dessus montre l'attribut de nom associé au e-mail champ du formulaire.

Vous pouvez désormais ajouter les champs de formulaire individuellement dans votre projet. Par exemple, vous pouvez ajouter le champ email comme ceci :

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

Tu peux utilisez Bootstrap avec votre projet Django pour styliser facilement votre formulaire. Voici un exemple :

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

Le code ci-dessus ajoute des classes de formulaire Bootstrap au formulaire. Vous pouvez désormais ajouter les autres champs dont vous avez besoin et les styliser selon vos préférences. Si vous n'aimez pas utiliser Bootstrap pour le style, django-crispy-forms est une alternative au style de vos formulaires. L'exemple ci-dessous utilise Bootstrap pour le style.

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

Le bloc de code ci-dessus produira une sortie similaire à l'image suivante :

Vous pouvez en apprendre davantage sur les formulaires dans Django-allauth en lisant le documentation officielle.

Remplacer n'importe quel modèle dans Django-allauth

django-allauth contient de nombreux modèles par défaut que vous pouvez remplacer. Avec les étapes de ce guide, vous pouvez remplacer n'importe quel modèle dans Django-allauth. Vous devriez envisager d'utiliser ce package pour gérer votre système d'authentification, afin que vous puissiez vous concentrer sur la création des autres fonctionnalités importantes de votre application.