在Web组件中使用FirebaseUI(Polymer 2.0)

时间:2017-07-26 19:43:44

标签: javascript firebase polymer firebase-authentication firebaseui

我在普通的js中成功地在Polymer和FirebaseUI中使用了Firebase-Auth SDK,现在尝试将它们一起使用(在web组件中使用FirebaseUSI)。我接近但不完全(例如造型)。

enter image description here

这是我的webcomponent:

<dom-module id="damawi-signup">
    <template>
        <style include="fb-ui-style">
        </style>
        <paper-button raised on-tap="openUi">SignUp</paper-button>
        <paper-dialog id="dialog" with-backdrop>
            <div id="fbUIContainer"></div>
        </paper-dialog>
    </template>
    <script>
        class damawiSignup extends Polymer.Element {
            static get is() { return 'damawi-signup'; }
            openUi() {
                var uiConfig = {
                    signInSuccessUrl: '/signUpSuccess',
                    signInOptions: [
                        // Leave the lines as is for the providers you want to offer your users.
                        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
                        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
                        firebase.auth.EmailAuthProvider.PROVIDER_ID
                    ],
                    // Terms of service url.
                    tosUrl: '/TOS'
                };

                // 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.$.fbUIContainer, uiConfig);
                this.$.dialog.open();
            }
        }
        window.customElements.define(damawiSignup.is, damawiSignup);
    </script>
</dom-module>

我将样式信息与

相关联
<link rel="import" href="../../src/fb-ui-style/fb-ui-style.html">

我复制了firebaseui.css信息

<dom-module id="fb-ui-style">
    <template>
        <style>
          @font-face{font-family:Roboto;font-style:normal;font-weight:400;...
        </style>
    </template>
</dom-module>

任何已有的更好的解决方案或我如何改进css?

0 个答案:

没有答案