Mettre en œuvre la nouvelle Invisible reCaptcha de Google
je construis un site web PHP où je voudrais mettre un captcha sur le formulaire de connexion. Je suis allé avec Google nouvelles Invisible reCaptcha mais j'ai du mal à l'implémenter (partie HTML, le PHP fonctionne).
le code que j'ai maintenant pour le "normal" reCaptcha est le suivant (comme selon les instructions de reCaptcha de Google et cela fonctionne):
<form action=test.php method="POST">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<!-- <Google reCaptcha> -->
<div class="g-recaptcha" data-sitekey="<sitekey>"></div>
<!-- </Google reCaptcha> -->
<input type="submit" name="login" class="loginmodal-submit" value="Login">
</form>
Il y avait quelques instructions envoyées dans le courriel de confirmation quand je me suis inscrit (a pris environ 24 heures pour obtenir la confirmation). Qui dit la chose suivante:
Invisible reCAPTCHA Integration
si vous n'avez pas intégré votre site avec reCAPTCHA v2, veuillez suivre notre guide du développeur pour plus de détails sur la mise en œuvre.
s'il vous Plaît assurez-vous que votre site clé qui a été dans la liste blanche pour Invisible reCAPTCHA.
pour activer l'Invisible reCAPTCHA, plutôt que de mettre paramètres dans un div, vous pouvez les ajouter directement à un bouton html.
3a. données-rappel="". Cela fonctionne tout comme la case à cocher captcha, mais est nécessaire pour invisible.
3b. data-badge: cela vous permet de repositionner le badge reCAPTCHA (c'est-à-dire logo et texte "protégé par reCAPTCHA"). Options valides comme 'bottomright ‘(par défaut),’ bottomleft ‘ou’ inline' qui placeront le badge directement au-dessus du bouton. Si vous faites le badge inline, vous pouvez contrôler le CSS de le badge directement.
vérifier la réponse de l'utilisateur n'a aucun changement.
le problème que j'ai est avec L'implémentation HTML (donc j'ai besoin d'aide avec l'étape 3. 1, 2 et 4 travaillent pour moi). Le reste je travaille avec reCaptcha normal et selon les instructions, il devrait être la même chose. Je ne comprends pas ce qu'est le data-callback et le data-badge et comment cela fonctionne. Un exemple de code de mise en œuvre invisible reCaptcha avec la façon dont ma forme est la configuration serait grande!
4 réponses
Invisible reCAPTCHA
implémenter le nouveau reCAPTCHA Invisible de Google est très similaire à la façon dont nous ajoutons v2 à notre site. Vous pouvez l'ajouter comme son propre conteneur comme normal, ou la nouvelle méthode de l'ajouter au bouton Soumettre de formulaire. J'espère que ce guide vous aidera sur la bonne voie.
conteneur CAPTCHA autonome
la mise en oeuvre de recaptcha nécessite quelques choses:
- Sitekey
- Class
- Callback
- Bind
Ce sera votre dernière objectif.
<div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>
lorsque vous utilisez la méthode autonome, vous devez avoir data-bind défini à L'ID de votre bouton Soumettre. Si vous n'avez pas ce jeu, votre captcha ne sera pas invisible.
un rappel doit également être utilisé pour soumettre le formulaire. Un captcha invisible annulera tous les événements à partir du bouton Soumettre, donc vous avez besoin du rappel pour passer réellement la soumission.
<script>
function submitForm() {
var form = document.getElementById("ContactForm");
if (validate_form(form)) {
form.submit();
} else {
grecaptcha.reset();
}
}
</script>
notez dans l'exemple callback qu'il y a aussi une validation de formulaire personnalisée. Il est très important que vous réinitialisiez reCAPTCHA lorsque la validation échoue, sinon vous ne serez pas en mesure de soumettre à nouveau le formulaire jusqu'à ce que le CAPTCHA expire.
bouton CAPTCHA Invisible
une grande partie de ceci est la même qu'avec le CAPTCHA autonome ci-dessus, mais au lieu d'avoir un conteneur, tout est placé sur le bouton Soumettre.
Ce sera votre objectif.
<button class="g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit">Submit</button>
il y a quelque chose de nouveau ici, data-badge. C'est un div qui est insérée dans le DOM qui contient les entrées nécessaires au fonctionnement de reCAPTCHA. Il a trois paramètres, bottomleft, bottomright, inline. Inline le fera s'afficher directement au-dessus du bouton Soumettre, et vous permettra de contrôler la façon dont vous souhaitez qu'il soit coiffé.
à votre question
<form action="test.php" method="POST" id="theForm">
<script>
function submitForm() {
document.getElementById("theForm").submit();
}
</script>
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>
<input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login">
</form>
Ou
<form action="test.php" method="POST" id="theForm">
<script>
function submitForm() {
document.getElementById("theForm").submit();
}
</script>
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button>
</form>
j'espère que cela vous aide, vous et les futurs codeurs. Je le tiendrai au courant de l'évolution de la technologie.
si vous recherchez une solution générale entièrement personnalisable qui fonctionnera même avec plusieurs formulaires sur la même page, je rendrai explicitement le widget reCaptcha en utilisant le rendu=explicite et onload=aFunctionCallback paramètres.
Voici un exemple simple:
<!DOCTYPE html>
<html>
<body>
<form action="" method="post">
<input type="text" name="first-name-1"> <br />
<input type="text" name="last-name-1"> <br />
<div class="recaptcha-holder"></div>
<input type="submit" value="Submit">
</form>
<br /><br />
<form action="" method="post">
<input type="text" name="first-name-2"> <br />
<input type="text" name="last-name-2"> <br />
<div class="recaptcha-holder"></div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
var renderGoogleInvisibleRecaptcha = function() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var holder = form.querySelector('.recaptcha-holder');
if (null === holder){
continue;
}
(function(frm){
var holderId = grecaptcha.render(holder,{
'sitekey': 'CHANGE_ME_WITH_YOUR_SITE_KEY',
'size': 'invisible',
'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline
'callback' : function (recaptchaToken) {
HTMLFormElement.prototype.submit.call(frm);
}
});
frm.onsubmit = function (evt){
evt.preventDefault();
grecaptcha.execute(holderId);
};
})(form);
}
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>
</body>
</html>comme vous pouvez le voir, j'ajoute un élément div vide dans un formulaire. Afin de déterminer quels formulaires doivent être protégés à l'aide de reCaptcha, Je vais ajouter un nom de classe à cet élément. Dans notre exemple, j'utilise le nom de classe 'recaptcha-holder'.
la fonction callback itère toutes les formes existantes et si elle trouve notre élément injecté avec le nom de classe' recaptcha-holder', elle affichera le widget reCaptcha.
j'ai utilisé cette solution sur mon Invisible reCaptcha pour le plugin WordPress. Si quelqu'un veut voir comment cela fonctionne, le plugin est disponible pour téléchargement sur WordPress répertoire:
https://wordpress.org/plugins/invisible-recaptcha/
espérons que cela aide!
Voici comment implémenter un côté client + serveur (php) Invisible reCaptcha fonctionnalité:
- Côté Client
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reCaptcha</title>
<!--api link-->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!--call back function-->
<script>
function onSubmit(token) {
document.getElementById('reCaptchaForm').submit();
}
</script>
</head>
<body>
<div class="container">
<form id="reCaptchaForm" action="signup.php" method="POST">
<input type="text" placeholder="type anything">
<!--Invisible reCaptcha configuration-->
<button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Submit</button>
<br/>
</form>
</div>
</body>
</html>
- validation côté serveur: Créer un inscription.php le fichier
<?php
//only run when form is submitted
if(isset($_POST['g-recaptcha-response'])) {
$secretKey = '<your secret key>';
$response = $_POST['g-recaptcha-response'];
$remoteIp = $_SERVER['REMOTE_ADDR'];
$reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
$result = json_decode($reCaptchaValidationUrl, TRUE);
//get response along side with all results
print_r($result);
if($result['success'] == 1) {
//True - What happens when user is verified
$userMessage = '<div>Success: you\'ve made it :)</div>';
} else {
//False - What happens when user is not verified
$userMessage = '<div>Fail: please try again :(</div>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>reCAPTCHA Response</title>
</head>
<body>
<?php
if(!empty($userMessage)) {
echo $userMessage;
}
?>
</body>
</html>
connectez-vous avec votre compte google
visitez le lien Google recaptcha.
puis suivez le lien vers l'intégration de code, suivez le code pour la validation client et serverside. https://developers.google.com/recaptcha/docs/invisible
augmenter ou diminuer le niveau de sécurité une fois après la création de la recaptcha, allez aux paramètres d'avance ici, https://www.google.com/recaptcha/admin#list