我需要 Polymer 1.x 中 <firebase-auth> 或 Polymerfire 元素的工作示例演示

Question

请分享如何使用 <firebase-auth> 聚合物元素的工作代码示例。

我有一个自定义 <paper-button> 我正在尝试将其制作成用于用户身份验证的登录按钮。我想用Firebase做用户认证服务。

Here is the user documentation.

Here is the Github repository.

Answer 1

看来我找到了一个。 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

我最近找到了一个更好的新更新版本的解决方案。

然而，观察起来很棘手。就是 Polymerfire demo, also located here on Github.

观察它的步骤（在命令行）：

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

您也可以（可选）不使用最后一个 open 命令，只需导航（使用您的浏览器）到：http://localhost:8080/components/polymerfire/demo/.