Adding reCAPTCHA to a Digital Journey

You can insert reCAPTCHA bot protection in your digital journeys either by leveraging the FTOS.ECOS.Captcha client script library or, for version 2.0, as an HTML widget.

Add reCAPTCHA to a Digital Journey via the FTOS.ECOS.Captcha Library

reCAPTCHA 3.0 Example

Create a custom button to the desired form with the btnVerify ID, then add the following JavaScript code to the page:

Copy

var captcha = ebs.importClientScript('FTOS.ECOS.Captcha');
captcha.loadCaptcha(changeLibraryLoaded);

var libraryLoaded = false;

/* Click event for the btnVerify button */
$('#btnVerify').on('click', function (event) {
    event.preventDefault();
    if (libraryLoaded){
        captcha.verifyToken("login", isTokenValid);
    }
});

function changeLibraryLoaded(){
    libraryLoaded = true;
}

function isTokenValid(token){
    if (token && token.isSuccess){
      // proceed with your call
    }
}

IMPORTANT!
Make sure to call the removeToken() function before using reCAPTCHA again for the same user.

reCAPTCHA 2.0 Example

This version requires you to add an HTML element with the captcha id. When the library is loaded, you must assign it the g-recaptcha class and set its data-sitekey attribute.

Create a custom button to the desired form with the btnVerify ID, then add the following JavaScript code to the page:

Copy

var captcha = ebs.importClientScript('FTOS.ECOS.Captcha');
captcha.loadCaptcha(changeLibraryLoaded, 2);

var libraryLoaded = false;

$('#btnVerify').on('click', function (event) {
    event.preventDefault();
    if (libraryLoaded){
        captcha.handleCaptcha(isTokenValid);
    }
});

function changeLibraryLoaded(key){
    libraryLoaded = true;
    $("#captcha").addClass("g-recaptcha").attr("data-sitekey", key);
}

function isTokenValid(token){
    if (token && token.isSuccess){
      // proceed with your call
    }
}

Add reCAPTCHA to a Digital Journey via Widget (v2.0 only)

Use the ebs.generateHtmlWidgetAsync to implement reCAPTCHA via widget. The widget inserts a records into the FTOS_ECOS_CaptchaData entity, where you can verify the status and IsSuccess properties for the verifications.

Copy

var options = {
    hideTitle: true,
    skipJavascript: false,
    context: {
        recordId: formData.id,
        Debug: true,
        SourceEntityName: formData.entityName,
    }
};

var element = document.getElementById("widgetElem");

ebs.generateHtmlWidgetAsync("reCaptcha2", element, options)
    .then(function () {
        console.log("widget generated");
    })
    .catch(function (err) {
        console.log(err);
    });