Come integrare il servizio di autenticazione Auth0 con un’applicazione React
Auth0 semplifica il processo di definizione dell’identità dell’utente nella tua app web. Fornisce funzionalità di autenticazione e autorizzazione sicure e personalizzabili tramite la sua API. Usalo e non dovrai preoccuparti di creare il tuo sistema di autenticazione da zero.
L’integrazione con Auth0 semplifica l’inclusione di un’autenticazione affidabile nella tua applicazione React e garantisce un accesso sicuro alla tua app.
I seguenti passaggi spiegano cosa è necessario per integrare Auth0 in un’applicazione React.
Cos’è Auth0?
Auth0 è un servizio Web che fornisce un’API sicura per gestire l’autenticazione e l’autorizzazione degli utenti nelle tue app.
Fornisce un sistema di autenticazione personalizzabile che puoi facilmente integrare nella tua applicazione React. Dopo aver connesso Auth0 alla tua app, gestisce il resto del carico di lavoro di autenticazione.
Come funziona Auth0?
Auth0 fornisce una funzionalità di accesso universale che implementa il flusso di autenticazione. Ogni volta che un utente desidera accedere, l’API lo reindirizza a una pagina di accesso Auth0, viene autenticato e i dati del payload dell’autenticazione riuscita vengono quindi inviati alla tua app.
Puoi personalizzare il flusso di lavoro di autenticazione per la tua app definendo diversi metodi di accesso. L’accesso universale fornisce un nome utente e una password come autenticazione principale, ma puoi anche aggiungere altre opzioni come l’accesso social, tramite un provider come Google e l’autenticazione a più fattori.
Il vantaggio di utilizzare questo tipo di autenticazione è che non è necessario avere familiarità con i protocolli di identità come OAuth 2.0 o OpenID Connect, che vengono comunemente utilizzati per creare sistemi di autenticazione sicuri.
Crea un nuovo progetto sulla console per sviluppatori Auth0
Per iniziare, dovrai prima registrarti per un account Auth0 . Dopo la registrazione, vai alla dashboard e fai clic su Crea applicazione per configurare le impostazioni del progetto di autenticazione.
Auth0 fornisce diverse configurazioni di autenticazione a seconda del tipo di applicazione che stai creando. Per questo tutorial, inserisci il nome della tua applicazione, seleziona Applicazioni Web a pagina singola , quindi fai clic su Salva .
Successivamente, seleziona React dall’elenco delle tecnologie supportate da Auth0.
Configura gli URI dell’applicazione
Dopo aver creato l’applicazione e configurato le impostazioni richieste, nella dashboard dell’applicazione fare clic sulla scheda Impostazioni per configurare le proprietà URI richieste.
Imposta le seguenti proprietà:
- URL di richiamata consentiti . L’URL che il server Auth0 chiamerà dopo l’autenticazione di un utente.
- URL di disconnessione consentiti . L’URL a cui Auth0 reindirizzerà l’utente quando si disconnette.
- Origini web consentite . L’URL consentito da cui può provenire una richiesta di autorizzazione.
Una volta che hai finito di inserire gli URL, vai avanti e fai clic su Salva modifiche nella parte inferiore della pagina delle impostazioni.
Imposta i tuoi provider di accesso social preferiti
Nel riquadro del menu a sinistra del dashboard dell’applicazione Auth0, fare clic su Autenticazione , quindi selezionare Social . Successivamente, fai clic sul pulsante Crea connessione nella pagina delle impostazioni delle connessioni social.
Infine, seleziona e aggiungi il tuo provider di accesso social preferito.
Configura Auth0 nella tua app React
Integra il servizio di autenticazione Auth0 nella tua applicazione React costruendo i componenti login e success.
1. Creare un’applicazione React e configurare un file ENV
Crea un’applicazione React, quindi apri la cartella del progetto nel tuo editor di codice. Successivamente, nella directory principale della cartella del progetto, crea un file ENV per contenere le variabili di ambiente: il tuo nome di dominio e l’ID client. Accedi al tuo account Auth0, nella dashboard dell’applicazione, copia il nome di dominio e l’ID client e salvali nel tuo file ENV come segue:
REACT_APP_AUTH0_DOMAIN= your domain name
REACT_APP_AUTH0_CLIENT_ID= your client ID
2. Installare i pacchetti richiesti
Esegui questo comando sul tuo terminale per installare le dipendenze richieste:
npm install @auth0/auth0-react
3. Avvolgi il componente della tua app con il provider Auth0
Il provider Auth0 utilizza React Context. Ciò ti consente di accedere a tutte le sue proprietà dall’interno del componente App. Il provider Auth0 accetta tre parametri: il dominio del client, l’ID del client e l’URI di reindirizzamento.
Apri il file index.js, elimina il codice React del modello e aggiungi il codice seguente:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import{Auth0Provider} from '@auth0/auth0-react';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Auth0Provider
domain = {process.env.REACT_APP_AUTH0_DOMAIN}
clientId = {process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri = {window.location.origin}
>
<App />
</Auth0Provider>, document.getElementById('root')
);
4. Creare un componente della pagina di accesso
Crea una nuova cartella nella directory /src della tua applicazione React e chiamala pagine. All’interno di questa cartella, crea due file: Login.js e Success.js.
Apri il file login.js e aggiungi il codice qui sotto. Il componente della pagina di accesso visualizzerà un pulsante di accesso.
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react';
const Login = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
return (isAuthenticated || (
<button onClick={() => loginWithRedirect()}> Log In</button>
))
}
export default Login
Per impostazione predefinita, Auth0 fornisce un’e-mail e una password come metodo di autenticazione. Inoltre, a seconda dei provider di accesso social selezionati, Auth0 visualizzerà anche l’opzione di accesso del provider.
5. Creare un componente della pagina di successo
Questo componente eseguirà il rendering di due funzionalità principali: un profilo utente autenticato e un pulsante di disconnessione.
Nel file Success.js, aggiungi il codice seguente:
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react'
const Success = () => {
const { user, logout, isAuthenticated } = useAuth0();
return (isAuthenticated && (
<div>
<h1>User Profile</h1>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
<button onClick={() => logout()}> Log Out</button>
</div>
))
}
export default Success
Una volta effettuato l’accesso e ottenuto l’autenticazione da Auth0, Auth0 ti reindirizza alla tua app e invia i dati del payload alla tua app contenente i dettagli dell’utente. Puoi utilizzare questi dati all’interno della tua app per creare profili utente personalizzati e gestire le sessioni utente. La proprietà User dell’hook UseAuth consente di accedere a dati utente specifici.
L’hook UseAuth0 fornisce anche una proprietà chiamata isAuthenticated, che consente di eseguire il rendering dei componenti in modo condizionale. Se un utente è autenticato, il codice visualizzerà i dettagli del suo profilo e visualizzerà un componente del pulsante di disconnessione.
Al contrario, se non lo sono, eseguirai il rendering del componente pulsante di accesso. Ciò significa che non è necessario specificare le route in base allo stato di autenticazione di un utente poiché questa proprietà gestisce automaticamente questo processo. Auth0 definisce sia la logica di login che di logout, semplificando l’implementazione della funzionalità di autenticazione.
Vale la pena provare il servizio di autenticazione Auth0?
Auth0 fornisce soluzioni pronte all’uso che gestiscono i requisiti di autenticazione della tua app. Inoltre, il servizio Auth0 offre supporto per piattaforme di sviluppo web, mobile e native, consentendoti di integrare facilmente il sistema di autenticazione con uno stack tecnologico di tua preferenza.
Lascia un commento