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

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

配置开发单点登录。
如果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跨域嵌入第三方系统页面

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

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

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

SuccBI前端sys.ts中封装了ajax以及其衍生方法rc、rc_get、rc1都提供了跨域请求功能。
实现本质上都是针对XMLHttpRequest设置了withCredentials=true。
第三方系统需要针对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
```
如果需要在chrome80以上版本浏览器中使用，还需要针对第三方系统处理samesite问题。

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

开发数字证书登录令牌

0条评论