web-dev-qa-db-de.com

Unsichtbares ReCaptcha mit jQuery Ajax

Ich versuche, das neueste ReCaptcha (aka "unsichtbares" ReCaptcha) in einem Formular mit jQuery und einer "ajax" -Anforderung zu implementieren.
ReCaptcha-Dokumentation: https://developers.google.com/recaptcha/docs/invisible

Meine form:

<form id="myForm" >
    <input type="email" name="email" /><br />
    <input type="password" name="password" /><br/>
    <!--<input type="submit" value="log in" />-->
    <button class="g-recaptcha" data-sitekey="6LdK..." data-callback="onSubmit">log in</button>
</form>
<div id="status"></div>

Mein Javascript (jQuery):

<script>

    function onSubmit(token){
        document.getElementById("myForm").submit();
    }

    $(document).ready(function(){

        $("#myForm").submit(function(event){
            event.preventDefault();
            var datas = $("#myForm").serialize();
            $.ajax({
                type: "POST",
                url: "test.php",
                data: datas,
                dataType: "json",
                    beforeSend: function(){
                        $("#status").html("logging in...");
                    },
                    success: function(response){
                        $("#status").html(response.text);
                        if(response.type=="success"){
                            window.location.replace("/myaccount");
                        }
                    },
                    error: function(){
                        $("#status").html("Failed.");
                    }
            });
        });

    });
</script>

ReCaptcha erfordert das Setzen eines "Daten-Callbacks", bei dem ich nicht sicher bin, wie ich mit meiner bereits vorhandenen ".submit (function (event)" - Funktion binden soll.
Mein Trick "onSubmit ()" hat nicht funktioniert, ignoriert "ajax" und aktualisiert die Seite.

Wie sende ich den Wert "g-recaptcha-response" in meiner Variablen "datas" an POST an "test.php"?

9
13h50

Hier ist, wie ich es gelöst habe, nachdem ich in Invisible reCAPTCHAs doc weiter gegraben habe und ein bisschen jQuery gelernt habe, offensichtlich, da ich mit JS (coolem Zeug) nicht sehr vertraut war:

Mein Kopf-Tag mit dem Javascript (und ein bisschen CSS, um das hässliche Google-Abzeichen zu entfernen):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=fr" async defer></script>

<style>
    .grecaptcha-badge{
        display:none;
    }
</style>

<script>
    var onloadCallback = function(){
        grecaptcha.render("emplacementRecaptcha",{
            "sitekey": "YOUR_RECAPTCHA_SITEKEY_HERE",
            "badge": "inline",
            "type": "image",
            "size": "invisible",
            "callback": onSubmit
        });
    };
    var onSubmit = function(token){
        var userEmail = $("#userEmail").val();
        var userPassword = $("#userPassword").val();
        var userTfaOtp = $("#userTfaOtp").val();
        $.ajax({
            type: "POST",
            url: location.href,
            data:{
                    userEmail: userEmail,
                    userPassword: userPassword,
                    userTfaOtp: userTfaOtp,
                    userJetonRecaptcha: token
                },
            dataType: "json",
                beforeSend: function(){
                    $("#statutConnexion").html("Traitement de votre requête d'authentification en cours...");
                },
                success: function(response){
                    $("#statutConnexion").html(response.Message);
                    if(response.Victoire){
                        $("#formulaireConnexion").slideUp();
                        window.location.replace("/compte");
                    }
                    else{
                        grecaptcha.reset();
                    }
                },
                error: function(){
                    $("#statutConnexion").html("La communication avec le système d'authentification n'a pas pu être établie. Veuillez réessayer.");
                    grecaptcha.reset();
                }
        });
    };
    function validate(event){
        event.preventDefault();
        $("#statutConnexion").html("Validation de votre épreuve CAPTCHA en cours...");
        grecaptcha.execute();
    }
    function onload(){
        var element = document.getElementById("boutonConnexion");
        element.onclick = validate;
    }
</script>

HTML:

<div id="formulaireConnexion">
    <input type="email" name="userEmail" id="userEmail" placeholder="Courriel" title="Courriel" required="required" /><br />
    <input type="password" name="userPassword" id="userPassword" placeholder="Mot de passe" title="Mot de passe" required="required" /><br/>
    <input type="text" name="userTfaOtp" id="userTfaOtp" placeholder="Double authentification (optionnelle)" autocomplete="off" pattern="[0-9]{6}" title="Six caractères numériques" maxlength="6" /><br />
    <div id="emplacementRecaptcha"></div>
    <button id="boutonConnexion">Connexion</button>
</div>
<div id="statutConnexion"></div>
<script>onload();</script>

Lassen Sie mich wissen, ob Sie auch das gesamte PHP benötigen, da es sich nicht um diese Frage handelt. Sie müssen wahrscheinlich "url: location.href" innerhalb der oben genannten JS ändern, da in meinem Fall das Skript, das das HTML-Formular und die JS darstellt und sich mit den POST - Vars befasst, dasselbe ist (kein guter Testzweck ). Im Grunde überprüfe ich nur die POST - Vars und gebe dann endlich einen Json zurück:

$jsonVictoire = true; // boolean
$jsonMessage = 'anything you want to tell your visitor'; // string

$return = 
    json_encode(
        array(
            'Victoire'=>$jsonVictoire,
            'Message'=>$jsonMessage
        )
    );
die($return);
9
13h50
<script defer>              
function onSubmit(token) {                      
    var f = $("#myForm");

    $.ajax({
        type: "POST",
        url: "test.php",
        data: f.serialize(),
        dataType: "json",
        beforeSend: function(){
            $("#status").html("logging in...");
        },
        success: function(response){
            $("#status").html(response.text);
            if(response.type=="success"){
                window.location.replace("/myaccount");
            } else {
                $("#status").html("Captcha failed.");
            }
        },
        error: function(){
            $("#status").html("Failed.");
        }       
    });
}
</script>

In test.php müssen Sie das Captcha auf der Serverseite überprüfen:

<?php
if(isset($_POST['g-recaptcha-response'])) {
    $result = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=[YOUR_SECRET_KEY]&response=$_POST["g-recaptcha-response"]&remoteip=$_SERVER["REMOTE_ADDR"]'), TRUE);

    if($result['success'] == 1) {
        // Captcha ok
    } else {
        // Captcha failed
    }
}
?>
2
dbx