Forms
      Voltar para o início
      1. Central de Ajuda
      2. Ion
      3. Forms

      Formulários Freestyle: adicionando CAPTCHA 2.0

      Você sabia que CAPTCHA é um acrônimo para Completely Automated Public Turing test to tell Computers and Humans Apart? Algo como “teste de Turing público completamente automatizado para distinguir computadores e humanos”.

      Normalmente, o CAPTCHA exibe uma caixa de seleção que deve ser marcada antes que um formulário possa ser enviado, para evitar que pessoas não enviem seus formulários.

      Você pode usar o reCAPTCHA gratuito do Google para adicionar a funcionalidade CAPTCHA às suas Ion experiences. Você pode incluir o reCAPTCHA 2.0 do Google nos seus Freestyle Forms.

      Primeiramente, você precisará obter uma Secret key e uma Site key 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

      As amostras de scriptlet e javascript do servidor estão anexadas a esta postagem de suporte, que você pode conectar ao scriptlet do servidor do console e às bibliotecas de script, respectivamente. Você usará esses anexos e seguirá as etapas listadas abaixo para adicionar o reCAPTCHA aos seus Freestyle Forms do Ion.

      Server Scriptlet

      Primeiramente, vamos adicionar o Server scriptlet ao console e fazer pequenos ajustes na amostra de Server scriptlet anexado.

      1. Abra o anexo “reCAPTCHA Server Scriptlet” e copie o código.
      2. Clique no menu Libraries, no painel de navegação do seu console, e selecione Server Scriptlets.
      3. Adicione uma categoria de scriptlet ou navegue em uma existente.
      4. Clique no botão verde New scriptlet para adicionar um novo reCAPTCHA server scriptlet à categoria selecionada.
      5. Dê um título ao seu scriptlet e cole o código "reCAPTCHA Server Scriptlet" no editor.
      6. Substitua o valor de exemplo secretKey de "XXXXXX" pela sua Secret key. Observe que as aspas duplas devem permanecer em torno do seu valor.
      7. Salve.
      8. Clique no título do scriptlet para navegar de volta ao scriptlet e visualizar o URL na janela do navegador. Anote o valor sscID no URL da barra de endereço. Esse valor será referenciado na configuração do javascript na próxima seção.

      rtaImage (12) (1)

      Javascript

      A seguir, vamos adicionar algum javascript ao seu console que executará o scriptlet do servidor e realizará a validação CAPTCHA no envio do formulário.

      1. Abra o anexo "reCAPTCHA Page Script" e copie o código.
      2. Clique no menu Libraries, no painel de navegação do seu console, e selecione Scripts.
      3. Adicione uma categoria de script ou navegue até uma já existente.
      4. Clique no botão verde New script para adicionar um novo script à categoria selecionada.
      5. Dê um título ao seu script e cole o código "reCAPTCHA page script" no editor.
      6. Substitua o valor scriptletID de X pelo valor sscID do scriptlet do servidor conforme observado na etapa 8 da seção Scriptlet do servidor acima.
      7. Salve.

      rtaImage (13) (1)

      Widget

      Agora vamos criar um widget que será arrastado para a(s) sua(s) página(s) Ion para adicionar CAPTCHA aos seus Freestyle Forms.

      1. Abra o anexo "reCAPTCHA Widget" e copie o código.
      2. Clique no menu Libraries, na navegação lateral do console, e selecione Widgets.
      3. Clique no botão verde New widget, na parte superior da página, para adicionar um novo widget.
      4. Dê um nome ao seu widget e selecione uma categoria ou crie uma nova.
      5. Cole o código do "reCAPTCHA Widget".
      6. Substitua o valor de exemplo de sitekey de "XXXXXX" por sua Secret key. Observe que as aspas duplas devem permanecer em torno do seu valor.
      7. Salve.

      rtaImage (14)-1

      Page Setup

      Com o scriptlet, o script da página e o widget prontos, é hora de reunir tudo na sua página.

      1. Navegue na sua página de formulário.
      2. Abra o editor de script e adicione o script da página reCAPTCHA ao <head>.
      3. Clique OK.
      4. Passe o mouse sobre a categoria Basics no seu Creative Studio e arraste o ícone do widget para o seu formulário logo acima do botão de envio.
      5. Selecione o reCAPTCHA widget.

      Seu formulário agora deve estar configurado para usar CAPTCHA para verificar se um humano está enviando o formulário, e não um robô!