Monetizza la tua estensione Chrome con l'autenticazione OpenID Connect (OAuth 2.0)

Le estensioni Chrome sono un ottimo modo per estendere la funzionalità del browser Chrome. Quando hai un'estensione popolare, potresti volerla monetizzare offrendo funzionalità pro agli utenti che le pagano. L'autenticazione utente è indispensabile per questo scopo:

• Identificazione utente: Devi sapere chi è l'utente per fornire funzionalità personalizzate.
• Controllo accessi: Devi controllare chi può accedere alle funzionalità a pagamento.
• Gestione degli abbonamenti: Devi fornire un modo per permettere agli utenti di iscriversi e gestire i propri abbonamenti.

D'altra parte, non vogliamo rimanere bloccati sul sistema di account Google, poiché i tuoi utenti potrebbero preferire utilizzare altri account, o potresti avere più servizi che vuoi integrare con lo stesso sistema di identità.

Un rapido riepilogo dei vantaggi dell'utilizzo di OpenID Connect (OIDC) per l'autenticazione:

• Nessun lock-in del fornitore: I tuoi utenti possono utilizzare diversi metodi per accedere, piuttosto che essere costretti a Google.
• Single Sign-On (SSO): Gli utenti possono accedere una volta e accedere a più servizi o applicazioni.
• Standardizzato: OIDC è uno standard aperto ampiamente adottato e supportato, ed è anche sicuro.

In questo tutorial, utilizzeremo Logto come provider OIDC, che è un'alternativa a Auth0 per costruire infrastrutture di identità.

Iniziamo!

Introduzione#

Supponendo di avere inserito un pulsante "Accedi" nel popup della tua estensione Chrome, il flusso di autenticazione sarà simile a questo:

Per altre pagine interattive della tua estensione, devi solo sostituire il partecipante Popup dell'estensione con il nome della pagina. In questo tutorial, ci concentreremo sulla pagina del popup.

Crea un'applicazione Logto#

Per iniziare, crea un'applicazione Logto con il tipo "Applicazione a pagina singola". Segui questi passaggi per creare un'applicazione Logto:

1. Accedi al Logto Console.
2. Clicca su Crea applicazione.
3. Nella pagina aperta, trova il pulsante "Crea app senza framework" in fondo e clicca su di esso.
4. Scegli il tipo "Applicazione a pagina singola" e inserisci il nome della tua applicazione.
5. Clicca su Crea.

Configura la tua estensione Chrome#

Installa Logto SDK#

Installa Logto SDK nel progetto della tua estensione Chrome:

Aggiorna manifest.json#

Logto SDK richiede i seguenti permessi in manifest.json:

• permissions.identity: Richiesto per l'API Identity di Chrome, usata per l'accesso e la disconnessione.
• permissions.storage: Richiesto per memorizzare la sessione dell'utente.
• host_permissions: Richiesto affinché Logto SDK possa comunicare con le API Logto.

Configura uno script in background (service worker)#

Nello script in background della tua estensione Chrome, inizializza Logto SDK:

Sostituisci <tuo-logto-endpoint> e <tuo-logto-app-id> con i valori effettivi. Puoi trovare questi valori nella pagina dell'applicazione appena creata nel Logto Console.

Se non hai uno script in background, puoi seguire la guida ufficiale per crearne uno.

Quindi, dobbiamo ascoltare il messaggio dalle altre pagine dell'estensione e gestire il processo di autenticazione:

Potresti notare che ci sono due URI di reindirizzamento usati nel codice sopra. Entrambi sono creati da chrome.identity.getRedirectURL, che è un API integrata di Chrome per generare un URL di reindirizzamento per i flussi di autenticazione. I due URI saranno:

• https://<id-estensione>.chromiumapp.org/callback per l'accesso.
• https://<id-estensione>.chromiumapp.org/ per la disconnessione.

Nota che questi URI non sono accessibili e sono utilizzati solo per Chrome per attivare azioni specifiche per il processo di autenticazione.

Aggiorna le impostazioni dell'applicazione Logto#

Ora dobbiamo aggiornare le impostazioni dell'applicazione Logto per consentire gli URI di reindirizzamento che abbiamo appena creato.

1. Vai alla pagina dell'applicazione nel Logto Console.
2. Nella sezione "URI di reindirizzamento", aggiungi l'URI: https://<id-estensione>.chromiumapp.org/callback.
3. Nella sezione "URI di reindirizzamento post disconnessione", aggiungi l'URI: https://<id-estensione>.chromiumapp.org/.
4. Nella sezione "Origini consentite dal CORS", aggiungi l'URI: chrome-extension://<id-estensione>. L'SDK nell'estensione Chrome userà questa origine per comunicare con le API Logto.
5. Clicca su Salva modifiche.

Ricordati di sostituire <id-estensione> con il tuo ID effettivo dell'estensione. Puoi trovare l'ID dell'estensione nella pagina chrome://extensions.

Dopo aver aggiornato le impostazioni, le impostazioni dell'applicazione Logto dovrebbero apparire così:

Aggiungi pulsanti di accesso e disconnessione al popup#

Ci siamo quasi! Aggiungiamo i pulsanti di accesso e disconnessione e altra logica necessaria alla pagina del popup.

Nel file popup.html:

Nel file popup.js (supponendo che popup.js sia incluso in popup.html):

Punto di controllo: Testa il flusso di autenticazione#

Ora puoi testare il flusso di autenticazione nella tua estensione Chrome:

1. Apri il popup dell'estensione.
2. Clicca sul pulsante "Accedi".
3. Verrai reindirizzato alla pagina di accesso Logto.
4. Accedi con il tuo account Logto.
5. Verrai reindirizzato nuovamente a Chrome.

Verifica lo stato di autenticazione#

Poiché Chrome fornisce API di archiviazione unificate, piuttosto che il flusso di accesso e disconnessione, tutti gli altri metodi di Logto SDK possono essere utilizzati direttamente nella pagina del popup.

Nel tuo popup.js, puoi riutilizzare l'istanza di LogtoClient creata nello script in background o crearne una nuova con la stessa configurazione:

Quindi puoi creare una funzione per caricare lo stato di autenticazione e il profilo utente:

Puoi anche combinare la funzione loadAuthenticationState con la logica di accesso e disconnessione:

Ecco un esempio della pagina popup con lo stato di autenticazione:

Per ulteriori informazioni sull'SDK, puoi fare riferimento alla documentazione ufficiale del browser SDK. L'SDK del browser condivide le stesse API con l'SDK dell'estensione Chrome.

Altre considerazioni#

• Raggruppamento del service worker: Se utilizzi un bundler come Webpack o Rollup, devi impostare esplicitamente il target su browser o simile per evitare raggruppamenti non necessari dei moduli Node.js.
• Risoluzione dei moduli: Logto Chrome extension SDK è un modulo solo ESM.

Consulta il nostro progetto di esempio per un esempio completo con TypeScript, Rollup e altre configurazioni.

Conclusione#

Con gli utenti autenticati, ora puoi offrire in modo sicuro funzionalità a pagamento nella tua estensione Chrome. Ad esempio, puoi memorizzare lo stato di abbonamento dell'utente nel profilo utente e verificarlo quando l'utente apre l'estensione.

Combinando la potenza delle estensioni Chrome e Logto, puoi costruire un'estensione più flessibile e personalizzabile che sia amata sia da te che dai tuoi utenti.