Portal-UI

Konfiguration für Portal-UI

Die neue Portal-UI bietet eine grafische Oberfläche, aus der heraus ein einfacher Absprung in alle anderen neu geschaffenen UI’s möglich ist.
Damit es möglich wird aus der Portal-UI heraus in alle anderen verfügbaren UI’s abzuspringen müssen die Zugänge in der portal-config.json konfiguriert werden. Ein vollständige portal-config.json-Konfiguration kann wie folgt aussehen:

{
  "portalConfig": [
    {
      "uiUrl": "http://localhost:4040/B2B-UI",
      "uiRequiredRole": "B2B-Dashboard",
      "uiName": "portalConfig.uiName.b2b",
      "picturePath": "/B2B-Portal-UI/assets/config/images/p-b2b.jpg",
      "iconName": "/B2B-Portal-UI/assets/config/icons/B2b.svg",
      "description": "portalConfig.description.b2b"
    },
    {
      "uiUrl": "http://localhost:4040/FSS-UI/",
      "uiRequiredRole": "FSS-CertificateManager-Read",
      "uiName": "portalConfig.uiName.fss",
      "picturePath": "/B2B-Portal-UI/assets/config/images/p-security.jpg",
      "iconName": "/B2B-Portal-UI/assets/config/icons/SecurityServer.svg",
      "description": "portalConfig.description.fss"
    },
    {
      "uiUrl": "http://localhost:4040/User-Messages-UI/",
      "uiRequiredRole": "B2B-UserMessages-Write",
      "uiName": "portalConfig.uiName.userMessages",
      "picturePath": "/B2B-Portal-UI/assets/config/images/p-systemmessage.jpg",
      "iconName": "/B2B-Portal-UI/assets/config/icons/systemmessage.svg",
      "description": "portalConfig.description.userMessages"
    },
    {
      "uiUrl": "http://localhost:4040/B2B-RevisionInfo-UI/",
      "uiRequiredRole": "RevisionManager-Read",
      "uiName": "portalConfig.uiName.revisionManager",
      "picturePath": "/B2B-Portal-UI/assets/config/images/p-reversion-manager.jpg",
      "iconName": "/B2B-Portal-UI/assets/config/icons/reversionmanager.svg",
      "description": "portalConfig.description.revisionManager"
    },
    {
      "uiUrl": "http://localhost:4040/B2B-Admin-UI/",
      "uiRequiredRole": "B2BAdmin-Dashboard",
      "uiName": "portalConfig.uiName.admin",
      "picturePath": "/B2B-Portal-UI/assets/config/images/p-admin.jpg",
      "iconName": "/B2B-Portal-UI/assets/config/icons/administration.svg",
      "description": "portalConfig.description.admin"
    },
    {
      "uiUrl": "http://localhost:4040/B2B-Index-Management-UI/",
      "uiRequiredRole": "B2B-IndexManagement",
      "uiName": "portalConfig.uiName.indexManagement",
      "picturePath": "/B2B-Portal-UI/assets/config/images/p-indexmanagement.jpg",
      "iconName": "/B2B-Portal-UI/assets/config/icons/index-management.svg",
      "description": "portalConfig.description.indexManagement"
    },
    {
      "uiUrl": "http://localhost:4040/B2B-Portal-UI/",
      "uiRequiredRole": "B2BPortal-UI",
      "uiName": "portalConfig.uiName.portal",
      "picturePath": "/B2B-Portal-UI/assets/config/b2b-ui.jpg",
      "iconName": "dashboard",
      "description": "portalConfig.description.portal"
    }
  ]
}
  • Unter “uiUrl” werden die jeweiligen URL’s hinterlegt, unter denen die neuen Oberflächen erreichbar sind. Beispiel für B2B-UI: http://host.docker.internal:80/B2B-UI/.
  • Unter “uiRequiredRole” ist die jeweilige Rolle einzutragen, die benötigt wird, um auf die jeweilige UI-Anwendung zugreifen zu können. Diese Rolle muss in Keycloack vorhanden sowie dem jeweiligen Benutzer zugeordnet sein.
  • Unter “uiName” wird ein vordefinierter Wert angegeben, der nicht geändert werden sollte. Wenn Sie diesen Wert ändern möchten, müssen Sie den UI-Quellcode für (EN.json und DE.json) aktualisieren.
  • Unter “picturePath” und “iconName” werden die Pfade für die Bilder der Portal-UI Kacheln definiert. Auch diese Werte sollten aus dem Beispiel übernommen und nicht geändert werden. In unserem Beispiel wurde der Portal-Ui Microservice im Ordner /B2B-Portal-UI installiert.
  • Unter “description” werden die jeweiligen tooltips geladen. Auch diese Konfiguration sollte aus dem Beispiel übernommen werden

Portal-UI in Nginx installieren

Schritt 1: Konfiguration nginx.conf

  • Um die Portal-UI nutzten zu können muss zudem die nginx.conf angepasst werden. Fügen Sie dazu die folgende Konfiguration zur nginx.conf im Ordner nginx\conf hinzu:
          location /B2B-Portal-UI {
              alias  html/B2B-Portal-UI/;
              try_files $uri$args $uri$args/ /B2B-Portal-UI/index.html;
          }
    
          location /B2B-UI/portalConfig/ {
              proxy_pass   http://localhost:4040/B2B-Portal-UI/assets/config/portal-config.json;
          }
    				
          location /B2B-Admin-UI/portalConfig/ {
              proxy_pass   http://localhost:4040/B2B-Portal-UI/assets/config/portal-config.json;
          }	
    				
          location /B2B-RevisionInfo-UI/portalConfig/ {
              proxy_pass   http://localhost:4040/B2B-Portal-UI/assets/config/portal-config.json;
          }
            
          location /B2B-Index-Management-UI/portalConfig/ {
              proxy_pass   http://localhost:4040/B2B-Portal-UI/assets/config/portal-config.json;
          }
            
          location /User-Messages-UI/portalConfig/ {
              proxy_pass   http://localhost:4040/B2B-Portal-UI/assets/config/portal-config.json;
          }
    
          location /B2B-Portal-UI/portalConfig/ {
              proxy_pass   http://localhost:4040/B2B-Portal-UI/assets/config/portal-config.json;
          }
            
          location /FSS-UI/portalConfig/ {
              proxy_pass   http://localhost:4040/B2B-Portal-UI/assets/config/portal-config.json;
          }
    				
          #proxy for rest api call
          location /B2B-Portal-UI/api/ {
              proxy_pass   http://localhost:8080/b2bbp-engine/api/;
              proxy_http_version 1.1;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection "upgrade";
              proxy_set_header Host $host;
              proxy_set_header        X-Real-IP $remote_addr;
              proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header        X-Forwarded-Proto $scheme;
              proxy_cache_bypass $http_upgrade;
              proxy_read_timeout 360s;
              client_max_body_size 300M;
          }
    
          location /B2B-Portal-UI/api/b2b-user-messages/system-messages {
              proxy_pass   <User Messages backend application url>/system-messages;
              proxy_http_version 1.1;
              proxy_set_header Upgrade $http_upgrade;
              proxy_set_header Connection "upgrade";
              proxy_set_header Host $host;
              proxy_set_header        X-Real-IP $remote_addr;
              proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
              proxy_set_header        X-Forwarded-Proto $scheme;
              proxy_cache_bypass $http_upgrade;
          }
    

Schritt 2: Kopieren Sie B2B-Portal-UI-Daten in den Ordner nginx\html. In unserem Beispiel wurden die Datein in den Ordner “B2B-Portal-UI” unter dem Pfad nginx\html installiert.

Schritt 3: Legen Sie die Datei portal-config.json unter nginx\html\B2B-Portal-UI\assets\config ab. Kopieren Sie außerdem die keycloak.json mit Ihrer korrekten Konfiguration nach nginx\html\B2B-Portal-UI\assets\config

Beispiel: Konfiguration von keycloak.json

{
  "auth-server-url": "http://localhost:8070/auth",
  "realm": "b2b-qa"
}

Schritt 4: Legen sie den neuen Client “portal-ui” in Keycloack an und fügen sie passende Redirect URI und Web Origin hinzu.


Das Ergebnis nach der Anmeldung:

Portal-UI im Docker installieren

Stellen Sie bei Schritt 1 und Schritt 3 sicher, dass die Einstellungen in der nginx.conf im Docker ebenfalls der Konfiguration aus Schritt 1 entspricht. In Keycloak muss ebenfalls der Client “portal-ui” mit passender Redirect URI and Web Origin konfigurert sein. Stellen Sie sicher, dass die keycloak.json und portal-config.json in für die Portal-UI korrekt sind. Anschließend kann die Anwendung wie gewonht via Docker-compose.yml gestartet werden.

View Me   Edit Me