OneSpan Sign Developer: Designer Customization and Integration - Partie 3

Dans les deux derniers blogs, nous avons parcouru les aspects de base de la personnalisation et l'intégration avec Designer Session dans la partie 1, puis axé sur les profils de concepteur et la façon d'utiliser des bannières dans la partie 2.

La troisième partie de cette série de blog en cours comprendra un projet de démonstration montrant comment se développer avec une page Designer dans un flux de travail commun. Nous vous expliquerons comment vous pouvez gérer l'événement d'achèvement et faciliter l'ensemble du processus, de la création de paquets à la signature intégrée.

Flux de travail de personnalisation de concepteur dans le signe de OneSpan

Étape1:

Nous fournirons un formulaire HTML incitant l'utilisateur à entrer des informations de base sur le paquet avant de cliquer sur le bouton "Créer designer". Le code frontal demandera à notre back-end de créer un paquet avec les informations spécifiées et de revenir avec un lien de concepteur.

Etape 2:

Une fois l'URL de concepteur retournée, nous pouvons créer une iFrame sur le côté droit de l'écran. L'utilisateur peut ensuite télécharger des documents et ajouter des destinataires ici.

Notez que nous avons supprimé le bouton "Envoyer" à la page de concepteur. Au lieu de cela, un bouton personnalisé a été ajouté en dehors de l'iFrame. Il s'agit d'une pratique recommandée lorsque vous devez déclencher l'événement d'achèvement ou envoyer l'activité de votre paquet, parce que le bouton d'envoi par défaut ne vous renvoie aucune notification frontale.

Une autre pratique couramment vu est d'intégrer le concepteur dans un modèle pop-up et de fournir un bouton "X" dans le coin supérieur droit.

Une fois que l'utilisateur a cliqué sur le bouton personnalisé "Envoyer le paquet", notre code frontal demandera à nouveau notre back-end pour valider et envoyer le paquet et retourner un lien d'URL de signature.

Etape 3:

Une fois le paquet validé, il sera envoyé et un lien de cérémonie de signature en personne sera retourné à la page HTML.

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 votre première fois de travailler avec PHP, se référer à ce blog "Créer une application web PHP simple" pour apprendre à exécuter une application web PHP simple.

Pour s'adapter aux informations de votre propre 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".

RELATED API

Dans l'étape 1, nous avons utilisé l'API ci-dessous pour créer un paquet de signature en personne sans aucun document et signataires. Si vous n'êtes pas familier avec la fonction de création de paquet s'est zona, consultez notre guide de démarrage rapide.

Demande HTTP
POST /api/packages
En-têtes HTTP
Autorisation: api_key de base
Accepter : application/json
Demande de charge utile
{
	"type":"PACKAGE",
	 "statut" : "DRAFT",
	 "nom" : 'pkgName',
	 "description" : 'pkgDesc',
	 "paramètres" :
		 "cérémonie" :
			 "inPerson" : "vrai"
		}
	}
}
Charge utile de réponse
{
    "id": "9sKhW-h-qS9m6Ho3zRv3n2a-rkI"
}

À l'étape2, le téléchargement de documents et l'ajout de signataires ont été entièrement effectués dans la page Designer. Vous pouvez également collecter et injecter ces informations à l'étape 1.

Pour envoyer un colis, consultez notre guide «Modifier l'état d'un paquet».

À l'étape 3, parce qu'il s'agit d'une signature en personne, nous avons créé un jeton d'authentification de signataire pour notre expéditeur en utilisant l'API ci-dessous :

Demande HTTP
POST /api/authentificationTokens/signer/multiUse
En-têtes HTTP
Accepter : application/json
Content-type: application/JSON
Autorisation: api_key de base
Demande de charge utile
{
    "packageId": "5vjLRY5MWrDJ6MzRAEyCKOy5IH0",
    "signerId": "8b734331-bc5b-4843-9784-d4ece4b7dc22"
}
Charge utile de réponse
{
   "packageId":"5vjLRY5MWrDJ6MzRAEyCKOy5IH0"
   "signerId":"8b734331-bc5b-4843-9784-d4ece4b7dc22",
   "valeur":"ZDNmMDNiNGUtNGYxOC00YWZiLTkwMmUtNWE5YmIwZTRjZDg1"
}

Remarque : Dans un scénario de signature en personne, la cérémonie de signature commencera par le signe utilisé pour générer le jeton d'authentification.

Grâce à ce blog, nous avons terminé un processus d'intégration très basique de la collecte d'informations sur les paquets à la création et la conception de paquets. À partir de là, nous avons intégré la cérémonie de signature et expliqué comment déclencher manuellement l'événement d'achèvement pour permettre à votre application de prendre le contrôle du processus une fois de plus.

Si vous avez des questions concernant ce blog ou toute autre chose concernant l'intégration de OneSpan Sign dans votre application, visitez les Forums communautairesdes développeurs .

OneSpan Sign Developer Community

Rejoignez la communauté OneSpan Sign Developer! Forums, blogs, documentation, téléchargements SDK, et plus encore.

Joignez-vous aujourd'hui