Hoe Django-apps authenticeren met django-allauth

De auteur heeft het Vrij en Open Source Fonds geselecteerd om een donatie te ontvangen als onderdeel van het Write for Donations-programma.

Inleiding

Authenticatie is het proces van het verifiëren van echte of geregistreerde gebruikers in het systeem, wat helpt om uw softwaretoepassingen te beveiligen tegen ongeautoriseerde toegang. Er worden verschillende technieken gebruikt om gebruikers te authenticeren, zoals gebruikersnaam/wachtwoordverificatie, menselijke biometrie of afbeeldingswachtwoorden. In het Django-webframework kan authenticatie worden vastgecodeerd of kunt u gebruikmaken van kant-en-klare modules zoals django-allauth, django-rest-social-auth, django-registration, en meer.

django-allauth is een geïntegreerde set van Django-toepassingen die zich bezighouden met accountauthenticatie, registratie, beheer en authenticatie van derden (sociale) accounts. Het is een van de meest populaire authenticatiemodules vanwege zijn vermogen om zowel lokale als sociale logins te verwerken. U kunt ondersteuning toevoegen voor extra OAuth/OAuth2-providers met de gemeenschappelijke codebase van de app. Het behandelt niet alleen de authenticatielogica, maar is ook aanpasbaar om aan uw ontwerpbehoeften te voldoen.

In deze tutorial ga je een Django-toepassing bouwen die django-allauth gebruikt om te authenticeren met een DigitalOcean-account.

Vereisten

Voor deze tutorial heb je het volgende nodig:

• A DigitalOcean account. If you do not have one, sign up for a new account.
• Python 3.5+ geïnstalleerd op je computer, wat je kunt doen door de tutorial Hoe Python 3 te installeren en een programmeeromgeving in te stellen voor jouw computer te volgen.
• Basiskennis van het Django-webframework, die je kunt vinden in onze serie over Django-ontwikkeling.

Stap 1 — Het opzetten van de ontwikkelomgeving

In deze stap ga je je ontwikkelingsomgeving voor de Django-app instellen. Je zult een virtuele omgeving activeren en de afhankelijkheden van het project installeren.

Eerst maak je een nieuwe map en ga je er naartoe. Deze tutorial maakt gebruik van Django-Allauth:

mkdir Django-Allauth
cd Django-Allauth

Zorg ervoor dat je deze map gebruikt voor de rest van deze tutorial.

Volgende, maak een virtuele omgeving met behulp van Pipenv, een pakketgereedschap voor Python. Installeer eerst pipenv:

pip3 install pipenv 

Vervolgens, activeer de virtuele omgeving:

pipenv shell  

Installeer daarna de afhankelijkheden die je zult gebruiken voor ontwikkeling (django en django-allauth) met behulp van pipenv:

pipenv install django
pipenv install django-allauth

Je hebt nu je ontwikkelingsomgeving ingesteld. Vervolgens ga je je Django-toepassing ontwikkelen.

Stap 2 — Je Django Toepassing Creëren

In deze stap maak je een eenvoudige één pagina Django-toepassing om te gebruiken met django-allauth authenticatie.

De eerste stap bij het maken van je toepassing is het creëren van het projecttoepassing, genaamd Authentication in deze handleiding:

django-admin startproject Authentication

Vervolgens, navigeer naar het pad van de projectmap en creëer een app voor je toepassing; deze handleiding gebruikt main:

cd Authentication
python manage.py startapp main

In de map van het project, gebruik nano of je favoriete teksteditor om settings.py te openen om te bewerken:

nano Authentication/settings.py

Voeg aan de lijst van geïnstalleerde apps de main app toe zoals getoond:

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main', # nieuwe app
]

Aangezien we slechts één pagina renderen voor de website, is het niet nodig om wijzigingen aan te brengen in het models.py bestand.

Volgende, open het urls.py bestand van het project om te bewerken en voer de volgende wijzigingen door:

from  django.contrib  import  admin
from  django.urls  import  path, include

urlpatterns = [
path('', include('main.urls')),
path('admin/', admin.site.urls),
]

Het urls.py bestand wordt gebruikt voor het routeren van Django apps.

Vervolgens, in de main app, maak een ander urls.py bestand aan en voeg de volgende regels toe:

from  django.urls  import  path
from . import views 

urlpatterns = [
path('', views.homepage, name='homepage'),
]

Dit nieuwe urls.py bestand wordt gebruikt om de bestanden van de main app te routeren.

Daarna, open het views.py bestand en voeg de volgende regels toe:

from  django.shortcuts  import  render

def  homepage(request):
    return  render(request=request,
    template_name= 'home.html',)

Het views.py bestand wordt gebruikt om de home.html pagina in de template directory te renderen.

Vervolgens, in de hoofdmap van het project (Authentication), maak een nieuwe map genaamd templates aan. In de templates map, maak een HTML-pagina genaamd home.html aan en voeg de volgende regels toe:

<html>
    <head>
        <style>
        h3 {text-align: center;}
        p {text-align: center;}
        </style>
    </head>
    <body>        
    <!-- Gecompileerde en geminifieerde CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Gecompileerde en geminifieerde JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            
        <nav>
            <div class="nav-wrapper"style="background-color: teal">
              <a href="#" class="brand-logo">Django-Allauth</a>
            </div>
          </nav>
        <h3 style=center>Welcome Home</h3>
        <div class="row">
            <div class="col s12 m6">
              <div class="card whitedarken-1">
                <div class="card-content blue-text">
                  <span class="card-title">Lorem Ipsum</span>
                  <p>{% lorem 1 p %}</p>
                </div>
              </div>
            </div>  
            <div class="col s12 m6">
              <div class="card white darken-1">
                <div class="card-content blue'-text">
                  <span class="card-title">Lorem Ipsum</span>
                  <p>{% lorem 1 p %}</p>
                </div>
              </div>
            </div>          
          </div>
          <div class="container text-dark mt-5">
            <div class="row justify-content-md-center">
              <div class="col md-5 p-3">
                {% if user.is_authenticated%}
                <p>Welcome, {{user.username}}</p>
                <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>
                {%else%}
                <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>
                {%endif%}
              </div>
            </div>
          </div>
    </body>
</html>

Deze demowebsite bevat voorbeeldtekst die wordt weergegeven in kaarten en een inloggebied dat wordt gebruikt voor authenticatie in een later stadium.

De webpagina is gestileerd met behulp van Materialize CDN, een gratis en open-source content delivery front-end framework gebaseerd op Material Design. Het helpt bij het laden van Materialize CSS, JavaScript en jQuery bibliotheken om mooie en responsieve projecten te maken. Zorg ervoor dat je een internetverbinding hebt zodat de CDN de stylingbestanden kan laden.

Vanuit het map pad, Django-Allauth/Authentication, start de webapplicatie met behulp van de volgende opdracht:

python manage.py runserver

Je zult een uitvoer zien die vergelijkbaar is met het volgende:

Output
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2022 - 13:35:20
Django version 4.0.4, using settings 'Authentication.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Navigeer naar de URL http://127.0.0.1:8000/. Je zou een website moeten zien die er zo uitziet:

De voorbeeldwebsite toont opvultekst en bevat een login-gedeelte onderaan. Zodra je authenticatie hebt ingesteld, zul je later in een stap gebruikmaken van de Login-link op de webpagina.

In deze stap heb je een one-page applicatie gebouwd. Vervolgens zul je nu authenticatie afhandelen met behulp van django-allauth.

Stap 3 — Configuratie van django-allauth

Om te authenticeren met django-allauth, moet je het eerst instellen. Dit wordt gedaan door een paar wijzigingen aan te brengen in de bestanden van het project.

Open Authentication/settings.py om te bewerken. Voeg onder INSTALLED_APPS de gemarkeerde regels toe om de django-allauth-apps en DigitalOcean als de sociale aanmeldingsprovider te registreren:

INSTALLED_APPS = [
    
    # Zorg ervoor dat je deze vereiste apps toevoegt
    'django.contrib.sites',
	  # Django-allauth apps
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # Sociale/externe aanmeldingsprovider voor Digital Ocean
    'allauth.socialaccount.providers.digitalocean',
]

Vervolgens, update de TEMPLATES-sectie zoals getoond:

[label Django-Allauth/Authentication/Authentication/settings.py]  
# Specificaties van contextprocessors:
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
        'context_processors': [         
	 'django.template.context_processors.request',
            ],
        },
    },
]

De nieuwe regel behandelt HTTP-verzoeken vanuit Django-Allauth.

Vervolgens maakt u een sectie voor AUTHENTICATION_BACKENDS aan en voegt u de volgende regels toe:

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
	  'allauth.account.auth_backends.AuthenticationBackend',
    ]

De eerste regel wordt gebruikt om een gebruiker in te loggen met een gebruikersnaam via het Django-beheerdersdashboard, wat u in een later stap zult doen. De tweede regel wordt gebruikt voor django-allauth-specifieke authenticatiemethoden, zoals inloggen via een OAuth-provider.

Voeg vervolgens twee authenticatieredirects toe zoals weergegeven:

LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

Deze regels leiden de gebruiker om naar de startpagina na authenticatie en na het uitloggen van de website.

De laatste bewerking aan settings.py is het instellen van de ID van de URL van uw site. Voeg aan het einde van uw bestand de volgende regel toe:

# Stelt de ID van de URL van uw site in. 
SITE_ID =1

Deze regel specificeert de database-ID van het Site-object dat is gekoppeld aan het settings.py-bestand.

Sla uw bestand op en sluit het af.

Vervolgens opent u het hoofdbestand urls.py voor bewerking. Voeg het pad naar de apps van Allauth toe zoals hieronder:

urlpatterns = [
	...
	path('accounts/', include('allauth.urls')),
]

Deze nieuwe regel wordt gebruikt om het URL-bestand van de allauth-app te routeren. De django-allauth-app wordt geleverd met een reeks URL’s voor zijn HTML-pagina’s. Enkele URL’s die door allauth worden aangeboden zijn onder andere: account_login, account_logout, account_set_password, enzovoort. Raadpleeg de productdocumentatie van django-allauth voor meer informatie.

Sla uw bestand op en sluit het af.

In deze stap stel je django-allauth in op je applicatie en ben je klaar om het te gebruiken voor authenticatie.

Stap 4 – Toevoegen van een externe authenticatieprovider

In deze stap voeg je externe authenticatie toe aan je Django-app met behulp van django-allauth. Er zijn veel externe authenticatieproviders die je kunt gebruiken met django-allauth, waaronder sociale logins van Google, Facebook, Twitter en anderen die vermeld staan in de django-allauth lijst van providers.

Voor deze tutorial gebruik je DigitalOcean als je sociale login. Om een ​​authenticatieprovider zoals DigitalOcean toe te voegen, moet je ze eerst registreren.

Log in op je DigitalOcean-account en ga naar het DigitalOcean-cloudplatform, waar je toegang hebt tot een dashboard dat er zo uitziet:

Klik op de API-knop links op het dashboard om je OAuth-toepassing te maken. Op het Applicaties & API-dashboard klik je op de knop OAuth-toepassing om toegang te krijgen tot de OAuth-registratie voor je site. Je ziet een dashboard dat er zo uitziet:

Vervolgens klikt u op de knop OAuth-toepassing registreren om de registratie van uw app’s OAuth-toepassing te starten. Er verschijnt een pop-upformulier:

Voer de project naam in (Django-Allauth) en elke beschrijving die u wilt. Voor de sectie Startpagina-URL invoeren, voert u een van de volgende URL’s in:

• http://127.0.0.1:8000
• http://localhost:8000

In de sectie Callback-URL invoeren, voert u een van de volgende omleidings-URL’s in:

• http://127.0.0.1:8000/accounts/digitalocean/login/callback/
• http://localhost:8000/accounts/digitalocean/login/callback/

Nadat u de projectgegevens hebt ingevoerd, klikt u op OAuth-toepassing registreren om de wijzigingen op te slaan. U wordt dan teruggeleid naar het dashboard van de toepassing met uw gemaakte toepassing zoals hieronder weergegeven:

Klik op de naam van de toepassing om toegang te krijgen tot de Client-ID en Client-geheim:

Kopieer en bewaar deze gegevens voor later gebruik.

Nadat u de API op DigitalOcean hebt ingesteld, kunt u deze nu toevoegen aan het beheerderspaneel van uw Django-toepassing. Om toegang te krijgen tot het Django-beheerderspaneel, moet u eerst een supergebruiker hebben, die u kunt maken met de volgende opdracht:

python manage.py createsuperuser

Voer de gevraagde gegevens in en start de server opnieuw.

Open het beheerderspaneel via de URL http://127.0.0.1:8000/admin/. Log in met uw supergebruikersgegevens en u krijgt toegang tot het beheerdersdashboard dat er als volgt uitziet:

In het linkerpaneel klikt u op Websites, en vervolgens op Website toevoegen + om een bestaande site te bewerken (example.com) of een nieuwe toe te voegen met http://127.0.0.1:8000 zoals hieronder weergegeven:

Deze configuratie stelt de URL van uw site’s server in waarop de authenticatie van DigitalOcean zal worden geïmplementeerd. In dit geval is het http://127.0.0.1:8000.

Klik op Opslaan.

Navigeer vervolgens terug naar het hoofddashboard door op Startpagina te klikken. Onder de Sociale accounts-sectie, klik op Sociale toepassingen, en klik dan op Toepassing toevoegen +. Gebruik de gegevens die u hebt gekopieerd vanuit de DigitalOcean Console, voer de vereiste gegevens in voor de dienstverlener, naam van de app, cliënt-ID en geheime sleutel. Onder Websites, selecteer de zojuist aangemaakte site onder Beschikbare sites en klik op de pijl (—>) om deze naar het paneel Geselecteerde sites te verplaatsen. Klik op de knop Opslaan om de gegevens op te slaan.

Deze configuratie wordt gebruikt om de sociale login-provider te verbinden door gebruik te maken van de Client-ID en de Geheime sleutel, die respectievelijk worden gebruikt als openbare en vertrouwelijke identificatoren van uw applicatie. Ze worden gebruikt om uw applicatie te authenticeren en verzoeken naar de API’s van DigitalOcean te maken.

In deze stap heb je DigitalOcean geconfigureerd als de derde partij authenticatieprovider voor je Django app. In de laatste stap log je in op je site met behulp van je DigitalOcean-account.

Stap 5 — Authenticatie testen

In deze stap log je in op je Django-site met je DigitalOcean-account. Log eerst uit als beheerder en navigeer naar de aanmeldpagina (http://127.0.0.1:8000/accounts/login/):

Klik op de DigitalOcean link om in te loggen met DigitalOcean. (Zoals weergegeven in de screenshot, een andere manier om te authenticeren is door je aan te melden met een gebruikersnaam en een wachtwoord.)

Op het volgende scherm klik je op Doorgaan. Er verschijnt een nieuwe pagina waar je je DigitalOcean Team-account moet selecteren en op de knop Applicatie autoriseren moet klikken.

Authorisatie is het proces waarbij een persoon de mogelijkheid krijgt om toegang te krijgen tot een bron. In dit geval verleen je je website toegang tot je inloggegevens van DigitalOcean om je te authenticeren.

Na het inloggen zou je je startpagina moeten zien zoals hieronder weergegeven:

Na een succesvolle login worden je gebruikersnaam en de Uitloggen link weergegeven op de website.

In deze stap heb je je authenticatieconfiguratie getest door in te loggen op je site met DigitalOcean-inloggegevens.

Conclusie

In deze tutorial heb je een Django-applicatie gebouwd die sociale authenticatie afhandelt met django-allauth. Je hebt een DigitalOcean sociale login geïntegreerd en getest door in te loggen op je site. Je kunt toegang krijgen tot de projectcode op GitHub.

Als volgende stap zou je django-allauth kunnen gebruiken om een van je andere Django-toepassingsprojecten te authenticeren met een van de django-allauth providers. Voor meer informatie over Django-authenticatie met django-allauth, bekijk de officiële documentatie van Django-Allauth en de officiële documentatie van Django over authenticatie.

Je kunt ook stijl toevoegen aan de allauth pagina’s, die een basisstandaardstijl hebben. Om stijl toe te voegen aan de allauth pagina’s, kun je het django-allauth project klonen van GitHub en de django-allauth/allauth/templates map uit het gekloonde repository gebruiken om je pagina’s te stylen.