How to authenticate and embedded Grafana charts into iframe?

Question

I embedded charts from Grafana into iframe into my HTML page.

It kept asking me to enter un/pw in the iframe.

---

How do I bypass the login that?

Is there a way to bypass that in the code?

Is this a setting in Grafana?

---

I explore further, I found the API section, I created an API key, and now I have the key token.

eyJrIjoiMnpVSVA***********QiOjF9

How do I use the key above 👆🏼 to embedded graphs in my iframe?

Answer 1

If you just want to show some charts from Grafana you don't need to work with the API key.

You just need to change some configuration settings in the grafana.ini file (/etc/grafana/grafana.ini).

Below is the configuration that you need:

[auth.anonymous]
# enable anonymous access 
enabled = true

# specify organization name that should be used for unauthenticated users
org_name = ORGANIZATION

# specify role for unauthenticated users
org_role = Viewer

[auth]
# Set to true to disable (hide) the login form, useful if you use OAuth
disable_login_form = true

[security]
# set to true if you want to allow browsers to render Grafana in a <frame>, <iframe>, <embed> or <object>. default is false.
allow_embedding = true

On the Server Admin page on the Grafana website go to Orgs and your main organization name should be the same as you set in the configuration above (org_name = ORGANIZATION).

Save all your settings and restart the grafana-server and you should be good to go!

Answer 2

[auth.anonymous]
# enable anonymous access
enabled = true

# set to true if you host Grafana behind HTTPS. default is false.
cookie_secure = true

# set cookie SameSite attribute. defaults to `lax`. can be set to "lax", "strict" and "none"
cookie_samesite = none

# set to true if you want to allow browsers to render Grafana in a <frame>, <iframe>, <embed> or <object>. default is false.
allow_embedding = true

And then Restart grafana or PC

Answer 3

You can't use API key for the GUI. If you don't want to allow anonymous authentication, then the best option will be auth proxy, where you can implement own custom business logic for authentication.

You will have full freedom with auth proxy setup how to pass auth info (JWT token, cookie, key) to the auth proxy and auth proxy will just add header(s) (e.g. X-WEBAUTH-USER), which will be used as a user identity in Grafana.