🔧 Paso 1: Configurar tu Backend
Primero necesitas obtener un token JWT desde tu backend para autenticar al Component-Limbo.
Obtener Credenciales API
Se requieren permisos de administrador para crear claves API. Ve a tu panel de administración de Limbo y genera tus claves:
- Private Key:
ak_xxxxxxxxxxxxxxxx - Public Key:
pk_xxxxxxxxxxxxxxxx - ApiKey/Token: Haciendo una llamada POST a
/auth/tokencon body{'public_key' : 'pk_xxxxx'}
Implementar Endpoint de Token (authMode:'manual')
Si vas a utilizar el modo de autenticación manual, debes crear un método en tu backend que genere el apikey/token JWT para autenticar las llamadas a la API de Limbo:
<?php
// /api/token endpoint
public function generateToken(Request $request): JsonResponse
{
$publicKey = $_ENV['LIMBO_PUBLIC_KEY']; // pk_xxxxxxxxxxxxxxxx
$response = $this->httpClient->request('POST', 'https://limbo.lefebvre.es/auth/token', [
'json' => [
'public_key' => $publicKey
]
]);
$data = $response->toArray();
return new JsonResponse([
'token' => $data['token'],
'expires_in' => $data['expires_in']
]);
}// /api/token endpoint
app.post('/api/token', async (req, res) => {
const publicKey = process.env.LIMBO_PUBLIC_KEY; // pk_xxxxxxxxxxxxxxxx
try {
const response = await fetch('https://limbo.lefebvre.es/auth/token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
public_key: publicKey
})
});
const data = await response.json();
res.json({
token: data.token,
expires_in: data.expires_in
});
} catch (error) {
res.status(500).json({ error: 'Token generation failed' });
}
});Ejemplo respuesta /auth/token
Para proyectos sin bundler, directamente en HTML
{
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9....",
"expires_in": 3600,
"portal": {
"id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"name": "tu-portal-consumidor.com",
"public_key": "pk_xxxxxxxxxxxxxxxxx"
},
"policies": {
"format_policy": {
"default_format": "webp",
"allowed_output_formats": [
"webp",
"jpg",
"png"
]
},
"presets_aspect": [],
"presets_size": [],
"allow_arbitrary": true,
"cross_access_policy": "own"
}
}📦 Paso 2: Instalar Component-Limbo
Ahora instala el componente frontend que interactuará con tu API.
🎨 Paso 3: Implementar en tu Frontend
Integra el componente en tu aplicación frontend.
<!DOCTYPE html>
<html>
<head>
<title>Mi Galería con Limbo</title>
<link rel="stylesheet" href="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.css">
</head>
<body>
<div id="limbo-gallery"></div>
<script src="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.umd.js"></script>
<script>
// Inicializar Component-Limbo
document.addEventListener('DOMContentLoaded', function() {
// Configuración global con tokenProvider para renovación automática
Limbo.configure({
publicKey: 'pk_tu_clave_publica',
authMode: 'jwt',
tokenProvider: async () => {
const response = await fetch('/tu-backend/limbo-token');
const data = await response.json();
return data.token;
}
});
// Crear instancia embebida
Limbo.create({
container: '#limbo-gallery',
mode: 'embed',
modeUI: 'full',
callbacks: {
onUpload: (result) => {
console.log('Imagen subida:', result);
},
onSelect: (asset) => {
console.log('Imagen seleccionada:', asset);
}
}
});
});
</script>
</body>
</html>import React, { useEffect, useRef } from 'react';
import Limbo from 'limbo-component';
import 'limbo-component/css';
const LimboGallery: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null);
const instanceRef = useRef<any>(null);
useEffect(() => {
if (!containerRef.current || instanceRef.current) return;
// Configuración global con tokenProvider
Limbo.configure({
publicKey: process.env.REACT_APP_LIMBO_PUBLIC_KEY!,
authMode: 'jwt',
tokenProvider: async () => {
const response = await fetch('/api/limbo-token');
const data = await response.json();
return data.token;
}
});
// Crear instancia
instanceRef.current = Limbo.create({
container: containerRef.current,
mode: 'embed',
modeUI: 'full',
callbacks: {
onSelect: (asset) => console.log('Seleccionado:', asset),
onUpload: (result) => console.log('Subido:', result)
}
});
// Cleanup al desmontar
return () => {
instanceRef.current?.destroy();
};
}, []);
return <div ref={containerRef} className="limbo-gallery-container" />;
};
export default LimboGallery;✅ Paso 4: Probar la Integración
Verifica que todo funciona correctamente.
Backend Token Generation
Verifica que tu endpoint /api/token devuelve un JWT válido.
Component-Limbo Render
El componente debe renderizarse sin errores de consola y mostrar la interfaz de galería.
Ver documentación del componente →Upload Test
Prueba subir una imagen para verificar que el flujo completo funciona.
🐛 Solución de Problemas Comunes
Error 401 Unauthorized
Verifica que las credenciales API Key y Public Key son correctas.
Token Expired
Los tokens JWT expiran en 3600 segundos (1 hora) por defecto. Implementa renovación automática usando tokenProvider.
CORS Issues
Asegúrate de que tu dominio esté configurado en la whitelist CORS en el dashboard de administrador
Component No Render
Verifica que el container exists y que el token se está pasando correctamente.