526互联

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

发布时间 2023-09-18 10:33:37作者: keitsi

用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. 

  2. PAYLOAD里面的sub填上要登录的用户名。
    3. 

  3. 注意一下token的过期时间，exp里面的数值是timestamp。
    4. 

  4. iss的值参考Grafana配置上的这句“expect_claims = {"iss": "https://jwt.io/"}”配置，如果没有配置的话可以不设iss。
    5. 

  5. 把jwk的k的值填到VERIFY SIGNATURE的secrect中，并勾选“secret base64 encoded”选项。
    6. 



完成上面步骤之后就得到了左边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/keitsi/p/17705220.html