javascript - para - ¿Cómo autenticar una solicitud POST desde una extensión de Chrome a mi aplicación con tokens web JSON?
crear extension chrome javascript (3)
¿Intentaste usar localStorage?
Puede guardar el token como:
localStorage.setItem(''token'', ''abcde'')
y puede recuperar
localStorage.getItem(''token'')
pero la información se perderá si vuelve a cargar la página.
Contexto
Mi aplicación web HapiJS está utilizando actualmente OAuth 2.0 para acceder a las API de Google. Una vez que un usuario se autentica en la aplicación, el servidor genera un JSON Web Token (JWT) que se almacena en el cliente y se envía de vuelta en el encabezado de Authorization de las solicitudes posteriores.
Lo que me gustaría lograr
Ahora me gustaría usar los mismos pasos (autorización + creación de un JWT) con mi extensión de Google Chrome que sincroniza los datos con la aplicación a través de un punto final REST.
Pensamientos actuales
Mi idea es usar la misma autorización OAuth que tengo en mi aplicación para generar un JWT y luego guardar este JWT en la extensión de Chrome. Este JWT se pasará con cada solicitud de mi extensión de Chrome a mi aplicación para validar la solicitud.
Desafortunadamente, parece que la extensión de Chrome está utilizando su propia autorización a través de la API de identidad de Chrome y no me permite usar el proceso de autenticación que tenía en mente.
El diagrama a continuación describe los pasos que estoy imaginando para crear el JWT creado en mi aplicación y luego guardarlo en mi extensión de Chrome (y también apunta a dónde está el problema):
La pregunta
Entonces, mi pregunta es: ¿hay otra o una mejor manera de almacenar un JWT creado en mi aplicación para mi extensión Chrome?
Espero que mi explicación sea lo suficientemente clara.
Puede usar su localStorage para guardar su jwt desde la aplicación web, luego, si su extensión se ejecuta en el mismo dominio, puede acceder a la información guardada desde el localStorage a través de un script de contenido, que se inyecta en esa página. Puede comunicarse con su ventana emergente utilizando la API de transmisión de mensajes para extensiones de Chrome.
El problema con este enfoque viene con el hecho de que guardar información sensible como la información del usuario (que está codificada en el jwt) está mal visto debido a problemas de seguridad.
Idealmente, debería tener un servidor que maneje la autenticación una y otra vez, guarde la información y emita un token de sesión para sus clientes, que luego puede guardar en el almacenamiento local si lo desea.
Si desea que popup.html contenga un enlace para permitir que los usuarios se abran (lo que lleva a OAuth Google en su modelo), necesita más trabajo que un simple enlace de anclaje.
Deberá agregar escuchas de eventos al enlace y usar chrome.tabs.create .
Aquí hay un código de demostración:
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>