请分享如何使用<firebase-auth>
Polymer 元素的工作代码示例。
我有一个自定义<paper-button>
,我试图将其设置为用于用户身份验证的登录按钮。我想使用 Firebase 来执行用户身份验证服务。
请分享如何使用<firebase-auth>
Polymer 元素的工作代码示例。
我有一个自定义<paper-button>
,我试图将其设置为用于用户身份验证的登录按钮。我想使用 Firebase 来执行用户身份验证服务。
好像找到了一个 在这里。
<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>
我最近发现了一个更好的、新更新的解决方案版本。
但是,观察起来很棘手。它是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/
。