שילוב של שירות Captcha מותאם אישית עם טפסים שיווקיים של Customer Insights - Journeys

מאמר
01/31/2024

טופסי Customer Insights - Journeys מאפשרים לך להשתמש בהגנת Captcha מותאמת אישית מפני בוטים כדי לאמת הגשת טפסים. מאמר זה נותן דוגמה כיצד לשלב Google reCAPTCHA. הזרימה דומה עבור שירותי Captcha אחרים.

הערה

בגרסה הנוכחית של האפליקציה, רק מימוש captcha אחד יכול להיות פעיל. אם אתה משתמש בספק captcha משלך (כפי שמתואר בהמשך), טפסים קיימים המשתמשים ב- captcha וכלולים במוצר יפסיקו לפעול. אפליקציית captcha מותאמת אישית דורשת לפחות ידע בסיסי בכתיבה וניפוי באגים בתוספי dataverse.

התהליך מורכב מהשלבים הבאים:

הוספת רכיב reCAPTCHA לטופס.
הוספת ערך טקסט של Captcha לשליחת הטופס לאחר שליחת הטופס.
יצירת תוסף ב- CRM שמאמת את ה- Captcha.

דוגמה שלב אחר שלב: שילוב של Google reCAPTCHA

1. הוספת רכיב reCAPTCHA לטופס

צור טופס בעורך הטפסים של Customer Insights - Journeys.
הוסף תכונצ data-validate-submission="true" לרכיב <form> , מה שמאפשר אימות מותאם אישית בהגשת הטופס:
הוסף <div id="g-recaptcha"> בטופס כמציין מיקום עבור reCAPTCHA. מזהה div זה משמש כהפנייה מאוחר יותר. מומלץ לשים את מציין המיקום בין השדה האחרון ללחצן הגשה.
פרסם את הטופס והטמע את הטופס באתר האינטרנט.
ערוך את הדף שבו הטופס הוטמע. הוסף את הסקריפט שהתקבל מ- Google לכותרת הדף. סקריפט זה טוען את ה- reCAPTCHA עם הפרמטר onLoad להתקשרות חזרה. התקשרות חזרה זו נקראת ברגע שרכיב ה- Captcha נטען.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
הוסף את הפונקציה onLoadCallback:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
החלף את מציין המיקום {sitekey} במציין שסיפקה Google. פונקציית התקשרות חזרה זו מעבדת את reCAPTCHA בתוך מציין המיקום <div id="g-recaptcha"> שיצרת קודם לכן.
רשום את הפונקציה onloadCallback שתיקרא על ידי טוען הטפסים:

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

2. הוסף את ערך טקסט ה- Captcha לשליחת הטופס

לאחר שליחת הטופס, הפרמטר g-recaptcha-response מתווסף אוטומטית לשליחת הטופס. בשלבים הבאים, תבנה תוסף שמסתיר את הערך הזה, שכן הוא יתווסף לרשימת ValidationOnlyFields באובייקט התגובה המוחזר על-ידי קוד התוסף.

נוסף פרמטר G-recaptcha-response.

3. צור תוסף

3.1 צור פרויקט Visual Studio עבור התוסף

פתח את Visual Studio וצור פרויקט ספריית מחלקה חדש באמצעות .NET Framework 4.6.2.
בסייר הפתרונות, בחר נהל חבילות NuGet והתקן את Microsoft.CrmSdk.CoreAssemblies.

3.2 צור את מחלקת התוסף

שנה את השם של Class1.cs ל- CustomValidationPlugin.cs.

גרום למחלקה CustomValidationPlugin לקבל בירושה מממשק IPlugin והוסף את שיטת Execute.

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

   }
}

הוסף את הקוד הבא לשיטת הביצוע כדי לאחזר הקשר ושירות מעקב.

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

הוסף קוד זה כדי לאחזר את מחרוזת הפרמטרים של שליחת הטופס. זוהי מחרוזת מקודדת JSON המייצגת את השדות שהמשתמש שלח בטופס. תהליך זה מאחזר מחרוזת זו ומבטל את עריכתה בסדרה באמצעות שיטת סיוע Deserialize ומחלקה FormSubmissionRequest המוגדרת מאוחר יותר. פעולה זו בודקת שמערך השדות מכיל מפתח עבור g-recaptcha-response. אם מפתח reCAPTCHA לא נמצא, הוא מחזיר אימות דילוג מכיוון שהטופס שעובד לא הכיל רכיב 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;
}
```

הוסף את הקוד הבא להחזרה אם ערך g-recaptcha-token הוא null או ריק.

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

הוסף את הקוד הבא כדי לאמת את אסימון Captcha של Google מול ממשקי API של 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}");
    }
}
```
ראשית, כתובת ה- URL, ולאחר מכן נוצר מופע של HttpClient . נוצר אובייקט FormUrlEncodedContent המכיל את recaptchaToken שאוחזר בשלבים קודמים ואת המפתח הסודי שסופק על-ידי Google. לאחר מכן נשלחת בקשת POST וקוד המצב נבדק, אם לא מצליח הוא מוחזר. אם הפעולה הצליחה, היא מבטלת את התגובה באמצעות שיטת הסיוע Deserialize ו- GRecaptchaResponse שמוגדר מאוחר יותר. לאחר מכן הפעולה יוצרת אובייקט ValidateFormSubmissionResponse חדש, מסדרת אותו בסדרה ומגדירה אותו כערך של פרמטר הפלט msdynmkt_validationresponse, שזה השירות היחיד של Microsoft שהוא משתמש בו כדי לקבל או לדחות את השליחה. הוספת מחרוזת g-recaptcha-response לרשימה ValidationOnlyFields מסתירה שדה זה משליחת הטופס בממשק המשתמש.

הוסף את הקוד הבא כדי להגדיר את שיטות העזר Serialize ו-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;
}

הוסף את הקוד הבא כדי להגדיר את המחלקות הדרושות כדי לערוך בסדרה/לבטל עריכה בסדרה עבור אובייקטי מחרוזות 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 חתום ובנה את התוסף

לחץ באמצעות לחצן העכבר הימני על הפרויקט ובחר במאפיינים בסייר הפתרונות.
בחר בכרטיסייה חתימה וסמן את תיבת הסימון חתום על ההרכבה .
בחר <New...>.
הזן שם קובץ מפתח ובטל את הבחירה באפשרות הגן על קובץ המפתח שלי באמצעות סיסמה.
בנה את הפרויקט.
אתה יכול למצוא את הרכבת התוסף CustomValidationPlugin.dll ב- \bin\Debug.

3.4 רשום את התוסף

פתח את PluginRegistration.exe.
בחר צור חיבור חדש.
בחר Office 365.
בחר התחברות.
בחר באפשרות רישום ולאחר מכן רשום הרכבה חדשה.
בחר את הלחצן (...) בשלב 1 ובחר את ה- dll שנבנה בשלבים הקודמים.
בחר באפשרות רשום תוסף נבחר.

3.4 רשום את השלב

בחר CustomValidationPlugin מרשימת ההרכבות הרשומות.
בחר רשום שלב חדש.
הזן msdynmkt_validateformsubmission בשדה טקסט הודעה.
ודא שמצב ביצוע מוגדר כסינכרוני.
ודא שהזמנת ביצוע מוגדרת 10.
ודא ששלב קו צינור אירוע של ביצוע‏ מוגדר כ- Post Operation.
בחר רשום שלב חדש.

מסקנה

כאשר טופס עם התכונה data-validate-submission נשלח, התוסף המותאם אישית פועל ומאמת את תגובת reCAPTCHA עם שירותי Google. התוסף המותאם אישית יפעל לאחר תוסף האימות המוגדר כברירת מחדל של Microsoft. אם אין שדות Captcha של Microsoft בטופס, התוסף של Microsoft מגדיר את IsValid:false והשליחה נכשלת אלא אם תעקוף אותה באמצעות IsValid:true.

זרימת אימות.

שתף באמצעות