Skip to content

Integrating Customer Systems into DCE 5.0 (OEM IN)

OEM IN refers to the partner's platform being embedded as a submodule in DCE 5.0, appearing in the primary navigation bar of DCE 5.0. Users can log in and manage it uniformly through DCE 5.0. The implementation of OEM IN is divided into 5 steps:

  1. Unify Domain
  2. Integrate User Systems
  3. Integrate Navigation Bar
  4. Customize Appearance
  5. Integrate Permission System (Optional)

For specific operational demonstrations, refer to the OEM IN Best Practices Video Tutorial.

Note

The open source software Label Studio is used for nested demonstrations below. In actual scenarios, you need to solve the following issues in the customer system:

The customer system needs to add a Subpath to distinguish which services belong to DCE 5.0 and which belong to the customer system.

Environment Preparation

  1. Deploy the DCE 5.0 environment:

    https://10.6.202.177:30443 as DCE 5.0

  2. Deploy the customer system environment:

    http://10.6.202.177:30123 as the customer system

    Adjust the operations on the customer system during the application according to the actual situation.

  3. Plan the Subpath path of the customer system: http://10.6.202.177:30123/label-studio (It is recommended to use a recognizable name as the Subpath, which should not conflict with the HTTP router of the main DCE 5.0). Ensure that users can access the customer system through http://10.6.202.177:30123/label-studio.

Unify Domain Name and Port

  1. SSH into the DCE 5.0 server.

    ssh root@10.6.202.177
    
  2. Create the label-studio.yaml file using the vim command.

    vim label-studio.yaml
    
    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:
      # Add a virtual port
      - number: 80
        name: http
        protocol: HTTP
      location: MESH_EXTERNAL
      resolution: STATIC
      endpoints:
      # Change to the domain name (or IP) of the customer system
      - address: 10.6.202.177
        ports:
          # Change to the port number of the customer system
          http: 30123
    ---
    apiVersion: networking.istio.io/v1alpha3
    kind: VirtualService
    metadata:
      # Change to the name of the customer system
      name: label-studio
      namespace: ghippo-system
    spec:
      exportTo:
      - "*"
      hosts:
      - "*"
      gateways:
      - ghippo-gateway
      http:
      - match:
          - uri:
              exact: /label-studio # Change to the routing address of the customer system in the DCE5.0 Web UI entry
          - uri:
              prefix: /label-studio/ # Change to the routing address of the customer system in the DCE5.0 Web UI entry
        route:
        - destination:
            # Change to the value of spec.hosts in the ServiceEntry above
            host: label-studio.svc.external
            port:
              # Change to the value of spec.ports in the ServiceEntry above
              number: 80
    ---
    apiVersion: security.istio.io/v1beta1
    kind: AuthorizationPolicy
    metadata:
      # Change to the name of the customer system
      name: label-studio
      namespace: istio-system
    spec:
      action: ALLOW
      selector:
        matchLabels:
          app: istio-ingressgateway
      rules:
      - from:
        - source:
            requestPrincipals:
            - '*'
      - to:
        - operation:
            paths:
            - /label-studio # Change to the value of spec.http.match.uri.prefix in VirtualService
            - /label-studio/* # Change to the value of spec.http.match.uri.prefix in VirtualService (Note: add "*" at the end)
    
  3. Apply the label-studio.yaml using the kubectl command:

    kubectl apply -f label-studio.yaml
    
  4. Verify if the IP and port of the Label Studio UI are consistent:

Integrate User Systems

Integrate the customer system with the DCE 5.0 platform through protocols like OIDC/OAUTH, allowing users to enter the customer system without logging in again after logging into the DCE 5.0 platform.

  1. In the scenario of two DCE 5.0, you can create SSO access through Global Management -> Access Control -> Docking Portal.

  2. After creating, fill in the details such as the Client ID, Client Secret, and Login URL in the customer system's Global Management -> Access Control -> Identity Provider -> OIDC, to complete user integration.

  3. After integration, the customer system login page will display the OIDC (Custom) option. Select to log in via OIDC the first time entering the customer system from the DCE 5.0 platform, and subsequently, you will directly enter the customer system without selecting again.

Integrate Navigation Bar

Refer to the tar package at the bottom of the document to implement an empty frontend sub-application, and embed the customer system into this empty shell application in the form of an iframe.

  1. Download the gproduct-demo-main.tar.gz file and change the value of the src attribute in App-iframe.vue under the src folder (the user entering the customer system):

    • The absolute address: src="https://10.6.202.177:30443/label-studio" (DCE 5.0 address + Subpath)
    • The relative address, such as src="./external-anyproduct/insight"
    App-iframe.vue
    <template>
      <iframe>
        src="https://daocloud.io"
        title="demo"
        class="iframe-container"
      </iframe>
    </template>
    
    <style lang="scss">
    html,
    body {
      height: 100%;
    }
    
    # app {
      display: flex;
      height: 100%;
      .iframe-container {
        border: 0;
        flex: 1 1 0;
      }
    }
    </style>
    
  2. Delete the App.vue and main.ts files under the src folder, and rename:

    • Rename App-iframe.vue to App.vue
    • Rename main-iframe.ts to main.ts
  3. Build the image following the steps in the readme (Note: before executing the last step, replace the image address in demo.yaml with the built image address)

    demo.yaml
    kind: Namespace
    apiVersion: v1
    metadata:
      name: gproduct-demo
    ---
    apiVersion: apps/v1
    kind: Deployment
    metadata:
      name: gproduct-demo
      namespace: gproduct-demo
      labels:
        app: gproduct-demo
    spec:
      selector:
        matchLabels:
          app: gproduct-demo
      template:
        metadata:
          name: gproduct-demo
          labels:
            app: gproduct-demo
        spec:
          containers:
          - name: gproduct-demo
            image: release.daocloud.io/gproduct-demo # Modify this image address
            ports:
            - containerPort: 80
    ---
    apiVersion: v1
    kind: Service
    ...
    

After integration, the Customer System will appear in the primary navigation bar of DCE 5.0, and clicking it will allow users to enter the customer system.

Customize Appearance

Note

DCE 5.0 supports customizing the appearance by writing CSS. How the customer system implements appearance customization in actual applications needs to be handled according to the actual situation.

Log in to the customer system, and through Global Management -> Settings -> Appearance, you can customize platform background colors, logos, and names. For specific operations, please refer to Appearance Customization.

Integrate Permission System (Optional)

Method One:

Customized teams can implement a customized module that DCE 5 will notify each user login event to the customized module via Webhook, and the customized module can call the OpenAPI of AnyProduct and DCE 5.0 to synchronize the user's permission information.

Method Two:

Through Webhook, notify AnyProduct of each authorization change (if required, it can be implemented later).

Use Other Capabilities of DCE 5.0 in AnyProduct (Optional)

The method is to call the DCE 5.0 OpenAPI.

References

Comments