I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

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 da gestire autenticazione e autorizzazione dell'utente 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.

instagram viewer

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 farlo aggiungi anche altre opzioni come l'accesso social, tramite un provider come Google e multi-fattore autenticazione.

Il vantaggio dell'utilizzo di questo tipo di autenticazione è che non è necessario avere familiarità con l'identità protocolli come OAuth 2.0 o OpenID Connect, comunemente usati per creare un'autenticazione sicura sistemi.

Crea un nuovo progetto sulla console per sviluppatori Auth0

Per iniziare, dovrai prima iscriverti a un Aut0 account. Dopo esserti registrato, vai alla dashboard e fai clic 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 fare clic su Salva.

Quindi, seleziona Reagire dall'elenco delle tecnologie supportate da Auth0.

Configura gli URI dell'applicazione

Dopo aver creato la tua applicazione e aver configurato le impostazioni richieste, nella dashboard della tua applicazione, fai clic su Impostazioni scheda per impostare 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.

Per lo sviluppo locale, puoi usare http://localhost: 3000 URL. Tuttavia, una volta inviato il codice alla produzione, dovrai fornire gli URL del tuo dominio.

Una volta che hai finito di inserire gli URL, vai avanti e fai clic Salvare le 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 seleziona Social. Quindi, fare clic su Crea connessione pulsante 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. Crea un'applicazione React e configura un file ENV

Crea un'applicazione React, quindi apri la cartella del progetto nell'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= il tuo nome di dominio 
REACT_APP_AUTH0_CLIENT_ID= il tuo ID cliente

2. Installa 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:

importare Reagire da'reagire';
importare Reagire DOM da'react-dom/cliente';
importare App da'./App';
importare{Auth0Provider} da'@auth0/auth0-reagire';
cost root = ReactDOM.createRoot(documento.getElementById('radice'));
root.render(
 dominio = {processo.env. REACT_APP_AUTH0_DOMAIN}
 clientId = {processo.env. REACT_APP_AUTH0_CLIENT_ID}
 redirectUri = {finestra.posizione.origine}
 >

 </Auth0Provider>, document.getElementById('root')
);

4. Crea 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.

importare Reagire da'reagire'
importare { usoAuth0 } da'@auth0/auth0-reagire';
cost Accedi = () => {
cost { loginWithRedirect, isAuthenticated } = useAuth0();


ritorno (èAutenticato || (
esportarepredefinito 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. Crea 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:

importare Reagire da'reagire'
importare { usoAuth0 } da'@auth0/auth0-reagire'
cost Successo = () => {
cost { utente, logout, isAuthenticated } = useAuth0(); 


ritorno (èAutenticato && ( 




Profilo utente</h1> 
{nome utente}
{nome.utente}</h2> 





{utente.email}</p> 


esportarepredefinito Successo

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.