[PYTHON] Erstellen eines Anmeldebildschirms in Django all auth

Django-allauth

Django-allauth ist ein Paket, mit dem Sie auf einfache Weise Funktionen zur Kontoerstellung und Anmeldung in Django implementieren können.

In diesem Artikel sieht die Django-Allauth-Vorlage großartig aus und führt sogar den Test aus. Informationen zum Starten eines Projekts finden Sie unter Starten eines Django-Projekts.

allauth Vorlage

Von venv / lib, das ein Paket zur virtuellen Umgebung von Python unter templates / allauth in base.py enthält Kopieren Sie den Inhalt von venv / lib / python3.6 / site-packages / allauth / account / templates nach templates / allauth.

base.py


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates', 'allauth'), #Platz zum Einfügen der Anmeldevorlage usw.
            os.path.join(BASE_DIR, 'templates'), #Wo soll die Vorlage abgelegt werden?
        ],

In Bezug auf die URL von Django-Allauth

Die in django-allauth definierte URL für die Authentifizierung lautet venv /lib/python3.6/site-packages/allauth/account/urls.py Es ist in beschrieben.

*/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"),
    ...
]

Wenn Sie einen Link zum Abmelden in den Header (HTML) schreiben, können Sie den in den obigen URL-Mustern festgelegten Namen wie folgt schreiben.

<a class="dropdown-item" href="{% url 'account_logout' %}">Ausloggen</a>

Bildschirmdesign

Beim Ändern des HTML-Codes des Bildschirms von django-allauth besteht das Problem darin, dass das Feld in der Schleife von {% für Feld in Form%} festgelegt wird, die die Vorlagensyntax darstellt. Daher verstehe ich, wie CSS festgelegt wird. Es war schwer.

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">Bleibe eingeloggt</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%}

Um dieses Problem zu umgehen, zeichnen Sie zunächst den Ausgangszustand und überprüfen Sie, welche Elemente in der Google-Überprüfung enthalten sind. Dann müssen Sie die Datei in span oder div einschließen und das Element oder das neue Element ändern / hinzufügen.

Zum Beispiel kann ich die Eingabe in der obigen login.html nicht sehen, aber sie enthält die Eingabe. Wenn Sie also Folgendes festlegen, wird das Erscheinungsbild angezeigt.

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

}

Ein Beispiel für den Anmeldebildschirm lautet wie folgt.

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

![Screenshot 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)

In ähnlicher Weise enthält git Beispiele zum Erstellen eines Kontos und zum Ändern von Kennwörtern.

Prüfung

Hier implementieren wir das Testen der Funktionen zum Erstellen, Anmelden und Abmelden von Konten. Erstellen Sie zunächst einen Ordner zum Testen in der Haupt-App.


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

Ich habe einen Test für die Kontoerstellung und die Anmeldung in test_allauth.py geschrieben. Im Test von Django lautet das Dateiformat test_ * .py, und der Test kann von ./manage.py test ausgeführt werden.

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
        )
        
        #Nach Hause umleiten
        self.assertEqual(response.status_code, 302)

        #Überprüfen Sie, ob ein Benutzer hinzugefügt wurde
        self.assertTrue(
            models.User.objects.filter(
                email=self.post_user_data['email']
            ).exists()
        )
        #Ist es eingeloggt?
        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']    
        }

        #Überprüfen Sie, ob ein Benutzer hinzugefügt wurde
        self.assertTrue(
            models.User.objects.filter(
                email=self.post_user_data['email']
            ).exists()
        )

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

        #Ist es eingeloggt?
        self.assertTrue(
            auth.get_user(self.client).is_authenticated
        )
        
        #Nach Hause umleiten
        self.assertEqual(response.status_code, 302)

Recommended Posts

Erstellen eines Anmeldebildschirms in Django all auth
Eine Geschichte über die Implementierung eines Anmeldebildschirms mit Django
Erstellen Sie einen Django-Anmeldebildschirm
Rückblick auf die Erstellung eines Webdienstes mit Django 1
Rückblick auf die Erstellung eines Webdienstes mit Django 2
Übergang zum Update-Bildschirm mit dem Django-Tag
Melden Sie sich mit dem Django Rest Framework an
(Für Anfänger) Versuchen Sie, mit Django eine einfache Web-API zu erstellen
[Python] Erstellen Sie mit Django einen Bildschirm für den HTTP-Statuscode 403/404/500
Richten Sie mit Django ein soziales Login ein
Erstellen eines bestimmten Baums mit Scikit-Learn
Erstellen eines Flask-Servers mit Docker
Stellen Sie die Django-Anwendung mit Docker bereit
Django-Tipps - Erstellen Sie eine Ranking-Site mit Django-
Erstellen Sie eine Webanwendung mit Django
Machen Sie einen Filter mit einer Django-Vorlage
Befehle beim Erstellen von SNS mit Django
Erstellen Sie mit Django einen Datei-Uploader
Erstellen einer einfachen Power-Datei mit Python
Einfacher RSS-Reader mit Django
Befehle zum Erstellen eines neuen Django-Projekts
Erstellen Sie mit Django Updateview einen Update-Bildschirm
Hinweise zum Aktivieren von PostgreSQL mit Django
Ich habe eine WEB-Bewerbung bei Django gemacht
Wiederholen Sie alles für den Django-Anmeldebildschirm
Eine Reihe von Amateur-Infrastrukturingenieuren, die Django mit Docker berühren (2): Erstellen eines Modells
[Piyopiyokai # 1] Spielen wir mit Lambda: Erstellen einer Lambda-Funktion
So entwickeln Sie eine Cart-App mit Django
Starten Sie Django in einer virtuellen Umgebung mit Pipenv
Internationalisierung mit Django
DJango Memo: Von Anfang an (Erstellen einer Ansicht)
Vorgehensweise zum Erstellen eines mit Python erstellten LineBot
[Python] Erstellen Sie mit Docker eine Django-Entwicklungsumgebung
Erstellen Sie mit Vagrant in 5 Minuten eine Django-Umgebung
Erstellen Sie mit Django ein Dashboard für Netzwerkgeräte!
Ein Memo beim Erstellen einer Python-Umgebung mit Miniconda
Erstellen Sie mit der Doker Toolbox eine Django-Entwicklungsumgebung
Befehle zum Erstellen einer Python3-Umgebung mit virtualenv
CRUD mit Django
Ablauf beim Erstellen einer virtuellen Umgebung mit Anaconda
Erstellen Sie mit Django eine Hallo-Welt-Anwendung mit nur einer Datei
Einfache Aufgabenliste, erstellt mit Python + Django
Konfigurieren Sie ein Modul mit mehreren Dateien in Django
Erstellen Sie mit IntelliJ schnell eine Python Django-Umgebung
Versuchen Sie, eine Webanwendung mit Vue.js und Django (Mac Edition) zu erstellen - (1) Umgebungskonstruktion, Anwendungserstellung
Versuchen Sie, ein FizzBuzz-Problem mit einem Shell-Programm zu erstellen
Verfahren zum Erstellen einer Anwendung mit Django mit Pycharm ~ Vorbereitung ~
Erstellen Sie eine Todo-App mit Django REST Framework + Angular
Lassen Sie uns eine Todo-App mit dem Django REST-Framework erstellen
Probleme beim Erstellen eines CSV-JSON-Konvertierungstools mit Python
DJango Hinweis: Von Anfang an (Erstellen einer Ansicht aus einer Vorlage)
Schritte von der Installation von Python 3 bis zur Erstellung einer Django-App
Todo-App mit Django erstellen ③ Aufgabenlistenseite erstellen
Zeigen Sie einen Bildschirm an, für den Sie sich bei Digital Signage anmelden müssen
Ein Memo zum Erstellen einer Django (Python) -Anwendung mit Docker
Stellen Sie die mit PTVS erstellte Django-App in Azure bereit
Starten Sie Django auf einem Docker-Container mit Docker-Compose Up
Ich habe einen einfachen RPA für die Anmeldung mit Selen ausprobiert