Embedding Private Dashboard via third party web page

Help
1

I saw some old threads, but checking in for the latest…
I have a Vue app hosted elsewhere that interacts with Losant API via Token authentication. It’s the entire front end for the Losant data. I’d like to embed access to the customer’s private Dashboards, and pass the user’s token to the dashboard so they can get their customized dashboard views.

Is there a way to pass user credentials to an embedded private mode dashboard?

2

Are your end users in this case experience users? Typically when using Losant to build out an interface for your end users, people utilize application experiences to handle the user management, authentication, and authorization, including for displaying private dashboards through dashboard pages. However, it sounds like you may not be doing that because of your statement that your Vue app “interacts with Losant API via Token authentication”.

Let’s say you are indeed utilizing application experiences here; building out a data API with experience endpoints and workflows, and creating a single-page application that interacts with that API, is a tactic that plenty of our users take. Displaying a Losant dashboard in a SPA may be possible, but I don’t have specific steps on how you could accomplish that.

That said, here is some information that may help you …

  • Behind the scenes, a “dashboard page” is rendering out an {{element}} helper for the dashboard in question.
  • Server-side, this helper generates a <script> tag where it is used in an experience view that loads the dashboard entry point.
  • Also server-side, the helper generates an additional <script> tag that, when executed by the browser, sets an authorization token on the window object.
  • This token is only valid for …
    • The user who made the request to generate the page.
    • For the dashboard settings applied through the {{element}} helper (i.e. the dashboard time and context variables).
    • For a period of 60 minutes.

Hopefully that information can point you in the right direction.

If you are not utilizing application experiences, the best answer I can give is to make the dashboard public and include it in your pages using the embed code we provide. Password-protected dashboards store the password in the browser’s local storage, and due to browser security barriers, I don’t see how you could set that password for the domain from which the dashboard originates.

3

Thanks Dylan, I think you answered both scenarios fairly well. I think my options are limited to what you outlined above. I’ll mention this as a suggestion.

I’m using a third party site to host a single page app. It hits the Losant API (backed by experience endpoint + workflow) - /login and others- and I get the Losant experience user’s specific authentication token (via workflow)

From there, I would like to be able to pass that token into the embedded dashboard code block. That html block already requires a few things like the unique dashboard-id, height, theme, refresh-rate… it would be great if I could inject the user’s token as an attribute to that html block (which I can do inside the SPA), and the dashboard would take that as authentication, and render the dashboard custom to the user, all within the SPA. Perhaps that’s just an idea for your team to consider at this point.