Come autenticare le app Django usando django-allauth

L’autore ha selezionato il Fondo per il Software Libero e Open Source per ricevere una donazione come parte del programma Scrivi per le Donazioni.

Introduzione

L’autenticazione è il processo di verifica degli utenti autentici o registrati nel sistema, che aiuta a proteggere le tue applicazioni software dall’accesso non autorizzato. Ci sono diverse tecniche utilizzate per autenticare gli utenti come la verifica nome utente/password, le biometrie umane o le password immagine. Nel framework web Django, la gestione dell’autenticazione può essere codificata direttamente o è possibile utilizzare moduli già pronti come django-allauth, django-rest-social-auth, django-registration, e altro ancora.

django-allauth è un insieme integrato di applicazioni Django che si occupano dell’autenticazione degli account, della registrazione, della gestione e dell’autenticazione degli account di terze parti (social). È uno dei moduli di autenticazione più popolari grazie alla sua capacità di gestire sia i login locali che quelli sociali. È possibile aggiungere il supporto per provider OAuth/OAuth2 aggiuntivi con la base di codice comune dell’app. Non solo gestisce la logica dell’autenticazione, ma è anche personalizzabile per soddisfare le tue esigenze di design.

In questo tutorial, costruirai un’applicazione Django che utilizza django-allauth per l’autenticazione tramite un account DigitalOcean.

Prerequisiti

Per questo tutorial, avrai bisogno di:

• A DigitalOcean account. If you do not have one, sign up for a new account.
• Python 3.5+ installato sul tuo computer, che puoi fare seguendo il tutorial Come Installare Python 3 e Configurare un Ambiente di Programmazione per il tuo computer.
• Conoscenza di base del framework web Django, che puoi trovare nella nostra serie su Sviluppo Django.

Passo 1 — Configurazione dell’Ambiente di Sviluppo

In questo passaggio, configurerai l’ambiente di sviluppo per la tua app Django. Attiverai un ambiente virtuale e installerai le dipendenze del progetto.

Prima, crea una nuova directory e entra in essa. Questo tutorial utilizza Django-Allauth:

mkdir Django-Allauth
cd Django-Allauth

Assicurati di utilizzare questa cartella per il resto di questo tutorial.

Successivo, crea un ambiente virtuale utilizzando Pipenv, uno strumento di confezionamento per Python. Prima, installa pipenv:

pip3 install pipenv 

Successivamente, attiva l’ambiente virtuale:

pipenv shell  

Successivamente, installa le dipendenze che utilizzerai per lo sviluppo (django e django-allauth) utilizzando pipenv:

pipenv install django
pipenv install django-allauth

Hai ora finito di configurare il tuo ambiente di sviluppo. Successivamente, inizierai a sviluppare la tua applicazione Django.

Passaggio 2 — Creare la tua Applicazione Django

In questo passaggio, creerai una semplice applicazione Django a pagina singola da utilizzare con l’autenticazione django-allauth.

Il primo passo per creare la tua applicazione è creare l’applicazione del progetto, chiamata Authentication in questo tutorial:

django-admin startproject Authentication

Successivamente, accedi al percorso della directory del progetto e crea un’app per la tua applicazione; questo tutorial utilizza main:

cd Authentication
python manage.py startapp main

Nella directory del progetto, utilizza nano o il tuo editor di testo preferito per aprire settings.py per la modifica:

nano Authentication/settings.py

All’elenco delle app installate, aggiungi l’app main come mostrato:

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

Dato che stiamo renderizzando una singola pagina per il sito web, non c’è bisogno di apportare modifiche al file models.py.

Successivo, apri il file urls.py del progetto per modificarlo e apportare le seguenti modifiche:

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

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

Il file urls.py viene utilizzato per il routing delle app Django.

Successivamente, nell’app main, crea un altro file urls.py e aggiungi le seguenti righe:

from  django.urls  import  path
from . import views 

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

Questo nuovo file urls.py viene utilizzato per instradare i file dell’app main.

Successivamente, apri il file views.py e aggiungi le seguenti righe:

from  django.shortcuts  import  render

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

Il file views.py viene utilizzato per renderizzare la pagina home.html nella directory dei template.

Successivamente, nella cartella radice del progetto (Authentication), crea una nuova directory chiamata templates. All’interno della directory templates, crea una pagina HTML chiamata home.html e aggiungi le seguenti righe:

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

    <!-- JavaScript compilato e minificato -->
    <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>

Questa pagina web di demo include del testo campione visualizzato in schede e un’area di accesso da utilizzare con l’autenticazione in un passaggio successivo.

La pagina web è stilizzata utilizzando Materialize CDN, un framework front-end gratuito e open-source per la distribuzione di contenuti basato sul Material Design. Aiuta a caricare le librerie Materialize CSS, JavaScript e jQuery per realizzare progetti belli e reattivi. Assicurati di avere una connessione internet affinché il CDN possa caricare i file di stile.

Dalla directory Django-Allauth/Authentication, avvia l’applicazione web utilizzando il seguente comando:

python manage.py runserver

Vedrai un output simile al seguente:

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.

Naviga all’URL http://127.0.0.1:8000/. Dovresti vedere un sito web che assomiglia a questo:

Il sito di esempio mostra testo fittizio e include un’area di accesso in fondo. Una volta configurata l’autenticazione, utilizzerai il collegamento Login sulla pagina web in un passaggio successivo.

In questo passaggio, hai costruito un’applicazione monopagina. Ora, affronterai l’autenticazione utilizzando django-allauth.

Passaggio 3 — Configurazione di django-allauth

Per autenticarti utilizzando django-allauth, devi prima configurarlo. Ciò viene fatto apportando alcune modifiche ai file del progetto.

Apri Authentication/settings.py per modificarlo. Inserisci, sotto INSTALLED_APPS, le righe evidenziate per registrare le app di django-allauth e DigitalOcean come provider di accesso sociale:

INSTALLED_APPS = [
    
    # Assicurati di aggiungere queste app richieste
    'django.contrib.sites',
	  # App di Django-allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # Provider di accesso sociale/terzo per Digital Ocean
    'allauth.socialaccount.providers.digitalocean',
]

Successivamente, aggiorna la sezione TEMPLATES come mostrato:

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

Il nuovo codice gestisce le richieste HTTP da Django-Allauth.

Successivamente, crea una sezione per AUTHENTICATION_BACKENDS e aggiungi le seguenti righe:

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

La prima riga viene utilizzata per accedere a un utente tramite nome utente attraverso la dashboard di amministrazione di Django, che verrà eseguita in un passaggio successivo. La seconda riga è utilizzata per metodi di autenticazione specifici di django-allauth, come l’accesso tramite un provider OAuth.

Successivamente, aggiungi due reindirizzamenti per l’autenticazione come mostrato:

LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

Queste righe reindirizzano l’utente alla homepage dopo l’autenticazione e dopo il logout dal sito web.

L’ultima modifica a settings.py consiste nel impostare l’ID dell’URL del tuo sito. Alla fine del tuo file, aggiungi la seguente riga:

# Imposta l'ID dell'URL del tuo sito.
SITE_ID =1

Questa riga specifica l’ID del database dell’oggetto Site associato al file settings.py.

Salva e chiudi il file.

Successivamente, apri il file urls.py radice per la modifica. Aggiungi il percorso alle app Allauth come segue:

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

Questa nuova riga viene utilizzata per instradare il file URL dell’app allauth. L’app django-allauth fornisce un insieme di URL per le sue pagine HTML. Alcuni degli URL forniti da allauth includono: account_login, account_logout, account_set_password, tra gli altri. Consulta la documentazione del prodotto django-allauth per ulteriori informazioni.

Salva e chiudi il file.

In questo passaggio, configuri django-allauth sulla tua applicazione e sei pronto per usarlo per l’autenticazione.

Passaggio 4 — Aggiunta di un Provider di Autenticazione di Terze Parti

In questo passaggio, aggiungerai l’autenticazione di terze parti per la tua app Django usando django-allauth. Ci sono molti provider di autenticazione di terze parti che puoi utilizzare con django-allauth, inclusi accessi social da Google, Facebook, Twitter e altri elencati nell’elenco dei provider di django-allauth.

Per questo tutorial, utilizzerai DigitalOcean come accesso social. Per aggiungere un provider di autenticazione come DigitalOcean, prima devi registrarli.

Accedi al tuo account DigitalOcean e vai alla piattaforma cloud di DigitalOcean, dove accederai a un cruscotto che appare così:

Fai clic sul pulsante API a sinistra del cruscotto per creare la tua App OAuth. Sul cruscotto Applicazioni & API, fai clic sul pulsante Applicazione OAuth per accedere alla registrazione OAuth per il tuo sito. Vedrai un cruscotto che appare così:

Successivo, fare clic sul pulsante Registra App OAuth per avviare la registrazione dell’applicazione OAuth della tua app. Comparirà un modulo popup:

Inserisci il nome del progetto (Django-Allauth) e una descrizione a tua scelta. Per la sezione Inserisci URL della homepage, inserisci uno dei seguenti URL:

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

Nella sezione Inserisci URL di reindirizzamento, inserisci uno dei seguenti URL di reindirizzamento:

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

Dopo aver inserito le informazioni sul progetto, fai clic su Registra App OAuth per salvare le modifiche. Sarai quindi reindirizzato alla dashboard dell’applicazione con la tua applicazione creata come mostrato di seguito:

Fai clic sul nome dell’applicazione per accedere al ID client e al client secret:

Copia e salva questi dettagli per un utilizzo successivo.

Dopo aver configurato l’API su DigitalOcean, puoi ora aggiungerla al pannello di amministrazione della tua applicazione Django. Per accedere al pannello di amministrazione di Django, devi prima avere un superutente, che puoi creare utilizzando il seguente comando:

python manage.py createsuperuser

Inserisci i dettagli richiesti e avvia nuovamente il server.

Accedi al pannello di amministrazione utilizzando l’URL, http://127.0.0.1:8000/admin/. Accedi con i dettagli del superutente e accederai alla dashboard di amministrazione che appare come segue:

Nel pannello di sinistra, clicca su Siti, e poi su Aggiungi Sito + per modificare un sito esistente (example.com) o aggiungerne uno nuovo utilizzando http://127.0.0.1:8000 come mostrato di seguito:

Questa configurazione imposta l’URL del server del tuo sito dove verrà implementata l’autenticazione di DigitalOcean. In questo caso, è http://127.0.0.1:8000.

Fai clic su Salva.

Successivamente, torna alla dashboard principale cliccando su Home. Nella sezione Account Social, clicca su Applicazioni Social, e poi su Aggiungi Applicazione Social +. Utilizzando i dettagli copiati dalla Console di DigitalOcean, inserisci i dettagli richiesti per il fornitore del servizio, il nome dell’app, l’ID del cliente e la chiave segreta del cliente. Sotto Siti, seleziona il sito appena creato sotto Siti Disponibili e clicca sulla freccia (—>) per spostarlo nel pannello Siti Scelti. Clicca sul pulsante Salva per salvare i dettagli.

Questa configurazione è utilizzata per connettere il provider di accesso sociale utilizzando il ID Client e la Chiave Segreta, che vengono utilizzati come identificatore pubblico della tua applicazione e come identificatore confidenziale, rispettivamente. Vengono utilizzati per autenticare la tua applicazione e inviare richieste alle API di DigitalOcean.

In questo passaggio, hai configurato DigitalOcean come provider di autenticazione di terze parti per la tua app Django. Nello step finale, effettuerai l’accesso al tuo sito utilizzando il tuo account DigitalOcean.

Passaggio 5 — Test dell’Autenticazione

In questo passaggio, effettuerai l’accesso al tuo sito Django utilizzando il tuo account DigitalOcean. Prima di tutto, esci come amministratore e vai alla pagina di accesso (http://127.0.0.1:8000/accounts/login/):

Clicca sul link DigitalOcean per accedere utilizzando DigitalOcean. (Come mostrato nello screenshot, un altro modo per autenticarsi è registrarsi utilizzando un nome utente e una password.)

Nella schermata successiva, clicca su Continua. Apparirà una nuova pagina dove dovrai selezionare il tuo account Team di DigitalOcean e fare clic sul pulsante Autorizza applicazione.

L’autorizzazione è il processo di concessione di accesso a una risorsa a una persona. In questo caso, stai concedendo al tuo sito web l’accesso alle tue credenziali di accesso da DigitalOcean per autenticarti.

Dopo aver effettuato l’accesso, dovresti vedere la tua homepage come mostrato di seguito:

Dopo un accesso riuscito, il tuo nome utente e il link Esci saranno visualizzati sul sito web.

In questo passaggio, hai testato la configurazione di autenticazione accedendo al tuo sito utilizzando le informazioni di accesso di DigitalOcean.

Conclusione

In questo tutorial, hai creato un’app Django che gestisce l’autenticazione sociale utilizzando django-allauth. Hai incorporato un accesso sociale di DigitalOcean e lo hai testato accedendo al tuo sito. Puoi accedere al codice del progetto su GitHub.

Come prossimo passo, potresti utilizzare django-allauth per autenticare qualsiasi altro progetto di applicazione Django con qualsiasi dei fornitori di django-allauth. Per saperne di più sull’autenticazione Django con django-allauth, consulta la documentazione ufficiale di Django-Allauth e la documentazione ufficiale di Django sull’autenticazione.

Si potrebbe anche aggiungere dello stile alle pagine allauth, che hanno uno stile predefinito di base. Per aggiungere stile alle pagine allauth, è possibile clonare il progetto django-allauth da GitHub e utilizzare la directory django-allauth/allauth/templates dal repository clonato per stilizzare le tue pagine.