Integrar un servicio de captcha personalizado con formularios de Customer Insights - Journeys

Artículo
01/31/2024

Los formularios de Customer Insights - Journeys le permiten utilizar la protección de bot captcha personalizada para validar los envíos de formularios. Este artículo da un ejemplo de cómo integrar reCAPTCHA de Google. El flujo es similar para otros servicios de captcha.

Nota

En la versión actual de la aplicación, solo puede estar activa una implementación de captcha. Si usa su propio proveedor de captcha (como se describe a continuación), los formularios existentes que utilizan el captcha listo para usar dejarán de funcionar. Una implementación de captcha personalizada requiere al menos conocimientos básicos de escritura y depuración de complementos de Dataverse.

El proceso consta de estos pasos:

Agregar reCAPTCHA al formulario.
Agregar el valor del texto captcha al envío del formulario una vez que se envía el formulario.
Crear un complemento en el CRM que valida el captcha.

Ejemplo paso a paso: integrar Google reCAPTCHA

1. Agregar reCAPTCHA al formulario

Cree un formulario en el editor de formularios de Customer Insights - Journeys.
Agregue un atributo data-validate-submission="true" al elemento <form>, que permite la validación personalizada en el envío del formulario:
Agregue un <div id="g-recaptcha"> en el formulario como marcador de posición para reCAPTCHA. Este ID de div se usa como referencia más adelante. Se recomienda colocar el marcador de posición entre el último campo y el botón de envío.
Publique el formulario e insértelo en su sitio web.
Edite la página donde se incrustó el formulario. Agregue el script proporcionado por Google en el encabezado de la página. Este script carga el reCAPTCHA con el parámetro de devolución de llamada onLoad. Esta devolución de llamada se llama tan pronto como se carga el captcha.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Añada la función onLoadCallback:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Reemplace el marcador de posición {sitekey} con el proporcionado por Google. Esta función de devolución de llamada representa el reCAPTCHA dentro del marcador de posición <div id="g-recaptcha"> que creó antes.
Registre la función onloadCallback para que la llame el cargador de formularios:

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

2. Agregue el valor de texto captcha al envío del formulario

Una vez que se envía el formulario, el parámetro g-recaptcha-response se agrega automáticamente al envío del formulario. En los próximos pasos, creará un complemento que oculte este valor, ya que se agregará a la lista ValidationOnlyFields en el objeto de respuesta devuelto por el código del complemento.

Se agrega el parámetro G-recaptcha-response.

3. Crear un complemento

3.1 Crear un proyecto en Visual Studio para el complemento

Abra Visual Studio y cree un nuevo proyecto de biblioteca de clases mediante .NET Framework 4.6.2.
En el Explorador de soluciones, seleccione Administrar Paquetes NuGet e instale Microsoft.CrmSdk.CoreAssemblies.

3.2 Crear la clase de complemento

Cambie el nombre del objeto Class1.cs a CustomValidationPlugin.cs.

Haga que la clase CustomValidationPlugin herede de la interfaz IPlugin y agregue el método Execute.

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

   }
}

Agregue el siguiente código al método de ejecución para recuperar el contexto y el servicio de seguimiento.

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

Agregue este código para recuperar la cadena del parámetro de envío del formulario. Es una cadena codificada en JSON que representa los campos que el usuario envió en el formulario. Este proceso recupera esta cadena y la deserializa mediante un método auxiliar Deserialize y la clase FormSubmissionRequest que se define más adelante. Esto verifica que la matriz Fields contenga una clave para g-recaptcha-response. Si no se encuentra la clave reCAPTCHA, se salta la validación porque el formulario que se está procesando no contení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;
}
```

Agregue el siguiente código para devolver si el valor g-recaptcha-token es nulo o está vacío.

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

Agregue el siguiente código para validar el token de captcha de Google con las 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}");
    }
}

Primero, se define la URL, luego se crea una instancia de HttpClient. Se crea un objeto FormUrlEncodedContent que contiene el recaptchaToken recuperado en los pasos anteriores y la clave secreta proporcionada por Google. Luego, se envía una solicitud POST y se verifica el código de estado, si no tiene éxito, regresa. Si tiene éxito, deserializa la respuesta mediante el método auxiliar Deserialize y GRecaptchaResponse que se define más adelante. Luego crea un nuevo objeto ValidateFormSubmissionResponse, lo serializa y lo establece como el valor del parámetro de salida msdynmkt_validationresponse, que es el único servicio de Microsoft que usa para aceptar o rechazar el envío. Al agregar la cadena g-recaptcha-response a la lista ValidationOnlyFields, se oculta este campo del envío del formulario en la interfaz de usuario.

Agregue el siguiente código para definir los métodos auxiliares Serialize y 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;
}

Agregue el siguiente código para definir las clases necesarias para serializar/deserializar objetos de cadenas 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 Firmar y crear el complemento

En el Explorador de soluciones, haga clic con el botón secundario en el proyecto y seleccione Propiedades.
Seleccione la pestaña Firmar y marque la casilla Firmar el ensamblado.
Seleccione <New...>.
Ingrese un nombre de archivo de clave y anule la selección de Proteger mi archivo de clave con una contraseña.
Compile el proyecto.
También puede encontrar el ensamblado del complemento CustomValidationPlugin.dll en \bin\Debug.

3.4 Registrar el complemento

Abierto PluginRegistration.exe.
Seleccione Crear nueva conexión.
Elija Office 365.
Seleccione Iniciar sesión.
Seleccione Registrar y luego seleccione Registrar nuevo ensamblado.
Seleccione el botón (...) en el paso 1 y seleccione el dll integrado en los pasos anteriores.
Seleccione Registrar complemento seleccionado.

3.4 Registrar paso

Seleccione CustomValidationPlugin de la lista de ensamblajes registrados.
Seleccione Registrar nuevo paso.
Ingrese msdynmkt_validateformsubmission en el campo de texto del mensaje.
Asegúrese de que el Modo de ejecución esté configurado como Sincrónico.
Asegúrese de que Orden de ejecución esté configurado en 10.
Asegúrese de que la Etapa de ejecución de la canalización de eventos esté configurada como Posterior a la operación.
Seleccione Registrar nuevo paso.

Conclusión

Cuando se envía un formulario con el atributo data-validate-submission, su complemento personalizado se ejecuta y valida la respuesta reCAPTCHA con los servicios de Google. El complemento personalizado se ejecutará después del complemento de validación predeterminado de Microsoft. Si no hay campos captcha de Microsoft en el formulario, el complemento de Microsoft establece IsValid:false y el envío falla a menos que lo sobrescriba con IsValid:true.

Flujo de validación.

Share via