自主系统通过iframe 嵌入 grafana 仪表板（dashboard）

使用iframe方式嵌入dashboard主要会遇到以下几个问题：

1、iframe方式嵌入dashboard跳转拒绝访问；

2、浏览器控制台报错：Refused to display 'http://{ip:port}/' in a frame because it set 'X-Frame-Options' to 'deny'；

3、跳转之后依然需要登录；

......

以上有些问题，可以通过修改配置文件相关配置来解决（修改配置文件之后，记得重启grafana服务）

# 允许浏览器嵌入
allow_embedding = true
# 开启匿名访问，及以下组织和角色相关注释
enabled = true

但是针对跳转后依然需要登录的问题，如果只是用匿名访问的方式，这样就太被动了。对dashboard的维护以及对应操作控制都不够友好，针对以上问题有以下几种处理方式：

1、授权登录

grafana提供标准协议oauth2的接入方式，可以根据相关接入文档进行配置使用，但不可避免的需要做很多额外的学习以及操作。

2、自定义图表

grafana提供 api keys，可以通过调用相关接口进行自定义图表开发展示。

3、白名单配置

开启匿名登录，但是需要做好安全性配置，例如白名单，但同样存在局限性。

4、接口登录转发（同域条件下）

这是本文介绍的方式，核心流程就是提供前端访问后台接口，后台对接口进行权限校验（校验主系统登录权限），校验通过后访问grafana登录接口，成功后将得到的cookie添加至响应信息并重定向至grafna页面

5、更多…

官方接口文档：https://grafana.com/docs/grafana/latest/developers/http_api/

一、具体实现

1、grafana配置信息

配置nginx代理grafana实现域名访问参考《配置nginx代理grafana实现域名访问》。

以上3000端口为grafana服务的默认端口，根据占用情况决定是否修改，domain的ip地址为当前服务器的ip地址，即部署grafana服务器，root_url中的上下文/grafana根据实际情况自行修改，但是需要和nginx的代理配置保持一致。nginx的配置具体如下：

location  /grafana {
	proxy_buffering on;
	proxy_buffer_size 4k;
	proxy_buffers 8 4M;
	proxy_busy_buffers_size 4M;
	proxy_set_header Host $http_host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header X-Forwarded-Proto $scheme;
	proxy_pass http://10.130.9.30:3000;
}

加入以上配置之后记得重启nginx，配置之后的效果就是在业务系统域名之后跟/grafana就可以访问到grafana服务了，但是直接使用ip加端口的方式就无法访问了。比如说主系统的访问地址为：xxx.xxx.com，那grafana服务的访问地址就是xxx.xxx.com/grafana。

2、yaml文件中配置grafana相关信息

grafana:
  baseUrl: http://127.0.0.1:3000
  adminUser: admin
  adminPwd: admin
  viewUser: viewer
  viewPwd: viewer
  auth: glsa_wSWxeJgOo0WUKtP1mwONiwk9GakvhW7P_bd7a45d3
  kiosk: kiosk=full

2、GrafanaController.java

@RestController
@RequestMapping(value = "/grafana")
@Api(tags = {"Grafana"})
public class GrafanaController {
    
    @Autowired
    private GrafanaService grafanaService;