Aanmelden en wachtwoord opnieuw instellen met allauth's e-mailverificatie in Django

In deze tutorial laten we gebruikers zich aanmelden op onze website en e-mailverificatie gebruiken om ervoor te zorgen dat het opgegeven e-mailadres geldig is.

7 juli 2020 06:30
Thema's: Authenticatie

We gebruiken e-mail om te identificeren en geen gebruikersnaam. allauth zorgt daarvoor wanneer we het volgende toevoegen aan onze instellingen:

ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
ACCOUNT_USERNAME_REQUIRED = False

Dit vertelt allauth dat we ons via e-mail willen authenticeren, dat een e-mailveld vereist is, dat we ook ons ​​e-mailadres willen verifiëren door een verificatielink te sturen en dat we de gebruikersnaam niet zullen gebruiken. Achter de schermen zal Django nog steeds een unieke gebruikersnaam gebruiken, die wordt gegenereerd door allauth. Je kunt dat controleren in Django admin; ook inloggen als superuser vereist nog steeds een gebruikersnaam. Controleren of het e-mailadres aanwezig en uniek is, wordt gedaan door allauth, niet door Django. Het is mogelijk om Django te vertellen dat het e-mail moet gebruiken als de unieke gebruikers-ID, waarvoor o.a. het e-mailveld opnieuw gedefinieerd moet worden. Het gebruikersnaamveld kan ook volledig worden verwijderd uit het gebruikersmodel, door een gebruikersmodel af te leiden van AbstractBaseUser. De allauth-instellingen zouden dan anders zijn. Dit valt buiten het bestek van deze tutorial.

Om e-mailverificatie te simuleren, is het mogelijk om de console te gebruiken, maar de e-mailflow is realistischer bij het verzenden van echte e-mails. In productie zou dit worden gedaan door een transactionele maildienst zoals Mailgun, Sendgrid, Mandrill; in ontwikkeling kun je een gmail-account gebruiken. Het aantal e-mails dat kan worden verzonden is uiteraard beperkt en vereist een instelling in Gmail om 'minder veilige apps' toe te staan. Gmail gebruikt standaard OAuth 2.0, wat betekent dat toegang tot een gmail-account wordt gegeven via een token. Door 'minder veilige apps' toe te staan, wordt dit uitgeschakeld, waardoor een applicatie toegang krijgt via gebruikersnaam / wachtwoord, wat, nou ja, minder veilig is. Het is dus zinvol om een ​​ander Gmail-account te gebruiken dan je werk of privémail.

Django heeft parameters voor alle e-mailinstellingen. Voor Gmail plaats je het volgende in je instellingenbestand (bij voorkeur in local.py dat niet wordt bijgehouden op Github):

EMAIL_HOST = 'smtp.gmail.com'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST_USER = 'yourusername@gmail.com'
EMAIL_HOST_PASSWORD = 'yourpassword'
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER

Als je instellingen (dev.py in Wagtail) een EMAIL_BACKEND specificeren, plaats er dan een comment-teken voor:

# EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

Hierdoor gebruikt Django de standaard smtp-backend. Dit kun je natuurlijk ook expliciet instellen.

Tijd om een aanmeldingstemplate te maken. allauth vraagt standaard alleen om e-mail (wanneer dit de authenticatiemethode is) en wachtwoord. Als we de gebruiker willen vragen om meer velden in te vullen, moeten we de instelling ACCOUNT_SIGNUP_FORM_CLASS gebruiken en een aangepast aanmeldingsformulier specificeren. Dit moet een eenvoudig formulier zijn dat is afgeleid van forms.Form, geen ModelForm. Om de gebruiker om voornaam, achternaam en weergavenaam te vragen, plaats je het volgende in forms.py:

from django import forms
from django.utils.translation import gettext_lazy as _

class SignupForm(forms.Form):
    first_name = forms.CharField(max_length=30, label=_("First name"))
    last_name = forms.CharField(max_length=30, label=_("Last name"))
    display_name = forms.CharField(max_length=30, label=_("Display name"), help_text=_("Will be shown e.g. when commenting."))

    def signup(self, request, user):
        user.first_name = self.cleaned_data['first_name']
        user.last_name = self.cleaned_data['last_name']
        user.display_name = self.cleaned_data['display_name']
        user.save()

Vertel allauth over dit formulier door het volgende in je instellingen op te nemen:

ACCOUNT_SIGNUP_FORM_CLASS = 'userauth.forms.SignupForm'

Nu gaan we een aanmeldingstemplate maken. Kopieer de template van allauth en plaats deze in de account/ submap van de templatefolder van uw app (in ons geval userauth/templates/userauth/). Pas het sjabloon naar wens aan; hier zullen we een Bootstrap-kaartsjabloon en widget-tweaks gebruiken voor de invoervelden. Het volledige template signup.html is dan:

{% extends 'account/base_card.html' %}

{% load i18n %}

{% block head_title %}{% trans "Sign Up" %}{% endblock %}

{% block card-header %}
<h3>{% trans "Sign Up" %}</h3>
{% endblock %}

{% block card-body %}

<form method="POST" action="{% url 'account_signup' %}" class="needs-validation" novalidate>
    {% csrf_token %}
    <div class="form-row">
        <div class="form-group col-md-6">
            {% with field=form.email %}{% include "account/form_field.html" %}{% endwith %}
        </div>
        <div class="form-group col-md-6">
            {% with field=form.display_name %}{% include "account/form_field.html" %}{% endwith %}
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            {% with field=form.password1 %}{% include "account/form_field.html" %}{% endwith %}
        </div>
        <div class="form-group col-md-6">
            {% with field=form.password2 %}{% include "account/form_field.html" %}{% endwith %}
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            {% with field=form.first_name %}{% include "account/form_field.html" %}{% endwith %}
        </div>
        <div class="form-group col-md-6">
            {% with field=form.last_name %}{% include "account/form_field.html" %}{% endwith %}
        </div>
    </div>
    <button type="submit" class="btn btn-outline-primary">{% trans "Sign Up" %}</button>
</form>

{% endblock %}

{% block card-footer %}
<p>{% trans "Already have an account?" %} <a href="{% url 'account_login' %}">{% trans "Sign In" %}</a></p>
{% endblock %}

De templates base_card.html en form_field.html zijn eerder gebruikt bij het inloggen. De url-namen account_signup en account_login worden geleverd door allauth.

Tijd om het uit te testen! Start de server op en ga naar http://127.0.0.1:8000/accounts/signup/. Als alles goed gaat, verschijnt ons nieuwe template. Registreer een nieuwe gebruiker. Er verschijnt een nieuw template dat ons vertelt dat er een verificatielink is verzonden. Ga naar je mail en klik op deze link. Er verschijnt een bericht waarin je wordt gevraagd het e-mailadres te bevestigen, waarna je je kunt aanmelden.

Nog een paar dingen om af te ronden. De verificatie- en bevestigingstemplates waren nog steeds standaard van allauth. Wijzig ze in dezelfde stijl als signup.html. De verificatiemail vermeldt example.com als onderwerp. Ga naar de Django-admin, naar Sites en wijzig de instelling voor het domein en de weergavenaam; dat is de naam die zal worden gebruikt. Bij het gebruik van Wagtail zit er ook een BASE_URL in het instellingenbestand met dezelfde naam example.com. Dit wordt gebruikt voor Wagtail-beheerdoeleinden, maar laten we dat ook veranderen in ons domein. En in admin.py, in list_display, is er nog steeds de gebruikersnaam; haal die eruit en vervang hem door display_name.

Nu we e-mail hebben ingesteld, kunnen we ook het opnieuw instellen van het wachtwoord implementeren. Ook dit wordt volledig ondersteund door allauth. De url-naam account_reset_password is het startpunt, een logische plaats hiervoor is in onze login-template. Van daaruit wordt de gebruiker door vier templates geleid:

  • wachtwoord_reset.html: vraagt ​​de gebruiker om zijn e-mailadres
  • password_reset_done.html: bevestiging dat er een e-mail is verzonden om het wachtwoord opnieuw in te stellen
  • password_reset_from_key.html: invoer van het nieuwe wachtwoord
  • password_reset_from_key_done.html: bevestiging dat het wachtwoord is gewijzigd

Kopieer de templates. Wijzig de styling met behulp van het bovenstaande sjabloon of naar wens en we zijn klaar. Vergeet niet om je wijzigingen naar je git repository te pushen!

Lees verder als je de gebruiker meer velden wilt laten toevoegen via een updatetemplate en zijn profiel wilt laten verwijderen.

Terug naar de artikelen

Reageer op dit artikel (log eerst in of bevestig hieronder met naam en email)

13 april 2021 15:28 - kroon  
Volg deze serie over django en wagtail. Ben bij het laatste artiekel begonnen. Er is bij mij een probleem met form_fields.html In deze regel gaat het mis {% with "form-control input-field-"|add:field.name as field_class %}{% render_field field class=field_class %}{% endwith %} inloggen via accounts/login werkt prima en ik kom in mijn profile accounts/logout geeft de volgende error Template error: In template /home/einte/pet/userauth/templates/userauth/account/form_field.html, error at line 16 Failed lookup for key [%s] in %r 6 : {% if field.errors or form.non_field_errors %} 7 : {% render_field field class="form-control is-invalid" %} 8 : <div class="invalid-feedback"> 9 : {{ form.non_field_errors }} 10 : {{ field.errors }} 11 : </div> 12 : {% else %} 13 : {% render_field field class="form-control is-valid" %} 14 : {% endif %} 15 : {% else %} 16 : {% with "form-control input-field-"|add:field.name as field_class %} {% render_field field class=field_class %}{% endwith %} 17 : {% endif %} 18 : Mogelijk heeft een andere lezer hier een oplossing voor met vr groeten einte elsinga
|   •  Antwoord