Desenvolvedor de sinal OneSpan: personalização e integração de designers - parte 1
Como integrador, se você deseja fornecer uma página HTML de front-end para os usuários finais projetarem e prepararem documentos, há um recurso chamado "Designer" no OneSpan Sign. Ao criar um link específico do Designer, você pode incorporar o posicionamento da assinatura e a experiência de revisão de documentos em um iFrame. Além disso, o OneSpan Sign também suporta configurações flexíveis para essa interface gráfica do usuário, que se ajustam a uma ampla variedade de requisitos.
Neste blog, abordaremos a codificação API / SDK relacionada ao Designer. Em seguida, exploraremos os componentes configuráveis na página Designer e discutiremos o processo de integração.
Criar uma sessão de designer
Passo 1:
A primeira etapa é criar um token de autenticação do remetente
Java SDK
String senderAuthenticationToken = client.getAuthenticationTokensService (). CreateSenderAuthenticationToken (packageId);
.NET SDK
string senderAuthenticationToken = client.AuthenticationTokenService.CreateSenderAuthenticationToken (packageId);
MÉTODO DE DESCANSO:
Solicitação HTTP
POST / api / authenticationTokens / remetente
Cabeçalhos HTTP
Accept: application / json
Tipo de Conteúdo: application / json
Autorização: básica api_key
Solicitar carga útil
{
"packageId": "e937fc75-3c3b-4506-b270-cc7e43f4cf78"
}
Carga útil da resposta
{
"value": "MjY0MjQ4MzgtMTJlOS00MzhjLTgzODMtMzJmMGNiZTg3ODBl"
}
Passo 2:
Usando o token de autenticação criado na Etapa 1 e o ID do pacote retornado para você durante a criação do pacote, crie o seguinte URL para a nova Experiência do Designer:
{instance_url} / auth? senderAuthenticationToken = {senderToken} & target = {instance_url} / a / transaction / {packageId} / designer
E use este link para o Designer clássico:
{instance_url} / auth? authenticationToken = {userToken} & target = {instance_url} / designer / {packageId}
Nota:
Existem experiências clássicas e novas de designer. Nas próximas seções, discutiremos apenas a nova versão.
Etapa 3:
Enquanto o seu pacote estiver no status "Rascunho", você poderá incorporar esse link a um iFrame e migrar o processo de designer para o seu próprio fluxo de trabalho.
Referir-se Guia do Designer para mais informações sobre API / SDK.
Personalize seu designer
A figura abaixo mostra a comparação entre o recurso Designer com configurações padrão e o Designer com um estilo minimalista. Essas duas opções demonstram quantos componentes podem ser removidos ou modificados na página Designer.
1 Botão "saveLayout" e "applyLayout"
2) Botão "documentVisibility"
3) Botão "addSigner"
4) Botão "editRecipient"
5) Botão "addDocument"
6 Botão "editDocument"
7) Botão "deleteDocument"
8) Botão "enviar" para criação de pacotes ou botão "pronto" na criação de modelos
9 Os seguintes campos adicionais podem estar ocultos
- signatureDate
- signerName
- signerTitle
- signerCompany
- campo de texto
- caixa de seleção
- Lista
- rádio
- área de texto
- rótulo
- datepicker
Para alterar as configurações do Designer no nível da conta, entre em contato com nosso equipe de suporte .
Integração com Designer
Uma página do Designer pode estar significativamente envolvida no seu fluxo de trabalho, devido aos poderosos recursos que ela fornece.
Ao contrário da aplicação de métodos automáticos para a construção do documento, como o uso de recursos de Extração de documento ou Extração de tags de texto que exigem a modificação do PDF, esta página da GUI permite que usuários não técnicos possam projetar documentos com uma interface simples de arrastar e soltar. Ele ainda oferece a capacidade de adicionar e editar assinantes e documentos, mesmo que você não tenha criado sua página de front-end para isso.
Até o momento, analisamos como gerar uma sessão do Designer programaticamente, percorremos os componentes em potencial e listamos algumas vantagens do uso dessa solução durante a integração. Na segunda parte desta série, discutiremos os fluxos de trabalho de integração detalhados na página Designer e demonstraremos o Designer em ação.
Se você tiver alguma dúvida sobre este blog ou qualquer outra coisa relacionada à integração do OneSpan Sign em seu aplicativo, visite o Fóruns da comunidade de desenvolvedores . Seu feedback é importante para nós!
