Встраивание Metabase-дашбордов в веб-приложение

Встраивание Metabase-дашбордов в веб-приложение

Metabase поддерживает два режима встраивания: публичные ссылки (без аутентификации) и signed embedding (с JWT-подписью для авторизованного доступа). Второй вариант позволяет встроить персонализированные дашборды с фильтрацией по пользователю.

Signed Embedding

Metabase генерирует iframe-URL с JWT-токеном, подписанным секретом:

import jwt from 'jsonwebtoken';

function generateMetabaseEmbedUrl(
  dashboardId: number,
  params: Record<string, unknown> = {}
): string {
  const METABASE_SITE_URL = process.env.METABASE_URL;
  const METABASE_SECRET_KEY = process.env.METABASE_SECRET_KEY;

  const payload = {
    resource: { dashboard: dashboardId },
    params,  // фильтры: { user_id: 123, date_range: 'last30days' }
    exp: Math.round(Date.now() / 1000) + 10 * 60  // токен 10 минут
  };

  const token = jwt.sign(payload, METABASE_SECRET_KEY);

  return `${METABASE_SITE_URL}/embed/dashboard/${token}#bordered=true&titled=false`;
}

// API эндпоинт
app.get('/api/dashboard/embed-url', authenticate, (req, res) => {
  const url = generateMetabaseEmbedUrl(
    Number(process.env.METABASE_DASHBOARD_ID),
    { user_id: req.user.id, org_id: req.user.organizationId }
  );
  res.json({ url });
});

React-компонент

function MetabaseDashboard({ dashboardId, filters }) {
  const [embedUrl, setEmbedUrl] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/dashboard/embed-url?' + new URLSearchParams({ dashboardId, ...filters }))
      .then(r => r.json())
      .then(({ url }) => setEmbedUrl(url));
  }, [dashboardId, JSON.stringify(filters)]);

  if (!embedUrl) return <DashboardSkeleton />;

  return (
    <iframe
      src={embedUrl}
      className="w-full border-0 rounded-xl"
      style={{ height: '600px' }}
      sandbox="allow-scripts allow-same-origin"
      title="Analytics Dashboard"
    />
  );
}

Настройки в Metabase

В Metabase Admin → Embedding:

1. Включить Embedding
2. Скопировать Embedding Secret Key
3. Для каждого дашборда включить «Enable embedding» и указать locked/editable параметры

Locked параметры — фиксируются в JWT и не могут быть изменены пользователем (например, user_id). Editable параметры — пользователь может менять через UI Metabase в iframe.

Сроки

Настройка signed embedding + React-компонент — 1–2 дня.