Trouble Embedding Tableau Private Dashboard in Next.js App - Stack Overflow

admin管理员组

文章数量:1344470

I'm trying to embed a private Tableau dashboard in my Next.js 14 app using the Tableau Embedding API 3.0 with JWT authentication. However, the dashboard is not rendering on my page.

Setup: I have created an API route to generate a JWT token for authentication:

src/app/api/tableau-token/route.js

import * as jose from "jose";
import { NextResponse } from "next/server";

export async function GET() {
  const clientId = process.env.TABLEAU_CLIENT_ID; // From Connected App
  const secretId = process.env.TABLEAU_SECRET_ID; // From Connected App
  const secretValue = process.env.TABLEAU_SECRET_VALUE; // From Connected App
  const user = process.env.TABLEAU_USER;
  const siteId = process.env.TABLEAU_SITE_ID;

  const jwt = await new jose.SignJWT({
    "iss": clientId,
    "sub": user,
    "aud": "tableau",
    "scope": ["tableau:views:embed"],
    "exp": Math.floor(Date.now() / 1000) + 60 * 10,
    "tableau:site": siteId,
  })
    .setProtectedHeader({ alg: "HS256", kid: secretId })
    .setIssuer(clientId)
    .setAudience("tableau")
    .setSubject(user)
    .sign(new TextEncoder().encode(secretValue));

  return NextResponse.json({ token: jwt }, { headers: { "Cache-Control": "no-store" } });
}

Then, I use this token in my Tableau embedding component:

src/components/TableauEmbed.js

"use client";

import { useEffect, useRef } from "react";

export default function TableauEmbed({ dashboardUrl }) {
  const vizRef = useRef(null);

  useEffect(() => {
    let viz;

    const initTableau = async () => {
      try {
        const res = await fetch("/api/tableau-token", { cache: "no-store" });
        if (!res.ok) throw new Error("Failed to fetch token");
        const { token } = await res.json();
        console.log("JWT:", token); // Log for debugging

        const { TableauViz } = await import("@tableau/embedding-api");
        viz = new TableauViz();
        viz.src = dashboardUrl;
        viz.token = token; // Pass the JWT
        viz.toolbar = "hidden";
        vizRef.current.appendChild(viz);
      } catch (error) {
        console.error("Tableau Embedding Error:", error);
      }
    };

    initTableau();

    return () => {
      if (viz) viz.remove();
    };
  }, [dashboardUrl]);

  return <div ref={vizRef} style={{ width: "100%", height: "80vh" }} />;
}

Finally, I use this component in my homepage:

src/app/page.tsx

import TableauEmbed from "@/components/TableauEmbed";

export default function Home() {
  const dashboardUrl =
    ";;
  return (
    <div>
      <h1>My Tableau Dashboard</h1>
      <TableauEmbed dashboardUrl={dashboardUrl} />
    </div>
  );
}

Issue:

• The Tableau dashboard does not render on my page.
• There are no errors in the browser console, and the JWT logs successfully.
• The API route correctly returns a valid JWT token.
• The instance is created but doesn't display anything.

What I Have Tried:

• Checked JWT validity using jwt.io → it is valid.
• Used a hardcoded token in TableauEmbed.js → still no dashboard.
• Enabled CORS on Tableau (added as a trusted domain).
• Checked network requests in DevTools → API calls are successful, but Tableau doesn't load.

Questions:

• Is my JWT correctly formatted for Tableau authentication?
• Do I need to initialize Tableau differently inside a Next.js Client Component?
• Is there any additional Tableau setting required for embedding private dashboards?

Any help is greatly appreciated! Thanks in advance.

本文标签： Trouble Embedding Tableau Private Dashboard in Nextjs AppStack Overflow