Verbinden Sie Ihre Webanwendungen mit Systemen von Drittanbietern

Automatisch übersetzt von Deepl

Heutzutage sind Webanwendungen aus unserem Leben nicht mehr wegzudenken. Sie bieten praktische Funktionen, die Zeit sparen und alltägliche Aufgaben vereinfachen. So ist beispielsweise das Anlegen von Konten auf verschiedenen Plattformen eine der häufigsten Aktionen der Nutzer auf Websites.

Sie erwarten, dass dieser Vorgang schnell und einfach vonstatten geht – egal, ob sie zu Hause sind, pendeln oder am Strand entspannen.

Hinter dieser Einfachheit verbirgt sich eine komplexere Realität. Diese Vorgänge erfordern häufig die Integration mit Systemen von Drittanbietern, wie z. B. E-Mail-Verifizierungsdiensten. Dies führt zu Herausforderungen in Bezug auf Sicherheit, Kontinuität der Benutzererfahrung und Schutz vor Man-in-the-Middle-Angriffen.

Für Entwickler bedeutet die Gewährleistung eines reibungslosen Ablaufs, dass sie die Interaktionen zwischen externen Systemen und der 4D Websitzung verwalten müssen. Dabei muss der Kontext des Benutzers erhalten bleiben, d. h. es müssen Daten, Berechtigungen und der genaue Schritt des Benutzers zum Abschluss des Prozesses abgerufen werden.

Klingt kompliziert? Das muss es nicht sein! Entdecken Sie, wie Sie mit 4D 20R9 robuste Webanwendungen erstellen, die sicher und effizient mit Systemen von Drittanbietern kommunizieren.

HDI_Session_Token

Bei Webanwendungen sind oft mehrere Schritte erforderlich, um die Benutzererfahrung zu verbessern:

Beim Umgang mit Lagerbeständen von Produkten:

  • eine Auswahl von Produkten treffen
  • Senden der Auswahl an ein externes Registrierungssystem
  • zurück zur Produktliste in der App gelangen

oder

Bei der Erstellung eines Kontos auf einer Website:

  • Geben Sie die E-Mail + Passwort ein, um das Konto zu erstellen
  • Bestätigen Sie die E-Mail, indem Sie auf einen in der E-Mail enthaltenen Link klicken, um die Erstellung des Kontos abzuschließen.

     

    Diese Schritte erfordern ein Hin- und Hergehen mit Systemen Dritter. Daher muss eine 4D-Web-Sitzung auf dem Server eindeutig identifiziert werden, damit sie später abgerufen werden kann.

     

    DIE FUNKTION createOTP() AUF DEM SESSION OBJEKT

    Der Identifikator einer 4D Web Sitzung ist das Sitzungs-Cookie („4DSID_AppName„). Der Austausch dieses Cookie-Wertes über das Netzwerk zwischen einer 4D Web-Anwendung und einem System eines Drittanbieters ist eine ungeschickte Sicherheitslücke.

    Um dies zu vermeiden, kann in jedem Webprozess ein One-Time-Passcode(OTP) dank der neuen Funktion createOTP(), die auf dem Session Objekt verfügbar ist, erzeugt werden.

    Dieses OTP ist mit der Sitzung verknüpft und kann bei einer empfangenen Anfrage, die kein Sitzungs-Cookie enthält, abgerufen werden.

    Dieses OTP kann nur einmal verwendet werden und mit einer bestimmten Lebensdauer verbunden sein.

    Beispiel

    var $token : Text
    
    $token:=Session.createOTP()

    Wie kann ich eine Web-Sitzung mit Hilfe des OTP abrufen?

    Die Web-Sitzung kann auf zwei Arten abgerufen werden.

     

    über den Parameter $4DSID in einer URL

    Die Web-Sitzung wird automatisch abgerufen, wenn die empfangene Anfrage im $4DSID-Parameter ein gültiges OTP enthält, das der Sitzung entspricht.

    Beispiel

    In diesem Beispiel wird ein Benutzerkonto in der Datenklasse Users mit der Funktion create() erstellt.

    Es wird ein $info-Objekt mit der E-Mail und dem Passwort empfangen. Ein neuer Benutzer wird angelegt, und einige Informationen werden in der Sitzung gespeichert, insbesondere der aktuelle Schritt des Erstellungsprozesses des Benutzerkontos(Warten auf die Bestätigungs-E-Mail) und die Benutzer-ID.

    Es wird ein OTP generiert, das der aktuellen Sitzung entspricht. Schließlich wird eine URL mit diesem OTP im Parameter $4DSID zurückgegeben.

    // In the Users dataclass
    Function create($info : Object) : Text
    	
    var $user : cs.UsersEntity
    var $status : Object
    var $token : Text
    	
    //A new entity of the Users dataclass is created
    $user:=This.new()
    $user.fromObject($info)
    $status:=$user.save()
    	
    Use (Session.storage)
    	Session.storage.status:=New shared object("step"; "Waiting for validation email"; "email"; $user.email; "ID"; $user.ID)
    End use 
    	
    $token:=Session.createOTP()
    	
    return "https://my4DApp/validateEmail?$4DSID="+$token

    Anschließend wird dem Benutzer diese URL als Link in einer E-Mail zugesandt. Das URL-Präfix /validateEmail wird von den HTTP-Request-Handlern behandelt (Datei HTTPHandlers.json).

    [
      {
        "class": "RequestHandler",
        "method": "validateEmail",
        "regexPattern": "/validateEmail",
        "verbs": "get"
      }
    ]

    Hier ist die validateEmail() Funktion des RequestHandler Singletons.

    Function validateEmail() : 4D.OutgoingMessage
    	
    var $result:=4D.OutgoingMessage.new()
    var $user : cs.UsersEntity
    var $status : Object
    	
    If (Session.storage.status.step="Waiting for validation email")
    		
    	$user:=ds.Users.get(Session.storage.status.ID)
    	$user.validated:=True
    	$status:=$user.save()
    		
    	$result.setBody("Congratulations <br>"\
    	+"Your email "+Session.storage.status.email+" has been validated")
    	$result.setHeader("Content-Type"; "text/html")
    		
    	Use (Session.storage.status)
    		Session.storage.status.step:="Email validated"
    	End use 
    Else 
            // Retrieving the session with the OTP failed
    	$result.setBody("Validation failed")
    End if 
    	
    return $result

    Da der Parameter $4DSID ein gültiges OTP enthält, das der ursprünglichen Sitzung entspricht, verweist das Sitzungsobjekt auf die Sitzung, die das OTP erstellt hat

    Hier ist das Ergebnis in einem Browser:

    DIE FUNKTION restore() AUF DAS SESSION OBJEKT

    Normalerweise wird ein Callback-Mechanismus angewandt, wenn ein Drittanbietersystem beteiligt ist. Das Prinzip ist:

    • Senden Sie eine Anfrage an das Drittsystem und übergeben Sie eine Callback-URL
    • nach der Verarbeitung der Anfrage ruft das Drittsystem die Callback-URL auf

     

    Manchmal erlauben Drittsysteme nicht, dass Callback-URLs benutzerdefinierte Parameter wie $4DSID enthalten.

    Sie erlauben jedoch, dass Client-Informationen(z. B. ein Status) gesendet werden, und das Drittanbietersystem gibt diese Informationen an den Aufrufer zurück. Dies ist eine Möglichkeit, mit einem 4D Web Session OTP zurückgerufen zu werden.

    Schauen Sie in der Dokumentation der API des Drittanbietersystems nach, um den entsprechenden Parameternamen zu finden. Im folgenden Beispiel wird der Parameter state verwendet.

    Eine restore()-Funktion steht für das Session-Objekt zur Verfügung und ermöglicht den Abruf der Session, die einem bestimmten OTP entspricht.

    Im folgenden Beispiel wird das OTP in den reservierten State-Parameter eingefügt, anstatt als $4DSID-Parameter in die URL eingefügt zu werden.

    Beispiel

    In einer 4D Webanwendung wählt ein Lagermitarbeiter Produkte für eine Inventur aus und sendet sie zur Registrierung an ein externes System. Hier wird die Funktion sendProducts() aufgerufen:

    exposed Function sendProducts($chosenProducts : cs.ProductsSelection) : Text
    	
    var $token; $callBackURL; $callExternalAppURL; $result : Text
    var $request : Object
    	
    //The chosen products are put in the session
    Use (Session.storage)
    	Session.storage.info:=New shared object("inventoryStatus"; "Calling registring app")
    	Session.storage.chosenProducts:=$chosenProducts
    End use 
    	
    // $token is C318C81651F84F238EE72C14B46A45C3 (example)
    $token:=Session.createOTP()
    	
    //Build the callback URL - Put the OTP in the state parameter
    $callBackURL:="https://my4DApp/callBack?state="+$token
    	
    // Call the external registring system - Put the callback URL in the redirect parameter
    $callExternalAppURL:="https://acme.com/callRegistringApp?redirect="+$callBackURL
    $requestObj:={method: HTTP POST method}
    $request:=4D.HTTPRequest.new($callExternalAppURL; $requestObj).wait()
    	
    // The external registring system made the call back. This call back retrieved and updated the Session
    // So now the inventoryStatus attribute is up to date
    If (Position("Products registered"; Session.storage.info.inventoryStatus)#0)
    	$result:=Session.storage.info.inventoryStatus
    Else 
    	$result:="Registering failed"
    End if 
    	
    return $result

    Die ausgewählten Produkte werden in die Sitzung eingefügt und ein OTP wird generiert.

    Das Fremdsystem wird aufgerufen. Der Parameter redirect gibt die Rückruf-URL an. Diese URL enthält den Status-Parameter, d. h. das Sitzungs-OTP.

    Im obigen Beispiel lautet die URL des Fremdsystems:

    https://acme.com/callRegistringApp?redirect=https://my4DApp/callBack?state=C318C81651F84F238EE72C14B46A45C3

    Das URL-Präfix /callBack wird von den HTTP-Request-Handlern (Datei HTTPHandlers.json) in der 4D Web App verarbeitet.

    [
      {
        "class": "RequestHandler",
        "method": "handleCallBack",
        "regexPattern": "/callBack",
        "verbs": "post"
      }
    ]

    Hier ist die handleCallback() Funktion des RequestHandler Singletons:

    Function handleCallBack($request : 4D.IncomingMessage)
    	
    //Get the state parameter in the URL
    $otp:=$request.urlQuery.state
    	
    //Restore the session thanks to the OTP
    $restore:=Session.restore($otp)
    	
    //Restoring the session is successful
    If ($restore=True)
    	//Get the body of the request (information sent by the third party system) - It contains "Products registered"
    	$text:=$request.getText()
    		
    	//Update the session with the registring result
    	If ($text#Null)
    		Use (Session.storage.info)
    			Session.storage.info.inventoryStatus:=$text
    			If (Session.storage.chosenProducts#Null)
    				Session.storage.info.inventoryStatus+=" total price: "+String(Session.storage.chosenProducts.sum("price"))
    			End if 
    		End use 
    	End if 
    End if 

    Über den Lizenzverbrauch des 4D Clients

    Nur die ursprüngliche Sitzung (die das OTP erzeugt) verbraucht eine 4D Client Lizenz. Die Wiederherstellung einer Sitzung (z. B. mit einem E-Mail-Link zur Validierung) verbraucht keine zusätzliche 4D Client Lizenz.

    Laden Sie die beigefügte HDI herunter, um die Beispiele live zu testen und lesen Sie die Dokumentation, um mehr zu erfahren.

    Avatar
    - Product Owner - Marie-Sophie Landrieu-Yvert ist seit 2017 als Product Owner im 4D Produktteam tätig. Als Product Owner ist sie für das Schreiben der User Stories und deren Umsetzung in funktionale Spezifikationen zuständig. Ihre Aufgabe ist es auch, sicherzustellen, dass die Implementierung der Funktionen den Anforderungen des Kunden entspricht. Marie-Sophie ist Absolventin der ESIGELEC Ingenieurschule und begann ihre Karriere als Ingenieurin bei IBM im Jahr 1995. Sie nahm an verschiedenen Projekten teil (Wartungs- oder Build-Projekte) und arbeitete als Cobol-Entwicklerin. Dann arbeitete sie als UML-Designerin und Java-Entwicklerin. In letzter Zeit bestand ihre Hauptaufgabe darin, funktionale Anforderungen zu analysieren und zu schreiben sowie Geschäfts- und Entwicklungsteams zu koordinieren.