J'ai installé le dernier outil Google reCaptcha sur notre site Web de yoga. Maintenant, les utilisateurs sont confus au sujet du texte "Je ne suis pas un robot" qui apparaît à côté de la case à cocher.
La plupart de nos utilisateurs ne savent pas ce que signifie le mot "robot" dans ce contexte et ils pensent que le formulaire est cassé. Ils se sentent également moins en sécurité en utilisant notre formulaire car il est étrange de voir le mot "robot" sur un site de yoga.
Comment changer le texte "Je ne suis pas un robot" en quelque chose d'autre que les utilisateurs comprennent?
Les documents semblent silencieux sur ce point ...
De plus, il semble que le contenu de reRecaptcha soit complètement verrouillé via JS et CSS distants. J'ai essayé en vain d'utiliser le javascript suivant pour modifier le texte de Google recaptcha-anchor-label
:
<script type="text/javascript">
$(document).ready(function () {
$("#recaptcha-anchor-label").text("Something different.");
});
</script>
Pour revenir à cette vieille question - il existe maintenant une version invisible du widget reCAPTCHA qui vous permet de concevoir vous-même l'interface utilisateur. Vous pouvez lier l'exécution du défi à un bouton que vous avez créé ou l'invoquer par programme en arrière-plan.
Je cite la page des documents ici pour référence rapide, vous pouvez en savoir plus à ce sujet ici .
Les attributs nécessaires sont le nom de classe "g-recaptcha", la clé de votre site dans l'attribut data-sitekey et le nom d'un rappel JavaScript pour gérer l'achèvement du captcha dans l'attribut data-callback.
Tête:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
Corps:
<form id='demo-form' action="?" method="POST">
<button class="g-recaptcha" data-sitekey="your_site_key" data-callck='onSubmit'>Submit</button>
<br/>
</form>
Il est possible de changer "Je ne suis pas un robot" dans Google Recaptcha dans une langue différente en utilisant codes de langue pour le paramètre de script hl .
Voici comment vous forcez l'espagnol, par exemple:
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=es">
Source: Google ReCaptcha Docs
Vous ne pouvez pas modifier ce texte spécifique car il appartient à un tiers iframe
, bien qu'il existe une solution de contournement qui réponde exactement à ce que l'OP demande.
Vous pouvez ajouter un nouveau div
sur le parent div
que vous pouvez contrôler, aligner et superposer sur le texte de l'étiquette, étant donné que Google Captcha a toujours une taille fixe. Par conséquent, selon la documentation , étant donné que vous pouvez avoir le Captcha div
principal sur votre code avec class="g-recaptcha"
, vous faites simplement:
$('.g-recaptcha').append('<div id="new_label"></div>');
$('#new_label').text("My own text");
$('#new_label').css({"position":"absolute", "width":"160px", "top":"27px", "left":"53px", "background-color":"#f9f9f9"});
ça marche:)
Il est actuellement impossible d'utiliser leur outil. Si vous souhaitez utiliser une autre méthode pour arrêter les robots: désinstallez reCaptcha et utilisez quelque chose sur lequel vous avez le contrôle, peut-être une simple question et réponse aléatoire qui se rapporte au yoga.
Ce n'est pas possible car la même politique d'origine interdit à tout script (qui se trouve sur votre site) d'essayer d'accéder à un iframe (le captcha) qui a une autre origine (serveur Google).
Nous ne devrions avoir aucun problème à exécuter le code ci-dessous si nous possédons les deux serveurs :)
$( ".g-recaptcha > div > div > iframe" ).contents().find( "#recaptcha-anchor-label" ).text('Custom Text');
J'ai utilisé le captcha côté client ici, c'est mon code.il fonctionne bien pour mon portail.
this.canvas = document.getElementById( 'myCanvas' ) as HTMLCanvasElement;
var context = this.canvas.getContext( '2d' );
context.clearRect( 0, 0, this.canvas.width, this.canvas.height );
var alpha = [];
alpha = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H','J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'2', '3', '4', '5', '6', '7', '8', '9'];
var i;
for ( i = 0; i < 6; i++ ) {
var a = alpha[Math.floor( Math.random() * alpha.length )];
var b = alpha[Math.floor( Math.random() * alpha.length )];
var c = alpha[Math.floor( Math.random() * alpha.length )];
var d = alpha[Math.floor( Math.random() * alpha.length )];
var e = alpha[Math.floor( Math.random() * alpha.length )];
var f = alpha[Math.floor( Math.random() * alpha.length )];
var g = alpha[Math.floor( Math.random() * alpha.length )];
}
this.captchaCode = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' ' + f + ' ' + g;
var ctext = this.captchaCode;
this.loginForm.controls['captcha'].setValue( this.captchaCode.replace( /\s/g, "" ) );
Voici que je dessine une image de toile
/*Text to image captcha */
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage( imageObj, 0, 0 );
context.font = "24px arial";
context.fillText( ctext, 84, 32 );
};
imageObj.src = 'assets/modules/dummy-assets/common/img/captcha2.jpg';