In questa pagina viene spiegato come abilitare e personalizzare il reCAPTCHA invisibile sulla tua pagina web.
Per richiamare il reCAPTCHA invisibile puoi:
- Associa automaticamente la sfida a un pulsante oppure
- Associa la verifica a un pulsante in modo programmatico a un pulsante oppure
- Richiamare la verifica in modo programmatico
Consulta Configurazioni per scoprire come personalizzare il reCAPTCHA invisibile. Ad esempio, potresti voler specificare la lingua o la posizione del badge.
Fai riferimento a Verifica della risposta dell'utente per sapere se l'utente ha risolto il CAPTCHA correttamente.
Associa automaticamente la sfida a un pulsante
Il metodo più semplice per utilizzare il widget reCAPTCHA invisibile nella pagina è includere la risorsa JavaScript necessaria e aggiungere alcuni attributi al pulsante HTML. Gli attributi necessari sono il nome della classe "g-recaptcha
", la chiave del sito nell'attributo data-sitekey
e il nome di un callback JavaScript per gestire il completamento del captcha nell'attributo data-callback
.
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
</head>
<body>
<form id="demo-form" action="?" method="POST">
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
<br/>
</form>
</body>
</html>
Lo script deve essere caricato utilizzando il protocollo HTTPS e può essere incluso da qualsiasi punto della pagina senza limitazioni.
Associa la verifica a un pulsante in modo programmatico o richiamala.
Il differimento dell'associazione può essere ottenuto specificando la funzione di callback onload e aggiungendo parametri alla risorsa JavaScript. Funziona come il normale test reCAPTCHA.
Richiamare la sfida in modo programmatico.
È possibile richiamare la verifica reCAPTCHA in modo programmatico eseguendo il rendering della verifica in un div con un attributo data-size="invisible"
e richiamando in modo programmatico l'esecuzione.
Crea un div con
data-size="invisible"
.<div class="g-recaptcha" data-sitekey="_your_site_key_" data-callback="onSubmit" data-size="invisible"> </div>
Chiama grecaptcha.execute da un metodo JavaScript.
grecaptcha.execute();
Quando viene eseguito il callback, puoi chiamare il metodo
grecaptcha.render
dall'API JavaScript.
Configurazione
Parametri delle risorse JavaScript (api.js)
Parametro | Valore | Descrizione |
---|---|---|
onload | Campo facoltativo. Il nome della funzione di callback da eseguire una volta caricate tutte le dipendenze. | |
eseguire il rendering | onload esplicito |
Campo facoltativo. Indica se visualizzare il widget in modo esplicito. Il valore predefinito è onload, che eseguirà il rendering del widget nel primo tag g-recaptcha trovato. |
hl | Visualizza i codici lingua | Campo facoltativo. Forza il rendering del widget in una lingua specifica. Rileva automaticamente la lingua dell'utente, se non specificata. |
Attributi del tag g-recaptcha e parametri grecaptcha.render
Attributo tag g-recaptcha | Parametro grecaptcha.render | Valore | Predefinito | Descrizione |
---|---|---|---|---|
chiave-sito-dati | chiave sito | La tua chiave del sito. | ||
badge-dati | badge | in basso a destra in basso a sinistra in linea | in basso a destra | Campo facoltativo. Riposiziona il badge reCAPTCHA. "inline" consente di posizionarlo con CSS. |
data-size | dimensioni | invisibile | Campo facoltativo. Utilizzato per creare un widget invisibile associato a un div ed eseguito in modo programmatico. | |
indice-tabulazione | indice tabulazione | 0 | Campo facoltativo. Il tabindex della sfida. Se altri elementi della pagina utilizzano il valore Tabindex, questo deve essere impostato per facilitare la navigazione dell'utente. | |
richiamata-dati | callback | Campo facoltativo. Il nome della funzione di callback, eseguita quando l'utente invia una risposta corretta. Il token g-recaptcha-response viene trasmesso al tuo callback. |
||
callback-scaduto-dati | richiamata-scaduta | Campo facoltativo. Il nome della funzione di callback, eseguita quando la risposta reCAPTCHA scade e l'utente deve verificare di nuovo. | ||
dati-errore-chiamata-back | callback di errore | Campo facoltativo. Il nome della funzione di callback, eseguita quando reCAPTCHA rileva un errore (in genere la connettività di rete) e non può continuare finché la connettività non viene ripristinata. Se specifichi una funzione qui, è tua responsabilità informare l'utente che deve riprovare. | ||
isolato | false | Campo facoltativo. Per consentire ai proprietari di plug-in di non interferire con le installazioni reCAPTCHA esistenti su una pagina. Se il valore è true, questa istanza reCAPTCHA farà parte di uno spazio ID separato. |
API JavaScript
Metodo | Descrizione |
---|---|
grecaptcha.render( container,
parametri,
eredita
)
|
Esegue il rendering del contenitore come widget reCAPTCHA e restituisce l'ID del widget appena creato. container L'elemento HTML per il rendering del widget reCAPTCHA. Specifica l'ID del contenitore (stringa) o l'elemento DOM stesso. parameters Un oggetto che contiene parametri come coppie chiave=valore, ad esempio {"sitekey": "your_site_key", "theme": "light"}. Consulta i parametri grecaptcha.render. eredita Utilizza gli attributi data-* esistenti nell'elemento se il parametro corrispondente non è specificato. I parametri hanno la precedenza sugli attributi. |
grecaptcha.execute( opt_widget_id
)
|
Richiama in modo programmatico il controllo reCAPTCHA. Utilizzato se il reCAPTCHA invisibile si trova su un div
anziché su un pulsante. opt_widget_id ID widget facoltativo; se non specificato, viene utilizzato per impostazione predefinita il primo widget creato. |
grecaptcha.reset( ) opt_widget_id
)
|
Reimposta il widget reCAPTCHA. opt_widget_id ID widget facoltativo; se non specificato, viene utilizzato per impostazione predefinita il primo widget creato. |
grecaptcha.getResponse( opt_widget_id
)
|
Recupera la risposta per il widget reCAPTCHA. opt_widget_id ID widget facoltativo; se non specificato, viene utilizzato per impostazione predefinita il primo widget creato. |
Esempi
Rendering esplicito dopo un callback onload
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script>
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : 'your_site_key',
'callback' : onSubmit
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<input id="submit" type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
Richiamo della verifica reCAPTCHA invisibile dopo la convalida lato client.
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('field').value);
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field">
<div id="recaptcha" class="g-recaptcha"
data-sitekey="_your_site_key_"
data-callback="onSubmit"
data-size="invisible"></div>
<button id="submit">submit</button>
</form>
<script>onload();</script>
</body>
</html>