web-dev-qa-db-ja.com

同じページで複数のrecaptcha（V2）を検証する

同じページに複数ある場合、Recaptchaクライアント側を検証する方法を考えていました。私はこれを見つけました https://stackoverflow.com/a/28607943/5649602 、そして私がそれを持っているときそれはOKです。

でも今はすべてのページにサイトのフッターに1つ、登録フォームに1つあるので、同時にテーマが表示される可能性があります。

どんな暗示もいただければ幸いです。ありがとう。 :)

javascriptjqueryrecaptcha
11
cvetan

G-captchaが検証するのと同じくらい検証する最も簡単な方法

まず、以下のように</head>タグの前にapi.jsを含めます

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit"></script>

このコードをHTMLに追加します

<div class="g-recaptcha-contact" data-sitekey="Your Site Key" id="RecaptchaField2"></div>
<input type="hidden" class="hiddenRecaptcha" name="ct_hiddenRecaptcha" id="ct_hiddenRecaptcha">

<div class="g-recaptcha-quote" data-sitekey="Your Site Key" id="RecaptchaField1"></div>
<input type="hidden" class="hiddenRecaptcha" name="qt_hiddenRecaptcha" id="qt_hiddenRecaptcha">

このコードを<script>タグ付きのフッターに追加した後

var CaptchaCallback = function() {
    var widgetId1;
    var widgetId2;
    widgetId1 = grecaptcha.render('RecaptchaField1', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_quote});
    widgetId2 = grecaptcha.render('RecaptchaField2', {'sitekey' : 'Your Site Key', 'callback' : correctCaptcha_contact});
};
var correctCaptcha_quote = function(response) {
    $("#qt_hiddenRecaptcha").val(response);
};
var correctCaptcha_contact = function(response) {
    $("#ct_hiddenRecaptcha").val(response);
};

そして開発者にとって最後の簡単なステップは以下のようにJquery検証を追加します

$("#form_id").validate({
    ignore: [],
    rules: {
        ct_hiddenRecaptcha: { required: true, },
        qt_hiddenRecaptcha: { required: true, },
    },
});
15
ImBS