|
1 | 1 | !!! Abstract "" |
2 | | - 嵌入式对接分为三类,分别是: |
3 | 2 |
|
4 | | - - 小助手-基础应用 |
5 | | - - 小助手-高级应用 |
6 | | - - 页面嵌入 |
7 | | - |
8 | | - 其中小助手分为两小类,分别是:浮窗嵌入、全屏嵌入。 |
| 3 | + SQLBot 支持通过【小助手嵌入】和【网页嵌入】的方式将智能问数能力嵌入到外部系统页面中。 |
| 4 | + |
| 5 | + |
| 6 | + 其中【小助手嵌入】包含【基础应用】和【高级应用】两种模式,每种模式都支持「浮窗嵌入」和「全屏嵌入」两种呈现方式。 |
9 | 7 |
|
10 | 8 | 嵌入式 Demo 地址:https://github.com/dataease/sqlbot-embedded-demo |
11 | 9 |
|
|
17 | 15 | | 高级应用 | 宿主权限 | 宿主数据源(api 接口) | 有权限要求,有自己的权限体系 | |
18 | 16 | | 页面嵌入 | SQLBot 权限 | SQLBot 数据源 | 有权限要求,无自己的权限体系 | |
19 | 17 |
|
20 | | -## 新建应用 |
| 18 | +## 1 新建应用 |
21 | 19 |
|
22 | | -### 小助手-基础应用 |
| 20 | +### 1.1 小助手嵌入 |
| 21 | + |
| 22 | +#### 1.1.1 基础应用 |
23 | 23 |
|
24 | 24 | !!! Abstract "" |
25 | 25 | 使用 admin 账号登录 SQLBot,切到系统设置菜单-嵌入式管理,新建对应的应用。 |
|
32 | 32 |  |
33 | 33 | 小助手-基础应用有“游客/员工”简单权限模式,游客只能访问“公共”数据源 |
34 | 34 |
|
35 | | -### 小助手-高级应用 |
| 35 | + |
| 36 | +#### 1.1.1 高级应用 |
36 | 37 |
|
37 | 38 | !!! Abstract "" |
38 | 39 | 高级应用在新建环节和基础应用的区别就是数据源,通过 API 接口的方式获取。 |
39 | 40 |  |
40 | 41 |  |
41 | 42 |
|
42 | | - 开启 AES 加密,那么宿主系统提供的 API 接口中需要对相应的字段进行 AES 加密。 |
43 | | - 一般场景下宿主 API 接口会有认证机制,例如 token、cookie 等。这些凭证信息一般情况下会存储在前端页面,填写接口凭证,SQLBot 会在宿主页面上根据填写的凭证信息去获取凭证但不存储,获取的时机是在每次“问数”。SQLBot 根据获取到的凭证去调用宿主系统的 API 接口。有些基于 httpOnly 的 cookie 凭证,SQLBot 无法获取,可以为数据源接口额外定义一个认证凭证。 |
44 | | -  |
| 43 | +!!! Abstract "" |
| 44 | + |
| 45 | + - AES 加密:当开启 AES 加密时,宿主系统提供的 API 接口需对相关字段进行 AES 加密处理。 |
| 46 | + |
| 47 | + - 接口认证 |
| 48 | + - 在常见场景下,宿主 API 接口通常具备认证机制(如 Token、Cookie 等)。 |
| 49 | + |
| 50 | + - 这些认证凭证一般由前端页面存储,用户在 SQLBot 中填写接口凭证后,SQLBot 会在宿主页面上按需读取凭证并调用 API 接口,但 不会存储任何凭证信息。 |
| 51 | + |
| 52 | + - 凭证的读取发生在每次“问数”时,SQLBot 根据获取到的凭证调用宿主系统的 API 接口。 |
| 53 | + |
| 54 | + - httpOnly Cookie 场景:对于基于 httpOnly Cookie 的认证方式,由于 SQLBot 无法直接读取此类 Cookie,可以在数据源接口中额外定义一个认证凭证以实现访问。 |
45 | 55 |
|
46 | | - 注意:目标凭证字段(非必填)支持 js 表达式。 |
| 56 | +  |
47 | 57 |
|
48 | | - 以 Demo 系统为例: |
| 58 | +!!! Abstract "" |
| 59 | + |
| 60 | + **注意**:目标凭证字段(非必填)支持 JS 表达式,可灵活处理凭证值。 |
| 61 | + |
| 62 | + Demo 系统示例: |
49 | 63 |  |
50 | 64 |
|
51 | | - 分别解释接口凭证的字段 |
| 65 | + 以下分别说明接口凭证各字段的含义: |
| 66 | + |
| 67 | + 源系统凭证: |
| 68 | + |
| 69 | + - 类型:localStorage |
| 70 | + |
| 71 | + - 凭证名称:sqlbot-embedded-token |
52 | 72 |
|
53 | | - 源系统凭证类型 localStorage,凭证名称 sqlbot-embedded-token。 |
| 73 | + - 含义:从 localStorage 中读取 key 为 sqlbot-embedded-token 的值。 |
54 | 74 |
|
55 | | - 解释:从 localStirage 中获取 key 为 sqlbot-embedded-token 的信息。代码: |
| 75 | + - 示例代码: |
56 | 76 |
|
57 | 77 | ``` |
58 | 78 | var source_val = localStorage.getItem('sqlbot-embedded-token') |
59 | 79 | ``` |
60 | 80 |
|
61 | | - 目标凭证`Bearer ${JSON.parse(JSON.parse(source_val).v)}`。 |
| 81 | + 目标凭证 |
| 82 | + |
| 83 | + - 值: `Bearer ${JSON.parse(JSON.parse(source_val).v)}`。 |
| 84 | + |
| 85 | + - 含义:基于上一步获取的 source_val 进行解析并拼接成最终凭证。 |
| 86 | + - 示例代码: |
62 | 87 |
|
63 | | - 解释:根据上一步获取到的 source_val 进一步拼接凭证,代码: |
64 | 88 | ``` |
65 | 89 | source_val = `Bearer ${JSON.parse(JSON.parse(source_val).v)}` |
66 | 90 | ``` |
67 | 91 |
|
68 | | - 目标凭证位置 header,名称 sqlbot-embedded-token。 |
| 92 | + 目标凭证位置 |
| 93 | + |
| 94 | + - 位置:header |
| 95 | + |
| 96 | + - 名称:sqlbot-embedded-token |
| 97 | + |
| 98 | + - 含义:将拼接好的凭证放在请求头中,以 sqlbot-embedded-token 作为 Header 名称调用 API。 |
69 | 99 |
|
70 | | - 解释:把上一部获取到的凭证放在请求头的 sqlbot-embedded-token 中去调 API。 |
71 | 100 |
|
72 | | -### 页面嵌入 |
| 101 | +### 1.2 页面嵌入 |
73 | 102 |
|
74 | 103 | !!! Abstract "" |
75 | | - 填写名称、跨域设置 |
| 104 | + 填写名称、跨域设置: |
76 | 105 |  |
77 | 106 |
|
78 | 107 | 记录 APP ID 以及 APP Secret,后面编码环节用得到。 |
79 | 108 |
|
80 | | -## 宿主系统实现 |
| 109 | +## 2 宿主系统实现 |
81 | 110 |
|
82 | 111 | !!! Abstract "" |
83 | 112 | 下载 Demo 代码 https://github.com/dataease/sqlbot-embedded-demo |
84 | 113 |
|
85 | | - 配置数据库信息 |
| 114 | + 配置数据库信息: |
86 | 115 |
|
87 | 116 |  |
88 | 117 |
|
|
104 | 133 |
|
105 | 134 | 代码层面基础应用和高级应用嵌入方式基本没有区别。 |
106 | 135 |
|
107 | | -### 浮窗模式 |
| 136 | +### 2.1 浮窗模式 |
108 | 137 |
|
109 | 138 | !!! Abstract "" |
110 | 139 | 参考 assistan/float.vue 文件 |
|
123 | 152 | 如接入成功,访问小助手浮窗宿主页面,右下角会出现浮动图标,如下图: |
124 | 153 |  |
125 | 154 |
|
126 | | -### 全屏模式 |
| 155 | +### 2.2 全屏模式 |
127 | 156 |
|
128 | 157 | !!! Abstract "" |
129 | 158 | 参考 assistant/full.vue 文件 |
|
136 | 165 |
|
137 | 166 |  |
138 | 167 |
|
139 | | -### 页面嵌入 |
| 168 | +### 2.3 页面嵌入 |
140 | 169 |
|
141 | 170 | !!! Abstract "" |
142 | 171 | 参考 embedded/index.vue 文件 |
|
153 | 182 |
|
154 | 183 |  |
155 | 184 |
|
156 | | -### 高级应用 API 接口 |
| 185 | +### 2.4 高级应用 API 接口 |
157 | 186 |
|
158 | 187 | !!! Abstract "" |
159 | 188 | 接口基本信息 |
|
0 commit comments