三方系统嵌入指南

1. 访问 URL 地址

在嵌入的 URL 地址后面添加 embedded=true 参数。例如：

http://cube-tool-pre.s3-website-us-west-2.amazonaws.com/dashboardItem?detail=ru2rp2gPXaVtfHEjvKiIThNXWO1Hx1twnbX7q8ki&type=query&embedded=true

2. 嵌入方式

可通过 iframe 标签嵌入目标 URL，并通过 postMessage 进行通信。

2.1 使用 iframe 标签嵌入

<iframe id="embeddedIframe" src="http://cube-tool-pre.s3-website-us-west-2.amazonaws.com/dashboardItem?detail=ru2rp2gPXaVtfHEjvKiIThNXWO1Hx1twnbX7q8ki&type=query&embedded=true" width="100%" height="600px" frameborder="0"></iframe>

2.2 获取 access_token

访问以下 API 端点，获取 IdToken 作为 access_token。

接口地址：

https://6qu0lucwab.execute-api.us-west-2.amazonaws.com/login/cognito/cube/IDtoken?username=[username]&password=[password]

请求方式： GET

示例返回值：

{
    "IdToken": "your-access-token"
}

2.3 通过 postMessage 发送 access_token

在 iframe 加载完成后，获取 iframe 内部窗口对象，并通过 postMessage 发送 access_token。

document.getElementById("embeddedIframe").onload = async function () {
    const iframeElement = document.getElementById("embeddedIframe");
    const iframeWindow = iframeElement.contentWindow;
    if (!iframeWindow) {
        console.warn("iframe 加载失败");
        return;
    }

    try {
        // 通过 API 获取 access_token
        const response = await fetch("https://6qu0lucwab.execute-api.us-west-2.amazonaws.com/login/cognito/cube/IDtoken?username=your_username&password=your_password");
        const data = await response.json();
        const accessToken = data.IdToken;

        // 发送消息至 iframe
        iframeWindow.postMessage({ access_token: accessToken }, "http://cube-tool-pre.s3-website-us-west-2.amazonaws.com/");
    } catch (error) {
        console.error("获取 access_token 失败：", error);
    }
};

3. 注意事项

1. iframe 加载后才能使用 postMessage 进行通信，确保 iframeElement.onload 事件触发后再发送消息。
2. targetOrigin 需要与 iframe 加载的 URL 匹配，例如 http://cube-tool-pre.s3-website-us-west-2.amazonaws.com/。
3. 确保 access_token 通过安全的方式获取，避免泄露用户凭据。

4. 参考示意图