Créer un écran de connexion dans Django all auth

Django-allauth

Django-allauth est un package qui vous permet d'implémenter facilement des fonctions de création de compte et de connexion dans Django.

Dans cet article, le modèle django-allauth a fière allure et exécute même le test. Pour savoir comment démarrer un projet, reportez-vous à Démarrer un projet Django.

modèle allauth

De venv / lib, qui a un package lié à l'environnement virtuel de python sous templates / allauth défini dans base.py Copiez le contenu de venv / lib / python3.6 / site-packages / allauth / account / templates dans templates / allauth.

base.py


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates', 'allauth'), #Endroit pour mettre le modèle de connexion, etc.
            os.path.join(BASE_DIR, 'templates'), #Où mettre le modèle
        ],

Concernant l'url de django-allauth

L'url d'authentification définie dans django-allauth est venv /lib/python3.6/site-packages/allauth/account/urls.py Il est décrit dans.

*/allauth/account/urls.py


urlpatterns = [
    url(r"^signup/$", views.signup, name="account_signup"),
    url(r"^login/$", views.login, name="account_login"),
    url(r"^logout/$", views.logout, name="account_logout"),
    ...
]

Si vous écrivez un lien pour vous déconnecter dans l'en-tête (HTML), vous pouvez écrire le nom défini dans les modèles d'url ci-dessus comme suit.

<a class="dropdown-item" href="{% url 'account_logout' %}">Se déconnecter</a>

Conception d'écran

Lors du changement du html de l'écran de django-allauth, le problème est que le champ est défini dans la boucle de {% for field in form%} qui est la syntaxe du modèle, donc je comprends comment définir css. C'était difficile.

login.html


{% for field in form%}
      <div class="account-form">
        <div class="account-filed">
            {% if forloop.last %}
            <span class="last-field">{{ field }}</span>
              <span class="login-maintain">Rester connecté</span>
            {% else %}
              <span class="non-last-field">{{ field }}</span>
            {% endif %}
        </div>

        <div class="account-helptext">
          {% if field.errors %}
            <p>{{ field.errors.0 }}</p>
          {% endif %}
        </div>
      </div>
    {% endfor%}

Pour contourner le problème, commencez par dessiner dans l'état initial et vérifiez quels types d'éléments sont inclus dans la vérification de Google. Ensuite, vous devez inclure le fichier dans span ou div et modifier / ajouter cet élément ou nouvel élément.

Par exemple, je ne peux pas voir l'entrée dans le login.html ci-dessus, mais il contient l'entrée. Par conséquent, si vous définissez comme suit, l'apparence sera reflétée.

input {
    border:none;
    font-size: 60%;
    padding-top:25px;
    padding-bottom: 0px;
    border-bottom: 1px solid #ff7700;
    outline: none;
    font: 800;

}

Un exemple d'écran de connexion est le suivant.

git : login.html git : account-style.css

![Capture d'écran 2019-08-17 16.11.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481395/eb462c1d-a74f-ce7b-4c93- 6ae31d557af4.png)

De même, git a des exemples de création d'un compte et de changement de mots de passe.

tester

Ici, nous allons mettre en œuvre le test des fonctions de création de compte, de connexion et de déconnexion. Tout d'abord, créez un dossier à tester dans l'application principale.


mkdir ./main/tests
touch ./main/test/__init__.py
rm ./main/tests.py 

J'ai écrit un test pour la création de compte et la connexion dans test_allauth.py. Dans le test de Django, le format de fichier est test_ * .py, et le test peut être exécuté par ./manage.py test.

test_allauth.py


from django.test import TestCase
from django.core import mail
from allauth.account.forms import LoginForm, SignupForm
from allauth.utils import get_user_model
from django.contrib import auth
from django.urls import reverse
from unittest.mock import patch
from main import models

class TestSignUp(TestCase):
    def setUp(self):
        self.post_user_data = {
            "username": "username543",
            "email": "[email protected]",
            "password1": "abcabcabc",
            "password2": "abcabcabc",
        }

    def test_user_signup_page_loads_correctly(self):
        response = self.client.get(reverse('account_signup'))
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'account/signup.html')
        self.assertContains(response, 'SIGN UP')
        self.assertIsInstance(
            response.context['form'], SignupForm
        )
        
    def test_user_signup_page_submission_works(self):
        post_data = self.post_user_data 
        response = self.client.post(
            reverse("account_signup"), post_data
        )
        
        #Rediriger vers la maison
        self.assertEqual(response.status_code, 302)

        #Vérifier si un utilisateur a été ajouté
        self.assertTrue(
            models.User.objects.filter(
                email=self.post_user_data['email']
            ).exists()
        )
        #Est-il connecté?
        self.assertTrue(
            auth.get_user(self.client).is_authenticated
        )

    def test_user_login_page_loads_correctly(self):
        response = self.client.get(reverse('account_login'))
        self.assertEqual(response.status_code, 200)
        self.assertTemplateUsed(response, 'account/login.html')
        self.assertContains(response, 'LOGIN')
        self.assertIsInstance(
            response.context['form'], LoginForm
        )

    def test_user_login_page_submission_works(self):
        user1 = models.User.objects.create_user(
            self.post_user_data['username'],
            self.post_user_data['email'],
            self.post_user_data['password1']
        )
        user1.save()

        post_data = {
            'login':self.post_user_data['email'],
            'password':self.post_user_data['password1']    
        }

        #Vérifier si un utilisateur a été ajouté
        self.assertTrue(
            models.User.objects.filter(
                email=self.post_user_data['email']
            ).exists()
        )

        response = self.client.post(
            reverse("account_login"), post_data
        )

        #Est-il connecté?
        self.assertTrue(
            auth.get_user(self.client).is_authenticated
        )
        
        #Rediriger vers la maison
        self.assertEqual(response.status_code, 302)

Recommended Posts

Créer un écran de connexion dans Django all auth
Une histoire sur l'implémentation d'un écran de connexion avec django
Créer un écran de connexion Django
Retour sur la création d'un service Web avec Django 1
Retour sur la création d'un service Web avec Django 2
Transition vers l'écran de mise à jour avec le Django a tag
Connectez-vous avec Django Rest Framework
(Pour les débutants) Essayez de créer une API Web simple avec Django
[Python] Créer un écran pour le code d'état HTTP 403/404/500 avec Django
Configurer la connexion sociale avec Django
Créer un arbre déterminé avec scikit-learn
Créer un serveur Flask avec Docker
Déployer l'application Django avec Docker
Django Tips-Créez un site de classement avec Django-
Créer une application Web avec Django
Créer un filtre avec un modèle django
Commandes lors de la création de SNS avec Django
Créer un téléchargeur de fichiers avec Django
Créer un fichier power simple avec Python
Lecteur RSS simple réalisé avec Django
Commandes pour créer un nouveau projet django
Créer un écran de mise à jour avec Django Updateview
Remarques sur l'activation de PostgreSQL avec Django
J'ai fait une application WEB avec Django
Tout refaire pour l'écran de connexion Django
Une série d'ingénieurs d'infrastructure amateurs touchant Django avec Docker (2): création d'un modèle
[Piyopiyokai # 1] Jouons avec Lambda: création d'une fonction Lambda
Comment développer une application de panier avec Django
Démarrez Django dans un environnement virtuel à l'aide de Pipenv
Internationalisation avec Django
DJango Memo: depuis le début (création d'une vue)
Procédure de création d'un LineBot réalisé avec Python
[Python] Créer un environnement de développement Django avec Docker
Créez un environnement Django avec Vagrant en 5 minutes
Créez un tableau de bord pour les appareils réseau avec Django!
Un mémo lors de la création d'un environnement python avec miniconda
Créer un environnement de développement Django à l'aide de Doker Toolbox
Commandes pour créer un environnement python3 avec virtualenv
CRUD avec Django
Flux de création d'un environnement virtuel avec Anaconda
Créez une application Hello World avec un seul fichier avec django
Liste de tâches simple créée avec Python + Django
Configurer un module avec plusieurs fichiers dans Django
Créez rapidement un environnement Python Django avec IntelliJ
Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
Essayez de créer un problème FizzBuzz avec un programme shell
Procédure de création d'une application avec Django avec Pycharm ~ Préparation ~
Créer une application Todo avec Django REST Framework + Angular
Essayez de créer une application Todo avec le framework Django REST
Problèmes lors de la création d'un outil de conversion csv-json avec python
Remarque DJango: depuis le début (création d'une vue à partir d'un modèle)
Étapes de l'installation de Python 3 à la création d'une application Django
Créer une application Todo avec Django ③ Créer une page de liste de tâches
Afficher un écran qui nécessite une connexion à l'affichage numérique
Un mémo sur la création d'une application Django (Python) avec Docker
Déployer l'application Django créée avec PTVS sur Azure
Lancer Django sur un conteneur Docker à l'aide de docker-compose up
J'ai essayé un RPA simple pour me connecter avec du sélénium