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

Duo Liang, 20. Februar 2019
OneSpan Sign Developer: Designer Customization and Integration – Part1

Wenn Sie als Integrator eine Front-End-HTML-Seite für Endbenutzer zum Entwerfen und Vorbereiten von Dokumenten bereitstellen möchten, gibt es in OneSpan Sign eine Funktion namens „Designer“. Durch Erstellen eines bestimmten Designer-Links können Sie die Signaturplatzierung und die Dokumentüberprüfung in einen iFrame einbetten. Darüber hinaus unterstützt OneSpan Sign auch flexible Konfigurationen für diese grafische Benutzeroberfläche, die sich an eine Vielzahl von Anforderungen anpasst.

In diesem Blog werden wir uns mit der API / SDK-Codierung im Zusammenhang mit Designer befassen. Anschließend werden die konfigurierbaren Komponenten auf der Designer-Seite untersucht und der Integrationsprozess erläutert.

Erstellen Sie eine Designer-Sitzung

Schritt 1:

Der erste Schritt besteht darin, ein Absenderauthentifizierungstoken zu erstellen

Java SDK

Zeichenfolge senderAuthenticationToken = client.getAuthenticationTokensService (). CreateSenderAuthenticationToken (packageId);

.NET SDK

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

RESTMETHODE:

HTTP-Anfrage
POST / api / authenticationTokens / sender
HTTP-Header
Akzeptieren: application / json
Inhaltstyp: application / json
Autorisierung: Basic api_key
Nutzlast anfordern
{
  "packageId": "e937fc75-3c3b-4506-b270-cc7e43f4cf78"
}
Antwortnutzlast
{
   "Wert": "MjY0MjQ4MzgtMTJlOS00MzhjLTgzODMtMzJmMGNiZTg3ODBl"
}

Schritt 2:

Erstellen Sie mithilfe des in Schritt 1 erstellten Authentifizierungstokens und der Paket-ID, die Sie während der Paketerstellung erhalten haben, die folgende URL für die neue Designer-Erfahrung:

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

Und verwenden Sie diesen Link für den klassischen Designer:

{instance_url} / auth? authenticationToken = {userToken} & target = {instance_url} / designer / {packageId}

Hinweis:

Es gibt klassische und neue Designer-Erfahrungen. In den nächsten Abschnitten werden wir nur die neue Version diskutieren.

Schritt 3:

Solange sich Ihr Paket im Status "Entwurf" befindet, können Sie diesen Link in einen iFrame einbetten und den Designerprozess in Ihren eigenen Workflow migrieren.

Beziehen auf Designer-Handbuch Weitere API / SDK-Informationen.

Passen Sie Ihren Designer an

Das folgende Bild zeigt Ihnen den Vergleich zwischen der Designer-Funktion mit Standardeinstellungen und Designer mit minimalistischem Stil. Diese beiden Optionen zeigen, wie viele Komponenten auf der Designer-Seite entfernt oder geändert werden können.

 Designer-Anpassung

Hier ist eine detaillierte Liste der Komponenten, die geändert werden können:

1. Die Schaltflächen "saveLayout" und "applyLayout"

2. Schaltfläche "documentVisibility"

3. Schaltfläche "addSigner"

4. Schaltfläche "editRecipient"

5. Schaltfläche "addDocument"

6. Schaltfläche "editDocument"

7. Schaltfläche "deleteDocument"

8. Schaltfläche "Senden" für die Paketerstellung oder Schaltfläche "Fertig" bei der Vorlagenerstellung

9. Die folgenden zusätzlichen Felder können ausgeblendet werden

  • signierungsdatum

  • signerName

  • signerTitle

  • signerCompany

  • Textfeld

  • Kontrollkästchen

  • aufführen

  • Radio

  • Textbereich

  • Etikette

  • Datumsauswahl

Um die Designer-Einstellungen auf Kontoebene zu ändern, wenden Sie sich an unsere Support-team .

Integration mit Designer

Eine Designer-Seite kann aufgrund der leistungsstarken Funktionen, die sie bietet, erheblich in Ihren Workflow eingebunden sein.

Im Gegensatz zur Anwendung automatischer Methoden zum Erstellen Ihres Dokuments, z. B. zur Verwendung der Funktionen zum Extrahieren von Dokumenten oder zum Extrahieren von Text-Tags, bei denen PDF selbst geändert werden muss, können nicht-technische Benutzer auf dieser GUI-Seite Dokumente mit einer einfachen Drag & Drop-Oberfläche entwerfen. Es bietet sogar die Möglichkeit, Unterzeichner und Dokumente hinzuzufügen und zu bearbeiten, selbst wenn Sie Ihre Frontend-Seite nicht dafür erstellt haben.

Bisher haben wir überprüft, wie eine Designer-Sitzung programmgesteuert generiert wird, potenzielle Komponenten durchlaufen und einige Vorteile für die Verwendung dieser Lösung während der Integration aufgelistet. Im zweiten Teil dieser Reihe werden wir die detaillierten Integrationsworkflows auf der Designer-Seite diskutieren und Designer in Aktion demonstrieren.

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