A integração com Assinatura embutida permite assinar/aprovar documentos submetidos no Signer dentro de qualquer aplicação por meio do componente LacunaSignerWidget.
NOTE:O Signer deve ser configurado com uma licença do Web PKI que tenha o domínio no qual o componente será carregado.
Instalação
Primeiro, inclua na sua página o arquivo lacuna-signer-widget.js mais recente:
<script type="text/javascript" src="https://cdn.lacunasoftware.com/libs/signer/lacuna-signer-widget-0.6.0.min.js"
integrity="sha256-TM1zGyxt8+FQ3VcihnbovQlTP1pBRAVLSKKTOxRBIGw="
crossorigin="anonymous"></script>
Em seguida, instancie a classe LacunaSignerWidget:
var widget = new LacunaSignerWidget();
Chame então o método on() passando o tipo de evento que quer escutar e uma função de callback que será chamada quando o usuário assinar/aprovar o documento:
//assinatura
widget.on(widget.events.documentSigned, function (e) {
// ...
//alert('Documento ' + e.id + ' assinado');
});
//aprovação
widget.on(widget.events.documentApproved, function (e) {
// ...
//alert('Documento ' + e.id + ' aprovado');
});
Se preferir use o método listen() para escutar todos eventos com apenas um callback:
widget.listen(function (e) {
if (e.type === widget.events.documentSigned) {
// ...
//alert('Documento ' + e.id + ' assinado');
} else if (e.type === widget.events.documentApproved) {
// ...
//alert('Documento ' + e.id + ' aprovado');
}
});
NOTE: Sempre verifique no backend se o documento foi de fato concluído, dado que os callbacks podem ser acionados por outros arquivos javascript.
Por fim, carregue o iFrame utilizando o método render(), que recebe duas entradas obrigatórias:
- embedUrl: a URL para ação que deseja ser realizada. Corresponde ao parâmetro embedUrl retornado pela API Action URL.
- elementId: id do elemento no qual será exibido o componente de assinatura.
E duas entradas opcionais:
- page: numero da página na qual o documento será aberto em sua inicialização (para abrir a última página de qualquer documento, não importando o tamanho dele, atribui-se o número '-1').
- scale: a porcentagem que definirá em qual escala o documento será aberto. Pode ser definido através de um simples string '100' ou através do widget.scaleOptions.S100.
widget.render(embedUrl, 'embed-container', page, scale);
Caso prefira, pode ser fornecido o elemento DOM diretamente:
widget.renderElement(embedUrl, document.getElementById('embed-container'), page, scale);
Exemplo online
<div style="text-align: center;">
<h1>Signer embedded signature</h1>
<button type="button" onclick="startSignature(this)">
Start Signature for Alan Turing (560.723.861-05)
</button>
</div>
<div id="embed-container" class="frame-container">
<!-- O iFrame do widget será renderizado aqui -->
</div>
<style>
.frame-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.frame-responsive {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function sign(embedUrl) {
var widget = new LacunaSignerWidget();
// Escutando eventos com um único callback
widget.listen(function (e) {
if (e.type === widget.events.documentSigned) {
alert('Documento ' + e.id + ' assinado');
} else if (e.type === widget.events.documentApproved) {
alert('Documento ' + e.id + ' aprovado');
}
});
widget.render(embedUrl, 'embed-container');
}
function startSignature(elem) {
elem.innerHTML = 'Loading ...';
$.post("https://demos.lacunasoftware.com/api/signer/embedded", {}).
done(function (data) {
if (data) {
sign(data);
elem.style.visibility = "hidden";
} else
elem.innerHTML = 'Error';
}
}).fail(function () {
elem.innerHTML = 'Error';
});
Exemplo online de assinatura em nuvem
Para este exemplo é utilizado o certificado de teste do BirdID (CPF 026.102.470-10, veja abaixo as instruções para pareamento).
<div style="text-align: center;">
<h1>Signer embedded Cloud signature</h1>
<button type="button" onclick="startSignature(this)">
Start Signature for Usuario Teste BIRDID (026.102.470-10)
</button>
</div>
<div id="embed-container" class="frame-container">
<!-- O iFrame do widget será renderizado aqui -->
</div>
<style>
.frame-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.frame-responsive {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: none;
}
</style>
<script>
function sign(embedUrl) {
var widget = new LacunaSignerWidget();
widget.on(widget.events.documentSigned, function (e) {
alert('Document ' + e.id + ' signed');
});
widget.render(embedUrl, 'embed-container');
}
function startSignature(elem) {
elem.innerHTML = 'Loading ...';
$.post("https://demos.lacunasoftware.com/api/signer/embedded?useCloudUser=true", {}).
done(function (data) {
if (data) {
sign(data);
elem.style.visibility = "hidden";
} else {
elem.innerHTML = 'Error';
}
}).fail(function () {
elem.innerHTML = 'Error';
});
}
</script>
Para usar o usuário de teste do ambiente de homologação do BirdID use o QR code abaixo no aplicativo:
![](https://files.readme.io/be9339d-image.png)
Configurações adicionais
Na instanciação da classe LacunaSignerWidget você pode passar um objeto com uma ou mais das configurações listadas abaixo:
Attributo | Tipo | Descrição |
---|---|---|
enableNotifications | boolean | Notificações não são enviadas após a conclusão da assinatura/aprovação embutida. Defina como true para enviá-las. Pode ser definido após a instanciação com método setEnableNotifications. |
disableDocumentPreview | boolean | Se true, esconde a pré-visualização do documento. Nesse caso, será exibido apenas o botão de assinatura e dados do assinante/aprovador. Pode ser definido após a instanciação com método setDisableDocumentPreview. |
enableRefusal | boolean | Se true, exibirá a opção para recusar uma assinatura. Pode ser definido após a instanciação com método setEnableRefusal. |
culture | string | Define o idioma utilizado, as opções disponíveis são "pt" (português), "en" (inglês) e "es" (espanhol). |
Exemplo:
var widget = new LacunaSignerWidget({ disableDocumentPreview: true });
var widget = new LacunaSignerWidget();
widget.setDisableDocumentPreview(true);
Exemplo online de assinatura sem pré-visualização
<div style="text-align: center;">
<h1>Signer embedded signature without Preview</h1>
<button type="button" onclick="startSignature(this)">
Start Signature for Alan Turing (560.723.861-05)
</button>
</div>
<div class="container">
<div id="embed-container" class="frame-container">
</div>
</div>
.frame-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.frame-responsive {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: none;
}
.container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
function sign(embedUrl) {
var widget = new LacunaSignerWidget({ disableDocumentPreview: true });
widget.on(widget.events.documentSigned, function (e) {
alert('Document ' + e.id + ' signed');
});
widget.render(embedUrl, 'embed-container');
}
function startSignature(elem) {
elem.innerHTML = 'Loading ...';
$.post("https://demos.lacunasoftware.com/api/signer/embedded", {}).
done(function (data) {
if (data) {
sign(data);
elem.style.visibility = "hidden";
} else {
elem.innerHTML = 'Error';
}
}).fail(function () {
elem.innerHTML = 'Error';
});
}
Exemplo para dispositivos móveis
Também é possível utilizar o exemplo de assinaturas embutidas em dispositivos móveis. Um app de exemplo está disponível em nosso repositório do GitHub. O exemplo contém uma página da web contendo o widget em JavaScript rodando em seu dispositivo. A aplicação foi desenvolvida com Flutter.