用iframe把Grafana Dashboard嵌入第三方系统

标签：iframe auth grafana token Dashboard https Grafana true

用Grafana可以很容易地创建Dashboard，并且后期修改和更新很方便，由于它的易用性和灵活性很适合用来做系统和生产的监控。但是Grafana的UI设计似乎对普通用户不是很友好，如果让用户直接登录Grafana去搜索浏览Dashboad不是很合适。由此自然就产生了把Grafana嵌入第三方系统的需求。

重要提示

• Grafana版本要用9.1.0之后的版本

auth_token在Grafana 9.1.0之后才开始支持：https://github.com/grafana/grafana/issues/63254

• 必须启动的配置

[security]
allow_embedding = true

[auth.anonymous]
enabled = true

 

• 调试过程中一定要记得把dashbaord的View权限去掉，不然可能会导致误你以为用的是token访问，但其实可能是匿名访问的。

如果auth_token登录成功的话，可以在界面上看到实际上登录的用户就是你token payload 里面sub指定的用户。另外如果指定的用户不存在，启用了auto_sign_up会自动创用户。

 

创建token

• 生成jwk，这里选择HS256加密算法。

得到jwk：

{   "kty": "oct",   "kid": "23f238f0-8d83-4c56-9a44-b7426011544d",   "k": "hLc8OyEl2D8xtftERMtv3zMbg0GkZr3LMLuhGGerans",   "alg": "HS256" }

•  把jwk放到keys里面保存成jwks.json文件，放到Grafana安装的配置目录下（conf/jwks.json）。

{   "keys": [     {       "kty": "oct",       "kid": "23f238f0-8d83-4c56-9a44-b7426011544d",       "k": "hLc8OyEl2D8xtftERMtv3zMbg0GkZr3LMLuhGGerans",       "alg": "HS256"     }   ] }

• 生成token

token加密解密站点：https://jwt.io/

1. 把jwk的kid填到HEADER里面。
2. PAYLOAD里面的sub填上要登录的用户名。
3. 注意一下token的过期时间，exp里面的数值是timestamp。
4. iss的值参考Grafana配置上的这句“expect_claims = {"iss": "https://jwt.io/"}”配置，如果没有配置的话可以不设iss。
5. 把jwk的k的值填到VERIFY SIGNATURE的secrect中，并勾选“secret base64 encoded”选项。

完成上面步骤之后就得到了左边Encoded里面的这串字符串就是编码之后的token。

 Grafana配置

允许嵌入到iframe：

[security]
allow_embedding = true

允许匿名访问：

[auth.anonymous]
enabled = true

启用jwt认证：

[auth.jwt]
enabled = true
enable_login_token = true
#设置通过http header登录的名字
header_name = X-JWT-Assertion
#设置角色名字，如有需要
role_attribute_path = role
#设置jwk文件的路径
jwk_set_file =conf/jwks.json
cache_ttl = 60m
#安全特性，设置是否需要token带预期的声明。
expect_claims = {"iss": "https://jwt.io/"}
role_attribute_strict = false
allow_assign_grafana_admin = false
skip_org_role_sync = true
username_claim = sub
email_claim = email
#设置是否自动注册新用户，启用的话，如果sub指定的用户不存在，则Grafana会自动注册。
auto_sign_up = true
#启用url登录，也就是我们在url设置auth_token参数可以自动登录
url_login = true

重新启动一下Grafana，如果启动不成功，请检查一下jwk_set_file设置的路径是否正确。

 

完成以上配置之后，可以尝试一下token登录。

 http://localhost:3000/d/ddfd01d0-d493-4672-9a0b-51ccb7d03229/new-dashboard?orgId=1&auth_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IjIzZjIzOGYwLThkODMtNGM1Ni05YTQ0LWI3NDI2MDExNTQ0ZCJ9.eyJzdWIiOiJhZG1pbiIsIm5hbWUiOiJBZG1pbiIsImV4cCI6NDg1MDYzMzAzNSwiaWF0IjoxNTE2MjM5MDIyLCJpc3MiOiJodHRwczovL2p3dC5pby8ifQ.xq3yaRuGbbGxBSGDpFf7W9LmKZpWRdsttpWnJAhdq6s

参考

• 参考文章：https://www.cnblogs.com/yinxy/p/14893595.html
• 官方文档：https://grafana.com/docs/grafana/latest/setup-grafana/configure-security/configure-authentication/jwt/
• 官方demo：https://github.com/grafana/grafana-iframe-oauth-sample
• auth_token在Grafana 9.1.0之后才开始支持：https://github.com/grafana/grafana/issues/63254

转载请注明出处: https://www.cnblogs.com/keitsi/p/17705220.html

标签：iframe,auth,grafana,token,Dashboard,https,Grafana,true
From： https://www.cnblogs.com/keitsi/p/17705220.html