カスタムキャプチャサービスを Customer Insights - Journeys フォームに統合する

[アーティクル]
02/07/2024

Customer Insights - Journeys フォームでは、カスタムキャプチャボット保護を使用してフォームの送信を検証できます。この記事では、Google reCAPTCHA 統合方法の例を示します。フローは、他のキャプチャサービスでも同様です。

注意

アプリの現在のバージョンでは、アクティブにできるキャプチャ実装は 1 つだけです。独自のキャプチャプロバイダーを使用すると (以下で説明するように)、すぐに使用できるキャプチャを使用する既存のフォームは機能しなくなります。カスタムキャプチャの実装には、少なくとも Dataverse プラグインの書き込みとデバッグに関する基本的な知識が必要です。

プロセスは、これらの手順で構成されています:

フォームに reCAPTCHA を追加する。
フォームが送信された時点で、キャプチャテキスト値を追加 します。
CRM にキャプチャを検証する プラグインを作成 します。

ステップバイステップの例: Google reCAPTCHA を統合する

1. フォームに reCAPTCHA を追加する

Customer Insights - Journeys フォームエディターでフォームを作成します。
<form> 要素に data-validate-submission="true" 属性を追加し、フォーム送信時のカスタム検証を有効にします:
reCAPTCHA 用のプレースホルダとして、フォームに <div id="g-recaptcha"> を追加します。この div ID は、後で参照として使用されます。最後のフィールドと送信ボタンの間にプレースホルダーを配置することをお勧めします。
フォームを公開し、フォームを Web サイトに埋め込みます。
フォームが埋め込まれたページを編集します。 Google が提供するスクリプトをページヘッダーに追加します。このスクリプトは、onLoad コールバックパラメータを持つ reCAPTCHA をロードします。このコールバックは、キャプチャが読み込まれるとすぐに呼び出されます。
```
<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 が提供するものに置き換えます。このコールバック関数は、先に作成したプレースホルダー <div id="g-recaptcha"> の中に reCAPTCHA をレンダリングします。
フォームローダーによって呼び出される onloadCallback 関数を登録します。

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

2. フォーム送信にキャプチャテキスト値を追加します

フォームが送信されると、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)
   {

   }
}
```

次のコードを execute メソッドに追加して、コンテキストとトレースサービスを取得します。

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 クラスを使って逆シリアル化する処理です。これにより、Fields 配列に g-recaptcha-response のキーが含まれていることが確認されます。 reCAPTCHAキーが見つからない場合は、処理中のフォームに Google recaptcha 要素が含まれていなかったため、検証をスキップして返されます。
```
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;
}

次のコードを追加して、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 と、Google から提供された秘密鍵を含む recaptchaToken オブジェクトが作成されます。次に POST リクエストが送信され、ステータスコードがチェックされ、成功しなかった場合は返されます。成功した場合は、後で定義されるDeserialize ヘルパーメソッドと GRecaptchaResponse を使用して、応答を逆シリアル化します。次に、新しい ValidateFormSubmissionResponse オブジェクトを作成し、それをシリアル化して、出力パラメータ msdynmkt_validationresponse の値として設定します。これは、投稿を受け入れるか拒否するかを決定するために使用する Microsoft サービスの 1 つです。 ValidationOnlyFields リストに g-recaptcha-response の文字列を追加すると、UI でこのフィールドをフォーム送信から非表示にします。

次のコードを追加して、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 に設定されていることを確認してください。
実行のイベントパイプラインステージ が オペレーション後 に設定されていることを確認してください。
新しい手順を登録する を選択します。

結論

data-validate-submission 属性を持つフォームが送信されると、カスタムプラグインが実行され、Google サービスで reCAPTCHA レスポンスが検証されます。カスタムプラグインは、既定の Microsoft 検証プラグインの後に実行されます。フォームに Microsoft キャプチャフィールドがない場合、Microsoft プラグインは IsValid:false を設定し、IsValid:true で上書きしない限り、送信は失敗します。

検証のフロー。

次の方法で共有

カスタムキャプチャサービスを Customer Insights - Journeys フォームに統合する

ステップバイステップの例: Google reCAPTCHA を統合する

1. フォームに reCAPTCHA を追加する

2. フォーム送信にキャプチャテキスト値を追加します

3. プラグインの作成

3.1 プラグイン用の Visual Studio プロジェクトを作成する

3.2 プラグインクラスを作成する

3.3 プラグインの署名とビルド

3.4 プラグインの登録

3.4 ステップの登録

結論

その他のリソース

次の方法で共有

カスタム キャプチャ サービスを Customer Insights - Journeys フォームに統合する

ステップバイステップの例: Google reCAPTCHA を統合する

1. フォームに reCAPTCHA を追加する

2. フォーム送信にキャプチャテキスト値を追加します

3. プラグインの作成

3.1 プラグイン用の Visual Studio プロジェクトを作成する

3.2 プラグイン クラスを作成する

3.3 プラグインの署名とビルド

3.4 プラグインの登録

3.4 ステップの登録

結論

その他のリソース

カスタムキャプチャサービスを Customer Insights - Journeys フォームに統合する

3.2 プラグインクラスを作成する