Question

我一直在尝试为Polymer Starter Kit应用添加Firebase的简单电子邮件/密码注册/登录。它通过一个按钮进行了Google身份验证登录，但似乎没有任何关于如何设置电子邮件/密码注册/登录的说明。

以下是我一直在努力解决的项目todo-auth.html文件中代码的具体部分：

    <firebase-auth id="authenticate"
                   user="{{user}}"
                   location="{{location}}"
                   ref="{{refauth}}"
                   provider="">
    </firebase-auth>

    <paper-dialog modal
                  opened="[[!user]]"
                  entry-animation="scale-up-animation"
                  exit-animation="fade-out-animation">
      <h2>Please sign in</h2>
      <div>

        <!-- Inputs I added to accept user credentials -->
            <paper-input id="loginEmailInput"
                         no-label-float
                         label="Email"
                         on-keydown="">
            </paper-input>
                  <paper-input id="loginPasswordInput"
                         no-label-float
                         label="Password"
                         on-keydown="">
            </paper-input>

            <paper-button on-tap="logIn">Login</paper-button>


<!-- Original Google sign-in code --> 
<!--         <div class="google-sign-in"
             tabindex="0"
             on-tap="signIn">
          <span class="google-sign-in-icon"></span>
          <span class="google-sign-in-label">Google</span>
        </div> -->
      </div>
    </paper-dialog>

我从google元素的provider属性中删除了<firebase-auth>并添加了几个输入字段，但实际上并不知道该从哪里开始。

这是todo-auth.html

的Polymer脚本部分

  <script>
    Polymer({

      is: 'todo-auth',

      properties: {

        user: {
          notify: true
        }

      },

      logIn: function() {
        this.$.authenticate.login();
      },

      signOut: function() {
        this.$.authenticate.logout();
        this.user = null;
      }
    });

  </script>

我试图找到示例或指导有关如何实现此问题的教程，但我发现的所有内容都使用基于Google的身份验证作为登录。同样，我在SO上找到的所有其他问题都集中在谷歌登录上。

对于如何设置它的任何指示或指示或教程，我将不胜感激。提前谢谢！

更新

我设法使用Google Web Components github rep o。

中的演示实现了一个带有表单的新页面

我有一个my-firebase.html文件，可以导入我能想到的所有内容以使其正常工作。进口看起来像这样：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../../bower_components/polymerfire/polymerfire.html">

我还为firebase-app和firebase-auth添加了以下内容：

<firebase-app auth-domain="my-polymer-app.firebaseapp.com"
      database-url="https://my-polymer-app.firebaseio.com/"
      api-key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
</firebase-app>
<firebase-auth id="firebaseLogin" user="{{user}}" status-known="{{statusKnown}}" location="my-polymer-app.firebaseapp.com" provider="{{provider}}" on-error="errorHandler" on-user-created="userSuccessHandler" on-password-changed="us erSuccessHandler" on-password-reset="userSuccessHandler" on-user-removed="userSuccessHandler"></firebase-auth>

我尝试登录时遇到以下错误（我已在Firebase应用中设置了用户进行测试）：

my-firebase.html:122 Uncaught TypeError: this.$.firebaseLogin.login is not a function

这部分代码来自Google Web Components repo。

login: function() {
      var params;

      try {
        params = JSON.parse(this.params);
      } catch (e) {
        params = null;
      }

      if (this.provider == 'password') {
        params = params || {};
        params.email = this.email;
        params.password = this.password;
      }

      this.$.firebaseLogin.login(params);
    }

页面上firebaseLogin的每个实例周围都有红框。没有其他错误出现，所以不确定这意味着什么。如果有人能指出我在这里缺少什么，我将不胜感激。

Answer 1

使用signInWithEmailAndPassword函数代替登录函数，

this.$.firebaseLogin.signInWithEmailAndPassword(username, password);

在Polymer Starter Kit应用程序中添加电子邮件/密码firebase登录

1 个答案: