J'ai besoin d'un exemple de démonstration de l'élément <firebase-auth> ou Polymerfire dans Polymer 1.x

Question

Veuillez partager un exemple de code de travail sur l'utilisation de l'élément Polymer <firebase-auth>.

J'ai une coutume <paper-button> J'essaye de faire dans un bouton de connexion pour l'authentification d'utilisateur. Je veux utiliser Firebase pour exécuter le service d'authentification de l'utilisateur.

Here is the user documentation.

Here is the Github repository.

Answer 1

On dirait que j'en ai trouvé un. Here it is.

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="../firebase-element/firebase-auth.html"> 
<link rel="import" href="../paper-button/paper-button.html"> 
<!-- 
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](http://standardjs.com/) 
@demo https://hi9.uk/ 
--> 
<dom-module id="hi9-login"> 
    <template> 
    <firebase-auth id="firebaseLogin" user="{{user}}" status-known="{{statusKnown}}" location="https://hi9site.firebaseio.com" provider="google" on-error="errorHandler" on-user-created="userSuccessHandler" on-password-changed="userSuccessHandler" on-password-reset="userSuccessHandler" params="{{params}}" on-user-removed="userSuccessHandler"></firebase-auth> 
    <paper-button raised on-tap="logout" hidden$="{{computeLogoutHidden(statusKnown, user)}}"> Logout </paper-button> 
    <paper-button raised on-tap="login" hidden$="{{computeLoginHidden(statusKnown, user)}}"> {{loginText}} </paper-button> 
    </template> 
</dom-module> 
<script> 
(function() { 
    'use strict' 
    Polymer({ 
    is: 'hi9-login', 
    properties: { 
     params: { 
     type: Object, 
     value: {scope: 'email'} 
     }, 
     loginText :{ 
     value:"Login" 
     }, 
     provider: { 
     type: String, value: 'anonymous' 
     }, 
     message: { 
     type: String, value: '' 
     }, 
     email: { 
     type: String, value: '' 
     }, 
     password: { 
     type: String, value: '' 
     }, 
     user: { 
     type: Object, value: null, 
     notify: true 
     }, 
     uid: { 
     computed: 'returnVal(user.uid)', 
     notify: true 
     }, 
     statusKnown: { 
     type: Boolean 
     }, 
     show_model: { 
     type: Boolean, notify: true, 
     computed: 'computeLogoutHidden(statusKnown, user)' 
     } 
    }, 
    returnVal: function (val) { 
     if (val !== undefined && val !== null) { 
     return val 
     } else { 
     return undefined 
     } 
    }, 
    login: function() { 
     var params 
     try { 
     params = JSON.parse(this.params) 
     } catch (e) { 
     params = null 
     } 
     if (this.provider === 'password') { 
     params = params || {} 
     params.email = this.email 
     params.password = this.password 
     } 
     this.$.firebaseLogin.login(params) 
    }, 
    logout: function() { 
     this.$.firebaseLogin.logout() 
     window.location.href = "/" 
    }, 
    errorHandler: function (e) { 
     this.message = 'Error: ' + e.detail.message 
    }, 
    userSuccessHandler: function (e) { 
     this.message = e.type + ' success!' 
    }, 
    createUserHandler: function (e) { 
     this.$.firebaseLogin.createUser(this.email, this.password) 
    }, 
    changePasswordHandler: function (e) { 
     this.$.firebaseLogin.changePassword(this.email, this.password, this.newPassword) 
    }, 
    resetPasswordHandler: function (e) { 
     this.$.firebaseLogin.sendPasswordResetEmail(this.email) 
    }, 
    computePasswordHidden: function (provider) { 
     return provider !== 'password' 
    }, 
    computeCreateUserDisabled: function (email, password) { 
     return !email || !password 
    }, 
    computeChangePasswordDisabled: function (email, password, newPassword) { 
     return !email || !password || !newPassword 
    }, 
    computeResetPasswordDisabled: function (email, password) { 
     return !email || !password 
    }, 
    computeRemoveUserDisabled: function (email, password) { 
     return !email || !password 
    }, 
    computeLoginHidden: function (statusKnown, user) { 
     return !statusKnown || !!user 
    }, 
    computeLogoutHidden: function (statusKnown, user) { 
     return !statusKnown || !user 
    }, 
    computeLoginStatus: function (statusKnown, user) { 
     var d = new Date() 
     var n = d.getTime() 
     if (statusKnown && user) { 
     return 'Logged in' 
     } 
     if (statusKnown) { 
     return 'Logged out' 
     } 
     return 'Unknown (checking status...)' 
    }, 
    isAdmin: function (role) { 
     return role === 'admin' 
    } 
    }) 
    function clone (obj) { 
    var copy 
    // Handle the 3 simple types, and null or undefined 
    if (obj === null || typeof obj !== 'object') return obj 
    // Handle Date 
    if (obj instanceof Date) { 
     copy = new Date() 
     copy.setTime(obj.getTime()) 
     return copy 
    } 
    // Handle Array 
    if (obj instanceof Array) { 
     copy = [] 
     for (var i = 0, len = obj.length; i < len; i++) { 
     copy[i] = clone(obj[i]) 
     } 
     return copy 
    } 
    // Handle Object 
    if (obj instanceof Object) { 
     copy = {} 
     for (var attr in obj) { 
     if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]) 
     } 
     return copy 
    } 
    throw new Error("Unable to copy obj! Its type isn't supported.") 
    } 
})() 
</script> 

Answer 2

J'ai récemment trouvé une meilleure version d'une solution récemment mise à jour.

Cependant, il est difficile à observer. C'est le Polymerfire demo, également located here on Github.

Étapes de l'observer (à la ligne de commande):

git clone https://github.com/firebase/polymerfire 
cd polymerfire 
bower install 
polymer serve 
open http://localhost:8080/components/polymerfire/demo/ 

Vous pouvez également (en option) au lieu d'utiliser la dernière commande open, il suffit de naviguer (en utilisant votre navigateur) pour: http://localhost:8080/components/polymerfire/demo/.