OneSpan Sign Developer: Transaktionsbearbeitungsseite einbetten

Wie lässt sich in OneSpan Sign der Prozess der Transaktionsvorbereitung am einfachsten integrieren?

Dies ist eine häufig gestellte Frage von vielen unserer integrierten Anwender gewesen. In diesem Blog zeigen wir, wie OneSpan Sign es Integratoren ermöglicht, die "Transaction Edit Page" in einen iFrame einzubetten, so dass sie die Schritte der Transaktionsvorbereitung innerhalb einer einzigen HTML-Seite vereinfachen und den Absendern die Möglichkeit geben können, eine Transaktion von Grund auf zu erstellen. Darüber hinaus wird ein Demoprojekt mitgeliefert, das zeigt, wie man mit einer Transaktionsbearbeitungsseite in einem gemeinsamen Workflow entwickelt. Ohne weitere Verzögerung, lassen Sie uns anfangen!

Erstellen einer Transaktionsbearbeitungsseite

Die Transaktionsbearbeitungsseite bietet nicht-technischen Anwendern die Möglichkeit, eine Transaktion von Grund auf mit einer intuitiven Benutzeroberfläche zu erstellen und zu senden, die das Hinzufügen von Dokumenten und Empfängern, das Bearbeiten von Transaktionsdetails und das Navigieren zur Designerseite, auf der sie das Dokument überprüfen und Unterschriften und Felder platzieren können, umfasst

Durch die einfache Erstellung einer URL für die Transaktionsbearbeitungsseite können Integratoren den gesamten Prozess der Transaktionserstellung mit den neuesten Funktionen in ihre eigene Anwendung einbetten, ohne zusätzlichen Aufwand für die Erstellung einer eigenen Front-End-Seite. In diesem Abschnitt werden wir Sie durch die Schritte führen, wie Sie dies erreichen können:

Schritt 0:

Bevor Sie eine Transaktions-Editierverknüpfung erstellen, müssen Sie eine minimalistische Transaktion mit mindestens einem Paketnamen erstellen:

Java-SDK

DocumentPackage transaction = PackageBuilder.newPackageNamed("Test Transaction").build(); PackageId packageId = eslClient.createPackageOneStep(transaction);

.NET SDK

DocumentPackage transaction = PackageBuilder.NewPackageNamed("Test Transaction").Build(); PackageId packageId = eslClient.CreatePackageOneStep(transaction);

REST-METHODE:

HTTP-Anfrage

POST / api / packages

HTTP-Header

Autorisierung: Basic api_key Accept: application/json Content-Type: application/json

Nutzlast anfordern

{"name": "Test Transaction"}

Antwort-Nutzlast

{ "id": "6u9gD7zn9Ide0IHwdLyIRMp033g=" }

Hinweis:

• In diesem API-Aufruf können Sie im Vergleich zur normalen Paketerstellung den Inhaltstyp als "application/json" anstelle von "multipart/form-data" festlegen.

Schritt 1:

Nachdem Sie die Transaktion erstellt haben, ist der erste Schritt die Erstellung eines Sender-Authentifizierungs-Tokens:

Java-SDK

String senderAuthenticationToken = client.getAuthenticationTokensService().createSenderAuthenticationToken(packageId);

.NET SDK

string senderAuthenticationToken = client.AuthenticationTokenService.CreateSenderAuthenticationToken(packageId);

REST-METHODE:

HTTP-Anfrage

POST /api/authenticationTokens/sender

HTTP-Header

Accept: application/json Content-Type: application/json Authorization: Basic api_key

Nutzlast anfordern

{ "packageId": "e937fc75-3c3b-4506-b270-cc7e43f4cf78" }

Antwort-Nutzlast

{ "Wert": "MjY0MjQ4MzgtMTJlOS00MzhjLTgzODMtMzJmMGNiZTg3ODBl" }

Schritt 2:

Mit dem im ersten Schritt erstellten Absender-Authentifizierungs-Token und der Paket-ID, die Sie bei der Paketerstellung zurückerhalten haben, erstellen Sie die folgende URL für die Transaktionsbearbeitungsseite:

{instance_url}/auth?authenticationToken={senderToken}&target={instance_url}/a/transaction/{packageId}

Ein reales Beispiel könnte wie folgt aussehen:

https://sandbox.esignlive.com/auth?authenticationToken=MmFlZjgyY2xxxxxxUwNGI0&target=https://sandbox.esignlive.com/a/transaction/6RlLc1fatjabLzzN5js_DRnPLCE=

Da ist es. Nun sind Sie bereit, diesen Link in einen iFrame einzubetten und den Prozess der Transaktionsvorbereitung in Ihren eigenen Workflow zu migrieren.

Beispiel in echter Aktion

In diesem Abschnitt werden wir ein funktionierendes Projekt demonstrieren und einen der möglichen Arbeitsabläufe mit der Transaktionsbearbeitungsseite in Ihrer eigenen Anwendung vorstellen.

Schritt 1:

Wir werden ein HTML-Formular präsentieren, das die grundlegenden Informationen über die Transaktion sammelt. Wie bereits erwähnt, besteht die Mindestanforderung darin, einen Transaktionsnamen einzugeben und auf "Create Transaction" zu klicken

Schritt 2:

Der Front-End-Code wird unser Back-End auffordern, ein Paket zu erstellen und den Link zur Transaktionsbearbeitungsseite zurückzugeben. In dieser Demo werden wir den Link in einem iFrame mit prozentualer Breite und absoluter Höhe darstellen

Schritt 3:

Wie wir bereits in einem früheren Blog erwähnt haben, werden wir die Schaltfläche "Senden" in der Designerseite entfernen und eine benutzerdefinierte Schaltfläche außerhalb des iFrames hinzufügen, um den Prozess auszulösen. Sobald der Benutzer auf die angepasste Schaltfläche "Paket senden" klickt, fordert unser Front-End-Code erneut unser Back-End auf, das Paket zu senden. In der Annahme, dass es sich um ein Szenario mit persönlicher Unterzeichnung handelt, wird der iFrame weiterhin die persönliche Unterzeichnungszeremonie anzeigen.

Der Code

Sie finden den Demo-Code in unserem Code Share, der in PHP und mit REST-Methode geschrieben wurde. Wenn Sie zum ersten Mal mit PHP arbeiten, lesen Sie in diesem Blog "Erstellen einer einfachen PHP-Webanwendung" nach, wie Sie eine einfache PHP-Webanwendung ausführen.

Zur Anpassung an Ihre eigenen Kontodaten ändern Sie einfach die entsprechenden Parameter in der Datei "ESLPackageCreation.php". Der Startpunkt des Projekts ist die Datei "index.html".

In diesem Blog haben wir Ihnen gezeigt, wie Sie einen Link für eine Transaktionsbearbeitungsseite erstellen und die URL in Ihre eigene Anwendung einbetten können, um sie an Ihre spezifischen Anwendungsfälle anzupassen.

Wenn Sie Fragen zu diesem Blog oder andere Fragen zur Integration von OneSpan Sign in Ihre Anwendung haben, besuchen Sie die Foren der Entwickler-Community. Ihr Feedback ist uns wichtig!