Polymerfire google auth not working

私はPolymerとFirebase（そしてプログラマーとしても）の新機能です.Googleで簡単なログインを行い、ユーザーがログインしていることを示しています。Google Authが有効ですFirebaseでログインしているユーザーがいないときは、ログアウトボタンを非表示にする必要がありますが、ログインボタンをクリックしても何も起こりません。ブラウザのコンソールに警告はありません。ここで私が使用しているコードは次のとおりです。Polymerfire google auth not working

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

出典

2016-12-23 jonathan canales

問題は、あなたがこのように、実際に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

出典

2016-12-23 05:25:40 tony19

あなたは正しい道に私を入れて、非常に多くのトニーありがとうございます。.. –

Polymerfire google auth not working

答えて

関連する問題