Question

我正在使用Polymer创建一个Web应用程序以构建前端，并且我正在使用FirebaseUI组件作为支持Firebase Phone Authentication的插件，但是页面立即呈现为具有FirebaseUI组件。我的控制台日志中出现此错误：Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.之后，reCAPTCHA将无法解决。我想在正在构建的app中使用Firebase电话身份验证。

我尝试同时在http上为它提供服务的本地开发服务器上运行该应用程序，但是即使我在Firebase（https）上运行，其行为也一样。我试图打开issue on github，但仍然没有得到有用的答复。

下面是用于配置和指定FirebaseUI电话身份验证组件应呈现的位置的代码。

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);
    }

呈现page组件的firebaseui phone authentication时，我在Google Chrome浏览器上看到了这些console logs： 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

我正在macOS Mojave，浏览器：Google Chrome 74.0.3729.157，Firebase UI版本：6.0.2和Polymer 3上运行所有程序。

任何帮助我如何进行这项工作的人？

Answer 1

这不是问题，无论如何都应进行验证； Firebase的演示显示了相同的错误，我遇到了完全相同的问题，但是经过数小时的尝试后，我犯了一个愚蠢的错误，将我的手机号码添加到控制台中作为测试号码。在这种情况下，FB不会向您发送代码，因此您必须指定在控制台中指定的验证。

使用FirebaseUI身份验证组件时如何执行reCAPTCHA？

1 个答案: