🔌Installazione e uso
Il Pulsante Firma con IO è scritto in JavaScript e viene distribuito come Web Component, in modo da poter essere integrato all'interno delle pagine web e delle web-app JavaScript indipendentemente dalle tecnologie e i framework JavaScript adottati.
Una volta importato, il componente è disponibile in pagina sotto forma di custom element HTML, con il nome di io-sign.
Includere il Pulsante Firma con IO
Per poter usare il componente io-sign è necessario includerlo all'interno delle proprie pagine HTML (dentro <head> o alla fine di <body>)
Infine, per mostrare il Pulsante Firma con IO in pagina è sufficiente dichiarare l'elemento HTML appena importato all'interno del proprio template HTML o componente JS, come qualsiasi altro elemento HTML (form, div, video, ...)
Funzionamento del componente
Il Pulsante Firma con IO, al click o tap da parte del cittadino, emette un Evento chiamato io-sign.cta.click nel DOM in cui è stato inserito. Una volta emesso l'evento, il componente entra nello stato loading che segnala all'utente l'inizio del flusso di creazione (o ottenimento) di una Richiesta di Firma.
Lo stato loading termina quando viene chiamato il metodo redirectOrShowQrCode(signatureRequestId) dell'elemento, a cui occorre passare come unico parametro in input l'ID della Richiesta di Firma da inoltrare al cittadino.
L'elemento supporta l'attributo HTML disabled (che funziona in modo del tutto similare all'attributo omonimo presente in elementi HTML come input e button), che rende il Pulsante Firma con IO non cliccabile e stilizzato in modo da essere visto come disattivato.
Il componente, infine, espone la funzione reset(), che annulla il loading e ne reimposta lo stato (utile per gestire casistiche di errore).
Esempio
Questo esempio mostra come aggiungere l'elemento <io-sign> in pagina, gestire l'evento io-sign.cta.click emesso al click del Pulsante Firma con IO e chiamare la funzione redirectOrShowQrCode per mostrare il QRCode o portare l'utente direttamente su App IO o reset per terminare il loading.
Nel tuo applicativo all'interno della funzione (qui nominata) createOrRetrieveSignatureRequest dovrai mettere tutta la business logic necessaria per creare la richiesta di Firma, ottenerne una già creata, caricare i documenti dialogando con le tue API back-end integrate alle API REST di Firma con IO.
Riassumendo, per ingaggiare il cittadino tramite il Pulsante Firma con IO all'interno della tua pagina Web dovrai:
Includere l'elemento HTML
io-signin paginaRegistrare un
event listenersull'eventoio-sign.cta.clickemesso dal componenteio-signInserire la propria business logic all'interno dell'handler dell'evento appena registrato
Chiamare la funzione
redirectOrShowQrCodeper mostrare il QRCode o reindirizzare l'utente su app IO
Per motivi di sicurezza è opportuno effettuare il flusso di creazione della richiesta di Firma, compreso del caricamento dei documenti PDF, esclusivamente in un contesto server to server (API sito web verso API Firma con IO)
L'esempio di codice mostrato utilizza le funzionalità native di JavaScript, ma è possibile integrare il componente anche all'interno di web application complesse che usano librerie/framework come React, jQuery, Vue, Svelte o Angular.
Sequence diagram
Last updated