Integra un servizo de captcha personalizado con Customer Insights - Journeys formularios

Artigo
06/04/2024

Customer Insights - Journeys os formularios permítenche usar protección personalizada de bot captcha para validar os envíos de formularios. Este artigo ofrece un exemplo de como integrar Google reCAPTCHA. O fluxo é similar para outros servizos de captcha.

Nota

Na versión actual da aplicación, só pode estar activa unha implementación de captcha. Se usas o teu propio provedor de captcha (como se indica a continuación), os formularios existentes que usan o captcha listo para usar deixarán de funcionar. Unha implementación de captcha personalizada require polo menos coñecementos básicos de escritura e depuración de complementos de dataverse.

O proceso consta destes pasos:

Engade reCAPTCHA ao formulario.
Engade o valor de texto captcha ao envío do formulario unha vez enviado o formulario.
Crea un complemento no CRM que valide o captcha.

Exemplo paso a paso: integra Google reCAPTCHA

1. Engade reCAPTCHA ao formulario

Crea un formulario no Customer Insights - Journeys editor de formularios.
Engade un data-validate-submission="true" atributo ao elemento <form> , que permite a validación personalizada no envío do formulario:
Engade un <div id="g-recaptcha"> no formulario como marcador de posición para reCAPTCHA. Este ID div utilízase como referencia máis tarde. Recoméndase poñer o marcador de posición entre o último campo e o botón enviar.
Publica o formulario e incorpórao no teu sitio web.
Edita a páxina onde se incrusou o formulario. Engade o script proporcionado por Google na cabeceira da páxina. Este script carga o reCAPTCHA co parámetro onLoad de devolución de chamada. Esta devolución de chamada chámase en canto se carga o captcha.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Engade a función onLoadCallback:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Substitúe o {sitekey} marcador de posición polo proporcionado por Google. Esta función de devolución de chamada mostra o reCAPTCHA dentro do marcador de posición <div id="g-recaptcha"> que creaches anteriormente.
Rexistra a función onloadCallback para ser chamada polo cargador de formularios:

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

2. Engade o valor de texto captcha ao envío do formulario

Unha vez enviado o formulario, o parámetro g-recaptcha-response engádese automaticamente ao envío do formulario. Nos seguintes pasos, creará un complemento que oculte este valor, xa que se engadirá á lista ValidationOnlyFields no obxecto de resposta que devolve o código do complemento.

Engádese o parámetro G-recaptcha-response.

3. Crea un complemento

3.1 Crea un Visual Studio proxecto para o complemento

Abra Visual Studio e cree un novo proxecto da biblioteca de clases mediante .NET Framework 4.6.2.
No Explorador de solucións, seleccione Xestionar NuGet paquetes e instale Microsoft.CrmSdk.CoreAssemblies.

3.2 Crear a clase de complemento

Cambia o nome de Class1.cs a CustomValidationPlugin.cs.

Fai que a clase CustomValidationPlugin herde da interface IPlugin e engada o método Execute.

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

   }
}

Engade o seguinte código ao método execute para recuperar o contexto e o servizo de rastrexo.

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));
}

Engade este código para recuperar a cadea de parámetros de envío do formulario. É unha cadea codificada JSON que representa os campos que o usuario enviou no formulario. Este proceso recupera esta cadea e deserialízaa mediante un método auxiliar Deserialize e unha clase FormSubmissionRequest que se define máis tarde. Isto comproba que a matriz Fields contén unha clave para g-recaptcha-response. Se non se atopa a chave reCAPTCHA, devolve a validación omitida xa que o formulario que se está procesando non contiña un elemento recaptcha de 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;
}
```

Engade o seguinte código para devolver se o g-recaptcha-token valor é nulo ou baleiro.

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

Engade o seguinte código para validar o token captcha de Google contra as API de 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}");
    }
}

En primeiro lugar, defínese o URL e despois créase unha instancia de HttpClient . Créase un FormUrlEncodedContent obxecto que contén o recaptchaToken recuperado nos pasos anteriores e a clave secreta que proporciona Google. A continuación, envíase unha POST solicitude e compróbase o código de estado, se non ten éxito, volve. Se ten éxito, deserializa a resposta mediante o método auxiliar Deserialize e GRecaptchaResponse defínese máis tarde. A continuación, crea un novo ValidateFormSubmissionResponse obxecto, serialízao e defínao como o valor do parámetro de saída msdynmkt_validationresponse, que é o servizo de Microsoft que utiliza para aceptar ou rexeitar o envío. Engadir a g-recaptcha-response cadea á ValidationOnlyFields lista oculta este campo do envío do formulario na IU.

Engade o seguinte código para definir os métodos auxiliares Serialize e Deserialize.

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;
}

Engade o seguinte código para definir as clases necesarias para serializar/deserializar obxectos de cadeas 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 Asina e crea o complemento

Fai clic co botón dereito no proxecto e selecciona Propiedades no Explorador de solucións.
Seleccione a pestana Asinar e marque a caixa de verificación Asinar a asemblea .
Seleccione <New...>.
Introduza un nome de ficheiro de clave e anule a selección de Protexer o meu ficheiro de clave cun contrasinal.
Construír o proxecto.
Podes atopar o conxunto de complementos CustomValidationPlugin.dll en \bin\Debug.

3.4 Rexistrar o complemento

Aberto PluginRegistration.exe.
Seleccione Crear nova conexión.
Escolle Office 365.
Seleccione Iniciar sesión.
Seleccione Rexistrar e, a continuación, Rexistrar nova montaxe.
Seleccione o botón (...) no paso 1 e seleccione o dll construído nos pasos anteriores.
Seleccione Rexistrar o complemento seleccionado.

3.4 Paso de rexistro

Seleccione CustomValidationPlugin na lista de conxuntos rexistrados.
Seleccione Rexistrar novo paso.
Introduza msdynmkt_validateformsubmission no campo de texto da mensaxe.
Asegúrate de que o Modo de execución estea definido como Síncrono.
Asegúrate de que orde de execución estea definida en 10.
Asegúrate de que a Fase de execución do pipeline de eventos estea definida como Posterior á operación.
Seleccione Rexistrar novo paso.

Conclusión

Cando se envía un formulario co atributo data-validate-submission , o teu complemento personalizado execútase e valida a resposta reCAPTCHA cos servizos de Google. O complemento personalizado executarase despois do complemento de validación predeterminado de Microsoft. Se non hai campos captcha de Microsoft no formulario, o complemento de Microsoft establécese IsValid:false e o envío falla a non ser que o sobrescriba con IsValid:true.

Fluxo de validación.

Compartir por