Search code examples
javascriptjavavaadinvaadin8

How to implement script tag in html for remote javascript module in Vaadin 8?

I am trying to implement FriendlyCaptcha in a Vaadin 8 application. To do this, I need to integrate two script tags which load remote javascript modules.

<script type="module" src="https://unpkg.com/friendly-challenge@0.9.8/widget.module.min.js" async defer></script>
<script nomodule src="https://unpkg.com/friendly-challenge@0.9.8/widget.min.js" async defer></script>

I am unfamiliar with Vaadin, I have spent hours trying to implement this, but I am not making any progress.

I implemented it in a simple HTML file, where it works just fine:

<!DOCTYPE HTML>
<html>
<body>

<form METHOD="POST">
<input type="checkbox">
<div class="frc-captcha" data-sitekey="MY-SITE-KEY" data-callback="myCallback"></div>
<input type="submit" id="sub" disabled=true>

</form>

<script>

function myCallback(){
    document.getElementById("sub").disabled = false;
}

</script>

<script type="module" src="https://unpkg.com/friendly-challenge@0.9.8/widget.module.min.js" async defer></script>
<script nomodule src="https://unpkg.com/friendly-challenge@0.9.8/widget.min.js" async defer></script>


</body>
</html>

This is an image of the above code with the sitekey included

I tried it like this, the div shows up, but the captcha isn't displayed:

captchaDiv = new Label(
        "<div class=\"frc-captcha\" data-sitekey=\"MY_SITE_KEY\" data-callback=\"myCallback\"></div>" +
                "<script type=\"module\" src=\"https://unpkg.com/friendly-challenge@0.9.8/widget.module.min.js\" async defer></script>\n" +
                "<script nomodule src=\"https://unpkg.com/friendly-challenge@0.9.8/widget.min.js\" async defer></script>", ContentMode.HTML);
addComponent(captchaDiv);
setComponentAlignment(captchaDiv, Alignment.MIDDLE_CENTER);

How do I make sure the js modules are loaded on the client-side? In Vaadin 14 there is @JsModule, but this annotation doesn't exist in Vaadin 8 yet.

Solution

  • It should be as easy as using the url in the @JavaScript annotation in your Java class.

    @JavaScrip("https://unpkg.com/friendly-challenge@0.9.8/widget.min.js")
public class MyCaptchaView implements View { 

...
}

    But, I recommend to download the js file instead and use it withing the project file as loading directly from cloud is always a risk.

    See more in documentation: https://vaadin.com/docs/v8/framework/articles/IntegratingAJavaScriptLibraryAsAnExtension