跳转至

如何将客户系统集成到 DCE 5.0（OEM IN）

OEM IN 是指合作伙伴的平台作为子模块嵌入 DCE 5.0，出现在 DCE 5.0 一级导航栏。 用户通过 DCE 5.0 进行登录和统一管理。实现 OEM IN 共分为 5 步，分别是：

  1. 统一域名
  2. 打通用户体系
  3. 对接导航栏
  4. 定制外观
  5. 打通权限体系（可选）

具体操作演示请参见 OEM IN 最佳实践视频教程。

Note

以下使用开源软件 Label Studio 来做嵌套演示。实际场景需要自己解决客户系统的如下问题：

  1. 客户系统需要自己添加一个 Subpath，用于区分哪些是 DCE 5.0 的服务，哪些是客户系统的服务。

环境准备

  1. 部署 DCE 5.0 环境：

    https://10.6.202.177:30443 作为 DCE 5.0

    DCE 5.0

  2. 部署客户系统环境：

    http://10.6.202.177:30123 作为客户系统

    应用过程中对客户系统的操作请根据实际情况进行调整。

  3. 规划客户系统的 Subpath 路径： http://10.6.202.177:30123/label-studio（建议使用辨识度高的名称作为 Subpath，不能与主 DCE 5.0 的 HTTP router 发生冲突）。请确保用户通过 http://10.6.202.177:30123/label-studio 能够正常访问客户系统。

    Label Studio

统一域名和端口

  1. SSH 登录到 DCE 5.0 服务器。

    ssh root@10.6.202.177

  2. 使用 vim 命令创建 label-studio.yaml 文件

    vim label-studio.yaml

    ```yaml title="label-studio.yaml" apiVersion: networking.istio.io/v1beta1 kind: ServiceEntry metadata: name: label-studio namespace: ghippo-system spec: exportTo: - "*" hosts: - label-studio.svc.external ports: # 添加虚拟端口 - number: 80 name: http protocol: HTTP location: MESH_EXTERNAL resolution: STATIC endpoints: # 改为客户系统的域名（或IP） - address: 10.6.202.177 ports: # 改为客户系统的端口号 http: 30123

    apiVersion: networking.istio.io/v1alpha3 kind: VirtualService metadata: # 修改为客户系统的名字 name: label-studio namespace: ghippo-system spec: exportTo: - "" hosts: - "" gateways: - ghippo-gateway http: - match: - uri: exact: /label-studio # 修改为客户系统在 DCE5.0 Web UI 入口中的路由地址 - uri: prefix: /label-studio/ # 修改为客户系统在 DCE5.0 Web UI 入口中的路由地址 route: - destination: # 修改为上文 ServiceEntry 中的 spec.hosts 的值 host: label-studio.svc.external port: # 修改为上文 ServiceEntry 中的 spec.ports 的值 number: 80

    apiVersion: security.istio.io/v1beta1 kind: AuthorizationPolicy metadata: # 修改为客户系统的名字 name: label-studio namespace: istio-system spec: action: ALLOW selector: matchLabels: app: istio-ingressgateway rules: - from: - source: requestPrincipals: - '' - to: - operation: paths: - /label-studio # 修改为 VirtualService 中的 spec.http.match.uri.prefix 的值 - /label-studio/ # 修改为 VirtualService 中的 spec.http.match.uri.prefix 的值（注意，末尾需要添加 "*"） ```

  3. 使用 kubectl 命令应用 label-studio.yaml：

    kubectl apply -f label-studio.yaml

  4. 验证 Label Studio UI 的 IP 和 端口是否一致：

    Label Studio

打通用户体系

将客户系统与 DCE 5.0 平台通过 OIDC/OAUTH 等协议对接，使用户登录 DCE 5.0 平台后进入客户系统时无需再次登录。

  1. 在两套 DCE 5.0 的场景下，可以在 DCE 5.0 中通过 全局管理 -> 用户与访问控制 -> 接入管理 创建 SSO 接入。

    接入管理列表

    接入管理列表

  2. 创建后将详情中的客户端 ID、密钥、单点登录 URL 等填写到客户系统的 全局管理 -> 用户与访问控制 -> 身份提供商 -> OIDC 中，完成用户对接。

    oidc

  3. 对接完成后，客户系统登录页面将出现 OIDC（自定义）选项，首次从 DCE 5.0 平台进入客户系统时选择通过 OIDC 登录， 后续将直接进入客户系统无需再次选择。

    登录页

对接导航栏

参考文档下方的 tar 包来实现一个空壳的前端子应用，把客户系统以 iframe 的形式放进该空壳应用里。

  1. 下载 gproduct-demo-main.tar.gz 文件，将 src 文件夹下 App-iframe.vue 中的 src 属性值改为用户进入客户系统的绝对地址，如： src="https://10.6.202.177:30443/label-studio" (DCE 5.0 地址 + Subpath) 或相对地址，如： src="./external-anyproduct/insight"

    src 地址

  2. 删除 src 文件夹下的 App.vue 和 main.ts 文件，同时将：

    • App-iframe.vue 重命名为 App.vue
    • main-iframe.ts 重命名为 main.ts

  3. 按照 readme 步骤构建镜像（注意：执行最后一步前需要将 demo.yaml 中的镜像地址替换成构建出的镜像地址）

构建镜像

对接完成后，将在 DCE 5.0 的一级导航栏出现 客户系统 ，点击可进入客户系统。

客户系统

定制外观

Note

DCE 5.0 支持通过写 CSS 的方式来实现外观定制。实际应用中客户系统如何实现外观定制需要根据实际情况处理。

登录客户系统，通过 全局管理 -> 平台设置 -> 外观定制 可以自定义平台背景颜色、logo、名称等， 具体操作请参照外观定制。

打通权限体系（可选）

方案思路一：

定制化团队可实现一定制模块，DCE 5 将每一次的用户登录事件通过 Webhook 的方式通知到定制模块， 定制模块可自行调用 AnyProduct 和 DCE 5.0 的 OpenAPI 作该用户的权限信息同步。

方案思路二：

通过 Webhook 方式，将每一次的授权变化都通知到 AnyProduct (如有需求，后续可实现)。

AnyProduct 使用 DCE 5.0 的其他能力(可选)

方法为：调用 DCE 5.0 OpenAPI

参考资料

评论