{"_id":"54dd1866ca1e5219007e9db6","user":"54da5cb85b80b62300dadc4b","githubsync":"","category":{"_id":"54db48cd7dadb32300511364","project":"54da5d2f5b80b62300dadc4e","version":"54da5d305b80b62300dadc51","__v":5,"pages":["54dd180908f6b61700a69203","54dd1866ca1e5219007e9db6","54dd18bbca1e5219007e9db8","54dd190f08f6b61700a69206","54dd1d26ca1e5219007e9dba"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-11T12:19:25.480Z","from_sync":false,"order":2,"slug":"widget","title":"Widget"},"project":"54da5d2f5b80b62300dadc4e","parentDoc":null,"version":{"_id":"54da5d305b80b62300dadc51","project":"54da5d2f5b80b62300dadc4e","__v":7,"createdAt":"2015-02-10T19:34:08.062Z","releaseDate":"2015-02-10T19:34:08.062Z","categories":["54da5d305b80b62300dadc52","54da704b11dfeb1900430309","54da705c44b1090d00072b34","54db48c86db3861700c840c5","54db48cd7dadb32300511364","54dbaa0c7dadb3230051143b","572b89f0b352ab0e003daca2"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"v1.0","version_clean":"1.0.0","version":"1"},"__v":39,"metadata":{"title":"","description":"","image":[]},"updates":["54dde4f7c48ad90d00c18731","5592e973a873863b0011498b"],"next":{"pages":[],"description":""},"createdAt":"2015-02-12T21:17:26.458Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Sugerimos que você utilize a nova plataforma da Clicksign. Consulte a documentação da API em https://developers.clicksign.com. \\n\\nEsta documentação é referente à API da plataforma Clicksign Classic.\",\n  \"title\": \"Utilize a nova plataforma de assinatura\"\n}\n[/block]\nPara a sua conveniência, a Clicksign disponibiliza um componente simples de usar. Apesar da simplicidade de uso, gostamos de deixar claro o que fazemos e como fazemos. Por isto, nessa página explicaremos como nosso componente funciona. \n\nO widget é composto por 3 partes:\n\n1. Uma biblioteca javascript que você deverá adicionar à sua página;\n2. Um iframe que será criado pela biblioteca acima no DOM de sua página;\n3. Um código HTML que será o corpo do iframe acima;\n\nExplicamos abaixo como estes três componentes interagem para prover a funcionalidade esperada, bem como as etapas necessárias para você colocar o widget em funcionamento.\n\n## Passo 1: carregar a biblioteca\n\nA biblioteca javascript da Clicksign precisa ser incluída no corpo da página. \n\n![Carregando a biblioteca](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-1.png)\n\n## Passo 2: configurar o widget\n\nA biblioteca da Clicksign irá criar um objeto `clicksign` dentro do escopo padrão, `window`. Para que o widget seja montado dentro da página você necessita chamar a função `configure` no objeto `clicksign`.\n\n![Configurando a biblioteca](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-2.png)\n\nAo chamar a função `configure`, será adicionado um iframe dentro de um dos elementos da página. O iframe irá carregar o conteúdo da Clicksign, o qual será executado em contexto próprio. Portanto nem o widget, nem a página que o carrega, podem manipular os elementos um do outro.\n\n![Montando o IFRAME](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-3.png)\n\nO widget possui fluxo de navegação independente, possibilitando à Clicksign realizar as assinaturas em múltiplas requisições.\n\n![Demonstrando fluxo](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-4.png)\n\n## Passo 3: capturar uma assinatura\n\nPara aplicações que necessitam reagir a um evento de assinatura, o widget fornece uma chamada de callback executada dentro do contexto da página. Esta é a função do parâmetro `callback`.\n\n![Capturando assinatura](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-5.png)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Autenticação\"\n}\n[/block]\nA autenticação do usuário é realizada através de um **código aleatório** enviado ao e-mail que foi solicitado a assinatura. Desta forma, a Clicksign identifica o dono do e-mail como a pessoa que está tentado realizar a assinatura.\n\nO código é gerado e enviado através da Clicksign no momento em que o conteúdo do iframe é solicitado aos nossos servidores. Abaixo segue um diagrama representando o momento e o algoritmo utilizado.\n\n![Envio de token](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-6.png)\n\nO código é composto de 4 letras, exceto vogais. Ele possui duração de 10 minutos, e após este período, caso o widget seja recarregado, um novo código será gerado e enviado, o mesmo ocorre caso o usuário solicitar o reenvio do código.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Suporte\"\n}\n[/block]\nO widget da Clicksign oferece suporte oficial a todos os principais *browsers* mais utilizados no mercado:\n\n- Internet Explorer 9+\n- Chrome\n- Firefox\n- Safari\n- Opera\n\nCaso seja necessário que a Clicksign suporte outros navegadores, solicite homologação à nossa equipe de desenvolvimento através de\n[suporte:::at:::clicksign.com](mailto:suporte@clicksign.com).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Versão\"\n}\n[/block]\nO controle de versão do _widget_ é realizado através do arquivo _javascript_ que\nvocê carregará na aplição.  Utilizamos apenas um único número para controle de\nversão, caso ocorra alguma quebra de funcionalidade, o número da versão será\nacrescido em um, do contrário, apenas atualizaremos a versão disponível.\n\nO nome do arquivo determina a versão, p.e.: ```clicksign-v1.js``` é a versão 1,\n```clicksign-v2.js``` e a versão 2. Você também pode utilizar a propriedade\n```version``` do objeto ```clicksign```.\n\n[Confira a página do widget no Github.](https://github.com/clicksign/widget)","excerpt":"Nessa página você encontra os detalhes de como widget funciona.","slug":"funcionamento-widget","type":"basic","title":"Funcionamento"}

Funcionamento

Nessa página você encontra os detalhes de como widget funciona.

[block:callout] { "type": "danger", "body": "Sugerimos que você utilize a nova plataforma da Clicksign. Consulte a documentação da API em https://developers.clicksign.com. \n\nEsta documentação é referente à API da plataforma Clicksign Classic.", "title": "Utilize a nova plataforma de assinatura" } [/block] Para a sua conveniência, a Clicksign disponibiliza um componente simples de usar. Apesar da simplicidade de uso, gostamos de deixar claro o que fazemos e como fazemos. Por isto, nessa página explicaremos como nosso componente funciona. O widget é composto por 3 partes: 1. Uma biblioteca javascript que você deverá adicionar à sua página; 2. Um iframe que será criado pela biblioteca acima no DOM de sua página; 3. Um código HTML que será o corpo do iframe acima; Explicamos abaixo como estes três componentes interagem para prover a funcionalidade esperada, bem como as etapas necessárias para você colocar o widget em funcionamento. ## Passo 1: carregar a biblioteca A biblioteca javascript da Clicksign precisa ser incluída no corpo da página. ![Carregando a biblioteca](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-1.png) ## Passo 2: configurar o widget A biblioteca da Clicksign irá criar um objeto `clicksign` dentro do escopo padrão, `window`. Para que o widget seja montado dentro da página você necessita chamar a função `configure` no objeto `clicksign`. ![Configurando a biblioteca](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-2.png) Ao chamar a função `configure`, será adicionado um iframe dentro de um dos elementos da página. O iframe irá carregar o conteúdo da Clicksign, o qual será executado em contexto próprio. Portanto nem o widget, nem a página que o carrega, podem manipular os elementos um do outro. ![Montando o IFRAME](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-3.png) O widget possui fluxo de navegação independente, possibilitando à Clicksign realizar as assinaturas em múltiplas requisições. ![Demonstrando fluxo](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-4.png) ## Passo 3: capturar uma assinatura Para aplicações que necessitam reagir a um evento de assinatura, o widget fornece uma chamada de callback executada dentro do contexto da página. Esta é a função do parâmetro `callback`. ![Capturando assinatura](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-5.png) [block:api-header] { "type": "basic", "title": "Autenticação" } [/block] A autenticação do usuário é realizada através de um **código aleatório** enviado ao e-mail que foi solicitado a assinatura. Desta forma, a Clicksign identifica o dono do e-mail como a pessoa que está tentado realizar a assinatura. O código é gerado e enviado através da Clicksign no momento em que o conteúdo do iframe é solicitado aos nossos servidores. Abaixo segue um diagrama representando o momento e o algoritmo utilizado. ![Envio de token](https://raw.githubusercontent.com/clicksign/widget/master/images/flow-6.png) O código é composto de 4 letras, exceto vogais. Ele possui duração de 10 minutos, e após este período, caso o widget seja recarregado, um novo código será gerado e enviado, o mesmo ocorre caso o usuário solicitar o reenvio do código. [block:api-header] { "type": "basic", "title": "Suporte" } [/block] O widget da Clicksign oferece suporte oficial a todos os principais *browsers* mais utilizados no mercado: - Internet Explorer 9+ - Chrome - Firefox - Safari - Opera Caso seja necessário que a Clicksign suporte outros navegadores, solicite homologação à nossa equipe de desenvolvimento através de [suporte@clicksign.com](mailto:suporte@clicksign.com). [block:api-header] { "type": "basic", "title": "Versão" } [/block] O controle de versão do _widget_ é realizado através do arquivo _javascript_ que você carregará na aplição. Utilizamos apenas um único número para controle de versão, caso ocorra alguma quebra de funcionalidade, o número da versão será acrescido em um, do contrário, apenas atualizaremos a versão disponível. O nome do arquivo determina a versão, p.e.: ```clicksign-v1.js``` é a versão 1, ```clicksign-v2.js``` e a versão 2. Você também pode utilizar a propriedade ```version``` do objeto ```clicksign```. [Confira a página do widget no Github.](https://github.com/clicksign/widget)