Wie man Django-Apps mit django-allauth authentifiziert

Tutorials
Django

Der Autor hat den Free and Open Source Fund ausgewählt, um eine Spende im Rahmen des Write for DOnations-Programms zu erhalten.

Einführung

Die Authentifizierung ist der Prozess der Überprüfung von authentischen oder registrierten Benutzern im System, der dazu beiträgt, Ihre Softwareanwendungen vor unbefugtem Zugriff zu schützen. Es gibt mehrere Techniken, um Benutzer zu authentifizieren, wie z.B. Benutzername/Passwort-Verifikation, biometrische Merkmale von Menschen oder Bildpasswörter. Im Django-Web-Framework kann die Authentifizierungsverarbeitung entweder fest codiert oder Sie können fertige Module wie django-allauth, django-rest-social-auth, django-registration und mehr verwenden.

django-allauth ist ein integrierter Satz von Django-Anwendungen, die sich mit der Kontenauthentifizierung, -registrierung, -verwaltung und der Authentifizierung von Drittanbieter-(sozialen) Konten befassen. Es ist eines der beliebtesten Authentifizierungs-Module aufgrund seiner Fähigkeit, sowohl lokale als auch soziale Anmeldungen zu verarbeiten. Sie können Unterstützung für zusätzliche OAuth/OAuth2-Anbieter mit der gemeinsamen Codebasis der App hinzufügen. Es behandelt nicht nur die Authentifizierungslogik, sondern ist auch anpassbar, um Ihren Designanforderungen gerecht zu werden.

In diesem Tutorial werden Sie eine Django-Anwendung erstellen, die django-allauth verwendet, um sich mit einem DigitalOcean-Konto anzumelden.

Voraussetzungen

Für dieses Tutorial benötigen Sie:

Schritt 1 — Einrichten der Entwicklungsumgebung

In diesem Schritt richten Sie Ihre Django-App-Entwicklungsumgebung ein. Sie werden eine virtuelle Umgebung aktivieren und die Abhängigkeiten des Projekts installieren.

Erstellen Sie zunächst ein neues Verzeichnis und wechseln Sie in dieses. Dieses Tutorial verwendet Django-Allauth:

  1. mkdir Django-Allauth

  2. cd Django-Allauth

Stellen Sie sicher, dass Sie dieses Verzeichnis für den Rest dieses Tutorials verwenden.

Als nächstes erstellen Sie eine virtuelle Umgebung mit Pipenv, einem Paketierungstool für Python. Installieren Sie zunächst pipenv:

  1. pip3 install pipenv

Aktivieren Sie als nächstes die virtuelle Umgebung:

pipenv shell

Installieren Sie anschließend die Abhängigkeiten, die Sie für die Entwicklung verwenden werden (django und django-allauth) mit pipenv:

  1. pipenv install django

  2. pipenv install django-allauth

Sie haben nun Ihre Entwicklungsumgebung eingerichtet. Als nächstes werden Sie Ihre Django-Anwendung entwickeln.

Schritt 2 — Erstellen Ihrer Django-Anwendung

In diesem Schritt erstellen Sie eine einfache Django-Anwendung mit einer Seite zur Verwendung der Authentifizierung von django-allauth.

Der erste Schritt zur Erstellung Ihrer Anwendung besteht darin, die Projektanwendung zu erstellen, die in diesem Tutorial Authentifizierung genannt wird:

  1. django-admin startproject Authentication

Rufen Sie anschließend den Pfad des Projektverzeichnisses auf und erstellen Sie eine App für Ihre Anwendung. Dieses Tutorial verwendet main:

  1. cd Authentication

  2. python manage.py startapp main

Im Verzeichnis des Projekts verwenden Sie nano oder Ihren bevorzugten Texteditor, um settings.py zu öffnen und zu bearbeiten:

  1. nano Authentication/settings.py

Fügen Sie der Liste der installierten Apps die App main hinzu, wie gezeigt:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main', # neue App
]

Da wir eine einzelne Seite für die Website rendern, ist es nicht erforderlich, Änderungen an der Datei models.py vorzunehmen.

Als nächstes öffnen Sie die Datei urls.py des Projekts zum Bearbeiten und führen Sie die folgenden Änderungen durch:

Django-Allauth/Authentication/Authentication/urls.py
from  django.contrib  import  admin
from  django.urls  import  path, include

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

Die Datei urls.py wird zum Routen von Django-Apps verwendet.

Erstellen Sie als Nächstes in der App main eine weitere Datei urls.py und fügen Sie die folgenden Zeilen hinzu:

Django-Allauth/Authentication/main/urls.py
from  django.urls  import  path
from . import views 

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

Diese neue Datei urls.py wird verwendet, um die Dateien der App main zu routen.

Öffnen Sie anschließend die Datei views.py und fügen Sie die folgenden Zeilen hinzu:

Django-Allauth/Authentication/main/views.py
from  django.shortcuts  import  render

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

Die Datei views.py wird verwendet, um die Seite home.html im Verzeichnis der Vorlagen zu rendern.

Erstellen Sie als Nächstes im Stammverzeichnis des Projekts (Authentication) ein neues Verzeichnis namens templates. Erstellen Sie im Verzeichnis templates eine HTML-Seite namens home.html und fügen Sie die folgenden Zeilen hinzu:

Authentication/templates/home.html
  1. 

  2. <html>

  3.     <head>

  4.         <style>

  5.         h3 {text-align: center;}

  6.         p {text-align: center;}

  7.         </style>

  8.     </head>

  9.     <body>        

  10.     <!-- Kompiliertes und minimiertes CSS -->

  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  12. 

  13.     <!-- Kompiliertes und minimiertes JavaScript -->

  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  15.             

  16.         <nav>

  17.             <div class="nav-wrapper"style="background-color: teal">

  18.               <a href="#" class="brand-logo">Django-Allauth</a>

  19.             </div>

  20.           </nav>

  21.         <h3 style=center>Welcome Home</h3>

  22.         <div class="row">

  23.             <div class="col s12 m6">

  24.               <div class="card whitedarken-1">

  25.                 <div class="card-content blue-text">

  26.                   <span class="card-title">Lorem Ipsum</span>

  27.                   <p>{% lorem 1 p %}</p>

  28.                 </div>

  29.               </div>

  30.             </div>  

  31.             <div class="col s12 m6">

  32.               <div class="card white darken-1">

  33.                 <div class="card-content blue'-text">

  34.                   <span class="card-title">Lorem Ipsum</span>

  35.                   <p>{% lorem 1 p %}</p>

  36.                 </div>

  37.               </div>

  38.             </div>          

  39.           </div>

  40.           <div class="container text-dark mt-5">

  41.             <div class="row justify-content-md-center">

  42.               <div class="col md-5 p-3">

  43.                 {% if user.is_authenticated%}

  44.                 <p>Welcome, {{user.username}}</p>

  45.                 <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>

  46.                 {%else%}

  47.                 <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>

  48.                 {%endif%}

  49.               </div>

  50.             </div>

  51.           </div>

  52.     </body>

  53. </html>

Diese Demo-Webseite enthält Beispiertext, der in Karten gerendert wird, und einen Anmeldebereich, der in einem späteren Schritt für die Authentifizierung verwendet wird.

Die Webseite wird mithilfe von Materialize CDN gestaltet, einem kostenlosen und quelloffenen Content-Delivery-Frontend-Framework, das auf Material Design basiert. Es hilft dabei, Materialize CSS, JavaScript und jQuery-Bibliotheken zu laden, um schöne und reaktionsschnelle Projekte zu erstellen. Stellen Sie sicher, dass Sie eine Internetverbindung haben, damit die CDN die Styling-Dateien laden kann.

Vom Verzeichnispfad Django-Allauth/Authentication starten Sie die Web-App mit dem folgenden Befehl:

  1. python manage.py runserver

Sie werden eine Ausgabe ähnlich der folgenden sehen:

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.

Navigieren Sie zur URL http://127.0.0.1:8000/. Sie sollten eine Website sehen, die so aussieht:

Die Beispielwebsite zeigt Platzhaltertext an und enthält einen Anmeldebereich unten. Sobald Sie die Authentifizierung eingerichtet haben, werden Sie den Anmelden-Link auf der Webseite in einem späteren Schritt verwenden.

In diesem Schritt haben Sie eine Einzelseitenanwendung erstellt. Als nächstes werden Sie jetzt die Authentifizierung mit django-allauth behandeln.

Schritt 3 — Konfiguration von django-allauth

Um sich mit django-allauth anzumelden, müssen Sie es zunächst einrichten. Dies erfolgt durch einige Änderungen an den Dateien des Projekts.

Öffnen Sie Authentication/settings.py zum Bearbeiten. Fügen Sie unter INSTALLED_APPS die hervorgehobenen Zeilen hinzu, um die django-allauth-Apps und DigitalOcean als den Anbieter für die soziale Anmeldung zu registrieren:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
    
    # Stellen Sie sicher, dass diese erforderlichen Apps hinzugefügt werden
    'django.contrib.sites',
	  # Django-Allauth-Apps
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # Sozialer/Drittanbieter-Login-Anbieter für Digital Ocean
    'allauth.socialaccount.providers.digitalocean',
]

Aktualisieren Sie als Nächstes den Abschnitt TEMPLATES wie gezeigt:

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

Die neue Zeile bearbeitet HTTP-Anfragen von Django-Allauth.

Als nächstes erstellen Sie einen Abschnitt für AUTHENTICATION_BACKENDS und fügen Sie die folgenden Zeilen hinzu:

Django-Allauth/Authentication/Authentication/settings.py

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

Die erste Zeile wird verwendet, um einen Benutzer über den Benutzername über das Django-Admin-Dashboard anzumelden, was Sie später tun werden. Die zweite Zeile wird für django-allauth-spezifische Authentifizierungsmethoden verwendet, wie z.B. eine Anmeldung über einen OAuth-Anbieter.

Fügen Sie als nächstes zwei Authentifizierungs-Weiterleitungen hinzu, wie gezeigt:

Django-Allauth/Authentication/Authentication/settings.py

LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

Diese Zeilen leiten den Benutzer nach der Authentifizierung und nach dem Ausloggen von der Website zur Startseite weiter.

Die letzte Bearbeitung in der settings.py-Datei besteht darin, die ID der URL Ihrer Website festzulegen. Fügen Sie am Ende Ihrer Datei die folgende Zeile hinzu:

Django-Allauth/Authentication/Authentication/settings.py
# Legt die ID der URL Ihrer Website fest. 
SITE_ID =1

Diese Zeile gibt die Datenbank-ID des Site-Objekts an, das mit der settings.py-Datei verbunden ist.

Speichern und schließen Sie Ihre Datei.

Öffnen Sie als nächstes die Wurzel-urls.py-Datei zum Bearbeiten. Fügen Sie den Pfad zu den Allauth-Apps wie folgt hinzu:

Django-Allauth/Authentication/Authentication/urls.py

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

Diese neue Zeile wird verwendet, um die URL-Datei der allauth-App zu routen. Die django-allauth-App wird mit einer Reihe von URLs für ihre HTML-Seiten geliefert. Einige von allauth bereitgestellte URLs sind: account_login, account_logout, account_set_password und andere. Schauen Sie in die django-allauth-Produktdokumentation für weitere Informationen.

Speichern und schließen Sie Ihre Datei.

In diesem Schritt richten Sie django-allauth in Ihrer Anwendung ein und sind bereit, es für die Authentifizierung zu verwenden.

Schritt 4 — Hinzufügen eines Drittanbieter-Authentifizierungsanbieters

In diesem Schritt fügen Sie der Django-App die Authentifizierung über Drittanbieter mit django-allauth hinzu. Es gibt viele Drittanbieter-Authentifizierungsanbieter, die Sie mit django-allauth verwenden können, einschließlich sozialer Logins von Google, Facebook, Twitter und anderen, die in der django-allauth-Liste der Anbieter aufgeführt sind.

Für dieses Tutorial verwenden Sie DigitalOcean als Ihren sozialen Login. Um einen Authentifizierungsanbieter wie DigitalOcean hinzuzufügen, müssen Sie sie zunächst registrieren.

Melden Sie sich bei Ihrem DigitalOcean-Konto an und navigieren Sie zur DigitalOcean-Cloud-Plattform, wo Sie auf ein Dashboard zugreifen, das so aussieht:

Klicken Sie auf die Schaltfläche API auf der linken Seite des Dashboards, um Ihre OAuth-Anwendung zu erstellen. Auf dem Dashboard Anwendungen & API klicken Sie auf die Schaltfläche OAuth-Anwendung, um die OAuth-Registrierung für Ihre Website zu öffnen. Sie sehen ein Dashboard, das so aussieht:

Als nächstes klicken Sie auf die Schaltfläche „OAuth-Anwendung registrieren“, um die Registrierung Ihrer App für OAuth zu starten. Ein Popup-Formular wird angezeigt:

Geben Sie den Projekt Namen (Django-Allauth) und eine beliebige Beschreibung ein. Für den Abschnitt „Homepage-URL eingeben“ geben Sie eine der folgenden URLs ein:

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

Für den Abschnitt „Callback-URL eingeben“ geben Sie eine der folgenden Weiterleitungs-URLs ein:

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

Hinweis: Zu Demonstrationszwecken verwendet dieses Tutorial localhost:8000 oder 127.0.0.1:8000. Bei der Bereitstellung einer App in der Produktion sollten die URLs geändert werden, um den Domainnamen einzuschließen.

Nachdem Sie die Projektdaten eingegeben haben, klicken Sie auf „OAuth-Anwendung registrieren“, um die Änderungen zu speichern. Anschließend werden Sie zurück zum Dashboard der Anwendung weitergeleitet, wo Ihre Anwendung wie folgt erstellt wurde:

Klicken Sie auf den Namen der Anwendung, um auf die Client-ID und das Client-Geheimnis zuzugreifen:

Kopieren und speichern Sie diese Details für späteren Gebrauch.

Nachdem Sie die API auf DigitalOcean eingerichtet haben, können Sie sie nun dem Admin-Panel Ihrer Django-Anwendung hinzufügen. Um auf das Django-Admin-Panel zuzugreifen, benötigen Sie zunächst einen Superbenutzer, den Sie mit folgendem Befehl erstellen können:

  1. python manage.py createsuperuser

Geben Sie die angeforderten Details ein und starten Sie den Server erneut.

Zugriff auf das Admin-Panel über die URL http://127.0.0.1:8000/admin/. Melden Sie sich mit Ihren Superuser-Daten an, um auf das Admin-Dashboard zuzugreifen, das wie folgt aussieht:

Im linken Panel klicken Sie auf Websites und dann auf Website hinzufügen +, um eine vorhandene Website zu bearbeiten (example.com) oder eine neue hinzuzufügen, die http://127.0.0.1:8000 verwendet, wie unten gezeigt:

Diese Konfiguration legt die URL Ihres Servers fest, auf dem die Authentifizierung von DigitalOcean implementiert wird. In diesem Fall ist es http://127.0.0.1:8000.

Klicken Sie auf Speichern.

Navigieren Sie als nächstes zurück zum Hauptdashboard, indem Sie auf Startseite klicken. Im Abschnitt Soziale Konten klicken Sie auf Soziale Anwendungen und dann auf Soziale Anwendung hinzufügen +. Geben Sie die erforderlichen Details für den Dienstanbieter, den Namen der App, die Client-ID und den Client-Geheimschlüssel ein, die Sie aus der DigitalOcean-Konsole kopiert haben. Unter Websites wählen Sie die gerade erstellte Website unter Verfügbare Websites aus und klicken Sie auf den Pfeil (—>), um sie in das Panel Ausgewählte Websites zu verschieben. Klicken Sie auf die Schaltfläche Speichern, um die Details zu speichern.

Diese Konfiguration wird verwendet, um den Social-Login-Anbieter mithilfe der Client-ID und des Geheimschlüssels zu verbinden, die als öffentlicher bzw. vertraulicher Bezeichner Ihrer Anwendung dienen. Sie werden zur Authentifizierung Ihrer Anwendung verwendet und um Anfragen an die APIs von DigitalOcean zu stellen.

In diesem Schritt haben Sie DigitalOcean als Drittanbieter-Authentifizierungsanbieter für Ihre Django-App konfiguriert. Im letzten Schritt werden Sie sich mit Ihrem DigitalOcean-Konto auf Ihrer Website anmelden.

Schritt 5 — Authentifizierung testen

In diesem Schritt werden Sie sich auf Ihrer Django-Website mit Ihrem DigitalOcean-Konto anmelden. Melden Sie sich zunächst als Administrator ab und navigieren Sie zur Anmeldeseite (http://127.0.0.1:8000/accounts/login/):

Klicken Sie auf den DigitalOcean-Link, um sich mit DigitalOcean anzumelden. (Wie im Screenshot gezeigt, können Sie sich alternativ auch mit einem Benutzernamen und einem Passwort anmelden.)

Auf der nächsten Seite klicken Sie auf Weiter. Es erscheint eine neue Seite, auf der Sie Ihr DigitalOcean-Teamkonto auswählen und auf die Schaltfläche Anwendung autorisieren klicken müssen.

Die Autorisierung ist der Prozess, bei dem einer Person die Berechtigung erteilt wird, auf eine Ressource zuzugreifen. In diesem Fall gewähren Sie Ihrer Website Zugriff auf Ihre Anmeldeinformationen von DigitalOcean, um Sie zu authentifizieren.

Nach der Anmeldung sehen Sie Ihre Startseite wie unten gezeigt:

Nach einer erfolgreichen Anmeldung werden Ihr Benutzername und der Abmelden-Link auf der Website angezeigt.

HINWEIS: Während dieses Vorgangs können Sie die Fehlermeldung erhalten, SocialApp matching query does not exist:

Dieses Problem tritt normalerweise auf, wenn Sie Ihre Seiten-ID-Nummer falsch referenzieren, zum Beispiel wenn Sie example.com als erste Seite auf Ihrer Website haben. Um es zu lösen, suchen Sie SITE_ID in settings.py und erhöhen Sie seinen Wert um 1, bis der Fehler verschwindet.

In diesem Schritt haben Sie Ihre Authentifizierungskonfiguration getestet, indem Sie sich mit den Anmeldedaten von DigitalOcean auf Ihrer Website angemeldet haben.

Fazit

In diesem Tutorial haben Sie eine Django-App erstellt, die die soziale Authentifizierung mithilfe von django-allauth behandelt. Sie haben eine DigitalOcean-Social-Login integriert und getestet, indem Sie sich auf Ihrer Website angemeldet haben. Sie können den Projektcode auf GitHub zugreifen.

Als nächsten Schritt könnten Sie django-allauth verwenden, um eine Authentifizierung für eines Ihrer anderen Django-Anwendungsprojekte mit einem der django-allauth-Anbieter durchzuführen. Für weitere Informationen zur Django-Authentifizierung mit django-allauth werfen Sie einen Blick auf die offizielle Dokumentation von Django-Allauth und die offizielle Dokumentation von Django zur Authentifizierung.

Sie könnten auch Styling zu den allauth-Seiten hinzufügen, die über ein grundlegendes Standardstyling verfügen. Um Style zu den allauth-Seiten hinzuzufügen, können Sie das django-allauth-Projekt von GitHub klonen und das Verzeichnis django-allauth/allauth/templates aus dem geklonten Repository verwenden, um Ihre Seiten zu stylen.

Source:
https://www.digitalocean.com/community/tutorials/how-to-authenticate-django-apps-using-django-allauth