Autenticación

VIDTREO usa API keys para autenticar las solicitudes. Esta guía explica cómo obtener y configurar de forma segura tu API key.

Obtener tu API Key

# Próximamente
vidtreo keys create --name "mi-app"

Configuración de Entorno

Vite / React

Crea un archivo .env en la raíz de tu proyecto:

VITE_VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

Úsalo en tu componente:

<VidtreoRecorder
  apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
/>

Next.js

Para componentes del servidor, añade a .env.local:

VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

Para componentes del cliente, usa el prefijo NEXT_PUBLIC_:

NEXT_PUBLIC_VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

<VidtreoRecorder
  apiKey={process.env.NEXT_PUBLIC_VIDTREO_API_KEY}
/>

Node.js / Backend

VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

const apiKey = process.env.VIDTREO_API_KEY;

Tipos de API Key

Mejores Prácticas de Seguridad

Hacer ✅

• Usa variables de entorno — Nunca escribas API keys directamente en el código
• Usa keys diferentes para desarrollo y producción
• Restringe los permisos de las keys en el dashboard
• Rota las keys regularmente, especialmente si están comprometidas
• Usa .gitignore para excluir archivos .env

No Hacer ❌

• Nunca subas API keys al control de versiones
• Nunca expongas keys en JavaScript del cliente sin restricciones
• No compartas keys entre proyectos
• No uses keys de producción para desarrollo

Restricciones de Dominio

Para mayor seguridad, puedes restringir las API keys a dominios específicos:

1. Ve a Dashboard → API Keys
2. Selecciona tu key
3. Añade dominios permitidos (ej., miapp.com, *.miapp.com)

Las solicitudes desde otros dominios serán rechazadas.

Límites de Tasa

Solución de Problemas

API Key Inválida

Error: Invalid API key provided

Soluciones:

• Verifica que la key esté correctamente copiada (sin espacios extra)
• Comprueba si la key es para el entorno correcto (live vs test)
• Asegúrate de que la key no haya sido revocada

Dominio No Permitido

Error: Domain not allowed for this API key

Soluciones:

• Añade tu dominio a la lista de permitidos en el dashboard
• Para desarrollo local, añade localhost a los dominios permitidos

Key Expirada

Error: API key has expired

Soluciones:

• Genera una nueva API key desde el dashboard
• Actualiza tus variables de entorno con la nueva key

Configuración de Proxy (SSR)

Para aplicaciones con renderizado del lado del servidor, puede que quieras hacer proxy de las solicitudes de API para evitar exponer tu API key:

// api/vidtreo-proxy.ts (Ruta API de Next.js)
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const response = await fetch('https://core.vidtreo.com' + req.url, {
    method: req.method,
    headers: {
      'Authorization': `Bearer ${process.env.VIDTREO_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: req.method !== 'GET' ? JSON.stringify(req.body) : undefined,
  });

  const data = await response.json();
  res.status(response.status).json(data);
}

Luego configura el SDK para usar tu proxy:

<VidtreoRecorder
  apiKey="proxied" // Cualquier valor no vacío
  backendUrl="/api/vidtreo-proxy"
/>

Próximos Pasos

• Inicio Rápido — Graba tu primer video
• Integración React — Configura el componente React
• Configuración — Explora todas las opciones