Вбудовування Metabase Dashboards
Metabase підтримує два режими вбудовування: публічні посилання (без auth) та 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 endpoint
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 MetabaseEmbed({ userId }: { userId: number }) {
const [iframeUrl, setIframeUrl] = useState('');
useEffect(() => {
fetch(`/api/dashboard/embed-url?userId=${userId}`)
.then(r => r.json())
.then(({ url }) => setIframeUrl(url));
}, [userId]);
return (
<iframe
src={iframeUrl}
width="100%"
height={600}
allowFullScreen
frameBorder="0"
/>
);
}
Безпека
- Секретний ключ ніколи не розкривається на фронтенді
- JWT токени стикаються швидко (10 хв рекомендується)
- Параметри дезінфіковані на сервері
- Безпека на рівні рядків через фільтри
Часова шкала
Базове вбудовування—1–2 дні. З фільтруванням параметрів та безпекою—2–3 дні.