OneSpan Sign Developer : Embed Transaction Edit Page (page d'édition de la transaction)

Dans OneSpan Sign, quel est le moyen le plus simple d'intégrer le processus de préparation des transactions ?

C'est une question fréquemment posée par nombre de nos utilisateurs intégrés. Dans ce blog, nous montrerons comment OneSpan Sign permet aux intégrateurs d'incorporer la "page d'édition de la transaction" dans un iFrame, afin qu'ils puissent simplifier les étapes de préparation de la transaction dans une seule page HTML et donner aux expéditeurs la possibilité de créer une transaction à partir de zéro. En plus de cela, nous inclurons également un projet de démonstration montrant comment développer une page de modification de transaction dans un flux de travail commun. Sans plus attendre, commençons !

Créer une page d'édition de transaction

La page de modification de la transaction permet aux utilisateurs non techniques de créer et d'envoyer une transaction à partir de zéro grâce à une interface intuitive, qui permet notamment d'ajouter des documents et des destinataires, de modifier les détails de la transaction et de naviguer vers la page du concepteur où ils peuvent revoir le document et placer des signatures et des champs

En construisant simplement l'URL d'une page d'édition de transaction, les intégrateurs peuvent incorporer l'ensemble du processus de création de transaction avec les dernières fonctionnalités à votre propre application sans efforts supplémentaires pour construire votre propre page frontale. Dans cette section, nous allons vous expliquer comment y parvenir :

Étape 0 :

Avant de créer un lien de modification de transaction, vous devez créer une transaction minimaliste avec au moins un nom de paquet :

SDK Java

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

SDK .NET

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

MÉTHODE REST :

Demande HTTP

POST /api/packages

En-têtes HTTP

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

Charge utile de la demande

{"name" : "Test Transaction"}

Charge utile de la réponse

{ "id" : "6u9gD7zn9Ide0IHwdLyIRMp033g=" }

Note :

• Dans cet appel d'API, vous pouvez définir le type de contenu comme "application/json" au lieu de "multipart/form-data", par rapport à la création normale du paquet.

Étape 1 :

Une fois que vous avez créé la transaction, la première étape consiste à créer un jeton d'authentification de l'expéditeur :

SDK Java

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

SDK .NET

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

MÉTHODE REST :

Demande HTTP

POST /api/authenticationTokens/sender

En-têtes HTTP

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

Charge utile de la demande

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

Charge utile de la réponse

{ "valeur" : "MjY0MjQ4MzgtMTJlOS00MzhjLTgzODMtMzJmMGNiZTg3ODBl" }

Étape 2 :

Avec le jeton d'authentification de l'expéditeur créé à la première étape et l'ID du paquet qui vous a été renvoyé lors de la création du paquet, construisez l'URL suivante pour la page d'édition de la transaction :

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

Un exemple concret pourrait ressembler à ce qui suit :

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

Voilà. Vous êtes maintenant prêt à intégrer ce lien dans un iFrame et à migrer le processus de préparation des transactions dans votre propre flux de travail.

L'exemple en action réelle

Dans cette section, nous allons faire la démonstration d'un projet fonctionnel et présenter l'un des flux de travail potentiels impliquant la page de modification de la transaction dans votre propre application.

Étape 1 :

Nous allons présenter un formulaire HTML recueillant les informations de base sur la transaction. Comme indiqué précédemment, le minimum requis est de saisir un nom de transaction et de cliquer sur "Créer une transaction"

Étape 2 :

Le code frontal demandera à notre back-end de créer un paquet et de renvoyer le lien de la page de modification de la transaction. Dans cette démo, nous présenterons le lien dans une iFrame de largeur en pourcentage et de hauteur absolue

Étape 3 :

Comme nous l'avons mentionné dans un blog précédent, nous allons supprimer le bouton "Envoyer" dans la page du concepteur et ajouter un bouton personnalisé à l'extérieur de l'iFrame pour déclencher le processus. Lorsque l'utilisateur clique sur le bouton personnalisé "Envoyer le colis", notre code frontal demande à nouveau à notre système dorsal d'envoyer le colis. En supposant qu'il s'agit d'un scénario de signature en personne, l'iFrame continuera à afficher la cérémonie de signature en personne.

Le code

Vous pouvez trouver le code de démonstration dans notre partage de code, qui a été écrit en PHP et avec la méthode REST. Si c'est la première fois que vous travaillez avec PHP, reportez-vous à ce blog "Créer une application Web PHP simple" pour apprendre à exécuter une application Web PHP simple.

Pour adapter à vos propres informations de compte, il suffit de modifier les paramètres correspondants dans le fichier "ESLPackageCreation.php". Le point de départ du projet est le fichier "index.html".

Dans ce blog, nous vous avons expliqué comment générer un lien vers la page de modification d'une transaction et intégrer l'URL dans votre propre application pour répondre à vos besoins spécifiques.

Si vous avez des questions concernant ce blog ou toute autre question relative à l'intégration de OneSpan Sign dans votre application, visitez les forums de la communauté des développeurs. Vos commentaires sont importants pour nous!