Añade autenticación a tu aplicación de extensión de Chrome

Esta guía te mostrará cómo integrar Logto en tu extensión de Chrome.

tip

La siguiente demostración fue probada en Chrome v123.0.6312.87 (arm64). Otras versiones también deberían funcionar, siempre que admitan las APIs de chrome utilizadas en el SDK.
El proyecto de ejemplo está disponible en nuestro repositorio de GitHub.

Prerrequisitos

Una cuenta de Logto Cloud o un Logto autoalojado.
Una aplicación de una sola página (SPA) creada en Logto Console.
Un proyecto de extensión de Chrome.

Instalación

npm
Yarn
pnpm

npm i @logto/chrome-extension

yarn add @logto/chrome-extension

pnpm add @logto/chrome-extension

Integración

El flujo de autenticación

Suponiendo que colocas 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 el participante Popup de la extensión con el nombre de la página. En este tutorial, nos centraremos en la página del popup.

Sobre el inicio de sesión basado en redirección

Este proceso de autenticación sigue el protocolo OpenID Connect (OIDC), y Logto aplica medidas de seguridad estrictas para proteger el inicio de sesión del usuario.
Si tienes múltiples aplicaciones, puedes usar el mismo proveedor de identidad (Logto). Una vez que el usuario inicia sesión en una aplicación, Logto completará automáticamente el proceso de inicio de sesión cuando el usuario acceda a otra aplicación.

Para aprender más sobre la lógica y los beneficios del inicio de sesión basado en redirección, consulta Experiencia de inicio de sesión de Logto explicada.

Actualiza el `manifest.json`

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

manifest.json
{
  "permissions": ["identity", "storage"],
  "host_permissions": ["https://*.logto.app/*"]
}

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

nota

Si estás utilizando un dominio personalizado en Logto Cloud, necesitas actualizar el host_permissions para que coincida con tu dominio.

Configura un script de fondo (service worker)

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

service-worker.js
import LogtoClient from '@logto/chrome-extension';

export const logtoClient = new LogtoClient({
  endpoint: '<your-logto-endpoint>'
  appId: '<your-logto-app-id>',
});

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

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

info

¿Por qué necesitamos un script de fondo?

Las páginas normales de la extensión, como el popup o la página de opciones, no pueden ejecutarse en segundo plano y pueden cerrarse durante el proceso de autenticación. Un script de fondo asegura que el proceso de autenticación se maneje correctamente.

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

service-worker.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // En el código a continuación, dado que devolvemos `true` para cada acción, necesitamos llamar a `sendResponse`
  // para notificar al remitente. También puedes manejar errores aquí, o usar otras formas de notificar al remitente.

  if (message.action === 'signIn') {
    const redirectUri = chrome.identity.getRedirectURL('/callback');
    logtoClient.signIn(redirectUri).finally(sendResponse);
    return true;
  }

  if (message.action === 'signOut') {
    const redirectUri = chrome.identity.getRedirectURL();
    logtoClient.signOut(redirectUri).finally(sendResponse);
    return true;
  }

  return false;
});

Puedes notar que hay dos URIs de redirección utilizados en el código anterior. Ambos son creados por chrome.identity.getRedirectURL, que es una API integrada de Chrome para generar una URL de redirección para flujos de autenticación. Las dos URIs serán:

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

Ten en cuenta que estas URIs no son accesibles y solo se utilizan para que Chrome active 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.

Ve a la página de la aplicación en el Logto Console.
En la sección "Redirect URIs", agrega la URI: https://<extension-id>.chromiumapp.org/callback.
En la sección "Post sign-out redirect URIs", agrega la URI: https://<extension-id>.chromiumapp.org/.
En la sección "CORS allowed origins", agrega la URI: chrome-extension://<extension-id>. El SDK en la extensión de Chrome usará este origen para comunicarse con las APIs de Logto.
Haz clic en Guardar cambios.

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

¡Ya casi estamos! Vamos a añadir los botones de inicio y cierre de sesión y otra lógica necesaria a la página del popup.

En el archivo popup.html:

popup.html
<button id="sign-in">Iniciar sesión</button> <button id="sign-out">Cerrar sesión</button>

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

popup.js
document.getElementById('sign-in').addEventListener('click', async () => {
  await chrome.runtime.sendMessage({ action: 'signIn' });
  // Inicio de sesión completado (o fallido), puedes actualizar la UI aquí.
});

document.getElementById('sign-out').addEventListener('click', async () => {
  await chrome.runtime.sendMessage({ action: 'signOut' });
  // Cierre de sesión completado (o fallido), puedes actualizar la UI aquí.
});

Punto de control: Prueba el flujo de autenticación

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

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

Verifica el estado de autenticación

Dado que Chrome proporciona APIs de almacenamiento unificadas, además del flujo de inicio y cierre de sesión, todos los demás métodos del Logto SDK pueden usarse 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:

popup.js
import LogtoClient from '@logto/chrome-extension';

const logtoClient = new LogtoClient({
  endpoint: '<your-logto-endpoint>'
  appId: '<your-logto-app-id>',
});

// O reutiliza la instancia de logtoClient creada en el script de fondo
import { logtoClient } from './service-worker.js';

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

popup.js
const loadAuthenticationState = async () => {
  const isAuthenticated = await logtoClient.isAuthenticated();
  // Actualiza la UI según el estado de autenticación

  if (isAuthenticated) {
    const user = await logtoClient.getIdTokenClaims(); // { sub: '...', email: '...', ... }
    // Actualiza la UI con el perfil del usuario
  }
};

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

popup.js
document.getElementById('sign-in').addEventListener('click', async () => {
  await chrome.runtime.sendMessage({ action: 'signIn' });
  await loadAuthenticationState();
});

document.getElementById('sign-out').addEventListener('click', async () => {
  await chrome.runtime.sendMessage({ action: 'signOut' });
  await loadAuthenticationState();
});

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

Página del popup

Otras consideraciones

Empaquetado del service worker: 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.

Obtener información del usuario

Mostrar información del usuario

Para mostrar la información del usuario, puedes usar el método logtoClient.getIdTokenClaims(). Por ejemplo, en tu página de inicio:

Home.js
const userInfo = await logtoClient.getIdTokenClaims();

// Generar tabla de visualización para reclamos del token de ID
const table = document.createElement('table');
const thead = document.createElement('thead');
const tr = document.createElement('tr');
const thName = document.createElement('th');
const thValue = document.createElement('th');
thName.innerHTML = 'Nombre';
thValue.innerHTML = 'Valor';
tr.append(thName, thValue);
thead.append(tr);
table.append(thead);

const tbody = document.createElement('tbody');

for (const [key, value] of Object.entries(userInfo)) {
  const tr = document.createElement('tr');
  const tdName = document.createElement('td');
  const tdValue = document.createElement('td');
  tdName.innerHTML = key;
  tdValue.innerHTML = typeof value === 'string' ? value : JSON.stringify(value);
  tr.append(tdName, tdValue);
  tbody.append(tr);
}

table.append(tbody);

Solicitar reclamos adicionales

Es posible que encuentres que falta alguna información del usuario en el objeto devuelto desde getIdTokenClaims(). Esto se debe a que OAuth 2.0 y OpenID Connect (OIDC) están diseñados para seguir el principio de privilegio mínimo (PoLP), y Logto está construido sobre estos estándares.

De forma predeterminada, se devuelven reclamos limitados. Si necesitas más información, puedes solicitar alcances adicionales para acceder a más reclamos.

info

Un "reclamo (Claim)" es una afirmación hecha sobre un sujeto; un "alcance (Scope)" es un grupo de reclamos. En el caso actual, un reclamo es una pieza de información sobre el usuario.

Aquí tienes un ejemplo no normativo de la relación alcance - reclamo:

tip

El reclamo "sub" significa "sujeto", que es el identificador único del usuario (es decir, el ID del usuario).

El SDK de Logto siempre solicitará tres alcances: openid, profile y offline_access.

Para solicitar alcances adicionales, puedes configurar las configuraciones de Logto:

index.js
import LogtoClient, { UserScope } from '@logto/browser';

const logtoClient = new LogtoClient({
  appId: '<your-application-id>',
  endpoint: '<your-logto-endpoint>',
  scopes: [UserScope.Email, UserScope.Phone],
});

Luego puedes acceder a los reclamos adicionales en el valor de retorno de logtoClient.getIdTokenClaims():

const claims = await getIdTokenClaims();
// Ahora puedes acceder a los reclamos adicionales `claims.email`, `claims.phone`, etc.

Reclamos que necesitan solicitudes de red

Para evitar sobrecargar el Token de ID, algunos reclamos requieren solicitudes de red para ser obtenidos. Por ejemplo, el reclamo custom_data no se incluye en el objeto de usuario incluso si se solicita en los alcances. Para acceder a estos reclamos, puedes usar el método logtoClient.fetchUserInfo():

const userInfo = await logtoClient.fetchUserInfo();
// Ahora puedes acceder al reclamo `userInfo.custom_data`

Este método obtendrá la información del usuario solicitando al endpoint de userinfo. Para aprender más sobre los alcances y reclamos disponibles, consulta la sección de Alcances y reclamos.

Alcances y reclamos

Logto utiliza las convenciones de alcances y reclamos (scopes and claims) de OIDC para definir los alcances y reclamos para obtener información del usuario del Token de ID y del endpoint userinfo de OIDC. Tanto "alcance" como "reclamo" son términos de las especificaciones de OAuth 2.0 y OpenID Connect (OIDC).

Aquí está la lista de alcances (Scopes) soportados y los reclamos (Claims) correspondientes:

openid

Nombre del reclamo	Tipo	Descripción	¿Necesita userinfo?
sub	`string`	El identificador único del usuario	No

profile

Nombre del reclamo	Tipo	Descripción	¿Necesita userinfo?
name	`string`	El nombre completo del usuario	No
username	`string`	El nombre de usuario del usuario	No
picture	`string`	URL de la foto de perfil del usuario final. Esta URL DEBE referirse a un archivo de imagen (por ejemplo, un archivo de imagen PNG, JPEG o GIF), en lugar de a una página web que contenga una imagen. Ten en cuenta que esta URL DEBERÍA referirse específicamente a una foto de perfil del usuario final adecuada para mostrar al describir al usuario final, en lugar de una foto arbitraria tomada por el usuario final.	No
created_at	`number`	Momento en que se creó el usuario final. El tiempo se representa como el número de milisegundos desde la época Unix (1970-01-01T00:00:00Z).	No
updated_at	`number`	Momento en que se actualizó por última vez la información del usuario final. El tiempo se representa como el número de milisegundos desde la época Unix (1970-01-01T00:00:00Z).	No

Otros reclamos estándar incluyen family_name, given_name, middle_name, nickname, preferred_username, profile, website, gender, birthdate, zoneinfo y locale también se incluirán en el alcance profile sin necesidad de solicitar el endpoint de userinfo. Una diferencia en comparación con los reclamos anteriores es que estos reclamos solo se devolverán cuando sus valores no estén vacíos, mientras que los reclamos anteriores devolverán null si los valores están vacíos.

nota

A diferencia de los reclamos estándar, los reclamos created_at y updated_at utilizan milisegundos en lugar de segundos.

email

Nombre del reclamo	Tipo	Descripción	¿Necesita userinfo?
email	`string`	La dirección de correo electrónico del usuario	No
email_verified	`boolean`	Si la dirección de correo electrónico ha sido verificada	No

phone

Nombre del reclamo	Tipo	Descripción	¿Necesita userinfo?
phone_number	`string`	El número de teléfono del usuario	No
phone_number_verified	`boolean`	Si el número de teléfono ha sido verificado	No

address

Por favor, consulta el OpenID Connect Core 1.0 para los detalles del reclamo de dirección.

custom_data

Nombre del reclamo	Tipo	Descripción	¿Necesita userinfo?
custom_data	`object`	Los datos personalizados del usuario	Sí

identities

Nombre del reclamo	Tipo	Descripción	¿Necesita userinfo?
identities	`object`	Las identidades vinculadas del usuario	Sí
sso_identities	`array`	Las identidades SSO vinculadas del usuario	Sí

urn:logto:scope:organizations

Nombre del reclamo	Tipo	Descripción	¿Necesita userinfo?
organizations	`string[]`	Los IDs de las organizaciones a las que pertenece el usuario	No
organization_data	`object[]`	Los datos de las organizaciones a las que pertenece el usuario	Sí

urn:logto:scope:organization_roles

Nombre del reclamo	Tipo	Descripción	¿Necesita userinfo?
organization_roles	`string[]`	Los roles de organización a los que pertenece el usuario con el formato `<organization_id>:<role_name>`	No

Considerando el rendimiento y el tamaño de los datos, si "¿Necesita userinfo?" es "Sí", significa que el reclamo no aparecerá en el Token de ID, pero se devolverá en la respuesta del endpoint de userinfo.

Recursos de API

Recomendamos leer primero 🔐 Control de acceso basado en roles (RBAC) para entender los conceptos básicos de Logto RBAC y cómo configurar correctamente los recursos de API.

Configurar el cliente de Logto

Una vez que hayas configurado los recursos de API, puedes agregarlos al configurar Logto en tu aplicación:

index.js
import LogtoClient from '@logto/browser';

const logtoClient = new LogtoClient({
  // ...other configs
  resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // Add API resources
});

Cada recurso de API tiene sus propios permisos (alcances).

Por ejemplo, el recurso https://shopping.your-app.com/api tiene los permisos shopping:read y shopping:write, y el recurso https://store.your-app.com/api tiene los permisos store:read y store:write.

Para solicitar estos permisos, puedes agregarlos al configurar Logto en tu aplicación:

index.js
import LogtoClient from '@logto/chrome-extension';

const logtoClient = new LogtoClient({
// ...other configs
scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'],
resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // Add API resources
});

Puedes notar que los alcances se definen por separado de los recursos de API. Esto se debe a que Resource Indicators for OAuth 2.0 especifica que los alcances finales para la solicitud serán el producto cartesiano de todos los alcances en todos los servicios objetivo.

Así, en el caso anterior, los alcances se pueden simplificar desde la definición en Logto, ambos recursos de API pueden tener alcances read y write sin el prefijo. Luego, en la configuración de Logto:

index.js
import LogtoClient, { UserScope } from '@logto/chrome-extension';

const logtoClient = new LogtoClient({
// ...other configs
scopes: ['read', 'write'],
resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
});

Para cada recurso de API, se solicitarán tanto los alcances read como write.

nota

Está bien solicitar alcances que no están definidos en los recursos de API. Por ejemplo, puedes solicitar el alcance email incluso si los recursos de API no tienen el alcance email disponible. Los alcances no disponibles serán ignorados de manera segura.

Después de un inicio de sesión exitoso, Logto emitirá los alcances apropiados a los recursos de API de acuerdo con los roles del usuario.

Obtener token de acceso para el recurso de API

Para obtener el token de acceso para un recurso de API específico, puedes usar el método getAccessToken:

const accessToken = await logtoClient.getAccessToken('https://store.your-app.com/api');
console.log('Access token', accessToken);

Este método devolverá un token de acceso JWT que se puede usar para acceder al recurso de API cuando el usuario tiene permisos relacionados. Si el token de acceso en caché actual ha expirado, este método intentará automáticamente usar un token de actualización para obtener un nuevo token de acceso.

Obtener tokens de organización

Si la organización es nueva para ti, por favor lee 🏢 Organizaciones (Multi-tenancy) para comenzar.

Necesitas añadir el alcance UserScope.Organizations al configurar el cliente Logto:

index.js
import LogtoClient, { UserScope } from '@logto/chrome-extension';

const logtoClient = new LogtoClient({
// ...other configs
scopes: [UserScope.Organizations],
});

Una vez que el usuario ha iniciado sesión, puedes obtener el token de organización para el usuario:

index.js
// Obtener organizationIds del userInfo

const claims = await logtoClient.getIdTokenClaims();
const organizationIds = claims.organizations;

/**
 * O desde los reclamos del token de ID
 *
 * const claims = await logtoClient.getIdTokenClaims();
 * const organizationIds = claims.organizations;
 */

// Obtener el token de acceso de la organización
if (organizationIds.length > 0) {
  const organizationId = organizationIds[0];
  const organizationAccessToken = await logtoClient.getOrganizationToken(organizationId);
  console.log('Token de acceso de la organización', organizationAccessToken);
}

./code/_scopes-and-claims-code.mdx./code/_config-organization-code.mdx

Adjuntar token de acceso a los encabezados de solicitud

Coloca el token en el campo Authorization de los encabezados HTTP con el formato Bearer (Bearer YOUR_TOKEN), y estarás listo para continuar.

nota

El flujo de integración del Token Bearer puede variar según el framework o solicitante que estés utilizando. Elige tu propia manera de aplicar el encabezado de solicitud Authorization.

Lecturas adicionales

Flujos de usuario final: flujos de autenticación, flujos de cuenta y flujos de organización Configurar conectores Protege tu API

Prerrequisitos​

Instalación​

Integración​

El flujo de autenticación​

Actualiza el manifest.json​

Configura un script de fondo (service worker)​

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

Añade botones de inicio y cierre de sesión al popup​

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

Verifica el estado de autenticación​

Otras consideraciones​

Obtener información del usuario​

Mostrar información del usuario​

Solicitar reclamos adicionales​

Reclamos que necesitan solicitudes de red​

Alcances y reclamos​

Recursos de API​

Configurar el cliente de Logto​

Obtener token de acceso para el recurso de API​

Obtener tokens de organización​

Adjuntar token de acceso a los encabezados de solicitud​

Lecturas adicionales​

Prerrequisitos

Instalación

Integración

El flujo de autenticación

Actualiza el `manifest.json`

Configura un script de fondo (service worker)

Actualiza la configuración de la aplicación Logto

Añade botones de inicio y cierre de sesión al popup

Punto de control: Prueba el flujo de autenticación

Verifica el estado de autenticación

Otras consideraciones

Obtener información del usuario

Mostrar información del usuario

Solicitar reclamos adicionales

Reclamos que necesitan solicitudes de red

Alcances y reclamos

Recursos de API

Configurar el cliente de Logto

Obtener token de acceso para el recurso de API

Obtener tokens de organización

Adjuntar token de acceso a los encabezados de solicitud

Lecturas adicionales