OneSpan Sign Developer: Designer-Anpassung und -Integration - Teil 4

Im Teil 3 In dieser Blogserie haben wir einen der empfohlenen Workflows mit einer benutzerdefinierten Designer-Seite demonstriert. In diesem Projekt haben wir eine externe Schaltfläche verwendet, um das Abschlussereignis anstelle der standardmäßig gesendeten Schaltfläche auszulösen.

Heute werden wir eine andere Methode zur Behandlung des Abschlussereignisses vorstellen, um einen kohärenten Prozess zu erstellen. Darüber hinaus wird unser Projekt um die Anzeige von Paketinformationen erweitert. Dies kann nützlich sein, wenn Sie nach Beispielcodes suchen, um Ihr eigenes Dashboard zu entwickeln.

Designer-Anpassungsworkflow in OneSpan Sign

Schritt 1:

Ähnlich wie bei der Demo in Teil 3 wurde eine Formularseite mit grundlegenden Informationen zum Paket angezeigt. Sobald Sie auf die Schaltfläche "Paket erstellen" klicken, fordert das Front-End unser Back-End auf, ein persönliches Signaturpaket zu erstellen.

Schritt 2:

Anstatt eine Designerseite direkt aufzurufen, zeigt OneSpan Sign eine Seite mit Paketdetails an, die unserem Webportal ähnelt. Hier können Sie Ihre eigenen Erweiterungen hinzufügen, um Funktionen wie Paketmanipulation, Sammlung von Unterzeichnerinformationen oder Hochladen von Dokumenten auszuführen.

Schritt 3:

Nachdem der Benutzer die Informationen bestätigt und auf die Schaltfläche "Design Package" geklickt hatte, wurde ein Modal mit eingebetteter Designer-Sitzung umgeschaltet. Um den Prozess zu vereinfachen, verwenden Benutzer weiterhin Designer, um den gesamten Schritt des Paketdesigns abzuschließen.

Hinweis dass wir in diesem Schritt etwas anderes gemacht haben als in der Demo in Teil 3.

Wir haben das Klicken auf den Hintergrund aus dem Modal mithilfe des folgenden Codes deaktiviert. Die einzige Möglichkeit, den Designer zu beenden (unabhängig davon, ob das Paket gesendet wurde oder nicht), bestand darin, auf die Schaltfläche „X“ in der oberen rechten Ecke zu klicken. Auf diese Weise haben wir den Workflow des Endbenutzers eingeschränkt und sichergestellt. Dies führt zu einem weiteren spürbaren Unterschied; Wir haben die Standardeinstellung "Senden" beibehalten. 

            $ ('# modal-fullscreen'). modal ({
                Hintergrund: 'statisch',
                Tastatur: falsch
            });

Wenn der Benutzer das Paket sendet und entsprechend dem erwarteten Prozess auf die Schaltfläche zum Beenden klickt, können wir eine weitere Anforderung auslösen, die den Paketstatus abfragt. Selbst wenn Endbenutzer auf die Schaltfläche zum Beenden geklickt haben, ohne das Paket zu senden, weiß OneSpan Sign, dass das Paket nicht gesendet wurde, und bietet Endbenutzern dennoch die Möglichkeit, zur Designer-Seite zurückzukehren.

Schritt 4:

Sobald der Benutzer auf die Schaltfläche zum Beenden klickt, fragen wir das Paket erneut ab und können die Statusänderung auslösen, die den Paketstatus abfragt. Wenn der Absender in unserem Projekt zur Paketinformationsseite zurückkehrt, können wir die Seite erneut rendern und die aktualisierten Dokumente und Empfängerlisten anzeigen.

Wenn Sie auf die Schaltfläche „Unterzeichnungszeremonie“ klicken, können Sie einen persönlichen Unterzeichnungslink erstellen und sie zur Unterzeichnungszeremonie führen.

DER CODE

Die Demo wird auf unserer gehostet Code-Freigabe , die in PHP und mit REST-Methode geschrieben wurde. Wenn Sie zum ersten Mal mit PHP arbeiten, lesen Sie diesen Blog. “ Erstellen einer einfachen PHP-Webanwendung Erfahren Sie, wie Sie eine einfache PHP-Webanwendung ausführen.

Um Ihre Kontoinformationen anzupassen, ändern Sie einfach die entsprechenden Parameter in der Datei "ESLPackageCreation.php". Ausgangspunkt des Projekts ist die Datei „index.html“.

VERWANDTE API

In dieser Demo ist es besonders wichtig, die Paketstatusänderung zum Auslösen des Abschlussereignisses zu verwenden. Dies ist eine Form der aktiven Abfrage, die häufig in Ihrem Integrationsprozess auftritt. Verwenden Sie die folgende API, um Ihre Paketmetadaten abzurufen, und analysieren Sie dann den Paketstatus aus den JSON-Nutzdaten.

Paket JSON abrufen
HTTP-Anfrage
GET / api / packages / {packageId}
HTTP-Header
Akzeptieren: application / json; esl-api-version = 11.21
Autorisierung: Basic api_key

Eine vollständige Beschreibung für jedes Antwortfeld finden Sie in der Tabelle mit den JSON-Eigenschaften am Ende von „ Erstellen und Senden eines Pakets " Leiten. Siehe auch Versionshinweis 10.6.1 aus Gründen, um "esl-api-version" im Anforderungsheader zu tragen.

Designeranpassung und vorgeschlagene Workflows

In diesem Blog haben wir einen weiteren vorgeschlagenen Workflow für die Integration in Designer vorgestellt. Sie können auch den Quellcode finden, der die Paketinformationen rendert, was für andere Integrationsszenarien sehr erweiterbar ist.

Wenn Sie Fragen zu diesem Blog oder zum Integrieren von OneSpan Sign in Ihre Anwendung haben, besuchen Sie die Entwickler-Community-Foren.

Die Designer-Blogserie zur Anpassung und Integration von Designern:

• Designer-Anpassung und -Integration - Teil 1
• Designer-Anpassung und -Integration - Teil 2
• Designer-Anpassung und -Integration - Teil 3