Mengintegrasikan layanan captcha kustom dengan Customer Insights - Journeys formulir

Artikel
01/30/2024

Customer Insights - Journeys Formulir memungkinkan Anda menggunakan perlindungan bot captcha kustom untuk memvalidasi tanggapan formulir. Artikel ini memberikan contoh cara mengintegrasikan Google reCAPTCHA. Alurnya serupa untuk layanan captcha lainnya.

Catatan

Dalam versi aplikasi saat ini, hanya satu implementasi captcha yang dapat aktif. Jika Anda menggunakan penyedia captcha Anda sendiri (sebagaimana diuraikan di bawah), formulir yang ada yang menggunakan captcha siap pakai akan berhenti berfungsi. Implementasi captcha kustom memerlukan setidaknya pengetahuan dasar tentang penulisan dan debugging plugin dataverse.

Prosesnya terdiri dari langkah-langkah ini:

Tambahkan reCAPTCHA ke formulir.
Tambahkan nilai teks captcha ke pengiriman formulir setelah formulir dikirim.
Buat plugin di CRM yang memvalidasi captcha.

Contoh langkah demi langkah: Mengintegrasikan Google reCAPTCHA

1. Tambahkan reCAPTCHA ke formulir

Buat formulir di editor formulir Customer Insights - Journeys .
data-validate-submission="true" Tambahkan atribut ke elemen, <form> yang memungkinkan validasi kustom pada pengiriman formulir:
Tambahkan dalam <div id="g-recaptcha"> formulir sebagai placeholder untuk reCAPTCHA. ID div ini digunakan sebagai referensi nanti. Disarankan untuk menempatkan placeholder di antara bidang terakhir dan tombol kirim.
Publikasikan formulir dan sematkan formulir ke situs web Anda.
Edit halaman tempat formulir disematkan. Tambahkan skrip yang disediakan oleh Google ke header halaman. Skrip ini memuat reCAPTCHA dengan onLoad parameter callback. Callback ini dipanggil segera setelah captcha dimuat.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Tambahkan fungsi onLoadCallback:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Ganti placeholder dengan yang {sitekey} disediakan oleh Google. Fungsi callback ini merender reCAPTCHA di dalam placeholder <div id="g-recaptcha"> yang Anda buat sebelumnya.
Daftarkan fungsi onloadCallback untuk dipanggil oleh pemuat formulir:

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

2. Tambahkan nilai teks captcha ke pengiriman formulir

Setelah formulir dikirimkan, g-recaptcha-response parameter ditambahkan secara otomatis ke pengiriman formulir. Pada langkah berikutnya, Anda akan membangun plugin yang menyembunyikan nilai ini, karena akan ditambahkan ke ValidationOnlyFields daftar dalam objek respons yang dikembalikan oleh kode plugin.

Parameter G-recaptcha-response ditambahkan.

3. Buat plugin

3.1 Membuat Visual Studio Proyek untuk plugin

Buka Visual Studio dan buat proyek Perpustakaan Kelas baru menggunakan .NET Framework 4.6.2.
Di Penjelajah Solusi, pilih Kelola NuGet Paket dan instal Microsoft.CrmSdk.CoreAssemblies.

3.2 Membuat kelas plugin

Ganti nama Class1.cs menjadi CustomValidationPlugin.cs.

Buat kelas CustomValidationPlugin mewarisi dari antarmuka IPlugin dan tambahkan metode Eksekusi.

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

   }
}

Tambahkan kode berikut ke dalam metode eksekusi untuk mengambil konteks dan layanan pelacakan.

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

Tambahkan kode ini untuk mengambil string parameter pengiriman formulir. Ini adalah string yang dikodekan JSON yang mewakili bidang yang dikirimkan pengguna dalam formulir. Proses ini mengambil string ini dan mendeserialisasinya menggunakan metode pembantu Deserialize dan kelas FormSubmissionRequest yang ditentukan nanti. Ini memeriksa bahwa array Fields berisi kunci untuk g-recaptcha-response. Jika kunci reCAPTCHA tidak ditemukan, kunci tersebut akan menampilkan validasi yang dilewati karena formulir yang diproses tidak berisi elemen recaptcha 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;
}
```

Tambahkan kode berikut untuk mengembalikan jika g-recaptcha-token nilainya null atau kosong.

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

Tambahkan kode berikut untuk memvalidasi token captcha Google terhadap Google API.

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

Pertama, URL didefinisikan, kemudian instance dibuat HttpClient . Objek FormUrlEncodedContent dibuat berisi recaptchaToken yang diambil pada langkah-langkah sebelumnya dan kunci rahasia yang disediakan oleh Google. POST Kemudian permintaan dikirim dan kode status diperiksa, jika tidak berhasil kembali. Jika berhasil, itu deserializes respon menggunakan metode Deserialize helper dan GRecaptchaResponse itu didefinisikan nanti. Kemudian membuat objek baru ValidateFormSubmissionResponse , membuat serialisasi, dan menetapkannya sebagai nilai parameter msdynmkt_validationresponse output, yang merupakan layanan Microsoft yang digunakannya untuk menerima atau menolak pengiriman. Menambahkan g-recaptcha-response string ke ValidationOnlyFields daftar menyembunyikan bidang ini dari pengiriman formulir di UI.

Tambahkan kode berikut untuk menentukan metode pembantu Serialize dan 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;
}

Tambahkan kode berikut untuk menentukan kelas yang diperlukan untuk Serialize/Deserialize JSON strings objects.

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 Tanda tangani dan buat plugin

Klik kanan pada proyek dan pilih Properti di Penjelajah Solusi.
Pilih tab Penandatanganan dan centang kotak Tanda tangani perakitan .
Pilih <New...>.
Masukkan nama file kunci dan batal pilih Lindungi file kunci saya dengan kata sandi.
Bangun proyek.
Anda dapat menemukan rakitan CustomValidationPlugin.dll plugin di \bin\Debug.

3.4 Daftarkan plugin

Buka PluginRegistration.exe.
Pilih Buat koneksi baru.
Memilih Office 365.
Pilih Masuk.
Pilih Daftar lalu Daftarkan rakitan baru.
Pilih ( ...) tombol di langkah 1 dan pilih dll yang dibangun di langkah sebelumnya.
Pilih Daftarkan plugin yang dipilih.

3.4 Langkah Pendaftaran

Pilih CustomValidationPlugin dari daftar rakitan terdaftar.
Pilih Daftarkan Langkah Baru.
Masukkan msdynmkt_validateformsubmission ke bidang teks Pesan.
Pastikan Mode Eksekusi diatur sebagai Sinkron.
Pastikan Execution order diatur ke 10.
Pastikan Event Pipeline Stage Of Execution diatur sebagai Post Operation.
Pilih Daftarkan Langkah Baru.

Kesimpulan

Saat formulir dengan atribut dikirimkan data-validate-submission , plugin kustom Anda akan menjalankan dan memvalidasi respons reCAPTCHA dengan layanan Google. Plugin kustom akan berjalan setelah plugin validasi Microsoft default. Jika tidak ada bidang captcha Microsoft dalam formulir, plugin Microsoft akan ditetapkan IsValid:false dan pengiriman gagal kecuali Anda menimpanya IsValid:true.

Alur validasi.

Bagikan melalui