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

Duo Liang, 6. März 2019
OneSpan Sign Developer: Designer Customization and Integration – Part 3

In den letzten beiden Blogs haben wir grundlegende Aspekte der Anpassung und Integration in Designer Session in behandelt Teil 1 und konzentrierte sich dann auf Designerprofile und die Verwendung von Bannern in Teil 2 .

Der dritte Teil dieser laufenden Blog-Reihe enthält ein Demo-Projekt, das zeigt, wie man mit einer Designer-Seite in einem gemeinsamen Workflow entwickelt. Wir erklären, wie Sie mit dem Abschlussereignis umgehen und den gesamten Prozess von der Paketerstellung bis zur eingebetteten Signatur vereinfachen können.

Designer-Anpassungsworkflow in OneSpan Sign

Schritt 1:

Wir werden ein HTML-Formular bereitstellen, in dem der Benutzer aufgefordert wird, grundlegende Paketinformationen einzugeben, bevor er auf die Schaltfläche "Designer erstellen" klickt. Der Front-End-Code fordert unser Back-End auf, ein Paket mit den angegebenen Informationen zu erstellen und mit einem Designer-Link zurückzukehren.

3-6-1

Schritt 2:

Sobald die Designer-URL zurückgegeben wurde, können wir auf der rechten Seite des Bildschirms einen iFrame erstellen. Der Benutzer kann dann hier Dokumente hochladen und Empfänger hinzufügen.

Beachten Sie, dass wir die Schaltfläche "Senden" auf der Designerseite entfernt haben. Stattdessen wurde eine benutzerdefinierte Schaltfläche außerhalb des iFrame hinzugefügt. Dies wird empfohlen, wenn Sie das Abschlussereignis oder die Sendeaktivität Ihres Pakets auslösen müssen, da die Standardschaltfläche "Senden" keine Front-End-Benachrichtigung an Sie zurückgibt.

Eine andere häufig verwendete Vorgehensweise besteht darin, den Designer in ein Popup-Modell einzubetten und in der rechten oberen Ecke eine Schaltfläche „X“ bereitzustellen.

Sobald der Benutzer auf die angepasste Schaltfläche "Paket senden" klickt, fordert unser Front-End-Code unser Back-End erneut auf, das Paket zu validieren und zu senden und einen signierenden URL-Link zurückzugeben.

3-6-2

Schritt 3:

Nachdem das Paket validiert wurde, wird es gesendet und ein persönlicher Link zur Unterzeichnungszeremonie wird zur HTML-Seite zurückgesendet.

3-6-3

DER CODE

Sie finden die Demo-Code in unserer 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 sich an Ihre eigenen Kontoinformationen anzupassen, ändern Sie einfach die entsprechenden Parameter in der Datei "ESLPackageCreation.php". Ausgangspunkt des Projekts ist die Datei „index.html“.

VERWANDTE API

In Schritt 1 haben wir die folgende API verwendet, um ein persönliches Signaturpaket ohne Dokumente und Unterzeichner zu erstellen. Wenn Sie mit der grundlegenden Funktion zur Paketerstellung nicht vertraut sind, lesen Sie unsere Schnellstartanleitung .

HTTP-Anfrage
POST / api / packages
HTTP-Header
Autorisierung: Basic api_key
Akzeptieren: application / json
Nutzlast anfordern
{
	"Typ": "PAKET",
	 "Status": "ENTWURF",
	 "Name": {pkgName},
	 "Beschreibung": {pkgDesc},
	 "die Einstellungen" : {
		 "Zeremonie": {
			 "InPerson": "wahr"
		}
	}
}
Antwortnutzlast
{
    id: 9sKhW-h-qS9m6Ho3zRv3n2a-rkI =
}

In Schritt 2 wurden das Hochladen von Dokumenten und das Hinzufügen von Unterzeichnern vollständig auf der Designer-Seite durchgeführt. Sie können diese Informationen auch in Schritt 1 sammeln und einfügen.

Informationen zum Versenden eines Pakets finden Sie in unserem “ Ändern Sie den Status eines Pakets " Leiten.

In Schritt 3 haben wir, da es sich um eine persönliche Signatur handelt, ein Signaturauthentifizierungstoken für unseren Absender mithilfe der folgenden API erstellt:

HTTP-Anfrage
POST / api / authenticationTokens / signer / multiUse
HTTP-Header
Akzeptieren: application / json
Inhaltstyp: application / json
Autorisierung: Basic api_key
Nutzlast anfordern
{
    "packageId": "5vjLRY5MWrDJ6MzRAEyCKOy5IH0 =",
    signerId: 8b734331-bc5b-4843-9784-d4ece4b7dc22
}
Antwortnutzlast
{
   "packageId": "5vjLRY5MWrDJ6MzRAEyCKOy5IH0 =",
   signerId: 8b734331-bc5b-4843-9784-d4ece4b7dc22,
   "Wert": "ZDNmMDNiNGUtNGYxOC00YWZiLTkwMmUtNWE5YmIwZTRjZDg1"
}

Hinweis: In einem persönlichen Signaturszenario beginnt die Signaturzeremonie mit dem Unterzeichner, der zum Generieren des Authentifizierungstokens verwendet wird.

In diesem Blog haben wir einen sehr grundlegenden Integrationsprozess von der Sammlung von Paketinformationen bis zur Erstellung und Gestaltung von Paketen abgeschlossen. Von dort aus haben wir die Unterzeichnungszeremonie eingebettet und erklärt, wie das Abschlussereignis manuell ausgelöst wird, damit Ihre Anwendung erneut die Kontrolle über den Prozess übernimmt.

Wenn Sie Fragen zu diesem Blog oder zu anderen Aspekten der Integration von OneSpan Sign in Ihrer Anwendung haben, besuchen Sie die Entwickler-Community-Foren .

OneSpan Sign-Entwickler-Community

OneSpan Sign-Entwickler-Community

Treten Sie der OneSpan Sign Developer Community bei! Foren, Blogs, Dokumentationen, SDK-Downloads und mehr.

Tritt heute bei