In questa pagina viene spiegato come visualizzare e personalizzare il widget reCAPTCHA v2 sulla tua pagina web.
Per visualizzare il widget, puoi:
- Eseguire automaticamente il rendering del widget oppure
- Eseguire il rendering del widget in modo esplicito
Per scoprire come personalizzare il widget, consulta Configurazioni. Ad esempio, potresti voler specificare la lingua o il tema del widget.
Fai riferimento a Verifica della risposta dell'utente per verificare se l'utente ha risolto correttamente il CAPTCHA.
Esegui automaticamente il rendering del widget reCAPTCHA
Il metodo più semplice per eseguire il rendering del widget reCAPTCHA sulla tua pagina è includere la risorsa JavaScript necessaria e un tag g-recaptcha
. Il tag g-recaptcha
è un elemento DIV con nome di classe g-recaptcha
e la tua chiave di sito
nell'attributo data-sitekey
:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
Lo script deve essere caricato utilizzando il protocollo HTTPS e può essere incluso da qualsiasi punto della pagina senza restrizioni.
Esegui il rendering in modo esplicito del widget reCAPTCHA
Il differimento del rendering può essere ottenuto specificando la funzione di callback onload e aggiungendo parametri alla risorsa JavaScript.
Specifica la funzione di callback
onload
. Questa funzione viene chiamata quando tutte le dipendenze sono state caricate.<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>
Inserisci la risorsa JavaScript, impostando il parametro
onload
sul nome della funzione di callback onload e il parametrorender
suexplicit
.<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>
Quando viene eseguito il callback, puoi chiamare il metodo
grecaptcha.render
dall'API JavaScript.
Configurazione
Parametri risorsa JavaScript (api.js)
Parametro | Valore | Descrizione |
---|---|---|
onload | Campo facoltativo. Il nome della funzione di callback da eseguire dopo il caricamento di tutte le dipendenze. | |
eseguire il rendering | onload esplicita |
Campo facoltativo. Indica se eseguire il rendering del widget in modo esplicito. Il valore predefinito è onload, che mostrerà il 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 tag g-recaptcha e parametri grecaptcha.render
Attributo tag g-recaptcha | Parametro grecaptcha.render | Valore | Predefinita | Descrizione |
---|---|---|---|---|
chiave-sito-dati | chiave sito | La chiave del sito. | ||
tema-dati | tema | luce scura | luce | Campo facoltativo. Il tema a colori del widget. |
data-size | dimensioni | normale compatto | normale | Campo facoltativo. Le dimensioni del widget. |
indice-dati | indice tab | 0 | Campo facoltativo. Il tabindex del widget e della sfida. Se altri elementi della pagina utilizzano tabindex, deve essere impostato per facilitare la navigazione dell'utente. | |
callback di dati | callback | Campo facoltativo. Il nome della tua funzione di callback, eseguita quando l'utente invia una risposta corretta. Il token g-recaptcha-response viene passato al callback. |
||
callback-scaduto-dati | callback scaduto | Campo facoltativo. Il nome della funzione di callback, eseguita quando la risposta reCAPTCHA scade e l'utente deve verificare di nuovo. | ||
callback-errore-dati | callback di errore | Campo facoltativo. Il nome della funzione di callback, eseguita quando reCAPTCHA riscontra un errore (di solito la connettività di rete) e non può continuare fino a quando la connettività non viene ripristinata. Se specifichi una funzione qui, devi informare l'utente che deve riprovare. |
API JavaScript
Metodo | Descrizione |
---|---|
grecaptcha.render( container,
Parametri
|
Visualizza il container come widget reCAPTCHA e restituisce l'ID del widget appena creato. container L'elemento HTML per visualizzare il widget reCAPTCHA. Specifica l'ID del container (stringa) o l'elemento DOM stesso. parameters Un oggetto che contiene parametri come coppie chiave=valore, ad esempio {"sitekey": "your_site_key", "theme": "light"}. Vedi i parametri grecaptcha.render. |
grecaptcha.reset( ) opt_widget_id
)
|
Reimposta il widget reCAPTCHA. opt_widget_id ID widget facoltativo; viene impostato per impostazione predefinita il primo widget creato, se non specificato. |
grecaptcha.getResponse( ) opt_widget_id
)
|
Recupera la risposta per il widget reCAPTCHA. opt_widget_id ID widget facoltativo; viene impostato per impostazione predefinita il primo widget creato, se non specificato. |
Esempi
Rendering esplicito dopo un callback onload
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key'
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
Rendering esplicito per più widget
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="example2"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>