0

私と recaptcha ライブラリとの間の潜在的な誤解を解消する必要があります。

v3実装のYouTubeビデオを検索して見つけたすべての例は、...のコンテキスト内でrecaptcha準備/実行関数を添付していますが、<form>のコンテキスト外でreCaptchaを使用しようとしてい<form>ます次の方法:

  1. ユーザーが名前または名前の一部を検索ボックスに入力します
  2. フロントエンドは、入力またはエンター キーの遅延の後、この入力 (部分的または完全) に一致するシステム内の名前を取得します。
  3. 結果は、自動入力されるドロップダウンに読み込まれます。
  4. ユーザーは、クリックまたは下向き矢印で適切な名前を選択します。これにより、そのユーザーに関する特定のデータが検索されます。

名前のドロップダウン検索で reCaptcha トークンを取得する方法を理解できれば、その解決策を 4 番目のポイントまで拡張できます... しかし、それが可能ではないのではないかと心配しています。

以下のコードはすべて JavaScript です。

関連ビット

検索フィールドのリスナー:

$(".web-search-content").on("keyup", ".searchField", function(e) {
    if (
      e.keyCode != 40 &&
      e.keyCode != 38 &&
      e.keyCode != 13 &&
      e.keyCode != 27
    ) {
      delayCall($(this), 800, nameSearch, e);
    } else if (e.keyCode == 27) {
      $(".name-search-results").remove();
    }
  });

名前検索機能:

function nameSearch(obj, e) {
    if (!e) {
      e = window.event;
    }
    var container = $(".name-search-results");
    if (
      e.keyCode != 40 &&
      e.keyCode != 38 &&
      e.keyCode != 13 &&
      e.keyCode != 27
    ) {
      var field = obj;
      var value = field.val();
      if (value != undefined && value.length > 0) {
        var captchaToken = "";
        grecaptcha.execute('<REDACTED>', {action: 'webSearch/nameSearch'}).then(function(token) {
          captchaToken = token;
          console.log(captchaToken);
          document.getElementById("g-recaptcha-response").value = token;
        })

        $.post("../webSearch/nameSearch", { query: value, captchaToken: captchaToken }, function(resp) {
          showNameResults(resp);
        });
      } else {
        container.remove();
      }
    }
  }

フォームのコンテキスト内で reCaptcha v3 を使用する必要があること、またはこのようなイベントを処理できることを誰かが確認できますか? もしそうなら、どのように?

4

1 に答える 1