16

ContestoCome autenticare una richiesta POST da un'estensione chrome alla mia app con token Web JSON?

miei HapiJS applicazione web sta utilizzando OAuth 2.0 per l'accesso API di Google. Una volta che un utente si autentica nell'app, il server genera un token Web JSON (JWT) che viene memorizzato sul client e inviato nuovamente nell'intestazione Authorization delle richieste successive.

Quello che vorrei realizzare

ora mi piacerebbe utilizzare la stessa procedura (autorizzazione + creazione di un JWT) con la mia estensione di Google Chrome che sincronizza i dati di nuovo al app tramite un endpoint REST.

pensieri attuali

La mia idea è quella di utilizzare la stessa autorizzazione OAuth come ho fatto in mia applicazione per generare un JWT e poi per salvare questo JWT in estensione Chrome. Questo JWT verrà quindi passato con ogni richiesta dall'estensione di Chrome alla mia applicazione per convalidare la richiesta.

Sfortunatamente sembra che l'estensione di Chrome stia utilizzando la propria autorizzazione tramite l'API di Identità di Chrome e non mi consenta di utilizzare il processo di autenticazione che avevo in mente.

Lo schema che segue descrive i passi che sto immaginando di ottenere il JWT creato su mia domanda quindi salvato sulla mia estensione Chrome (e indica anche dove sta il problema): diagram

La questione

Quindi la mia domanda è: c'è un altro o un modo migliore per archiviare un JWT creato sulla mia applicazione sull'estensione di Chrome?

Spero che la mia spiegazione sia abbastanza chiara, grazie.

+0

Hai provato l'API 'storage'? https://developer.chrome.com/extensions/storage – Moin

+0

Mostra il codice pertinente che tenta di ottenere JWT. – wOxxOm

+0

I passaggi di riproduzione/l'app di esempio sarebbero carini Non è chiaro per me se il problema è portare il JWT all'estensione o ottenere l'estensione per utilizzare il JWT –

risposta

0

Se vuoi che il tuo popup.html contenga un link per consentire agli utenti di aprirsi (conducendo a OAuth Google nel tuo modello), hai bisogno di più lavoro di un semplice link di ancoraggio.

È necessario aggiungere listener di eventi al collegamento e utilizzare chrome.tabs.create.

Ecco un codice demo:

popup.html

<html> 
    <body> 
     <span class="link" data-href="https://www.google.com">link</span> 
     <span class="link" data-href="https://www.bing.com">link</span> 
     <span class="link" data-href="https://www.yahoo.com">link</span> 

     <script> 

      //get all links 
      var links = document.getElementsByClassName('link'); 

      //loop through each link 
      for (var ii = 0, nn = links.length; ii < nn; ii++) 
      { 
       //add listener 
       links[ii].addEventListener('click', function(e) 
       { 
        //grab link 
        var url = this.getAttribute('data-href'); 

        //open link in new tab using chrome.tabs.create method 
        chrome.tabs.create({url:url}); 
       }); 
      } 
     </script> 
    </body> 
</html> 
0

È possibile utilizzare il localStorage per salvare il JWT dal web app, quindi, se l'estensione viene eseguito sullo stesso dominio , è possibile accedere alle informazioni salvate da localStorage tramite uno script di contenuto, che viene iniettato in quella pagina. Puoi comunicare con il tuo popup utilizzando l'API Message Passing per le estensioni di Chrome.

Il problema con questo approccio deriva dal fatto che il salvataggio di informazioni sensibili come le informazioni utente (che sono codificate nel jwt) è disapprovato a causa di problemi di sicurezza.

Idealmente, dovresti avere un server che gestisce l'autenticazione avanti e indietro, salva le informazioni ed emette un token di sessione per i suoi client, che poi puoi salvare nel localStorage se lo desideri.