Polymer 1.x ürününde <firebase-auth> veya Polymerfire öğesinin çalışan bir örnek tanıtımına ihtiyacım var.

Question

Lütfen <firebase-auth> Polimer öğesinin nasıl kullanılacağına ilişkin bir çalışma kodu örneği paylaşın.

Özel bir <paper-button> sahibiyim Kullanıcı kimlik doğrulaması için bir giriş yapmaya çalışıyorum. Kullanıcı kimlik doğrulama hizmetini gerçekleştirmek için Firebase'i kullanmak istiyorum.

Here is the user documentation.

Here is the Github repository.

Answer 1

Bir tane buldum gibi görünüyor. 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

Kısa bir süre önce bu çözümün daha iyi ve yeni güncellenmiş bir sürümünü buldum. Bununla birlikte, gözlemlemek zor bir yöntemdir. Polymerfire demo, ayrıca located here on Github.

Adımlar (komut satırında) bunu gözlemlemek:

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

yapabilirsiniz ayrıca (isteğe bağlı olarak) yerine göre, basitçe (tarayıcınızı kullanarak) gezinmek son open komutu kullanarak: http://localhost:8080/components/polymerfire/demo/.