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

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

Apache Superset поддерживает Embedded SDK для встраивания дашбордов в сторонние приложения с аутентификацией через Guest Token. В отличие от Metabase, Superset требует более сложной настройки CORS и Row Level Security.

Настройка Superset

В superset_config.py:

FEATURE_FLAGS = {
    "EMBEDDED_SUPERSET": True,
    "ENABLE_TEMPLATE_PROCESSING": True
}

CORS_OPTIONS = {
    'supports_credentials': True,
    'origins': ['https://your-app.com']
}

SESSION_COOKIE_SAMESITE = None
SESSION_COOKIE_SECURE = True
SESSION_COOKIE_HTTPONLY = True

Guest Token

async function getSupersetGuestToken(
  dashboardId: string,
  userId: string,
  userEmail: string
): Promise<string> {
  // Получить admin access token
  const loginResponse = await fetch(`${SUPERSET_URL}/api/v1/security/login`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      username: process.env.SUPERSET_ADMIN_USER,
      password: process.env.SUPERSET_ADMIN_PASSWORD,
      provider: 'db',
      refresh: false
    })
  });

  const { access_token } = await loginResponse.json();

  // Получить Guest Token для конкретного дашборда
  const guestResponse = await fetch(`${SUPERSET_URL}/api/v1/security/guest_token/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${access_token}`
    },
    body: JSON.stringify({
      user: {
        username: userId,
        first_name: userEmail.split('@')[0],
        last_name: ''
      },
      resources: [{
        type: 'dashboard',
        id: dashboardId
      }],
      rls: [
        // Row Level Security — фильтрация данных по пользователю
        {
          clause: `organization_id = '${getOrgId(userId)}'`
        }
      ]
    })
  });

  const { token } = await guestResponse.json();
  return token;
}

React компонент через SDK

npm install @superset-ui/embedded-sdk

import { embedDashboard } from '@superset-ui/embedded-sdk';
import { useEffect, useRef } from 'react';

function SupersetDashboard({ dashboardId }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const embed = embedDashboard({
      id: dashboardId,
      supersetDomain: process.env.NEXT_PUBLIC_SUPERSET_URL,
      mountPoint: containerRef.current,

      // Функция получения токена (вызывается SDK при истечении)
      fetchGuestToken: () =>
        fetch(`/api/superset/guest-token?dashboardId=${dashboardId}`)
          .then(r => r.json())
          .then(d => d.token),

      dashboardUiConfig: {
        hideTitle: true,
        hideTab: false,
        filters: {
          expanded: false
        }
      }
    });

    return () => embed.unmount();
  }, [dashboardId]);

  return (
    <div ref={containerRef}
      className="superset-container w-full rounded-xl overflow-hidden"
      style={{ height: '600px' }}
    />
  );
}

Row Level Security

Через rls в Guest Token запросы в Superset автоматически фильтруются на уровне SQL:

# Superset добавит к каждому запросу WHERE organization_id = 'user-org-id'
# Пользователь физически не может увидеть данные других организаций

Сроки

Настройка Superset embedding + Guest Token эндпоинт + React SDK — 3–5 дней.