# 将第三方系统页面嵌入到SuccBI

本文讲述如何将第三方系统页面在嵌入到SuccBI页面中系统后,让用户像访问一个系统一样登录访问SuccBI页面。需要进入如下开发配置:

  1. 配置开发单点登录
  2. 如果SuccBI和第三方系统不是部署在同于个域中,第三方系统还需要允许跨域

# 示例

下面以在dashboard中使用iframe展示第三方系统页面为例(需要考虑跨域问题):

在dashboard编辑界面拖入iframe组件,在iframe的url上填入如下格式的URL:

/api/sso/cert/redirect?redirect_url={第三方系统页面地址}
  • url上第三方系统页面地址需要进行 URL转义 (opens new window)。示例:

    访问第三方系统地址为https://example.com/,经过URL转义后的地址为https%3A%2F%2Fexample.com,iframe的url填写的的内容为/api/sso/cert/redirect?redirect_url=https%3A%2F%2Fexample.com

  • 考虑到iframe填写的url会比较麻烦,可以考虑简化url

iframe

# 简化跳转URL

考虑到url上填写的内容会比较复杂,SuccBI提供了授信域名的配置来简化,在系统设置元数据(/sysdata/settings/settings.json)中添加上类似配置:

{
    "sys.trustedDomains": {
        "cert": { // cert为第三方系统起的别名
            "extranet" : "{第三方系统的部署地址}",//需要跳转到第三方系统部署部署地址
            "sso": true// 是否需要添加上数字证书登录的验证信息
        }
    }
}

在iframe组件的url中可填写如下格式的url:

/api/trusted-domains/cert/{第三方系统页面的相对地址}[?{第三方系统页面参数}]

示例:

  • 第三方系统的部署地址为: https://example.com
  • 期望在iframe中访问:https://exmaple.com/meta/demo?resid=123
  • 在SuccBI dashboard的iframe所填写url可以是 /api/trusted-domains/cert/meta/demo?resid=123

# 跨域

# iframe跨域嵌入第三方系统页面

  1. 如果访问SuccBI使用的https协议,第三方系统也需要使用https协议。
  2. iframe嵌入第三方系统的url的请求中,第三方系统应当针对这个请求不设置(不设置默认允许iframe嵌入),或者正确设置响应头X-Frame-Options (opens new window)。 比如:X-Frame-Options设置为allow-from https://example.succbi.com,标识允许访问域名为https://example.succbi.com使用iframe嵌入。
  3. 如果需要在chrome80以上版本浏览器中使用,还需要针对第三方系统处理samesite问题

# 通过ajax跨域访问第三方系统

大型业务场景往往由多个系统组成,由于业务需求SuccBI页面中有时候需要使用ajax请求跨域请求第三方系统数据。跨域配置要点如下:

  1. SuccBI前端sys.ts中封装了ajax以及其衍生方法rcrc_getrc1都提供了跨域请求功能。
    实现本质上都是针对XMLHttpRequest设置了withCredentials=true

  2. 第三方系统需要针对SuccBI的跨域请求,添加相关跨域响应头 (opens new window)
    需要注意的是浏览器在发起跨域请求前,都会发起一个Preflight请求 (opens new window),服务器需要正确响应跨域请求和Preflight这两个请求。
    下面是SuccBI针对跨域请求作出的跨域响应头示例,仅供参考,具体以及原理功能设置请参考MDN跨域介绍 (opens new window)

    点击展开查看Preflight响应头示例>>
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Headers: X-Requested-With,Content-Type
    Access-Control-Allow-Methods: PATCH,PUT,POST,GET,DELETE,HEAD,OPTIONS
    Access-Control-Allow-Origin: https://docs.succbi.com
    Access-Control-Max-Age: 3600
    
    点击展开查看跨域请求响应头示例>>
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Origin: https://docs.succbi.com
    
  3. 如果需要在chrome80以上版本浏览器中使用,还需要针对第三方系统处理samesite问题

是否有帮助?
0条评论
评论