使用 FirebaseUI 身份验证组件时如何让 reCAPTCHA 工作？

Question

I'm creating a web app using Polymer to build the front-end, and I'm using FirebaseUI component as a drop-in to support Firebase Phone Authentication, but immediately the page renders that has the FirebaseUI component on it I'm getting this error in my console logs: Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame. And after that the reCAPTCHA won't be solved. I want to use firebase phone authentication in the app I'm building.

I tried running the app both on my local dev server serving it on http but still behaving just the same even when I run on firebase ( https ). I tried to open an issue on github but still no helpful response was gotten.

Below is the code that's in charge of configuring and specifying the location where the FirebaseUI phone auth component should be rendered.

ready() {
        super.ready();
        // FirebaseUI config.
        var uiConfig = {
            signInSuccessUrl: `${window.location.origin}/seller-dashboard`,
            signInOptions: [
                {
                    provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
                    recaptchaParameters: {
                        type: 'image', // 'audio'
                        size: 'normal', // 'invisible' or 'compact'
                        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
                    },
                    defaultCountry: '+260'
                }
            ],
            // tosUrl and privacyPolicyUrl accept either url string or a callback
            // function.
            // Terms of service url/callback.
            tosUrl: `${window.location.origin}/terms`,
            // Privacy policy url/callback.
            privacyPolicyUrl: function () {
                window.location.assign(`${window.location.origin}/privacy`);
            }
        };

        // Initialize the FirebaseUI Widget using Firebase.
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        // The start method will wait until the DOM is loaded.
        ui.start(this.$.container, uiConfig);
    }

When the page where the firebaseui phone authentication component is is rendered I'm having these console logs on Google Chrome: XHR finished loading: GET "https://www.googleapis.com/identitytoolkit/v3/relyingparty/getRecaptchaParam?key=AIzaSyAUb_eFUs_zNJ5HMtlRV3Ghg1JLQ63enL4&cb=1558695304328". recaptcha__en.js:529 XHR finished loading: GET "https://www.googleapis.com/identitytoolkit/v3/relyingparty/getRecaptchaParam?key=AIzaSyAUb_eFUs_zNJ5HMtlRV3Ghg1JLQ63enL4&cb=1558695304328". recaptcha__en.js:529

Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame. at wG.K.l9 (https://www.gstatic.com/recaptcha/api2/v1558333958099/recaptcha__en.js:529:183) at yu (https://www.gstatic.com/recaptcha/api2/v1558333958099/recaptcha__en.js:532:11) at Object.init (https://www.gstatic.com/recaptcha/api2/v1558333958099/recaptcha__en.js:542:72) at https://www.google.com/recaptcha/api2/bframe?hl=en&v=v1558333958099&k=6LcMZR0UAAAAALgPMcgHwga7gY5p8QMg1Hj-bmUv&cb=2zr5gn9cy630:184:30

I'm running everything on macOS Mojave , browser: Google Chrome 74.0.3729.157 , Firebase UI version: 6.0.2 , and Polymer 3.

Any help how I can have this work?

Answer 1

This isn't a problem and verification should work regardless; Firebase's demo shows the same error.I had the exact same issue, but after hours of attempts realised I made the silly mistake of adding my mobile number in the console as a number for testing. FB won't send you a code in this case, and you will have to specify the verification you specified in the console.