Tableau Connected Apps jwt embedding views not working

Question

My project

I am creating a react app that interacts with the Tableau REST API through my own python rest api on AWS lambda. And I'm using the Tableau Online server to host my tableau workbooks. And tableau-react to embed the reports.

I can successfully embed views using their url's, however they require users to sign in a second time. (So they'll sign into my app, and then to view the workbook embed, they have to sign in again). To get around this, Tableau requires us to do more than just their normal auth token. We have to create a more secure connection, through a JWT, with the Tableau server. With Tableau Online Server, they offer a thing called connected apps.

I am using the tableau-react package to create a react component to embed. The component requires a token and passes it like https://server/trusted/{jwt}/the-view-embed-url.

My problem

So, I create a JWT from the connected apps secret key. But, when I try to embed my view, I keep getting this 403 error "failed to load resource" from the browser. And Tableau returns "Could not locate unexpired trusted ticket". This makes

I know my embed is working, because with the same view url, I can do it without the jwt (but the user has to re sign in). The jwt creation is cut and paste from the Tableau docs here so I imagine that should okay, but that is what is causing the error.

token = jwt.encode(
    {
        "iss": connectedAppClientId,
        "exp": datetime.datetime.utcnow() + datetime.timedelta(minutes=5),
        "jti": str(uuid.uuid4()),
        "aud": "tableau",
        "sub": user,
        "scp": ["tableau:views:embed", "tableau:metrics:embed"]
    },
        connectedAppSecretKey,
        algorithm = "HS256",
        headers = {
        'kid': connectedAppSecretId,
        'iss': connectedAppClientId
        }
  )

Also, the connected app is enabled (for some reason when you create a connected app, it is disabled by default.... seems a bit silly to me).

Update:

The error code and message I am receiving is not in the list of errors tableau has here.

Answer 1

So I had this issue as well. I have a localhost app that generates JWT, and then passes in the token into a 'token' param in the tableau-viz tag, along with a 'src' param that is my Tableau dashboard's URL.

When doing this, I would get Tableau error 10084. The structure of my JWT logic was this (taken directly from Tableau's docs):

import jwt
import datetime
import uuid
import pytz

connectedAppClientId = "your_client_id" 
connectedAppSecretKey = "your_secret_value" 
connectedAppSecretId = "your_secret_id" 
user = "user@domain.com" 

utc_now = datetime.datetime.now(pytz.utc)

token = jwt.encode(
    {
        "iss": connectedAppClientId,
        "exp": utc_now + datetime.timedelta(minutes=5),
        "jti": str(uuid.uuid4()),
        "aud": "tableau",
        "sub": user,
        "scp": ["tableau:views:embed"],
        "ephemeral": "true",
        "group": ["All Users", "ExternalView"],
        "Region": "West"
    },
    connectedAppSecretKey,
    algorithm="HS256",
    headers={
        'kid': connectedAppSecretId,
        'iss': connectedAppClientId
    }
)

print(token)  

I reviewed this thread: https://community.tableau.com/s/question/0D54T00001Ih7hPSAR/error-10084-when-connecting-eas-token-to-embedding-api

And changed my JWT structure to this:

import jwt
import datetime
import uuid
 
username = "user@domain.com"
client_id = "your_client_id"
secret_id = "your_secret_id"
secret_value = "your_secret_value"
 

 # The issue seems to be the 'group' and 'region' claims. Removing them helped, for some reason. 
token = jwt.encode(
    {
        "iss": client_id,
        "exp": datetime.datetime.utcnow() + datetime.timedelta(minutes=5),
        "jti": str(uuid.uuid4()),
        "aud": "tableau",
        "sub": username,
        "scp": ["tableau:views:embed", "tableau:metrics:embed"]
    },
        secret_value,
        algorithm = "HS256",
        headers = {
        'kid': secret_id,
        'iss': client_id
        }
)

print(token)

I was able to pass this a new token into my tableau-viz tag and my dashboard successfully loaded without manual sign-in. No error codes shown.

Hope this helps someone out there!

Answer 2

The tableau-react package requires a trusted ticket, which is a totally different thing to the JWT that can be used with a Connected App. That's why it was giving you an error saying that it "Could not locate unexpired trusted ticket" - you didn't have any trusted ticket at all.

Answer 3

Okay, so I found this buried in the docs a bit. In the newest version of the tableau javascript api, they made things a looooot easier to embed.

Thankfully I'm using NextJS so I can just add the Script tag to the app.js file.

And the tableau-viz element just works! It's a miracle.