如何让嵌入式Tableau Viz容器使用PAT令牌维持登录状态？

核心问题分析 #

你当前的代码未在可视化容器初始化时传入X-tableau-auth凭证令牌，导致会话过期后无法自动续期；同时之前错误的令牌添加方式（直接在HTML标签中设置）导致加载失败。Tableau JavaScript API提供了标准的令牌传递方式，以下是具体解决方案：

步骤1：在Viz初始化时传入凭证令牌 #

修改你的JavaScript代码，在options中添加authToken字段，将有效的X-tableau-auth令牌传入：

//Declare constants/variables
let viz;
let refreshInterval;
let tokenRefreshInterval; // 新增：用于定时刷新令牌
const vizContainer = document.getElementById("vizContainer");
const url = "URL GOES HERE";
// 替换成你的有效X-tableau-auth令牌
const authToken = "YOUR_X_TABLEAU_AUTH_TOKEN";

const options = {
    height: "1080px",
    width: "1920px",
    toolbar: true,
    authToken: authToken // 新增：传递凭证令牌
};

//Create VIZ container to display VMS content via URL given above
function initViz() {
    viz = new tableau.Viz(vizContainer, url, options);
}

步骤2：处理令牌过期（可选但必要） #

如果你的凭证令牌有有效期（短期令牌），需要定时刷新令牌并更新Viz的认证信息，避免自动登出：

// 新增：刷新令牌并更新Viz认证
async function refreshAuthToken() {
    // 这里替换成你获取新X-tableau-auth令牌的逻辑（比如调用后端接口）
    const newToken = await fetchNewAuthToken();
    if (newToken && viz) {
        viz.setAuthToken(newToken);
        console.log("令牌已更新");
    }
}

// 新增：启动令牌刷新定时任务（比如每25分钟刷新一次，提前于令牌过期时间）
function startTokenRefresh() {
    tokenRefreshInterval = setInterval(refreshAuthToken, 1500000); // 25分钟
}

// 修改stopRefresh函数，同时停止令牌刷新
function stopRefresh() {
    console.log("Stopping refresh");
    clearInterval(refreshInterval);
    clearInterval(tokenRefreshInterval); // 新增
}

步骤3：验证Tableau Cloud权限配置 #

确保你的Tableau Cloud视图配置正确：

• 进入视图的共享设置，开启"允许嵌入"选项
• 确保你的PAT令牌拥有该视图的View权限，且令牌所属账户有权访问该视图

步骤4：避免错误的令牌添加方式 #

不要直接在HTML标签中添加令牌属性，所有认证信息都通过Tableau JavaScript API的options或setAuthToken方法传递，这是官方推荐的安全方式。

修改后的完整JavaScript代码示例 #

//Declare constants/variables
let viz;
let refreshInterval;
let tokenRefreshInterval;
const vizContainer = document.getElementById("vizContainer");
const url = "URL GOES HERE";
let authToken = "YOUR_INITIAL_X_TABLEAU_AUTH_TOKEN";

const options = {
    height: "1080px",
    width: "1920px",
    toolbar: true,
    authToken: authToken
};

//Create VIZ container to display VMS content via URL given above
function initViz() {
    viz = new tableau.Viz(vizContainer, url, options);
}

//Refresh VIZ container data with setInterval method and refreshDataAsync() method call
function refreshDataSource() {
    console.log("Going to start refreshing..");
    refreshInterval = setInterval(() => {
        console.log("Refreshing....");
        viz.refreshDataAsync();
    }, 300000);
    // 启动令牌刷新
    startTokenRefresh();
}

//Stop refresh and set interval to null
function stopRefresh() {
    console.log("Stopping refresh");
    clearInterval(refreshInterval);
    clearInterval(tokenRefreshInterval);
}

// 刷新令牌逻辑（需替换为你的实际获取方式）
async function fetchNewAuthToken() {
    // 示例：调用后端接口获取新令牌
    const response = await fetch("/your-backend-api/get-tableau-token", {
        method: "GET",
        headers: {
            "Content-Type": "application/json"
        }
    });
    const data = await response.json();
    return data.token;
}

// 启动令牌刷新定时任务
function startTokenRefresh() {
    tokenRefreshInterval = setInterval(refreshAuthToken, 1500000); // 25分钟一次
}

// 更新Viz认证令牌
async function refreshAuthToken() {
    const newToken = await fetchNewAuthToken();
    if (newToken && viz) {
        authToken = newToken;
        viz.setAuthToken(newToken);
        console.log("认证令牌已更新");
    }
}

//Event listeners for Start/Stop buttons
document.getElementById("start").addEventListener("click", refreshDataSource);
document.getElementById("stop").addEventListener("click", stopRefresh);

//Initialise Container in HTML
initViz();

内容的提问来源于stack exchange，提问作者Jesse Monardo