explorer supports iframe

docs-2.0/nebula-explorer/about-explorer/ex-ug-what-is-explorer.md

@@ -32,6 +32,8 @@ NebulaGraph Explorer （简称 Explorer）是一款可以通过 Web 访问的可
 
 - [数据存储](../canvas-operations/canvas-snapshot.md)：支持保存和导入画布数据。
 
+- [内联框架](../nebula-explorer/iframe.md)：支持在第三方页面中嵌入 Explorer 画布。
+
 <!-- - 便于筛选：支持基于自定义条件灵活筛选需要展示的数据。-->
 
 ## 身份验证

docs-2.0/nebula-explorer/iframe.md

@@ -0,0 +1,76 @@
+# 内联框架
+
+NebulaGraph Explorer 支持内联框架（iframe），可以将画布嵌入至第三方页面中使用。本文介绍如何嵌入画布。
+
+## 前提条件
+
+已安装 Explorer。
+
+## 注意事项
+
+- 嵌入的 Explorer 页面默认直接访问目标图空间，因此会屏蔽部分页面及功能。例如上方导航栏、左侧导航栏中的模板查询和切换图空间等。如果需要访问多个图空间，可以在多个页面中分别嵌入。
+- 暂不支持切换语言，默认为中文页面。
+
+## 步骤
+
+1. 在 Explorer 安装目录内修改配置文件`config/app-config.yaml`。需要修改的内容如下。
+
+  ```bash
+  # 取消 CertFile 和 KeyFile 参数的注释。
+  CertFile: "./config/NebulaGraphExplorer.crt"
+  KeyFile: "./config/NebulaGraphExplorer.key"
+
+  # 修改 IframeMode.Enable为 true。
+  IframeMode:
+    Enable: true
+  # 可以设置窗口的 URI 白名单，默认无限制。
+    # Origins:
+    #  - "http://192.168.8.8"
+  ```
+
+2. 在`config`文件夹内使用`openssl`命令生成自签名证书。示例如下。
+
+  ```bash
+  openssl req -newkey rsa:4096 -x509 -sha512 -days 365 -nodes -subj "/CN=NebulaGraphExplorer.com" -out NebulaGraphExplorer.crt -keyout NebulaGraphExplorer.key
+  ```
+
+  - `-newkey`：生成证书请求或者自签名证书的时候自动生成密钥。
+  - `-x509`：生成自签名证书。
+  - `-sha512`：指定消息摘要算法。
+  - `-days`：`-x509`生成的证书的有效天数。
+  - `-nodes`：不加密输出密钥。
+  - `-subj`：设置请求的主题。
+  - `-out`：指定生成的证书请求或者自签名证书名称。
+  - `-keyout`：指定自动生成的密钥名称。
+
+3. 用户自行开发，在第三方页面中通过 iframe 方式嵌入 Explorer。
+4. 在父页面通过 postMessage 方法传递登录消息，格式如下：
+
+  ```json
+  { type: 'NebulaGraphExploreLogin', 
+    data: { 
+      authorization: 'cm9vdDoxMjM=', 
+      host: '192.168.8.240:9669', 
+      space: 'basketballplayer' 
+      } }
+  ```
+
+  - type：方法类型必须为`NebulaGraphExploreLogin`。
+  - data：
+    - `authorization`：Base64 编码后的 NebulaGraph 账号和密码。编码前格式为`账号:密码`，示例为`root:123`，编码后为  `cm9vdDoxMjM=`。
+    - `host`：NebulaGraph 的 Graph 服务地址。
+    - `space`：目标图空间名称。
+
+5. 启动 Explorer 服务。
+
+  !!! note
+
+        如果是 RPM/DEB 安装的 Explorer，请执行命令`sudo ./nebula-explorer-server &`。
+
+  ```bash
+  ./scripts/start.sh
+  ```
+
+6. 访问第三方页面，检查是否可以查看到嵌入的 Explorer 页面。示例页面中第一个页面展示`basketballplayer`图空间，第二个页面展示`test1`图空间。
+
+  ![iframe_example](https://docs-cdn.nebula-graph.com.cn/figures/explorer_iframe_example_221025.png)

mkdocs.yml

@@ -654,6 +654,7 @@ nav:
         - 查询指定作业详情: nebula-explorer/workflow/workflow-api/api-desc-job.md
         - 取消作业运行: nebula-explorer/workflow/workflow-api/api-cancel-job.md
         - 获取指定任务的运行结果数据: nebula-explorer/workflow/workflow-api/api-desc-task.md
+    - 内联框架: nebula-explorer/iframe.md
     - 基本操作和快捷键: nebula-explorer/ex-ug-shortcuts.md
     - 常见问题 FAQ: nebula-explorer/faq.md