Polymerfire google auth not working

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>

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

Polymerfire google auth not working

问题:

回答1:

收藏的人(0)

Polymerfire google auth not working

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮