Polymerfire google auth not working

2019-07-26 23:48发布

站内问答 / JavaScript
1571 1 5

I'm new to Polymer and Firebase (and as a programmer as well), I'm trying to do a simple login with Google and show the user is logged in. Google Auth is enabled in Firebase. The logout button should be hidden when there is no user logged in, but when I click the login button, nothing happens. There are no warnings in the browser's console. Here is the code that I'm using:

<!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>

1条回答
一纸荒年 Trace。
2楼-- · 2019-07-27 00:15

The problem is that you're trying to use bindings outside a custom element, which actually requires a dom-bind template, like this:

<!-- 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

If you have a custom element (e.g., x-login), you wouldn't need the dom-bind template above. The element would be defined similarly:

<!-- 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>

Then, you could import that element into index.html:

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

demo

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)