Integrar um serviço captcha personalizado com formulários do Customer Insights - Journeys

Artigo
01/31/2024

Os formulários do Customer Insights - Journeys permitem-lhe utilizar a proteção contra bots captcha personalizada para validar submissões de formulários. Este artigo dá um exemplo de como integrar o Google reCAPTCHA. O fluxo é semelhante para outros serviços captcha.

Nota

Na versão atual da aplicação, apenas uma implementação de captcha pode estar ativa. Se usar o seu próprio fornecedor de captcha (como descrito abaixo), os formulários existentes que usam o captcha de origem deixarão de funcionar. Uma implementação de captcha personalizada requer, pelo menos, conhecimento básico de escrita e depuração de plug-ins do Dataverse.

O processo consiste nestes passos:

Adicionar reCAPTCHA ao formulário.
Adicionar o valor de texto captcha à submissão do formulário depois de o formulário ser submetido.
Criar um plug-in no CRM que valide o captcha.

Exemplo passo a passo: Integrar o Google reCAPTCHA

1. Adicionar reCAPTCHA ao formulário

Criar um formulário no editor de formulários do Customer Insights - Journeys.
Adicione um atributo data-validate-submission="true" ao elemento <form>, que permite a validação personalizada na submissão do formulário:
Adicione um <div id="g-recaptcha"> ao formulário como marcador de posição para reCAPTCHA. Este ID div é utilizado como referência mais tarde. É recomendável colocar o marcador de posição entre o último campo e o botão Submeter.
Publique o formulário e incorpore o formulário no seu site.
Edite a página na qual o formulário foi incorporado. Adicione o script fornecido pela Google ao cabeçalho da página. Este script carrega o reCAPTCHA com o parâmetro de chamada de retorno onLoad. Esta chamada de retorno é chamada assim que o captcha é carregado.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Adicione a função onLoadCallback:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Substitua o marcador de posição {sitekey} pelo fornecido pela Google. Esta função de chamada de retorno compõe o reCAPTCHA dentro do marcador de posição <div id="g-recaptcha"> que criou anteriormente.
Registe a função onloadCallback a ser chamada pelo carregador de formulários:

document.addEventListener("d365mkt-afterformload", onloadCallback);

2. Adicionar o valor de texto do captcha à submissão do formulário

Após o formulário ser submetido, o parâmetro g-recaptcha-response é adicionado automaticamente à submissão do formulário. Nos passos seguintes, criará um plug-in que oculta este valor, pois este será adicionado à lista ValidationOnlyFields no objeto de resposta devolvido pelo código do plug-in.

O parâmetro G-recaptcha-response é adicionado.

3. Criar um plug-in

3.1 Criar um Projeto do Visual Studio para o plug-in

Abra o Visual Studio e crie um novo projeto da Biblioteca de Classes utilizando o .NET Framework 4.6.2.
No Explorador de Soluções, selecione Gerir Pacotes NuGet e instale o Microsoft.CrmSdk.CoreAssemblies.

3.2 Criar a classe do plug-in

Mudar o nome de Class1.cs para CustomValidationPlugin.cs.

Faça com que a classe CustomValidationPlugin herde da interface IPlugin e adicione o método Executar.

public class CustomValidationPlugin : IPlugin
{
   public void Execute(IServiceProvider serviceProvider)
   {

   }
}

Adicione o código que se segue ao método de execução para obter o serviço de rastreio e contexto.

public void Execute(IServiceProvider serviceProvider)
{
   // get tracing service
   ITracingService tracingService =
   (ITracingService)serviceProvider.GetService(typeof(ITracingService));

   // get plugin execution context
   IPluginExecutionContext context = (IPluginExecutionContext)
   serviceProvider.GetService(typeof(IPluginExecutionContext));
}

Adicione este código para obter a cadeia do parâmetro de submissão do formulário. É uma cadeia codificada JSON que representa os campos que o utilizador submeteu no formulário. Este processo recupera esta cadeia e anula a sua serialização utilizando um método de assistente de Anular a serialização e a classe FormSubmissionRequest que é definida posteriormente. Isto verifica se a matriz Campos contém uma chave para g-recaptcha-response. Se a chave do reCAPTCHA não for encontrada, devolve ignorar validação, uma vez que o formulário que está a processar não continha um elemento de recaptcha da Google.
```
var requestString = (string)context.InputParameters["msdynmkt_formsubmissionrequest"];
var requestObject = Deserialize<FormSubmissionRequest>(requestString);
if (!requestObject.Fields.TryGetValue("g-recaptcha-response", out string recaptchaToken))
{
   tracingService.Trace("g-recaptcha-response was not present in form submission");
   return;
}
```

Adicione o código que se segue a devolver se o valor de g-recaptcha-token for nulo ou vazio.

if (String.IsNullOrEmpty(recaptchaToken))
{
   tracingService.Trace($"g-recaptcha-response value not found");
   return;
}

Adicione o código que se segue para validar o token de captcha da Google em relação às APIs Google.

string url = "https://www.google.com/recaptcha/api/siteverify";
using (HttpClient client = new HttpClient())
{
   var content = new FormUrlEncodedContent(new Dictionary<string, string>
   {
      {"secret", "your_secret_key"},
      {"response", recaptchaToken}
   });

   try
   {
      var response = client.PostAsync(url, content).Result;
      if (!response.IsSuccessStatusCode)
      {
         tracingService.Trace($"Request Failed: ({response.StatusCode}){response.Content}");
         return;
      }

      var responseString = response.Content.ReadAsStringAsync().Result;

      gRecaptchaResponse = Deserialize<GRecaptchaResponse>(responseString);

      var resp = new ValidateFormSubmissionResponse()
      {
         IsValid = isValid,
         ValidationOnlyFields = new List<string>() { "g-recaptcha-response" }
      };
      context.OutputParameters["msdynmkt_validationresponse"] = Serialize(resp);
    }
    catch (Exception e)
    {
       tracingService.Trace($"{e.Message}");
    }
}

Primeiro, o URL é definido e, em seguida, é criada uma instância do HttpClient. É criado um objeto FormUrlEncodedContent que contém o recaptchaToken obtido nos passos anteriores e a chave secreta fornecida pela Google. Em seguida, é enviado um pedido POST e o código de estado é verificado, caso não tenha êxito, é devolvido. Se tiver êxito, anula a serialização da resposta utilizando o método de assistente de Anular serialização e GRecaptchaResponse que é definido posteriormente. De seguida, criar um novo objeto ValidateFormSubmissionResponse, serializa-o e define-o como o valor do parâmetro de saída msdynmkt_validationresponse, que é o serviço da Microsoft que utiliza para aceitar ou rejeitar a submissão. Adicionar a cadeia g-recaptcha-response à lista ValidationOnlyFields oculta este campo da submissão de formulário na IU.

Adicione o código que se segue para definir os métodos de assistente Serializar e Anular a serialização.

private T Deserialize<T>(string jsonString)
{
   serializer = new DataContractJsonSerializer(typeof(T));
   T result;
   using (MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(jsonString)))
   {
      result = (T)serializer.ReadObject(stream);
   }
   return result;
}

private string Serialize<T>(T obj)
{
    string result;
    serializer = new DataContractJsonSerializer(typeof(T));
    using (MemoryStream memoryStream = new MemoryStream())
    {
       serializer.WriteObject(memoryStream, obj);
       result = Encoding.Default.GetString(memoryStream.ToArray());
    }
    return result;
}

Adicione o código que se segue para definir as classes necessárias para Serializar/Anular a serialização de objetos de cadeias JSON.

public class FormSubmissionRequest
 {
     public Dictionary<string, string> Fields { get; set; }
 }

 public class GRecaptchaResponse
 {
     public bool success { get; set; }
 }

 public class ValidateFormSubmissionResponse
 {
     public bool IsValid { get; set; }
     public List<string> ValidationOnlyFields { get; set; }
 }

3.3 Assinar e compilar o plug-in

Clique com o botão direito do rato no projeto e selecione Propriedades no Explorador de Soluções.
Selecione o separador Assinatura e marque a caixa de verificação Assinar a assemblagem.
Selecione <New...>.
Introduza um nome de ficheiro-chave e desselecione Proteger o meu ficheiro-chave com uma palavra-passe.
Compilar o projeto.
Pode encontrar a assemblagem do plug-in CustomValidationPlugin.dll em \bin\Debug.

3.4 Registar plug-in

Abrir PluginRegistration.exe.
Selecione Criar nova ligação.
Escolha Office 365.
Selecione Iniciar sessão.
Selecione Registar e, em seguida, Registar nova assemblagem.
Selecione o botão (...) no passo 1 e selecione o dll incorporado nos passos anteriores.
Selecione Registar plug-in selecionado.

3.4 Registar Passo

Selecione CustomValidationPlugin da lista de assemblagens registadas.
Selecione Registar Novo Passo.
Introduza msdynmkt_validateformsubmission no campo Mensagem de texto.
Certifique-se de que o Modo de Execução está definido como Síncrono.
Certifique-se de que a Ordem de execução está definida como 10.
Certifique-se de que a Fase do Pipeline do Evento da Execução está definido como Após a Operação.
Selecione Registar Novo Passo.

Conclusão

Quando um formulário com o atributo data-validate-submission é submetido, o seu plug-in personalizado é executado e valida a resposta do reCAPTCHA com serviços da Google. O plug-in personalizado será executado após o plug-in de validação predefinido da Microsoft. Se não houver campos captcha da Microsoft no formulário, o plug-in da Microsoft define IsValid:false e a submissão falha, a menos que o substitua por IsValid:true.

Fluxo de validação.

Partilhar via