invisible-recaptcha.html

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<link rel="import" href="../polymer/polymer.html">

<!--
A Polymer [Invisible Recaptcha](https://www.google.com/recaptcha) web-component for 🤖 detection (Polymer 1.x)

`<invisible-recaptcha>` is an web-component implementation of the Invisible Recaptcha by Google.

    <invisible-recaptcha recaptcha-key=""></invisible-recaptcha>

### How to detect 🤖 :

1. You need to get an API Key [here](http://www.google.com/recaptcha/admin) (select invisible Recaptcha)
2. Place the element where you want
3. When you want to make the verification, just call the verify function.
4. Wait the end of the verification. `verification-finished` will fire.
5. Verify the token with your backend. [Full documentation](https://developers.google.com/recaptcha/docs/verify)

### How to use inside shadow-dom :

1. Set the `shadow-dom` attribute.
2. When you open the form call `render()`

@demo demo/index.html
-->


<dom-module id="invisible-recaptcha">
    <template>
    <style>
         :host {
            display: block;
        }
    </style>
    <div
        hidden$={{hideBadge}}
        class="g-recaptcha"
        data-sitekey$="{{recaptchaKey}}"
        data-callback="handleResponse"
        data-size="invisible"
        data-badge$="{{badgePosition}}"
        data-type$="{{recaptchaType}}"
        data-tabindex$="{{tabindex}}">
    </div>
  </template>
</dom-module>
<script>
    function handleResponse(token) {
        if (document.querySelector('invisible-recaptcha')) {
            document.querySelector('invisible-recaptcha')._handleResponse(token);
        } else {
            this.dispatchEvent(new Event('verificationFinished'));
        }
        this.dispatchEvent(new Event('verificationFinished'));
    }
    Polymer({

        is: 'invisible-recaptcha',

        /**
         * Fired when the recaptcha verification is done.
         *
         * @event verification-finished
         */

        properties: {
            /**
             * Recaptcha key. To obtain an API key, see http://www.google.com/recaptcha/admin.
             */
            recaptchaKey: {
                type: String,
                notify: true
            },
            /**
             * Last Response from the Recaptcha API. To handle the response, see https://developers.google.com/recaptcha/docs/verify
             */
            lastResponse: {
                type: String,
                notify: true
            },
            /**
             * The position of the Recaptcha Badge. Can be `bottomright`, `bottomleft` or `inline`
             */
            badgePosition: {
                type: String,
                value: 'bottomright'
            },
            /**
             * Set to true to hide the Recaptcha Badge
             */
            hideBadge: {
                type: Boolean,
                value: false
            },
            /**
             * Set to true if this element will be encapsulated inside the Shadow Dom
             */
            shadowDom: {
                type: Boolean,
                value: false
            },
            /**
             * The default type of captcha showed to the user. Can be `image` or `audio`
             */
            recaptchaType: {
                type: String,
                value: 'image'
            },
            /**
             * The tabindex of the challenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
             */
            tabindex: {
                type: Number,
                value: 0
            },
        },
        ready: function() {
            if (this.shadowDom) {
                var self = this;
                window.addEventListener('verificationFinished', function() {
                    self._handleResponse()
                });
            }
        },
        /**
         * Verify if the user is a robot!
         */
        verify: function() {
            grecaptcha.execute();
        },
        /**
         * Reset the recaptcha module
         */
        reset: function() {
            grecaptcha.reset();
        },
        /**
         * Get the token from the last verification.
         *
         * @return Token
         */
        getResponse: function() {
            return lastResponse
        },
        /**
         * Render the recaptcha inside the body to prevent Shadow-Dom problem.
         */
        render: function(container) {
            this.shadowHelper = document.createElement('div');
            document.querySelector('body').appendChild(this.shadowHelper);
            if (this.hideBadge) {
                this.shadowHelper.hidden = true;
            }
            var renderOption = {
                "sitekey": this.recaptchaKey,
                "theme": "light",
                'size': 'invisible',
                'callback': 'handleResponse',
                'badge': this.badgePosition,
                'tabindex': this.tabindex,
                'type': this.recaptchaType
            };
            grecaptcha.render(this.shadowHelper, renderOption);
        },
        _handleResponse: function() {
            var token = grecaptcha.getResponse();
            this.lastResponse = token;
            this.fire('verification-finished', {
                'token': token
            });
            grecaptcha.reset();

        },
    });
</script>