Delen via

Zelfstudie: Gebruikers verifiëren met Django in Visual Studio

  • Artikel

Dit artikel bevat stap 5 in de reeks zelfstudies Werken met het Django-webframework in Visual Studio.

Verificatie is een algemene vereiste voor web-apps. De sjabloon Django Web Project in Visual Studio bevat alle benodigde modules voor verificatie in het settings.py-bestand van het Django-project. Stap 4 in deze reeks zelfstudies maakt een Django-web-app met behulp van deze sjabloon. In stap 5 verkent u de verificatiemogelijkheden van de sjabloon en werkt u met de functies in de actieve app.

In stap 5 van de zelfstudie leert u het volgende:

  • Ontdek de verificatiestroom in het Django Web Project-sjabloon in Visual Studio
  • Code onderzoeken die ondersteuning biedt voor het verificatieproces
  • Code wijzigen om toegang tot Django-beheerdersinterfaces in te schakelen
  • De Django-web-app uitvoeren en verificatiefuncties gebruiken

Voorwaarden

  • Een Visual Studio-oplossing en een Django-web-app op basis van de sjabloon Django Web Project (DjangoWeb). stap 4: Gebruik de volledige Django Web Project-sjabloon beschrijft hoe u deze app maakt.

  • De Django-web-app moet een supergebruikeraccount (administrator) hebben. Stap 4 (Django supergebruiker maken) beschrijft hoe u de referenties van de supergebruiker maakt.

  • Bekijk de sectie Vereisten in stap 1 van deze reeks zelfstudies voor meer informatie over Django-sjabloonversies, Visual Studio-projecten versus Django-projecten en Python-ontwikkeling op Mac.

Verificatiestroom verkennen

In deze sectie wordt de standaardverificatiestroom uitgelegd die wordt geleverd door de Django Web Project-sjabloon voor een Django-web-app.

  1. Selecteer in Visual Studio Debug>Start Debugging (F5) om de Django-web-app te starten (DjangoWeb).

  2. Wanneer de app in de browser wordt geopend, ziet u de optie Aanmelden aan de rechterkant in de navigatiebalk:

    Schermopname van de optie Aanmelden op de navigatiebalk in de actieve Django-web-app.

    De actieve Django-app heeft een navigatiebalk met drie paginaopties, Startpagina, Info overen Contacten een -optie Aanmelden bij. Met de verificatieconfiguratie kan elke gebruiker de inhoud op de pagina 'Start', 'Info' en 'Contact' zien.

  3. Voor geverifieerde toegang tot de Django-web-app kan een aangewezen supergebruiker de optie Aanmelden in gebruiken, waarmee de pagina Aanmelden wordt geopend:

    Schermopname van de aanmeldingspagina voor de supergebruiker in de actieve Django-web-app.

  4. Nadat de supergebruiker zich heeft aangemeld, hebben ze toegang tot beperkte paginaweergaven voor de site en kunnen ze beheertaken uitvoeren:

    Schermopname met een van de paginaweergaven die beschikbaar zijn voor de Django-supergebruiker en de bijgewerkte navigatiebalk met de optie Afmelden.

  5. De supergebruiker kan de optie Afmelden optie gebruiken om u af te melden bij de Django-web-app en terug te keren naar de startpagina van de Django-web-app als een niet-geverifieerde gebruiker.

In de volgende secties wijzigt u de verificatieconfiguratie ter ondersteuning van django-beheersitetoegang voor de supergebruiker.

Verificatiecode onderzoeken

Nu u de algemene verificatiefuncties van een Django-web-app begrijpt, kunt u de onderliggende code bekijken die wordt geleverd door de sjabloon Django Web Project:

  1. Vouw in Solution Explorerde map app/templates/app van het project uit. In de volgende stappen worden verschillende bestanden in deze map bekeken.

  2. Open het basissjabloonbestand layout.html. Schuif naar het element <div class="navbar ...> en zoek de tag {% include app/loginpartial.html %}.

    Met de {% include %} tag wordt het sjabloonsysteem van Django geïnstrueerd om de inhoud van het opgenomen bestand op dit punt in de bijbehorende sjabloon op te halen.

  3. Open het bestand loginpartial.html. Bekijk hoe deze sjabloon gebruikmaakt van de voorwaardelijke tag {% if user.is_authenticated %} samen met een {% else %}-tag om verschillende UI-elementen weer te geven, afhankelijk van of de gebruiker is geverifieerd:

    {% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
    {% csrf_token %}
    <ul class="nav navbar-nav navbar-right">
        <li><span class="navbar-brand">Hello {{ user.username }}!</span></li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
    <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}

  4. Wanneer u de app start, is geen supergebruiker geauthenticeerd en wordt er alleen de koppeling Aanmelden weergegeven. De koppeling is gericht op het relatieve aanmeldingspad van de site dat is opgegeven in het URL-bestand van het Django-project (DjangoWeb/DjangoWeb/urls.py), zoals beschreven in stap 4 (URL-routepatronen onderzoeken). De 'aanmeldingsroute' is toegewezen aan de django.contrib.auth.views.login weergave en de weergave ontvangt de volgende gegevens:

    {
    'template_name': 'app/login.html',
    'authentication_form': app.forms.BootstrapAuthenticationForm,
    'extra_context':
    {
        'title': 'Log in',
        'year': datetime.now().year,
    }
}

    Deze code definieert drie eigenschappen:

    • template_name identificeert de sjabloon voor de pagina Aanmelden die is gedefinieerd in het -app-/login.html-bestand. Houd er rekening mee dat deze koppeling sitegebonden is. Het volledige mappad is app/templates/app/login.html.

    • extra_context informatie toevoegt aan de standaardcontextgegevens die aan de sjabloon worden gegeven. In dit geval bevat de informatie een titel 'Aanmelden', samen met de datum, tijd en het jaar.

    • authentication_form geeft een formulierklasse op die moet worden gebruikt met de aanmeldingsprocedure. In de sjabloon wordt deze eigenschapswaarde weergegeven als het form-object. De standaardwaarde is AuthenticationForm (uit django.contrib.auth.views), maar de Visual Studio-projectsjabloon gebruikt in plaats daarvan het formulier dat is gedefinieerd in het bestand app/forms.py van het project:

      from django import forms
from django.contrib.auth.forms import AuthenticationForm
from django.utils.translation import ugettext_lazy as _

class BootstrapAuthenticationForm(AuthenticationForm):
    """Authentication form which uses bootstrap CSS."""
    username = forms.CharField(max_length=254,
                            widget=forms.TextInput({
                                'class': 'form-control',
                                'placeholder': 'User name'}))
    password = forms.CharField(label=_("Password"),
                            widget=forms.PasswordInput({
                                'class': 'form-control',
                                'placeholder':'Password'}))

      De formulierklasse is afgeleid van AuthenticationForm en overschrijft specifiek de velden gebruikersnaam en wachtwoord om tijdelijke aanduidingen toe te voegen. De Visual Studio-sjabloon bevat deze expliciete code op basis van de aanname dat u waarschijnlijk het formulier wilt aanpassen, zoals het toevoegen van validatie van wachtwoordsterkte.

  5. Wanneer gebruikersinteractie in de app de 'Aanmelden'-pagina opent, wordt de login.html-sjabloon weergegeven. De variabelen {{ form.username }} en {{ form.password }} de CharField formulieren uit de BootstrapAuthenticationForm klasse weergeven. Er is ook een ingebouwde sectie om validatiefouten weer te geven en een kant-en-klaar element voor sociale aanmeldingen als u ervoor kiest om deze services toe te voegen:

    {% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}</h2>
<div class="row">
    <div class="col-md-8">
        <section id="loginForm">
            <form action="." method="post" class="form-horizontal">
                {% csrf_token %}
                <h4>Use a local account to log in.</h4>
                <hr />
                <div class="form-group">
                    <label for="id_username" class="col-md-2 control-label">User name</label>
                    <div class="col-md-10">
                        {{ form.username }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_password" class="col-md-2 control-label">Password</label>
                    <div class="col-md-10">
                        {{ form.password }}
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="hidden" name="next" value="/" />
                        <input type="submit" value="Log in" class="btn btn-default" />
                    </div>
                </div>
                {% if form.errors %}
                <p class="validation-summary-errors">Please enter a correct user name and password.</p>
                {% endif %}
            </form>
        </section>
    </div>
    <div class="col-md-4">
        <section id="socialLoginForm"></section>
    </div>
</div>

{% endblock %}

  6. Wanneer de gebruiker Aanmelden selecteert op het paginaformulier, probeert Django de referenties te verifiëren, zoals de referenties van de supergebruiker:

    • Als de verificatie mislukt, blijft de gebruiker op de pagina Aanmelden staan en is de tag form.errors ingesteld op waar:

      Schermopname van het bericht wanneer de gebruiker onjuiste referenties invoert in het aanmeldingsproces van Django.

    • Als de verificatie slaagt, opent Django de relatieve URL in het veld next, <input type="hidden" name="next" value="/" />, die in dit geval de startpagina (/) is.

  7. Wanneer de app de startpagina weergeeft nadat de gebruiker is geverifieerd, is de eigenschap user.is_authenticated waar wanneer de loginpartial.html sjabloon wordt weergegeven. In dit geval wordt op de navigatiebalk een Hallo (gebruikersnaam) bericht weergegeven en vervangt de optie Afmelden de optie Aanmelden in:

    Schermopname van de bijgewerkte navigatiebalk voor de geverifieerde gebruiker met de optie Hallo bericht en Afmelden.

    U kunt de eigenschap user.is_authenticated in andere delen van de app-code gebruiken om verificatie te controleren.

Toegang tot Django-beheerdersinterfaces

Als u wilt controleren of de geverifieerde gebruiker gemachtigd is voor toegang tot specifieke resources, moet u gebruikersspecifieke machtigingen ophalen uit uw database.

De supergebruiker of beheerder is met name gemachtigd voor toegang tot de ingebouwde Django-beheerdersinterfaces met behulp van de relatieve URL's van de site /admin/ en /admin/doc/. Zie Het Django-verificatiesysteem gebruiken (Django docs) voor meer informatie.

Voer de volgende stappen uit om toegang tot de Django-beheerdersinterfaces in te schakelen:

  1. Installeer het docutils Python-pakket in uw omgeving. Zie Pakketten installeren voor de Python-omgevingvoor instructies.

  2. Vouw in Solution Explorerde map Django-project uit DjangoWeb/DjangoWeb/. Met de volgende stappen worden verschillende bestanden in deze map bijgewerkt.

  3. Open het urls.py-bestand van het Django-project en wijzig de inhoud als volgt:

    1. Voeg boven aan het bestand de volgende pakketimport voor URL's toe aan het einde van de huidige lijst:

      from django.conf.urls import include

    2. Voeg na de importlijst de volgende instructie toe:

      admin.autodiscover()

    3. Zoek de definitie van urlpatterns en voeg de volgende padvermelding toe vóór vermelding van 'admin/'.

      path('admin/doc/', include('django.contrib.admindocs.urls')),

  4. Open het settings.py-bestand van het Django-project en zoek de INSTALLED_APPS verzameling. Voeg de volgende vermelding direct toe na de app vermelding:

    'django.contrib.admindocs',

  5. Stop de Django-web-app en start deze opnieuw.

  6. Wijzig in het URL-adresveld van de browser de paginaweergave van de app in de /admin/ of /admin/doc/ route. Deze pagina's bieden de supergebruiker toegang tot Django-beheertaken, zoals het maken van gebruikers- of groepsaccounts, het wijzigen van het wachtwoord en het weergeven van Django-documentatie:

    Schermopname van een voorbeeldpaginaweergave voor Django-documentatie voor de geverifieerde supergebruiker in de Django-web-app.

Gedrag van afmelden verkennen

Er zijn twee manieren waarop de supergebruiker zich kan afmelden en de geverifieerde sessie kan beëindigen. De Django-web-app bevat de optie Afmelden op de navigatiebalk en de Django-beheersite biedt de optie Afmelden.

Afmelden bij django-beheersite

Als de supergebruiker pagina's op de Django-beheersite bekijkt, kunnen ze afmelden selecteren op de navigatiebalk van de site. De webbrowser vernieuwt zich om de pagina 'Afgemeld' van de site weer te geven.

Schermopname van de pagina Uitgelogd nadat de supergebruiker zich heeft afgemeld bij de Django-beheersite.

Op deze pagina heeft de gebruiker twee opties: Start en Opnieuw inloggen. Beide opties retourneren de gebruiker naar de startpagina voor de Django-beheersite (/admin), waar de gebruiker wordt gevraagd om de referenties opnieuw in te voeren.

Schermopname van het dialoogvenster Aanmelden voor de Django-beheersite.

Afmelden bij Django-web-app

Als de supergebruiker pagina's bekijkt in de Django-web-app, zoals 'Info' of 'Contactpersoon', kunnen ze Afmelden selecteren op de navigatiebalk van de Django-web-app. Het afmeldgedrag is minimaal. Het beëindigt de geverifieerde sessie en bladert de gebruiker terug naar de startpagina van de app.

U kunt het afmeldingsgedrag aanpassen, zodat deze informatiever is voor de gebruiker:

  1. Vouw in Solution Explorerde map app/templates/app van het project uit en open het bestand loginpartial.html.

  2. In het sjabloonbestand ziet u dat de afmelden koppeling gewoon een HTTP POST-bewerking (action="/logout" method="post") naar het relatieve URL-pad van de site '/login' (href="{% url 'login' %}") doet.

    {% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
   {% csrf_token %}
   <ul class="nav navbar-nav navbar-right">
      <li><span class="navbar-brand">Hello {{ user.username }}!</span></li>
      <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
   </ul>
</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
   <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}

    De ingebouwde weergave django.contrib.auth.views.logout functie verwerkt dit afmeldingsproces.

    Het huidige gedrag geeft geen gebruikersinterface weer waarmee de gebruiker weet dat deze is afgemeld. Het proces bladert de gebruiker gewoon terug naar de startpagina van de Django-web-app volgens het 'logout/' padpatroon dat is gedefinieerd in het URL-bestand van het Django-project (DjangoWeb/DjangoWeb/urls.py):

     path('logout/', LogoutView.as_view(next_page='/'), name='logout'),

    Als u een meer informatieve bevestiging voor afmelden wilt weergeven, kunt u een pagina 'Afmelden' voor de app maken.

  3. Maak in de map app/templates/app een nieuw HTML-sjabloonbestand met de naam loggedoff.html.

  4. Voeg de volgende inhoud toe aan het nieuwe sjabloonbestand:

    {% extends "app/layout.html" %}
{% block content %}
<h3>You have been logged off</h3>
{% endblock %}

  5. Wijzig in het URL-bestand van het Django-project DjangoWeb/DjangoWeb/urls.pyhet URL-patroon voor het 'logout/' pad als volgt:

    path('logout/', LogoutView.as_view(template_name='app/loggedoff.html'), name='logout'),

    Met de bijgewerkte code wordt een template_name eigenschap toegevoegd om te werken met de nieuwe HTML-sjabloon voor de pagina 'Afgemeld'.

  6. Stop de Django-web-app en start deze opnieuw. Meld u opnieuw aan en selecteer Afmelden. Deze keer toont de app een meer informatief bericht aan de gebruiker om te bevestigen dat ze zijn afgemeld:

    Schermopname met het bijgewerkte afmeldingsgedrag voor de Django-web-app met een bericht op de pagina Afmelden.

  7. Stop de server en sluit de browservensters van de toepassing.

Project opslaan in broncodebeheer

Als u uw Visual Studio-oplossing hebt doorgevoerd voor broncodebeheer gedurende de loop van deze reeks zelfstudies, is het nu een goed moment om een andere doorvoering uit te voeren. Volg de instructies in stap 2 (wijzigingen doorvoeren in broncodebeheer) in deze reeks zelfstudies.

Uw oplossing moet overeenkomen met de broncode van de tutorial op GitHub: Microsoft/python-sample-vs-learning-django.

Tag {% csrf_token %} gebruiken in formulierelementen

De {% csrf_token %} tag bevat Django's ingebouwde cross-site request forgery (csrf) bescherming (Django docs). Meestal voegt u deze tag toe aan een element dat POST-, PUT- of DELETE-aanvraagmethoden omvat, zoals een formulier. De functie voor het weergeven van sjablonen (render) voegt vervolgens de benodigde beveiliging in.

Zelfstudiebeoordeling

Gefeliciteerd met het voltooien van deze zelfstudie over Django in Visual Studio.

In deze zelfstudie hebt u het volgende geleerd:

  • Verschillende soorten Django-projecten bouwen met behulp van verschillende sjablonen in Visual Studio
  • Een Django-web-app maken met meerdere pagina's
  • Sjablonen gebruiken om verschillende routes en paginaweergaven te maken
  • Statische bestanden gebruiken, pagina's toevoegen en sjabloonovername gebruiken
  • Geverifieerde toegang bieden tot beperkte app-pagina's en -functies en Django-beheerinterfaces

Verwante inhoud