Invisibile google Recaptcha e modulo Ajax

Ho un modulo Ajax:

E il codice js:

 document.getElementById("my_form").onsubmit = function(e) { e.preventDefault(); var xhr = new XMLHttpRequest(); //.............. send request to a server 

Nella documentazione assume che una forma è una forma normale, non ajax. In che modo esattamente dovrei integrare il reCaptcha invisibile alle mie forms ajax? Per esempio:

  

E, in particolare, cosa dovrei specificare per il gestore “data-callback”? Di nuovo, nella documentazione, la callback dei dati invia un modulo, ma una forma normale, mentre il mio è ajax. Ho bisogno di “richiamo dati”? Non dovrei invece chiamare recaptcha nel mio handler? Come?

Ci sono “render”, “getResponse” e “execute”. Quale dovrei usare? Non è chiaro dalla documentazione.

Sono d’accordo che la documentazione “invisibile” recaptcha non è abbastanza completa. Ho dovuto passare un po ‘di tempo a scavare attraverso l’esempio di codice e la documentazione del recaptcha “visibile” prima di capire come lavorare con questo.

Prima parla dell’API Recaptcha:

grecaptcha.render(htmlEl, options, inherit) è il metodo JS API di rendering del captcha HTML sulla pagina. Per impostazione predefinita, lo script recaptcha proverà a trovare qualsiasi elemento con class="g-recaptcha e tenta di eseguire il rendering immediatamente, ma questo comportamento può essere sovrascritto aggiungendo ?render=explicit param di query ?render=explicit a recaptcha script src url. Puoi anche voler rendere il recaptcha html on demand utilizzando questa API quando il proprio elemento .g-recaptcha viene collegato al DOM in un momento successivo rispetto a quando è stato caricato lo script. Questo API restituisce un valore ID che può essere passato ad altri metodi API, ma se non viene passato, tali la ricerca di api e fa riferimento al primo repcaptcha sulla pagina.

grecaptcha.getResponse(optional_id) restituisce il token. Se il token è una stringa vuota, significa che l’utente non è stato ancora convalidato, ovvero che l’utente non ha completato la sfida captcha.

grecaptcha.execute(optional_id) api triggers la richiesta di riconciliazione su richiesta a livello di programmazione. Questa API è applicabile solo al recaptcha “invisibile”. Le sfide di recaptcha visibili vengono triggerste quando l’utente fa clic sul modulo recaptcha.

grecaptcha.reset(optional_id) resetterà una sfida, ovvero dovrà essere eseguita ogni volta che il server non riesce a convalidare il token con il server api recaptcha (poiché i token sono monouso), ma a seconda dell’implementazione, puoi decidere di reimpostare ogni volta.

Ora, parliamo di callback dei dati:

data-callback è un attributo in cui è ansible passare un nome di funzione di namespace globale, ovvero una funzione accessibile come window [‘nameOfFunction’]. Questo callback verrà chiamato ogni volta che l’utente viene validato con successo con un valore token che passerà al server. Questo è lo stesso token restituito da grecaptcha.getResponse() quindi tecnicamente non è necessaria questa funzione. Ma può servire come callback per farti sapere che l’utente ha superato la verifica nel caso in cui sia necessario aggiornare l’interfaccia utente o qualcosa del genere.

Se per qualche motivo non si desidera che questa richiamata sia accessibile dallo spazio dei nomi delle windows, è ansible passare questo metodo nell’object opzioni con la chiave di callback a grecaptcha.render() . NOTA: options.callback può assumere un valore stringa che equivale al passaggio dell’attributo data-callback in HTML, ovvero deve essere una funzione nello spazio dei nomi della finestra. Ma options.callback può assumere anche un valore di “funzione”.


Ora qualche codice di esempio:

HTML

  

JS

 window.onScriptLoad = function () { // this callback will be called by recaptcah/api.js once its loaded. If we used // render=explicit as param in script src, then we can explicitly render reCaptcha at this point // element to "render" invisible captcha in var htmlEl = document.querySelector('.g-recaptcha'); // option to captcha var captchaOptions = { sitekey: '6Lck', size: 'invisible', // tell reCaptcha which callback to notify when user is successfully verified. // if this value is string, then it must be name of function accessible via window['nameOfFunc'], // and passing string is equivalent to specifying data-callback='nameOfFunc', but it can be // reference to an actual function callback: window.onUserVerified }; // Only for "invisible" type. if true, will read value from html-element's data-* attribute if its not passed via captchaOptions var inheritFromDataAttr = true; // now render recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr); }; // this is assigned from "data-callback" or render()'s "options.callback" window.onUserVerified = function (token) { alert('User Is verified'); console.log('token=', token); }; // click handler for form's submit button function onSubmitBtnClick () { var token = window.grecaptcha.getResponse(recaptchaId); // if no token, mean user is not validated yet if (!token) { // trigger validation window.grecaptcha.execute(recaptchaId); return; } var xhrData = { 'g-recaptcha-response': token // more ajax body/data here }; // proceed with appending more ajax call data to xhrData and then rest of ajax call process // var xhr = new XMLHttpRequest(); // ... ... .... ... ... } 

Puoi facilmente convalidare google recaptcha usando jquery