Tutorial per creare un sito statico con sistema di autenticazione con React e Netlify Identity
Un Tutorial che spiega come è possibile aggiungere un sistema di autenticazione in un sito statico Netlify senza dover mettere mano al codice precedente usando React
Come agenzia utilizziamo di frequente Middleman in combinazione con DatoCMS per i nostri progetti, perché è sicuramente una delle soluzioni più semplici e veloci per costruire un sito web statico. Tutto funziona senza problemi con Middleman fino a non si ha a che fare con processi che richiedono una più complessa interazione dinamica, e il più richiesto è sicuramente la possibilità di autenticare degli utenti.
Poiché si tratta di un problema diffuso, abbiamo voluto condividere con il resto del mondo l'esperimento di integrazione al nostro solito stack di Netlify Identity, poiché si è rivelata una soluzione ordinata e di facile installazione. La comodità di usare React ha reso il tutto ancora più semplice eliminando il problema rimanere impigliati in Ajax e JQuery o di dover passare a generatori Javascript, come Gatsby. React è infatti uno strumento molto più semplice e duttile per gestire l'interazione dinamica, è abbastanza semplice da installare e può essere riutilizzato più volte per diversi progetti. Inoltre, dal momento che utilizziamo Netlify per hostare i nostri siti web statici abbiamo voluto dare una chance della sua feature Identity che permette la gestione di utenti e dell’ autenticazione.
L'esperimento è stato un successo e ora usiamo questa soluzione ampiamente a Cantiere Creativo.
Per riassumere, ecco il completo stack che abbiamo scelto per questo tutorial:
- Middleman come generatore, ma puoi usare il tuo preferito ;)
- React per creare un’interfaccia utente per la parte di autenticazione.
- Netlify per hostare il nostro sito web e Netlify Identity tramite la libreria GoTrue JS per gestire i nostri utenti iscritti.
- DatoCMS per gestire i contenuti.
- GoTrue API servizio API open-source per gestire le autenticazioni.
L'obiettivo
Per rendere più evidente l’effetto "prima e dopo", abbiamo clonato un fan site di "The Office" fatto con Middleman e DatoCMS che potete trovare tra gli esempi di siti di DatoCMS. Scarica il progetto originale qui. L'obiettivo è quello di rendere pagina “Seasons” accessibile solo a coloro che dispongono di un account, come se fosse una pagina di contenuti premium.
Ai fini del tutorial dimostreremo solo come mostrare/nascondere il link alla pagina in questione, ma il passo successivo sarebbe quello di rendere la discriminazione più efficiente tramite una funzione lambda che restituisce il contenuto via React solo per l’ utente autenticato. Questo post non vuole andare in profondità con i tecnicismi, ma mira a condividere la logica dietro la nostra decisione di utilizzare questo stack e a condividere un po ' di conoscenza con un esempio funzionante :)
Il risultato finale sarà più o meno così
r>
Prego, fornisca i suoi dati
Netlify offre due opzioni per gestire Identity, un widget per una soluzione rapida, e una libreria open source GoTrue JS, che, fondamentalmente, espone i metodi utilizzati dal widget. Il grande vantaggio della libreria, in opposizione al widget,è che permette di disegnare la propria interfaccia, restando in linea con l’ identità di brand e garantendo la continuità nell’esperienza complessiva dell’utente senza aggiungere peso alla pagina.
Netlify e il suo setup super veloce
Abbiamo preferito essere fedeli al nostro web-designer e abbiamo scelto il client di Netlify Identity.
yarn add gotrue-js
Per consentire a Netlify di gestire gli utenti del tuo sito devi attivare “Identity” dal tuo account Netlify.
Ai fini del tutorial abbiamo attivato l’opzione che permette l’iscrizione senza email di conferma e dimostreremo solo i metodi di signup/signin, ma invitiamo a sperimentare con tutte le possibilità che offre GoTrue JS.
React all’assalto
Indipendentemente da quale generatore abbiate scelto lasceremo che sia React a realizzare l’interfaccia discriminando chi può visualizzare i nostri contenuti premium.
Quindi fondamentalmente affidiamo a React i seguenti compiti:
- Il Rendering di un bottone signin/logout.
- Mostrare un modulo di iscrizione/registrazione che consenta all'utente di autenticarsi.
- Nascondere/mostrare il contenuto premium all'utente.
In javascript creare una cartella denominata "auth" per separare i file React dagli altri script. Poi un index.js file che permetta a React di “agganciarsi” al nostro html statico.
import ReactDOM from "react-dom";
import React from "react";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("react-root"));Il tree dovrebbe avere una struttura simile
|- source
...
|- javascripts
|- auth
|- App.js
|- AuthBar.js
|- AuthForm.js
|- index.jsPrima di attivare React dovreste configurare Webpack e Babel, qui trovate un tutorial per un setup minimale.
Routing
Il file App.js servirà come router della nostra React app e per restituire il componente appropriato seguendo la logica di autenticazione. Per farlo utilizziamo React Router.
AuthBar.js si occuperà di mostrare il menu di autenticazione come parte della barra di navigazione principale, tramite React portal. Quindi, nel nostro navbar.html dovremo aggiungere un div con un id (“#header-auth-navbar”) per “agganciare” il componente React.
header.main-navigation ... = link_to "Homepage", "/index.html" #header-auth-navbar
Controllare se un utente è loggato
Per prima cosa abbiamo bisogno di implementare un metodo che verifichi se l’utente è loggato, in modo da poter discriminare il contenuto mostrato. Per farlo creiamo un componente HOC che stia in ascolto sull’utente corrente aggiorni il DOM di conseguenza.
In aggiunta abbiamo bisogno di mostrare il link alla pagina “Seasons” solo agli utenti autenticati. Per farlo ci basta controllare la props.currentUser passata dal nostro componente HOC. Il link di sign in punterà alla rotta che abbiamo creato nel router, mentre il logout chiamerà il metodo GoTrue JS .logout() che elimina la sessione corrente e lo faremo reindirizzare alla pagina iniziale.
Il form di autenticazione
La logica di un form di registrazione o autenticazione è simile anche se hanno bisotno di chiamate API differenti, quindi per ora tratteremo solo l’azione di sign in, mentre nel progetto di esempio divideremo le due azioni di signin/signup in base all’url. Useremo Formik per costruire il form, perché fornisce alcuni metodi utili per gestire lo stato del componente. Usando la funzione .onSubmit() di Formik, al momento dell’invio del form chiameremo il metodo .login() di GoTrueJS passandogli tre argomenti: e-mail, password e un terzo argomento che salva la sessione corrente (non documentato su Netlify docs). La query controllerà se esiste un utente con quella mail nel progetto Netlify e quindi si salverà una sessione con una data di scadenza, o, in caso contrario, salverà il messaggio di errore dello stato del componente. A quel punto è possibile printare l’errore verificando se esiste this.state.error.
auth.login(values.email, values.password, true)
.then(response => {
actions.setSubmitting(false);
Alert.success('You signed in successfully!');
this.props.history.push("/");
})
.catch(error => {
this.setState({error: error.json.error_description});
actions.setSubmitting(false);
});Come risultato una volta loggato l’utente dovrebbe vedere il link per il contenuto premium, un messaggio di benvenuto e il collegamento al logout.
In conclusione le potenzialità di introdurre un sistema di autenticazione in un sito statico sono molte. Tramite l’aggiunta di questa semplice logica si può cominciare a costruire un sito web complesso, partendo anche da questo esempio, con, per esempio, un’area admin, utenti premium, servizi etc. mantenendo tutti vantaggi di avere un sito web statico!
