zecat / google-recaptcha Goto Github PK

Hi,

Here, i have uploaded my source code.

i have written captcha code in my-samplepage.html.

That same code is working fine in IE + Firefox + safari but getting below error in chrome.

Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
    at lb.t.tZ (https://www.gstatic.com/recaptcha/api2/v1548052318968/recaptcha__en.js:515:271)
    at yj (https://www.gstatic.com/recaptcha/api2/v1548052318968/recaptcha__en.js:522:135)
    at Object.init (https://www.gstatic.com/recaptcha/api2/v1548052318968/recaptcha__en.js:527:434)
    at https://www.google.com/recaptcha/api2/bframe?hl=en&v=v1548052318968&k=6LcI04UUAAAAADBTEtJ0exAwAe57vkNqObj6tKIQ&cb=r1oyt78mj7bb:184:30

https://github.com/cbalit/re-captcha/files/2821304/firstdemo.zip

Could you please assist me here?

Thanks in Advanced!

Hello, I am trying to put google-recaptcha in my component and i have achieved. The problem is if I dont put force-in-body I cant send the request but if I put it when i move google-recaptcha from body to light DOM of my component is not displayed.

I have this in the index template of my app:

<google-recaptcha id="app__captcha" sitekey="6LdHISEUAAAAAN0FxtC5OBGQv-zrtj1tQ1Z_KUWf" ></google-recaptcha>

and I move it tomy component of this way:

(function () {
  Polymer({
    is: 'apollo-captcha',
    properties: {},
    ready: function() {
      this.async(function() {
        let root = this.domHost.$$('#commercialAssistant');
        let item = document.querySelector("#app__captcha");
        item.slot = 'captcha';
        root.appendChild(item);
      }, 1);
    }
  });
}());

I do the async function because dom host is in a template dom-if.

The problem is that if i put force-on-body captcha is not displayed and if i dont put it the captcha doesnt send the request.

Thanks for your time and sorry for my english!

Hi. As the page size changes, the location of the recaptcha component is changing. How do I solve it?

hint : Container position:fixed

Starting Polymer 3.0, bower is replaced by npm

I'm trying to implement google-recaptcha in a contact form, but I'm having problems trying to refit the element on scroll.

In the README it says that:

The container is refit every time the user scroll or the <google-recaptcha> is notified of resize.

If I scroll, the element refits properly, but I haven't found a way to make it work on resize. I tried adding an iron-resize listener on my element and then calling notifyResize() or refit() on google-recaptcha but that didn't work.

Can you give an example of how do you notify <google-recaptcha> of a resize?

Thanks.

I'm using the widget inside a component that's shown or hidden in a form, and I found out that when I hide the container component, the recaptcha is still shows, but in the top-left corner, above anything else.
I solved this setting the restamp="true" in the container component, and modifying the detached method as follows:

  detached: function() {
    // TODO: remove event listener
    this.container.remove();
  },

Do you think it can be the correct approach?
Thanks
Andrea

I cannot obtain to send the value of the recaptcha through a form post... Any idea?
Thanks
Andrea

But there is a workaround: https://developers.google.com/recaptcha/docs/faq

Simply we can replace www.google.com by www.recapthca.net to make it work from China

I tried to integrated this web component with Flow, but I am getting this error

"NotSupportedError: Failed to construct 'CustomElement': The result must not have attributes"

See also: https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head