Monetiza tu extensión de Chrome con autenticación OpenID Connect (OAuth 2.0)

Las extensiones de Chrome son una gran manera de extender la funcionalidad del navegador Chrome. Cuando tienes una extensión popular, podrías querer monetizarla ofreciendo funciones profesionales a los usuarios que paguen por ellas. La autenticación de usuario es imprescindible para este propósito:

• Identificación de usuario: Necesitas saber quién es el usuario para proporcionar funciones personalizadas.
• Control de acceso: Necesitas controlar quién puede acceder a las funciones pagadas.
• Gestión de suscripciones: Necesitas proporcionar una manera para que los usuarios se suscriban y gestionen sus suscripciones.

Por otro lado, no queremos quedarnos atados al sistema de cuentas de Google, ya que tus usuarios podrían preferir usar otras cuentas, o podrías tener múltiples servicios con los que quieras integrar el mismo sistema de identidad.

Un resumen rápido de los beneficios de usar OpenID Connect (OIDC) para la autenticación:

• Sin dependencia de proveedor: Tus usuarios pueden usar varios métodos para iniciar sesión, en lugar de estar obligados a usar Google.
• Inicio de sesión único (SSO): Los usuarios pueden iniciar sesión una vez y acceder a múltiples servicios o aplicaciones.
• Estandarizado: OIDC es un estándar abierto que es ampliamente adoptado y soportado, además es seguro.

En este tutorial, usaremos Logto como el proveedor de OIDC, que es una alternativa a Auth0 para construir infraestructuras de identidad.

¡Vamos a empezar!

Introducción#

Asumiendo que colocaste un botón de "Iniciar sesión" en el popup de tu extensión de Chrome, el flujo de autenticación se verá así:

Para otras páginas interactivas en tu extensión, solo necesitas reemplazar al participante Popup de extensión con el nombre de la página. En este tutorial, nos centraremos en la página del popup.

Crear una aplicación Logto#

Para comenzar, crea una aplicación Logto con el tipo "Aplicación de una sola página". Sigue estos pasos para crear una aplicación Logto:

1. Inicia sesión en el Consola de Logto.
2. Haz clic en Crear aplicación.
3. En la página que se abre, encuentra el botón "Crear aplicación sin marco" en la parte inferior y haz clic en él.
4. Elige el tipo "Aplicación de una sola página" e ingresa el nombre de tu aplicación.
5. Haz clic en Crear.

Configura tu extensión de Chrome#

Instalar Logto SDK#

Instala Logto SDK en el proyecto de tu extensión de Chrome:

Actualiza el manifest.json#

Logto SDK requiere los siguientes permisos en el manifest.json:

• permissions.identity: Requerido para la API de Identidad de Chrome, que se usa para iniciar y cerrar sesión.
• permissions.storage: Requerido para almacenar la sesión del usuario.
• host_permissions: Requerido para que el SDK de Logto comunique con las API de Logto.

Configurar un script de fondo (trabajador de servicio)#

En el script de fondo de tu extensión de Chrome, inicializa el Logto SDK:

Reemplaza <tu-endpoint-logto> y <tu-id-aplicación-logto> con los valores reales. Puedes encontrar estos valores en la página de la aplicación que acabas de crear en la Consola de Logto.

Si no tienes un script de fondo, puedes seguir la guía oficial para crear uno.

Luego, necesitamos escuchar el mensaje de otras páginas de extensión y manejar el proceso de autenticación:

Es posible que notes que se usan dos URIs de redirección en el código anterior. Ambas son creadas por chrome.identity.getRedirectURL, que es una API integrada de Chrome para generar una URL de redirección para los flujos de autenticación. Las dos URIs serán:

• https://<id-extensión>.chromiumapp.org/callback para iniciar sesión.
• https://<id-extensión>.chromiumapp.org/ para cerrar sesión.

Ten en cuenta que estas URIs no son accesibles, y solo son usadas para que Chrome desencadene acciones específicas para el proceso de autenticación.

Actualiza la configuración de la aplicación Logto#

Ahora necesitamos actualizar la configuración de la aplicación Logto para permitir las URIs de redirección que acabamos de crear.

1. Ve a la página de la aplicación en la Consola de Logto.
2. En la sección "URIs de redirección", agrega la URI: https://<id-extensión>.chromiumapp.org/callback.
3. En la sección "URIs de redirección posterior al cierre de sesión", agrega la URI: https://<id-extensión>.chromiumapp.org/.
4. En la sección "Orígenes permitidos por CORS", agrega la URI: chrome-extension://<id-extensión>. El SDK en la extensión de Chrome usará este origen para comunicarse con las API de Logto.
5. Haz clic en Guardar cambios.

Recuerda reemplazar <id-extensión> con tu ID real de extensión. Puedes encontrar el ID de la extensión en la página chrome://extensions.

Después de actualizar la configuración, tu configuración de aplicación Logto debería verse así:

Agregar botones de iniciar y cerrar sesión al popup#

¡Ya casi terminamos! Vamos a agregar los botones de iniciar y cerrar sesión y la otra lógica necesaria a la página del popup.

En el archivo popup.html:

En el archivo popup.js (asumiendo que popup.js está incluido en el popup.html):

Punto de control: Prueba el flujo de autenticación#

Ahora puedes probar el flujo de autenticación en tu extensión de Chrome:

1. Abre el popup de la extensión.
2. Haz clic en el botón "Iniciar sesión".
3. Serás redirigido a la página de inicio de sesión de Logto.
4. Inicia sesión con tu cuenta de Logto.
5. Serás redirigido de vuelta a Chrome.

Comprobar el estado de autenticación#

Dado que Chrome proporciona APIs de almacenamiento unificadas, además del flujo de iniciar y cerrar sesión, todos los demás métodos de Logto SDK se pueden usar directamente en la página del popup.

En tu popup.js, puedes reutilizar la instancia de LogtoClient creada en el script de fondo, o crear una nueva con la misma configuración:

Luego puedes crear una función para cargar el estado de autenticación y el perfil del usuario:

También puedes combinar la función loadAuthenticationState con la lógica de iniciar y cerrar sesión:

Aquí hay un ejemplo de la página del popup con el estado de autenticación:

Para más información sobre el SDK, puedes consultar la documentación oficial del SDK de navegador. El SDK de navegador comparte las mismas APIs con el SDK de extensión de Chrome.

Otras consideraciones#

• Empaquetado del trabajador de servicio: Si usas un empaquetador como Webpack o Rollup, necesitas establecer explícitamente el objetivo en browser o similar para evitar el empaquetado innecesario de módulos de Node.js.
• Resolución de módulos: El SDK de extensión de Chrome de Logto es un módulo solo ESM.

Consulta nuestro proyecto de ejemplo para un ejemplo completo con TypeScript, Rollup y otras configuraciones.

Conclusión#

Con los usuarios autenticados, ahora puedes ofrecer de manera segura funciones pagadas en tu extensión de Chrome. Por ejemplo, puedes almacenar el estado de suscripción del usuario en su perfil y verificarlo cuando el usuario abre la extensión.

Combinando el poder de las extensiones de Chrome y Logto, puedes construir una extensión más flexible y personalizable que tanto tú como tus usuarios amarán.