Hello everyone! I've tried implementing this <htt...
# gooddata-ui
j
Hello everyone! I've tried implementing this https://www.gooddata.com/docs/cloud/embed-visualizations/iframes/#example to embed and pass authentication token in the frontend (coming from a backend login/generating of token), but I'm not getting the
listeningForApiToken
message or even the event being transmitted from the iframe with the
?apiTokenAuthentication=true
url. I'm using the
analyticalDesigner
product that's been embedded
j
Hi Jeremy, can you please share a code snippet how you have it implemented (with any sensitive details redacted)?
j
Hi @Jan Kos, here's how I've tried it so far:
Copy code
<html>

<head></head>
<script>
    console.log("Setup parent frame message listener")

    const token = `token here`

    document.addEventListener(
        "message",
        function (event) {
            console.log("Post message received", event);

            if (event.data.gdc?.event.name === "listeningForApiToken") {
                const postMessageStructure = {
                    gdc: {
                        product: "analyticalDesigner",
                        event: {
                            name: "setApiToken",
                            data: {
                                token,
                            }
                        }
                    }
                };
                console.log("Sending token to embedded window");

                const origin = "*";
                const iframe = document.getElementById("aa1KcXTXbio1-insights-editor").contentWindow;
                iframe.postMessage(postMessageStructure, origin);
            }
        },
        false
    );
</script>
<body>
    <iframe id="aa1KcXTXbio1-insights-editor"
        src="<https://agency-spotter-dev.on.gooddata.com/analyze/embedded/#/${projectId}/reportId/edit?apiTokenAuthentication=true>"
        width="100%"
        height="100%"
     ></iframe>
</body>

</html>
This is coming from the documentation, I've just replaced the details/values that are required such as token and projectId
This is not my actual implementation in React, I just tried following the documentation while plugging in the required values, but the event that's supposed to be sent from the iframe is not being received by the parent html body
j
Hi, Jeremy… oh I see, it looks like you are using our GoodData Platform product but the mentioned help article is for our GoodData Cloud product. The two products look to be similar but they are fundamentally different and API token authentication works only with GoodData Cloud product. For platform please consult the following doc https://help.gooddata.com/doc/growth/en/