OneSpan Sign Developer: Designer Customization and Integration - Partie 4

Duo Liang, mars 13, 2019

OneSpan Sign Developer: Designer Customization and Integration – Part 4

Dans la partie 3 de cette série de blog, nous avons démontré l'un des flux de travail recommandés impliquant une page de concepteur personnalisée. Dans ce projet, nous avons utilisé un bouton externe pour déclencher l'événement d'achèvement au lieu du bouton envoyé par défaut.

Aujourd'hui, nous allons présenter une autre méthode de gestion de l'événement d'achèvement pour faire un processus cohérent. En plus de cela, notre projet sera étendu pour afficher des informations de paquet. Cela peut être utile lorsque vous êtes à la recherche de codes d'exemple pour développer votre propre tableau de bord.

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

Étape1:

Semblable à la démo dans la partie 3, une page de formulaire a été présentée demandant des informations de base de la trousse. Une fois que le bouton "Créer le paquet" est cliqué, l'avant demandera à notre back-end de créer un paquet de signature en personne. 3-13-1

Etape 2:

Au lieu de surgir directement une page de concepteur, OneSpan Sign présente la page de détails de paquet semblable à notre portail Web. Ici, vous pouvez ajouter vos propres extensions pour effectuer des fonctions telles que la manipulation de paquets, la collecte d'informations de signataire, ou le téléchargement de documents. 3-13-2

Etape 3:

Après que l'utilisateur a confirmé l'information et appuyez sur le bouton "Design Package", un modal a été basculer avec la session Designer intégré. Pour simplifier le processus, les utilisateurs utiliseront toujours Designer pour compléter toute l'étape de conception du paquet. 3-13-3

Notez que nous avons fait quelque chose de différent dans cette étape par rapport à la démo dans la partie 3.

Nous avons désactivé le clic-à-backdrop du modal en utilisant le code ci-dessous, de sorte que la seule façon de quitter le concepteur (peu importe si le paquet a été envoyé ou non) a été en cliquant sur le bouton "X" dans le coin supérieur droit. De cette façon, nous avons limité et assuré le flux de travail de l'utilisateur final. Cela conduit à une autre différence notable; nous avons gardé le "Bouton d'envoi" par défaut.

            $('#modal-plein écran').modal (md
                toile de fond: 'statique',
                clavier: faux
            });

Lorsque l'utilisateur envoie le paquet et clique sur le bouton de sortie en fonction du processus attendu, nous pouvons déclencher une autre demande interrogeant l'état du paquet. Même si les utilisateurs finaux ont cliqué sur le bouton de sortie sans envoyer le paquet, OneSpan Sign sait que le paquet n'a pas été envoyé et offre toujours aux utilisateurs finaux la possibilité de revenir à la page Designer. 3-13-4

Etape 4:

Dès que l'utilisateur clique sur le bouton de sortie, nous interrogeons à nouveau le paquet et pouvons déclencher le changement d'état qui interrogera l'état du paquet. Dans notre projet, lorsque l'expéditeur retourne à la page d'information du paquet, nous pouvons rendre la page à nouveau, et ils peuvent voir les documents mis à jour et les listes de destinataires. 3-13-5

Lorsque le bouton "Cérémonie de signature" est cliqué, nous pouvons créer un lien de signature en personne et les conduire à la session de la cérémonie de signature. 3-13-6

LE CODE

La démo est hébergée sur 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 ajuster les informations de votre 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 cette démo, l'utilisation de package Status Change pour déclencher l'événement d'achèvement est particulièrement importante. Il s'agit d'une forme de sondage actif, qui est couramment vu dans votre processus d'intégration. Utilisez l'API ci-dessous pour récupérer vos métadonnées de paquet, puis vous pouvez analyser l'état du paquet à partir de la charge utile JSON.

Récupérer le paquet JSON
Demande HTTP
GET /api/packages/ 'packageId'
En-têtes HTTP
Accepter : application/json; esl-api-version 11,21
Autorisation: api_key de base

Pour une description complète pour chaque champ en réponse, vous pouvez vous référer à la table JSON Properties à la fin de "Création et envoi d'un paquet" Guide. En outre, se référer à la note de sortie 10.6.1 pour des raisons de porter "esl-api-version" dans l'en-tête de demande.

Personnalisation des concepteurs et workflows suggérés

Grâce à ce blog, nous avons introduit un autre flux de travail suggéré à intégrer avec Designer. Vous pouvez également trouver le code source rendant les informations du paquet, ce qui est très extensible pour d'autres scénarios d'intégration.

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 .

La série de blogs de personnalisation et d'intégration des concepteurs :