首页 文章

Polymerfire谷歌认证无法正常工作

提问于
浏览 次
1

我正在尝试使用Google进行简单登录并显示用户已登录 . 在Firebase中启用了Google Auth . 当没有用户登录时，应该隐藏注销按钮，但是当我单击登录按钮时，没有任何反应 . 浏览器中没有警告's console. Here is the code that I' m使用：

<!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>
javascript html polymer polymerfire

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>

    demo

    如果您有自定义元素（例如， 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>

    demo

    回复于

相关问题