Dokumentation zur Installation neue UI ohne Docker

Installation neue UI ohne Docker

Was beinhaltet diese Dokumentation:

Installation neue UI in einem Webserver (in diesem Fall nginx) mit neu aufgesetztem tomcat, abgesichert über Keycloak mit postgresql Datenbank auf einem Windows System. Keine Abgesicherte Verbindung der UI, über https.

VORSICHT: Wie empfehlen die neue UI über https abzusichern!

Voraussetzung:

Die folgende Installation setzt auf einer bereits bestehenden B2B mit Tomcat-Knoten und laufender Datenbank auf. Da die Admin UI erst in Kürze veröffentlicht wird, ist das ein einfacher Weg, laufende Services zu verwenden.

Zielbild:

Zum Schluss gehört zur Landschaft ein Tomcat mit alter Konfiguration (auf dem ggf. schon Nachrichten eingespielt wurden), ein neuer Tomcat mit Keycloak Konfiguration, ein Keycloak und ein nginx-Webserver in dem die neue UI läuft.

Kopie des bestehenden Tomcat Knoten anlegen (Teil 1)

Auf diesem Knoten sollten auch später keine Services laufen. Er ist nur für die UI Kommunikation zuständig.

  1. Kopiere den bereits bestehenden Tomcat Knoten um einen neuen anzulegen, alternativ kann auch eine neue tomcat.zip heruntergeladen und entpackt werden.
  2. Änderung des Connector und des Shutdown Ports in der server.xml im conf-Ordner:

    Server port="xxxx" shutdown="SHUTDOWN"
    Connector port="xxxx" protocol="HTTP/1.1"
    

Die Ports müssen sich vom bestehenden B2B Knoten unterscheiden, bitte nicht 8080 verwenden, da das der Keycloak-Port sein wird.

Start Keycloak Installation im Standalone Mode

  1. Unter https://www.keycloak.org/downloads.html unter Server - Standalone server distribution die zip-Datei herunter laden und entpacken.
  2. Ggf. Port Änderung in der standalone.xml: unter /standalone/configuration liegt die standalone.xml, im Abschnitt socket-binding-group kann der Port des socket-binding mit name=“http“ geändert werden, wenn es sich um https handelt auf 443, sonst 8080 behalten (darf sonst nicht mehr verwendet werden)

Aufsetzen neuer Datenbank für Keycloak (um Standard H2 Datenbank in Keycloak abzulösen)

  1. In diesem Beispiel wird eine neue database in der Postgres-Datenbank erzeugt
  2. Über die B2B database einen user keycloak anlegen, kann auch anders benannt werden:

     create user keycloak
     alter user keycloak password 'PASSWORT'
     
  3. Neue database mit owner keycloak anlegen

     CREATE DATABASE keycloak
     WITH
     OWNER = keycloak
     ENCODING = 'UTF8'
     CONNECTION LIMIT = -1;
     
  4. Neue connection anlegen

  5. Datenbank-Treiber in Keycloak hinterlegen: unter /modules/system/layers/keycloak/org einen Ordner anlegen, z.B postgresql/main und dort die postgresql.jar hinterlegen, die auch im lib-Verzeichnis des Tomcats hinterlegt ist.
  6. Im selben Verzeichnis eine module.xml anlegen (siehe unten), in dieser muss der Name der Treiber-jar verwendet werden.

    module.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <module xmlns="urn:jboss:module:1.1" name="org.postgresql">
      <resources>
        <resource-root path="postgresql.jar"/>
      </resources>
      <dependencies>
        <module name="javax.api"/>
        <module name="javax.transaction.api"/>
        <module name="javax.servlet.api" optional="true"/>
      </dependencies>
    </module>
    
  7. Im keycloak unter /standalone/configuration die standalone.xml anpassen: unter datasources die datasource für postgresql zusätzlich zu den H2 Informationen hinterlegen. Vorsicht: connection-url entsprechen der eigenen Konfiguration hinterlegen, sowie auch bei user-name und password

    <datasource jndi-name="java:jboss/datasources/KeycloakDS" pool-name="KeycloakDS" enabled="true" use-java-context="true" statistics-enabled="${wildfly.datasources.statistics-enabled:${wildfly.statistics-enabled:false}}">
                    <connection-url>jdbc:postgresql://localhost:5432/keycloak</connection-url>
                    <driver>postgres</driver>
                    <security>
                        <user-name>Username</user-name>
                        <password>PASSWORT</password>
                    </security>
    </datasource>
    
  8. Falls schon eine datasource zum datasource jndi-name=”java:jboss/datasources/KeycloakDS” existiert, muss diese gelöscht werden, so dass nach der Bearbeitung nur noch zwei datasource-tags existieren, siehe nachfolgenden Screenshot

  9. Zweite Anpassung der standalone.xml: unter drivers den driver für postgres hinterlegen, zusätzlich zu dem der H2 Datenbank

    <driver name="postgres" module="org.postgresql">
                        <xa-datasource-class>org.postgresql.xa.PGXADataSource</xa-datasource-class>  </driver>
    

Keycloak NLI Theme

Die Standard Keycloak Oberfläche kann durch ein NLI Thema ersetzt werden. Die Installation ist hier beschrieben.

AdminAccount, Realm und ersten User in Keycloak anlegen

  1. Start von Keycloak über die standaolne.bat in /bin
  2. Zuerst muss ein admin account in keycloak angelegt werden

    Folgende Variante funktioniert, wenn der Keycloak auf dem eigenen Rechner installiert wurde (sonst verwende 4)

  3. Öffnen von http://localhost:8080/auth (hier muss der Port verwendet werden, der in der standalone.xml eingetragen ist) und User und Passwort für einen admin account eingeben

  4. ALTERNATIVE: Zum Anlegen des admin-Users über die Konsole ins bin-Verzeichnis des Keycloak navigieren und dort folgendes eingeben: add-user-keycloak.bat -r master -u <username> -p <password>

  5. Auf Administration Console auf der Welcome Page klicken oder über http://localhost:8080/auth/admin/ in den admin account einloggen (TIP: falls der Browser beim Anmelden in Keycloak ein Cache Problem anzeigt, kann eine Inkognito Sitzung verwendet werden)
  6. Realm anlegen: Add realm anklicken und einen Namen für den realm eingeben. Im Bild unten wird NLI als realm Name verwendet. Normalerweise sollte der realm Name das System beschreiben, da je System ein realm benötigt wird. Das heißt möglichst sollte Dev/QA/Prod oder etwas ähnliches im Namen enthalten sein, sowie Netz/Lief sollte es ge-trennte Systeme geben.

  7. Create anklicken
  8. In den realm wechseln, der gerade angelegt wurde (siehe nächster Screenshot, dort ist der realm NLI ausgewählt)

  9. User in diesem Realm anlegen: Unter Users(links in der Leiste) rechts auf Add user gehen

  10. Namen im Feld Username eingeben und auf Save klicken
  11. Credentials Tab auswählen und Passwort festlegen: hier kann Temporary angeklickt werden um dieses ggf. beim ersten Login nochmal zu ändern

HINWEIS: Über User Federation können User alternativ über LDAP eingebunden werden oder aus der B2B-DB migriert werden (für das Migrations-Tool siehe weiter unten)

Test des neu angelegten Users in Keycloak (TIP: falls der Browser beim Anmelden in Keycloak ein Cache Problem anzeigt, kann eine Inkognito Sitzung verwendet werden)

  1. Sign Out aus der admin Console (rechts oben Sign Out auswählen)
  2. Über http://localhost:8080/auth/realms/NLI/account mit dem neu angelegten User einloggen und ggf. das Passwort ändern, falls es beim Erstellen des Users angehakt wurde
  3. In der Account Console die sich öffnet Email, First name und Last name eintragen und speichern

Einrichtung von zwei clients im Keycloak für das B2B-Backend und die neue UI

Pro Anwendung, Service oder Microservice, welcher zu einer Landschaft von Anwendungen gehört muss im realm ein client angelegt werden. Dazu muss wieder in den admin account des Keycloaks gewechselt werden.

  1. Erstellen eines Clients für das B2B-Backend (in der Navigation auf client und dann auf create): Vorschlag Client ID: b2b-tomcat. Die Root-URL sieht wie folgt aus: http://<host>:<port>/b2bbp-engine/ , wobei der Port der connector Port aus der server.xml des tomcat Knotens ist (siehe hierzu den nächsten Abschnitt Tomcat Knoten mit Keycloak Anbindung aufsetzen, in dem dieser Port nochmal geändert wird)

  2. Bei diesem client muss der Standard Flow Enabled sein, nicht der Implicit Flow, da es sich um einen client für ein Backend handelt
  3. Erstellen eines weiteren Clients für die B2BUI: Name des clients muss b2b-functional-ui sein, dieser ist nicht wählbar
  4. Der Port in der Root URL ist wählbar, Vorschlag ist hier 80 (Screenshots sind mit Port 4040). Er findet sich unten im Abschnitt Installation neue UI im Webserver wieder

  5. Für einen client, der zur UI gehört muss der Implicit Flow Enabled aktiviert sein, die anderen beiden müssen deaktiviert sein, siehe folgenden Screenshot

Tomcat Knoten mit Keycloak Anbindung aufsetzen (Teil 2)

  1. Tomcat-Adapter von Keycloak muss verwendet werden: Hier https://www.keycloak.org/downloads.html kann der Tomcat-Adapter für die entsprechende Tomcat-Version heruntergeladen werden

  2. Die jar-Dateien müssen im tomcat/lib- Verzeichnis des unter Teil 1 aufgesetzten Tomcat-Knoten, hinterlegt werden
  3. Anlegen der keycloak.json unter /tomcat_all: es muss der korrekte realm Name verwendet werden, der gewählte Port aus der standalone.xml des Keycloak, sowie als resource der client-Name des Clients der für das Backend erstellt wurde. Vorschlag war hier b2b-tomcat.

    {
      "realm": "NLI",
      "auth-server-url": "http://localhost:8080/auth",
      "ssl-required": "external",
      "resource": "b2b-tomcat-war",
      "public-client": true,
      "confidential-port": 0
    }
    
  4. Anpassung der b2bbp-engine.xml: Folgende Zeilen müssen vor der resource hinterlegt werden, wobei <my-path> mit dem entsprechenden Pfad zum tomcat_all-Ordner ist, unter dem die keycloak.json liegt

    <Valve className="org.keycloak.adapters.tomcat.KeycloakAuthenticatorValve"/>
    <Parameter name="keycloak.config.file" value="<my-path>/tomcat_all/keycloak.json" over-ride="false"/>
    

  5. Anpassung server.xml im conf-Ordner: alle Einträge zu Realms müssen in der server.xml auskommentiert werden

  6. Anpassung der B2B Datenbank: Damit die Suche in der neuen Oberfläche funktioniert müssen Views in der B2B-Datenbank erstellt werden und folgende Skripte verwendet werden. Die nachfolgenden Skripte beziehen sich auf eine PostrSQL Datenbank und sind auch hier nochmal einsehbar: http://b2bbp.next-level-help.org/ui_b2b_adaptions.html

    CREATE OR REPLACE VIEW public.b2bbp_data_message_view AS
    SELECT b2bbp_data_message.messageid,
      b2bbp_data_message.referenceid,
      b2bbp_data_message.direction,
      b2bbp_data_message.started,
      b2bbp_data_message.finished,
      b2bbp_data_message.formatin,
      b2bbp_data_message.formatout,
      b2bbp_data_message.vdewtype,
      b2bbp_data_message.vdewversion,
      b2bbp_data_message.state,
      b2bbp_data_message.acknowledgement,
      b2bbp_data_message.partner,
      b2bbp_data_message.sender,
      b2bbp_data_message.correlationid,
      b2bbp_data_message.alternativeid,
      b2bbp_data_message.channelid,
      b2bbp_data_message.clearingcode,
      'A'::text AS sourcetable
    FROM b2bbp_data_message;
    
    CREATE OR REPLACE VIEW public.b2bbp_data_action_view AS
    SELECT actionId,
       messageId,
       started,
       finished,
       type,
       name,
       className,
       state,
       'A'::text AS sourcetable
    FROM public.b2bbp_data_action;
    
    CREATE OR REPLACE VIEW public.b2bbp_data_attribute_view AS
    SELECT attributeId,
       actionId,
       messageId,
       name,
       val,
       len,
       type,
       preview,
       'A'::text AS sourcetable
    FROM public.b2bbp_data_attribute
    UNION ALL
    SELECT attributeId,
       actionId,
       messageId,
       name,
       val,
       len,
       type,
       preview,
       'V'::text AS sourcetable
      FROM public.b2bbp_data_attribute_archive;
    
    CREATE OR REPLACE VIEW public.b2bbp_data_error_view AS
    SELECT errorId,
       actionId,
       messageId,
       name,
       message,
       stacktrace,
       'A'::text AS sourcetable
    FROM public.b2bbp_data_error;
    <\pre>
        
    
  7. Setzen eines zusätzlichen JAVA_OPTS Startparameters: Damit ihr Knoten korrekt mit ihrer Datenbank kommuniziert müssen sie einen Dialect als JAVA_OPTS Startparameter setzen: -Dhibernate.dialect=<DIALECT>. Der Platzhalte muss ersetzt werden mit dem datenbankspezifischen Dialect, siehe hier: https://www.javatpoint.com/dialects-in-hibernate.

Installation neue UI im Webserver

  1. Download der nginx.zip Datei unter http://nginx.org/en/download.html
  2. Download der B2B-UI unter https://nli-download.next-level-apps.com/PublicDL/B2B-UI/dist/
  3. Entpacken beider zip Dateien und hinterlegen des Deployments (kompletter B2B-UI Ordner) in nginx/html

  4. Konfiguration der /conf/nginx.conf: der Abschnitt zu server wird mit Nachfolgendem ersetzt. Markierter Port muss dem Port aus dem vorher konfiguriertem client für die functional-ui entsprechen. Des Weiteren muss die Adresse des tomcats, der über Keycloak abgesichert ist, hinterlegt werden, damit die neue UI auf diese zugreifen kann (ebenfalls gelb markiert). Updates in der nginx.conf sind hier zu finden: http://b2bbp.next-level-help.org/ui_b2b_ui.html#konfiguration

    server {
        listen       80;
        server_name  localhost;
    
        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
    
        location /B2B-UI/ {
            alias  html/B2B-UI/;
            try_files $uri$args $uri$args/ /B2B-UI/index.html;
        }
    
        location /B2B-UI/b2bNews/ {
                 proxy_pass   https://b2bbp.next-level-help.org/feed.news.xml;
        }
    
        #error_page  404              /404.html;
    
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html/B2B-UI;
        }
    
        #proxy for rest api call
        location /B2B-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 the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
    
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
    
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
      }
    

Beachten Sie auch die Property client_max_body_size 100M; Diese Property bestimmt die maximale Dateigröße beim Fileupload. Dies ist z.B. beim Customizing Upload relevant.

  1. Hinterlegen einer keycloak.json unter /html/B2B-UI/assets/config (Ordner anlegen): unter oauthServerUrl ist der Server mit Port des konfigurierten Keycloaks zu hinterlegen (Portvorschlag war 8080), der keycloakRealm muss ebenfalls den entsprechenden Namen des realms beinhalten. Vorsicht: in dieser Installationsanleitung wird disableHttps auf true gesetzt

    {
      "auth-server-url": "http://localhost:8080/auth",
      "keycloakRealm": "NLI",
      "disableAuth": false,
      "disableHttps": true
    }
    

    Standardmäßig muss die keycloak.json Datei im Verzeichnis /html/B2B-UI/assets/config abgelegt werden. Mit Hilfe der nginx.conf Datei können sie auch einen alternativen Ablageort definieren. So können sie leicht neue Versionen der B2B-UI deployen ohne dabei die keycloak.json erneut anpassen zu müssen. Fügen sie dafür die folgende Konfiguration in die nginx.conf ein. Das Beispiel ist so konfiguriert, dass im Verzeichnis nginx/conf nach der keycloak.json gesucht wird.

		# always use local keycloak.json to override the deployed keycloak.json		
		location /assets/config/keycloak.json {
			root   conf;
			try_files /keycloak.json @original;
		}
		
		# fallback to original file if the local keycloak.json is not found
		location @original {
			root   B2B-UI;
			try_files $uri $uri/;
		}
  1. Start des nginx über nginx.exe: es müssen zwei Prozesse im Task-Manager unter Details angezeigt werden

  2. Hinterlegen der Rollen in Keycloak

    b2bbp: weiterhin wichtige Rolle, die zusätzlich angelegt werden muss

    Button Description
    b2bbp Standardrolle für den Zugriff auf das B2B-Backend
    B2B-Dashboard So greifen Sie auf die Dashboard-Seite in der B2B-UI zu
    B2B-Errors So greifen Sie auf die Fehlerliste in der Navigationsleiste zu
    B2B-ManualMarketCommunication So greifen Sie auf das Modul Manuelle Marktkommunikation in der B2B-UI zu
    B2B-MessageMonitor-Read So greifen Sie auf den B2B Messagemonitor in B2B-UI zu
    B2B-MessageMonitor-TechnicalDetails So greifen Sie auf die technischen Details einer Nachricht im B2B Messagemonitor zu
    B2B-MessageMonitor-Write Um auf die Schaltflächen zum Herunterladen zuzugreifen
    B2B-MpidEditor-Read Um lesen Zugriff auf den MPID Editor zu erhalten
    B2B-MpidEditor-Write Um auf die Schaltflächen zum Erstellen, Löschen, Herunterladen, Ändern von E-Mails und Synchronisieren von Daten im MPID Editor zuzugreifen
    B2B-SystemInfo So erhalten Sie Zugang um Systeminformationen anzuzeigen
    B2B-General Bereitstellung des Zugriffs auf alle Funktionen in B2B-UI, die nicht durch eine andere spezifische Rolle geschützt sind
    B2B-SystemSwitch So erhalten Sie Zugriff auf das Systemweichen-Modul in der B2B-UI
    B2B-SystemSwitch-Admin Um Kanalfilter zu haben und die Kanalspalte im Systemweichen-Modul anzuzeigen
    B2BAdmin-Customizing Für Admin UI, um die Administrationsseite sichtbar zu machen

    http://b2bbp.next-level-help.org/b2b_it_admin_keycloak_roles_tenants_separation.html#liste-der-verf%C3%BCgbaren-rollen

  3. Zuweisen aller Rollen dem angelegten User: Den User auswählen und unter Role Mappings alle angelegten Rollen dem User assignen

  4. Aufruf der neuen Oberfläche über http://<Server>:80/B2B-UI/ (ggf. auch hier neue Inkognito Sitzung verwenden)

Änderung des Keycloak Themes

Um bei der Anmeldung an der neuen UI nicht die Keycloak Anmeldemaske zu bekommen, macht es Sinn die Keycloak Seiten mit einem NLI Thema zu erweitern

  1. Unter https://nli-download.next-level-apps.com/PublicDL/B2B-UI/Keycloak-Erweiterungen/ die nlitheme.jar herunterladen
  2. Hinterlegen im keycloak Ordner unter standalone/deployments
  3. Konfiguration im realm: (Für jeden angelegten realm muss das Thema hinterlegt werden) unter Realm Settings > Themes muss bei LoginTheme und AccountTheme nli ausgewählt werden. Dann Internationalization Enabled auf On stellen und Save klicken.

Arbeitsvorräte

Zum Einsatz der neuen Arbeitsvorräte muss eine neue Extension konfiguriert werden. Hierbei unterstützt das Migration-Tool. Weitere Details entnehmen Sie bitte unserer neuen Doku zu den Arbeitsvorräten

View Me   Edit Me