Formulários de biblioteca: adicionando CAPTCHA a formulários HTML personalizados

Você sabia que a sigla CAPTCHA significa Completely Automated Public Turing test to tell Computers and Humans Apart (Teste Público de Turing Completamente Automatizado para distinguir Computadores e Humanos)? Normalmente, o CAPTCHA exibe uma imagem que traz uma frase e o respondente deve digitá-la com em um campo para enviar o formulário com êxito. Isso é usado para evitar que não-humanos(os famosos bots) enviem os formulários.

Você pode usar o reCAPTCHA gratuito do Google para adicionar a funcionalidade CAPTCHA nas suas experiências em Ion. Para incluir aa ferramenta CAPTCHA em seu(s) formulário(s), você usará o recurso de formulário HTML personalizado do Ion. Observe que o CAPTCHA não está disponível para formulários gerados por tabela. Agora, vamos começar!

Primeiro, você precisará obter uma chave secreta e uma chave de site visitando o link abaixo para fazer login no Google reCAPTCHA. Você pode fazer login usando uma conta do Google existente ou criando uma nova:

https://www.google.com/recaptcha/admin/create

Um server scriptlet e uma amostra de formulário HTML customizado que você pode conectar em seu Ion Console estão anexados a este artigo de suporte. Você usará esses anexos e seguirá as etapas listadas abaixo para adicionar um formulário com CAPTCHA às suas páginas do Ion. Agora, vamos adicionar o scriptlet ao seu console, fazendo pequenas atualizações na amostra:

1. Abra o anexo do scriptlet e copie o código.

2. Navegue até o menu "Global Libraries" e selecione "Server Scriptlets".

3. Adicione uma categoria de scriptlet ou navegue até uma existente. Cole seu código no editor.

4. Encontre a linha de código que inclui "URL += "secretkey=xxxSecretKey";" e substitua "xxxSecretKey" pelo código que você obteve do Google e salve.

5. Navegue de volta para o scriptlet e visualize a URL na janela do seu navegador. Anote o valor sscID no URL.

Agora, vamos adicionar o formulário personalizado ao seu Ion Console. Anexado a este artigo de suporte, você encontrará um exemplo de formulário HTML customizado que inclui o reCATCHA JavaScript fora das tags de formulário.

1. Abra o anexo do formulário personalizado e copie o código.

2. Em seu Ion Console, navegue até o menu "Global Libraries" e selecione "Forms".

3. Adicione uma categoria de formulário ou navegue até uma existente e, em seguida, adicione um novo formulário. Inclua uma label ao formulário, selecione "Custom HTML" como o "Form Type" e salve.

4. Cole seu código de amostra de formulário no editor.

5. Encontre a linha que contém "Recaptcha.create("xxxCAPTCHAkey", element, {" e substitua "xxxCAPTCHAkey" pela chave do site que você gerou no Google.

6. Encontre a linha que contém "result = liveballScriptlet(1,"rct=json",reqStr);" e substitua 1 pelo valor "sscID" que você anotou anteriormente.

7. Salve.

Este exemplo usa o tema "branco" para o CAPTCHA. Consulte o suporte do reCAPTCHA do Google se desejar alterar o tema.

Um desenvolvedor pode codificar campos de dados adicionais neste formulário de amostra ou simplesmente usá-lo como um ponto de referência. Se você deseja salvar os valores dos campos de dados em seu Ion Console, clique no ícone de lápis rotulado "Save as is" ao lado de cada campo e, nos menus, você selecionará o campo de coleta de dados do Ion correspondente.

Por último, mas não menos importante, vamos adicionar o formulário a uma publicação de teste:

1. Navegue para um portfólio de teste ou sandbox > campanha e adicione uma publicação com um editor de formulário.

2. Clique no editor de formulários e selecione o formulário com CAPTCHA que você acabou de adicionar ao console.

3. Vincule o formulário a uma página de follow-on.

Agora você está pronto para testar seu formulário com CAPTCHA!

A equipe do Ion está à disposição para implementar isso para você como um projeto, se você preferir que façamos todo esse trabalho. Sinta-se à vontade para entrar em contato com seu gerente de conta se tiver alguma dúvida.

 

CAPTCHA.zip