Autenticação

VIDTREO usa API keys para autenticar requisições. Este guia explica como obter e configurar com segurança sua API key.

Obtendo sua API Key

# Em breve
vidtreo keys create --name "meu-app"

Configuração de Ambiente

Vite / React

Crie um arquivo .env na raiz do seu projeto:

VITE_VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

Use no seu componente:

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

Next.js

Para componentes do servidor, adicione ao .env.local:

VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

Para componentes do cliente, prefixe com 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

Melhores Práticas de Segurança

Fazer ✅

• Use variáveis de ambiente — Nunca hardcode API keys
• Use keys diferentes para desenvolvimento e produção
• Restrinja permissões das keys no dashboard
• Rotacione keys regularmente, especialmente se comprometidas
• Use .gitignore para excluir arquivos .env

Não Fazer ❌

• Nunca faça commit de API keys no controle de versão
• Nunca exponha keys em JavaScript do cliente sem restrições
• Não compartilhe keys entre projetos
• Não use keys de produção para desenvolvimento

Restrições de Domínio

Para segurança adicional, você pode restringir API keys a domínios específicos:

1. Vá para Dashboard → API Keys
2. Selecione sua key
3. Adicione domínios permitidos (ex., meuapp.com, *.meuapp.com)

Requisições de outros domínios serão rejeitadas.

Limites de Taxa

Solução de Problemas

API Key Inválida

Error: Invalid API key provided

Soluções:

• Verifique se a key foi copiada corretamente (sem espaços extras)
• Confira se a key é para o ambiente correto (live vs test)
• Certifique-se de que a key não foi revogada

Domínio Não Permitido

Error: Domain not allowed for this API key

Soluções:

• Adicione seu domínio à lista de permitidos no dashboard
• Para desenvolvimento local, adicione localhost aos domínios permitidos

Key Expirada

Error: API key has expired

Soluções:

• Gere uma nova API key no dashboard
• Atualize suas variáveis de ambiente com a nova key

Configuração de Proxy (SSR)

Para aplicações com renderização do lado do servidor, você pode querer fazer proxy das requisições da API para evitar expor sua API key:

// api/vidtreo-proxy.ts (Rota API do 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);
}

Então configure o SDK para usar seu proxy:

<VidtreoRecorder
  apiKey="proxied" // Qualquer valor não vazio
  backendUrl="/api/vidtreo-proxy"
/>

Próximos Passos

• Início Rápido — Grave seu primeiro vídeo
• Integração React — Configure o componente React
• Configuração — Explore todas as opções