Apache Superset Embedded Not Working

[jogendra-jsc]

I am trying to integrate Apache Superset dashboards into our web app. I have followed the embedded sdk steps. The integration seems to work but the issue that we are facing is that we have to login into superset in another tab or browser to see the dashboard in our app. If we are not logged in into superset in browser then it is giving error and not loading the dashboard.

Can you please let us know what we are missing here.

[cwegener]

the issue that we are facing is that we have to login into superset in another tab or browser to see the dashboard in our app

That means that you don't have the embdedded sdk working.

Providing some detailed information about the error would be required for anybody to provide assistance.

[Gergann]

I've been struggling with embed SDK for some time now and my issue is the same as the one briefly described by @jogendra-jsc
Maybe we have the same issue so I might as well continue the conversation.

In the back-end I'm able to connect to superset API and fetch the access_token and guest_token. I've used this example (https://github.com/ra002890/superset-embedded-example) with slight modifications and it works like a charm.

In the front-end I used the same example and was able to fetch the guest token and successfully request the embedding using the embed sdk

The issue I am facing is that after all of that the SDK is requesting the roles for the current user on api/v1/me/roles/ and this returns 401 since I'm not logged in.

I've tested the api/v1/me/roles/ endpoint in Python and I get the same 401 error:

headers_me = {
    'accept': 'application/json',
    'Authorization': "Bearer "+access_token["access_token"],
    'X-CSRFToken': "csrf "+csrf_result["result"]
}

roles = requests.get(apache_base_url + '/api/v1/me/roles/', headers = headers_me)
roles.json()

The access token is correct because it works on different endpoints such as /api/v1/dashboard/ , /api/v1/security/guest_token/
I've also tested generating access token for different users with all kinds of different roles

The only way I could make '/api/v1/me/roles/' endpoint work in Python is if I use a request session within python

s = requests.Session()

s.post(f'http://{superset_host}/login/',data=dict(username=username, password=password))
result = s.get(f'http://{superset_host}/api/v1/me/roles/')
print(result.json())

but obviously this can't work in production embedding.

Lastly, this is more or less the related lines of my configuration file

WTF_CSRF_ENABLED = False

WTF_CSRF_EXEMPT_LIST = ["superset.views.core.log", "superset.charts.api.data"]

WTF_CSRF_TIME_LIMIT = 60 * 60 * 24 * 365


MAPBOX_API_KEY = MY_MAP_KEY
ENABLE_PROXY_FIX = True

SESSION_COOKIE_SAMESITE= None
SESSION_COOKIE_SECURE = False
SESSION_COOKIE_HTTPONLY = False

PUBLIC_ROLE_LIKE = 'Gamma'
AUTH_ROLE_PUBLIC = 'Public'
PUBLIC_ROLE_LIKE_GAMMA = True
GUEST_ROLE_NAME = 'Gamma'



FEATURE_FLAGS = {
    "ENABLE_TEMPLATE_PROCESSING": True,
    "EMBEDDED_SUPERSET": True,
}


ENABLE_JAVASCRIPT_CONTROLS = True

Any sort of help/directions will be much appreciated.

[cwegener]

The issue I am facing is that after all of that the SDK is requesting the roles for the current user on api/v1/me/roles/ and this returns 401 since I'm not logged in.

This error can be safely ignored as far as I can tell. The fix is available here: #21208

What are the errors you are seeing that is preventing the IFRAME embedding from working?

[Gergann]

Thanks for referring me to that fix. This helped me realize what is the problem in the frontend example I shared previously. The guest token was not actually added in the header for the '/api/v1/me/roles/' request.

previous code

function fetchGuestTokenFromBackend(): Promise<string> {
    return new Promise<string>((resolve) => {
        console.log("====> Calling token!")
        axios.get("http://localhost:8000/fetchGuestToken").then((response) => {
            console.log(response.status);
        });
        resolve("mytoken");
    })
}

Fixed code

function fetchGuestTokenFromBackend(): Promise<string> {
    return new Promise<string>((resolve) => {
        console.log("====> Calling token!")
        axios.get("http://localhost:8000/fetchGuestToken").then((response) => {
            console.log(response.status);
            resolve(response.data.token);
        });
    })
}

If I may ask an additional question. Is there a way to send url parameters though the embed sdk. I use those parameters as filters in the sql queries within apache superset.

example for public embedding:
http://localhost:8000/superset/dashboard/28/?client=3452342345246&date_dif=100

[cwegener]

Is there a way to send url parameters though the embed sdk

At the moment, the only available config options are for setting the global filter visibility parameter: #21070

Passing through generic url parameters is not possible at the moment. I think that it would be a very good use case though.

[AgentCosmic]

I had this error. Only needed to load the iframe in incognito to get it working.

[falgunifb]

can anyone please tell how to fetch value of guest token in superset_config.py file ...as in url am passing token and that token need to verify in config file so it bypass the login screen of superset for user.
http:/localhost.com:8080/login?token=1234&next=/superset/dashboard/11?standalone=true

Thanks in advance!!!!!!

[Unanimad]

Hello everyone!

There are a lot of configures to try fix problems in Superset, right? In my case, I got the message:

Error: syntax error at or near \")\"\nLINE 11: WHERE ()\n ^\n

The dashboard is available on Superset Dashboard List, also rendering as expected.

---

Frontend

<p id="dashboard-container"></p>
    <script>

        const embed_dashboard = 'de874b5f-76a7-4913-8666-290264f49850'

        async function fetchGuestTokenFromBackend() {
            let response = await fetch('http://localhost:8000/generate_guest_token', {
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                },
                method: "POST", body: JSON.stringify(
                    {
                        'username': 'frontend', 'first_name': 'frontend',
                        'last_name': 'frontend', 'dashboard_id': embed_dashboard, 'rls': ''
                    }
                )
            })
            let data = await response.json()
            return data['token']
        }

        const myDashboard = supersetEmbeddedSdk.embedDashboard({
            id: embed_dashboard,
            supersetDomain: "http://localhost:8088/",
            mountPoint: document.getElementById("dashboard-container"),
            fetchGuestToken: () => fetchGuestTokenFromBackend(),
            dashboardUiConfig: {},
        });
    </script>

Backend - FastAPI

Using SupersetClient from https://pypi.org/project/superset-api-client/

@app.post('/generate_guest_token')
def generate_guest_token(request: Dashboard):
    client = SupersetClient(settings.superset_host, settings.superset_user, settings.superset_password)
    payload = {
        'user': {
            'username': request.username,
            'first_name': request.first_name,
            'last_name': request.last_name
        },
        'resources': [{
            'type': 'dashboard',
            'id': request.dashboard_id  # embedded de um dashboard
        }],
        'rls': [{'clause': request.rls}]  # filtros para o dashboard
    }
    url_guest_token = client.join_urls(client.base_url, 'security/guest_token/')
    response = client.post(url_guest_token, json=payload)
    return response.json()

Anyone can help me?

[sunhourSSH]

Did you find any solution ? Currently I face the same issue as yours. I have no ideas where to fix.

[AndreLotusDev]

Same is happening for me

[fabioselau077]

same here...

[tanmaykansara]

+1, I tried to break down the issue by trying to get the guest token and accessing superset from incognito window using the following URL:
http://superset.domain.local/login/?guest_token={guest_token}&next=/superset/dashboard/jWQx9XBR4Bw/?standalone=true

I am trying to use the guest_token to allow guests to see the dashboard without logging in.

However the above URL keeps redirecting me to the login page. Any thoughts?
Thanks

[quocviet3110]

I call api success when I using cookie localhost:8088 but not working when call api my App.How to fix it ?
Thanks