How to integrate reCAPTCHA to the ajax queries od DataTables

hardvlad

Hello!

We decides to protect all our APIs with google reCAPTCHA and we do not have problems with other APIs. But I cannot understand how to integrate reCAPTCHA token request before ajax query of DataTables and how to send reCAPTCHA token within ajax query.

Please help me! Your help will be much appreciated!

kthorngren

Assuming you are using the ajax option you can use it as an object to pass the token. This is from the docs:

As an object, the ajax object is passed to jQuery.ajax allowing fine control of the Ajax request. DataTables has a number of default parameters which you can override using this option.

Other options are to use ajax.data or preXhr to modify the Ajax request.

If this doesn't help then please provide more details of how you want to pass the token.

Kevin

hardvlad

Thank you for your prompt response!

It looks like that ajax.data or preXhr are synchronous in nature, but recaptcha token can be requested only like this and I cannot understand how to integrate this in ajax.data

function getReCAPTCHAToken() {
return new Promise((resolve) => {
grecaptcha.enterprise.ready(function() {
grecaptcha.enterprise.execute('key', {action: 'action'}).then(function(token) {
resolve(token);
});
});
});
}

kthorngren

In that case I think you will need to use ajax as a function so you can fetch the recaptcha token first then place the ajax request to fetch the data using jQuery ajax() or your favorite method.

Kevin

kthorngren

Found this old example that may be useful.
https://live.datatables.net/nokeduka/1/edit

Kevin

hardvlad

Oh, thank you so much! It finally worked! The way I did it

        ajax: function (data, callback, settings) {

            grecaptcha.enterprise.ready(async () =>
            {
                 grecaptcha.enterprise.execute('key', {action: 'action'}).then(
                     function(token)
                     {
                         data.token = token;
                         $.ajax({
                                url: '/api/v1/myApiForTableData',
                                type: 'POST',
                                data: data
                         }).then ( function(data) {
                             callback(data);
                         });
                     }
                 );
             });

        },

kthorngren

Looks good, thanks for the update.

Kevin