Polymerfire google auth ne fonctionne pas

Je suis nouveau à Polymer et Firebase (et en tant que programmeur ainsi), j'essaie de faire une connexion simple avec Google et montrer que l'utilisateur est connecté. Google Auth est activé dans Firebase. Le bouton de déconnexion doit être masqué lorsqu'il n'y a pas d'utilisateur connecté, mais lorsque je clique sur le bouton de connexion, rien ne se passe. Il n'y a pas d'avertissement dans la console du navigateur. Voici le code que j'utilise:Polymerfire google auth ne fonctionne pas

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

Source

2016-12-23 jonathan canales

Le problème est que vous essayez d'utiliser les liaisons en dehors d'un élément personnalisé, ce qui nécessite en fait un modèle dom-bind, comme ceci:

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

Si vous avez un élément personnalisé (par exemple, x-login), vous auriez pas besoin du modèle dom-bind ci-dessus. L'élément serait défini similaire:

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

Ensuite, vous pouvez importer cet élément dans index.html:

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

demo

Source

2016-12-23 05:25:40 tony19

Merci beaucoup Tony, vous me mettez dans le bon chemin .. –

Polymerfire google auth ne fonctionne pas

Répondre

Questions connexes