1

私は Polymer と Firebase を初めて使用します (そしてプログラマーとしても)。Google で簡単なログインを行い、ユーザーがログインしていることを表示しようとしています。Google Authは Firebase で有効になっています。ログインしているユーザーがいない場合、ログアウト ボタンは非表示にする必要がありますが、ログイン ボタンをクリックしても何も起こりません。ブラウザのコンソールに警告はありません。私が使用しているコードは次のとおりです。

<!DOCTYPE html>
<html>
 <head>
   <link rel="import" href="bower_components/polymerfire/firebase-app.html">
   <link rel="import" href="bower_components/polymerfire/firebase-auth.html">
   <link rel="import" href="bower_components/paper-button/paper-button.html">
</head>

  <body>
    <firebase-app
     auth-domain="xxx"
   database-url="xxxx"
  api-key="xxxxx">
 </firebase-app>

  <firebase-auth
   id="auth"
   user="{{user}}"
   status-known="{{statusKnown}}"
   provider="google">
  </firebase-auth>


   <template is="dom-if" if="[[user]]">
     <h1>Welcome [[user.displayName]]</h1>
</template>

  <paper-button raised on-tap="login" hidden$="[[user]]">Sign In</paper-button>
  <paper-button raised on-tap="logout" hidden$="[[!user]]">Sign Out</paper-button>

 </body>

 <script>
    Polymer({
      is: 'my-login',
     properties: {
      user: {
        type: Object
      },
      statusKnown: {
        type: Object
      }
    },
    login: function() {
      return this.$.auth.signInWithPopup();
    },
    logout: function() {
      return this.$.auth.signOut();
    },
  });
 </script>
 </html>
4

1 に答える 1

3

dom-bind問題は、次のように、実際にはテンプレートが必要なカスタム要素の外でバインディングを使用しようとしていることです。

<!-- index.html -->
<body>
  <template is="dom-bind" id="t">
    <x-foo data="{{data}}"></x-foo>
  </template>
  <script>
    var t = document.getElementById('t');
    t.data = 'hello world';
  </script>
</body>

デモ

カスタム要素 (例: ) がある場合、上記のテンプレートx-loginは必要ありません。dom-bind要素は同様に定義されます。

<!-- x-login.html -->
<dom-module id="x-login">
  <template>
    <firebase-app name="codepen"
                  api-key="AIzaSyDKI6ehwhVnQ-CcrtILhV6QhPukE9ZfarQ"
                  auth-domain="codepen-demos-bc5f2.firebaseapp.com"
                  database-url="https://codepen-demos-bc5f2.firebaseio.com">
    </firebase-app>

    <firebase-auth id="auth"
                   app-name="codepen"
                   provider="google"
                   signed-in="{{signedIn}}"
                   status-known="{{statusKnown}}"
                   user="{{user}}">
    </firebase-auth>

    <template is="dom-if" if="[[user]]">
      <h1>Welcome [[user.displayName]]</h1>
    </template>

    <paper-button raised on-tap="login" hidden$="[[user]]">Sign In</paper-button>
    <paper-button raised on-tap="logout" hidden$="[[!user]]">Sign Out</paper-button>
  </template>

  <script>
    Polymer({
      is: 'x-login',
      properties: {
        user: {
          type: Object
        },
        statusKnown: {
          type: Object
        }
      },
      login: function() {
        return this.$.auth.signInWithPopup();
      },
      logout: function() {
        return this.$.auth.signOut();
      },
    });
  </script>
</dom-module>

index.html次に、その要素を次のようにインポートできます。

<head>
  <link rel="import" "x-login.html">
  ...
</head>
<body>
  <x-login></x-login>
</body>

デモ

于 2016-12-23T05:25:40.777 に答える