firebase - Polymerfire 在 Firebase 数据库中为新登录用户创建 uid 路径

Question

我是聚合物和火力的新手。我找不到关于聚合物的 firebase-document 元素的好文档。我的问题是当新用户登录时，如何使用他的 uid 在 firebase 数据库中创建一个对象？

另外，请指出一些关于如何使用polymerfire firebase 元素保存和查询数据的好例子。

Answer 1

首先，您需要firebase-auth来实现身份验证魔法。例如，如果您想进行 Google 登录，您需要：

1. 将这些属性分配给 firebase-auth 元素

   <firebase-auth
     id="auth"
     user="{{user}}"
     provider="google"
     signed-in="{{signedIn}}">
   </firebase-auth>
   

2. 将单击/点击事件侦听器分配给按钮

   <button on-tap="signInWithGoogle">Sign In With Google</button>
   

3. 在按钮单击/点击时调用 OAuth 身份验证方法

   signInWithGoogle: function() {
     this.$.auth.signInWithPopup();
   }
   

现在，这是您将用户信息保存到 firebase 数据库的方法：

1. 将这些属性分配给firebase-document元素（请注意，path此时该属性无关紧要，因为它将被save()方法覆盖）

   <firebase-document
      id="authDocument"
      data="{{userData}}">
   </firebase-document>
   

2. 扩展signInWithGoogle()方法

   signInWithGoogle: function() {
   
     // Chain then() method to the Promise
     this.$.auth.signInWithPopup().then(function(response) {
   
       // Update userData object with user information
       // returned with signInWithPopup()
       this.userData.displayName = response.user.displayName;
       this.userData.email = response.user.email;
   
       // Save userData object under /users/$uid. Note that at this
       // point authDocument's path is now changed to /users/$uid
       this.$.authDocument.save('/users', response.user.uid);
   
       // And don't forget to bind this
     }.bind(this));
   }
   

希望有帮助。这是单个元素的完整实现。请注意 firebase-app 元素在父级中。

<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-document.html">

<dom-module id="my-account">

  <template>

    <style>

      :host {
        display: block;
      }

    </style>

    <firebase-auth
        id="auth"
        user="{{user}}"
        provider="google"
        signed-in="{{signedIn}}">
    </firebase-auth>

    <firebase-document
        id="authDocument"
        data="{{userData}}">
    </firebase-document>

    <div hidden$="[[user]]">
      <button on-tap="signInWithGoogle">Sign In With Google</button>
    </div>
    <div hidden$="[[!user]]">
      <table>
        <tr><th>photoURL</th> <td><img src="[[user.photoURL]]" alt=""></td></tr>
        <tr><th>uid</th> <td>[[user.uid]]</td></tr>
        <tr><th>displayName</th> <td>[[user.displayName]]</td></tr>
        <tr><th>email</th> <td>[[user.email]]</td></tr>
        <tr><th>emailVerified</th> <td>[[user.emailVerified]]</td></tr>
      </table>

      <button on-tap="signOut">Sign Out</button>
    </div>

  </template>

  <script>

    Polymer({

      is: 'my-account',

      signInWithGoogle: function() {
        this.$.auth.signInWithPopup().then(function(response) {
          this.userData.displayName = response.user.displayName;
          this.userData.email = response.user.email;
          this.$.authDocument.save('/users', response.user.uid);
        }.bind(this));
      },

      signOut: function() {
        this.$.auth.signOut();
      }
    });

  </script>

</dom-module>