web-dev-qa-db-de.com

Wie füge ich mehrere unsichtbare Recaptcha auf einer Seite hinzu?

Ich habe zwei unsichtbare recaptcha-divs hinzugefügt, aber als ich den Code in inspect element sah, fügte ich nur ein unsichtbares recaptcha auf meiner einzigen Seite hinzu.

 <div id="captcha1" class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible"></div>
<div id="captcha2" class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
     ></div>

Referenz abrufen Programmgesteuert Recaptcha aufrufen

Kannst du mir helfen, was ich falsch mache?

javascriptjqueryhtmlrecaptchainvisible-recaptcha
7
Versha Gupta

Nachfolgend finden Sie eine zuverlässigere Lösung für Peter und Alessandro, wenn Sie Elemente verschachteln.

<script>
$(".g-recaptcha").each(function() {
    var object = $(this);
    grecaptcha.render(object.attr("id"), {
        "sitekey" : "6LdwRC0UAAAAAK0hjA8O4y1tViGPk9ypXEH_LU22",
        "callback" : function(token) {
            object.parents('form').find(".g-recaptcha-response").val(token);
            object.parents('form').submit();
        }
    });
});
</script>

<form>
    <input type="text" name="example"/>
    <button id="captcha1" class="g-recaptcha">submit form 1</button>
</form>

<form>
    <input type="text" name="example"/>
    <button id="captcha2" class="g-recaptcha">submit form 2</button>
</form>

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async defer></script>
10
user1788978

Hatte das gleiche Problem. Nach einigen Rätseln bekam ich es zum Laufen.

Verwendete die Idee, die Alessandro zur Verfügung gestellt hatte, und machte es so, dass das Formular bei Erfolg automatisch gesendet wurde.

<script type="text/javascript">
    var onloadCallback = function() {
        $(".g-recaptcha").each(function() {
            var el = $(this);
            grecaptcha.render($(el).attr("id"), {
                "sitekey" : SITE_KEY,
                "callback" : function(token) {
                    $(el).parent().find(".g-recaptcha-response").val(token);
                    $(el).parent().submit();
                }
            });
        });
    };
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
3
Peter Bode

Sie müssen explizit für jede Senden-Schaltfläche rendern

<form>
    <button id="captcha1" class="g-recaptcha invisible-recaptcha">submit form 1</button>
</form>

<form>
    <button id="captcha2" class="g-recaptcha invisible-recaptcha">submit form 2</button>
</form>

<script>
    function verifyCaptcha(token){
        console.log('success!');
    };

    var onloadCallback = function() {
        $( ".invisible-recaptcha" ).each(function() {
            grecaptcha.render($( this ).attr('id'), {
                'sitekey' : $key,
                'callback' : verifyCaptcha
            });
        });
    };
</script>

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async defer></script>
2
Alessandro

Sie könnten unsichtbares Recaptcha verwenden. Verwenden Sie auf Ihrer Schaltfläche ein Tag wie "formname = 'rcaptchaformname'", um anzugeben, welches Formular gesendet werden soll, und eine Eingabe eines übergebenen Formulars ausblenden. 

Auf diese Weise können Sie die html5-Formularüberprüfung intakt halten, ein Recaptcha, jedoch mehrere Schaltflächen. Erfassen Sie einfach den Eingabewert "captcha" für den von recaptcha generierten Token-Schlüssel.

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

<div class="g-recaptcha" data-sitekey="yours" data-callback="onSubmit" data-size="invisible"></div>
<script>

$('button').on('click', function () { formname = '#'+$(this).attr('formname');
    if ( $(formname)[0].checkValidity() == true) { grecaptcha.execute(); }
    else { $(formname).find('input[type="submit"]').click() }
    });

var onSubmit = function(token) {
    $(formname).append("<input type='hidden' name='captcha' value='"+token+"' />");
    $(formname).find('input[type="submit"]').click()
    };
</script>
1
eatmeimadanish

Mehrere unsichtbare reCaptcha V2 auf einer einzelnen Seite dynamisch

Github-Code: https://github.com/prathameshsawant7/multiple-invisible-recaptcha

Schritt 1>

Füge unten eine 2 Js-Bibliothek auf der Seite hinzu

<!--  reCaptcha Library -->
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=explicit"></script>

<!--  Customized Init for invisible reCaptcha  -->
<script src="js/init_recaptcha.js" async defer></script>

Schritt 2>

Fügen Sie unter den divs in den jeweiligen Formularen hinzu.

<div id="recaptcha-form-1" style="display:none;"></div> <!--for Form 1-->
<div id="recaptcha-form-2" style="display:none;"></div> <!--for Form 2-->
<div id="recaptcha-form-3" style="display:none;"></div> <!--for Form 3-->

Schritt 3> 

Init_recaptcha.js erstellen

  • Schritt 1 - Initialisieren Sie den reCaptcha Site Key und das Widget, z. B. Widget_1 für Formular 1
  • Schritt 2 - Fügen Sie in der Init-Funktion Code hinzu, um die Formularrücksendeaktion zu erstellen.

  • Schritt 3 - Rufen Sie die Funktion renderInvisibleReCaptcha auf, indem Sie die reCaptcha-ID und die createCallbackFn-Antwort übergeben.

    "use strict";

var PS = PS || {};
var widget_1;var widget_2;var widget_3;
var recaptcha_site_key = 'RECAPTCHA_SITE_KEY';

if( typeof PS.RECAPTCHA === 'undefined' ) {
    (function (a, $) {
        var retryTime = 300;
        var x = {
            init: function(){
                if(typeof grecaptcha != 'undefined'){

                    //For Form 1 Initialization
                    if($('#form1 #recaptcha-form-1').length > 0){
                        var callbackFn = {
                            action : function(){
                                saveData('1'); //Here Callback Function
                            }
                        }
                        /*--- 'recaptcha-form-1' - reCaptcha div ID | 'form1' - Form ID ---*/
                        widget_1 = x.renderInvisibleReCaptcha('recaptcha-form-1',x.createCallbackFn(widget_1,'form1',callbackFn));
                    }

                                           //For Form 2 Initialization
                    if($('#form2 #recaptcha-form-2').length > 0){
                        var callbackFn = {
                            action : function(){
                                saveData('2'); //Here Callback Function
                            }
                        }
                        /*--- 'recaptcha-form-2' - reCaptcha div ID | 'form2' - Form ID ---*/
                        widget_2 = x.renderInvisibleReCaptcha('recaptcha-form-2',x.createCallbackFn(widget_2,'form2',callbackFn));
                    }

                                            //For Form 3 Initialization
                    if($('#form3 #recaptcha-form-3').length > 0){
                        var callbackFn = {
                            action : function(){
                                saveData('3'); //Here Callback Function
                            }
                        }
                        /*--- 'recaptcha-form-3' - reCaptcha div ID | 'form3' - Form ID ---*/
                        widget_3 = x.renderInvisibleReCaptcha('recaptcha-form-3',x.createCallbackFn(widget_3,'form3',callbackFn));
                    }

                }else{
                    setTimeout(function(){ x.init();} , retryTime);
                }
            },
            renderInvisibleReCaptcha: function(recaptchaID,callbackFunction){
                    return grecaptcha.render(recaptchaID, {
                            'sitekey'   : recaptcha_site_key,
                            "theme" : "light",
                            'size'      : 'invisible',
                            'badge' : 'inline',
                            'callback'  : callbackFunction
                        });
            },
            createCallbackFn: function (widget,formID,callbackFn) {
                return function(token) {
                    $('#'+formID+' .g-recaptcha-response').val(token);
                    if($.trim(token) == ''){
                        grecaptcha.reset(widget);
                    }else{
                        callbackFn.action();
                    }
                }
            }
        }
        a.RECAPTCHA = x;
    })( PS, $ );
}

$(window).load(function(){
    PS.RECAPTCHA.init();
});

Schritt 4> Änderungen in der Formularüberprüfung JS - 

/* Execute respective Widget on form submit after form Validations  */
function formSubmit(form){
    var text = $.trim($('#text'+form).val());
    if(text != ''){
        switch(form){
            case '1' : grecaptcha.execute(widget_1); break;
            case '2' : grecaptcha.execute(widget_2); break;
            case '3' : grecaptcha.execute(widget_3); break;
        }
    }
}

Schritt 5> Überprüfen Sie reCaptcha von der Serverseite - 

<?php
    define('RECAPTCHA_SECRET_KEY','KEY');
    /**
    *  @Desc:   To Validate invisible recaptcha from server-side
    *  @Param:  g-recaptcha-response value
    *  @Return: True/False
    **/
    if(!function_exists('check_recaptcha')){
        function check_recaptcha($recaptcha_response){
            $test = array ('secret' => RECAPTCHA_SECRET_KEY,'remoteip' => $_SERVER["REMOTE_ADDR"],'response' => $recaptcha_response);
            foreach ($test as $key => $value) {
                $req .= $key . '=' . urlencode(stripslashes($value)) . '&';
            }
            $req=substr($req, 0, strlen($req)-1);
            $path = 'https://www.google.com/recaptcha/api/siteverify?';
            $response = file_get_contents($path . $req);
            $responseData = json_decode($response);
            if($responseData->success){
                return true;            
            }else{
                return false;
            }
        }
    }

    // Validate reCaptcha
    if (isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] == "POST" && !empty($_POST)) {
        $checkCapcha = false;
            $recaptcha = $_POST['g-recaptcha-response'];
                $checkCapcha = check_recaptcha($recaptcha);
                if($checkCapcha){
                    echo $_POST['textmsg']; exit;
                    /** Perform Actions Here (Add,Update,Delete etc) 
**/
                }
    else{
            echo “reCaptcha Error”;
        }
    }
    echo "failed";exit;
?>

Schritt 6> Widget nach Serveraufruf zurücksetzen - 

// saveData will be automatically get called on grecaptacha.execute 
function saveData(form){
$.ajax( {
    type: 'POST',
    url:  $("#form"+form).attr( 'action' ),
    data: $("#form"+form).serialize(),
    success: function( response ) {
                switch(form){
            case '1' : grecaptcha.reset(widget_1); break;
            case '2' : grecaptcha.reset(widget_2); break;
            case '3' : grecaptcha.reset(widget_3); break;
            }
        }
    } );
}
1
Prathamesh Sawant

Für Google Recaptcha V3 Mehrere Recpatches auf einer Seite:

HTML :

<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=grecaptcha_onload"></script>
<script>
    function grecaptcha_onload() {
        $('.g-recaptcha-response').each(function( k, v ) {
            var submit = $(v).closest("form").find('[type="submit"]');
            grecaptcha.render( submit[0], {
                'sitekey' : SITE_KEY,
                'callback' : function( token ) {
                    $(v).closest("form").find('.g-recaptcha-response').val( token );
                    $(v).closest("form").submit();
                },
                'size' : 'invisible',
            });
        });
    }
</script>
<form>
    <input type="hidden" value="" name="g-recaptcha-response" class="g-recaptcha-response" />
    <button type="submit">Submit</button>
</form>
<form>
    <input type="hidden" value="" name="g-recaptcha-response" class="g-recaptcha-response" />
    <button type="submit">Submit</button>
</form>

PHP :

    function validate()
    {
        if( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
            // Build POST request:
            $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
            $recaptcha_response = $_POST[ 'g-recaptcha-response' ];
            $recaptcha = file_get_contents( $recaptcha_url . '?secret=' . self::SECRET_KEY . '&response=' . $recaptcha_response );
            $recaptcha = json_decode( $recaptcha );

            if( $recaptcha->success == true ){
                // Take action based on the score returned:
                if( $recaptcha->score >= 0.1 ) {
                    return true;
                } else {
                    $this->errors[] = 'Something went wrong with sumbitting the form.<br />Please try again!';

                    foreach( (array) $recaptcha as $key => $value ) {
                        $this->errors[] = 'Key: ' . $key . ' Value: ' . $value;
                    }

                    return false;
                }
            } else { // there is an error /
                switch ( $recaptcha->{'error-codes'}[0] ) {
                    case 'missing-input-secret':
                        $this->errors[] = 'The secret parameter is missing';
                        break;
                    case 'invalid-input-secret':
                        $this->errors[] = 'The secret parameter is invalid or malformed';
                        break;
                    case 'missing-input-response':
                        $this->errors[] = 'The response parameter is missing';
                        break;
                    case 'invalid-input-response':
                        $this->errors[] = 'The response parameter is invalid or malformed';
                        break;
                    case 'bad-request':
                        $this->errors[] = 'The request is invalid or malformed';
                        break;
                    case 'timeout-or-duplicate':
                        $this->errors[] = 'The response is no longer valid: either is too old or has been used previously';
                        break;
                    default:
                        break;
                }

                return false;
            }
        }
    }
0
Benjamin Mastrangelo