authentication - 我需要一个工作示例演示或 Polymer 1.x 中的 Polymerfire 元素

Question

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

我有一个自定义<paper-button>，我试图将其设置为用于用户身份验证的登录按钮。我想使用 Firebase 来执行用户身份验证服务。

这是用户文档。

这是 Github 存储库。

Answer 1

好像找到了一个 在这里。

<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 演示，也位于 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/。