Firebase Polymerfire:&x27;使用电子邮件和密码登录';未定义的
我正在尝试为我的应用程序身份验证实施Firebase身份验证,但我得到一个Firebase Polymerfire:&x27;使用电子邮件和密码登录';未定义的,firebase,firebase-authentication,polymer-1.0,polymerfire,Firebase,Firebase Authentication,Polymer 1.0,Polymerfire,我正在尝试为我的应用程序身份验证实施Firebase身份验证,但我得到一个无法读取属性“signInWithEmailAndPassword”的未定义错误 下面是代码 index.html <!-- @license Copyright (c) 2016 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http:
无法读取属性“signInWithEmailAndPassword”的未定义错误
下面是代码
index.html
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ProcWeb</title>
<meta name="description" content="My App description">
<link rel="icon" href="/images/favicon.ico">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/bower_components/platinum-sw/platinum-sw-elements.html">
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/polymerfire.html">
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body unresolved>
<!-- Configure Service Worker caching: -->
<platinum-sw-register
auto-register
skip-waiting
clients-claim
reload-on-install
href="/service-worker.js">
<platinum-sw-cache
default-cache-strategy="networkFirst">
</platinum-sw-cache>
</platinum-sw-register>
<!-- Configure Firebase app: -->
<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com">
</firebase-app>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!--<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">-->
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>ProcWeb</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">Home</a>
<a name="view1" href="/view1">Gestão de Clientes</a>
<a name="view2" href="/view2">Gestão de Processos</a>
<a name="view3" href="/view3">Agenda</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>ProcWeb</div>
</app-toolbar>
</app-header>
<!-- Configure Firebase app: -->
<!--<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com"
storageBucket="procweb-28a01.appspot.com"
messagingSenderId="621427834965">
</firebase-app>-->
<firebase-auth
id="auth"
app-name="procWeb"
user="{{user}}"
on-error="showError">
</firebase-auth>
<div hidden$="[[user]]" class="card">
<h3>Email/Password</h3>
<form on-submit="signInWithEmailAndPassword">
<paper-input label="Email" type="email" value="{{email}}"></paper-input>
<paper-input label="Password" type="password" value="{{password}}"></paper-input>
<paper-button type="submit" on-tap="signIn" raised class="custom indigo">Sign In</paper-button>
</form>
</div>
<div hidden$="[[!user]]">
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</div>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
signIn: function() {
// firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(function(response){
// this.page = 'view1';
// }).catch(function(error){
// console.log(error);
// });
this.$.auth.signInWithEmailAndPassword(this.email, this.password).then(function(response){
}).catch(function(error){
});
}
});
})();
</script>
</dom-module>
ProcWeb
//设置聚合物选项
窗口聚合物={
dom:“影子”,
懒汉:没错
};
//如果浏览器不支持本机Web组件,请加载webcomponentsjs polyfill
(功能(){
"严格使用",;
var onload=函数(){
//对于本机导入,手动激发WebComponentsReady so用户代码
//可以为本机导入和多填充导入使用相同的代码路径。
如果(!window.HTMLImports){
document.dispatchEvent(
新的CustomEvent('WebComponentsReady',{bubbles:true})
);
}
};
var webComponentsSupported=(
文档中的“registerElement”
&&document.createElement(“链接”)中的“导入”
&&document.createElement(“模板”)中的“内容”
);
如果(!WebComponents受支持){
var script=document.createElement('script');
script.async=true;
script.src='/bower_components/webcomponentsjs/webcomponents lite.min.js';
script.onload=onload;
document.head.appendChild(脚本);
}否则{
onload();
}
})();
//加载预缓存服务工作者
if(导航器中的“serviceWorker”){
addEventListener('load',function()){
register('/service-worker.js');
});
}
身体{
保证金:0;
字体系列:“Roboto”,“Noto”,无衬线;
线高:1.5;
最小高度:100vh;
背景色:#eeeeee;
}
my app.html
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ProcWeb</title>
<meta name="description" content="My App description">
<link rel="icon" href="/images/favicon.ico">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/bower_components/platinum-sw/platinum-sw-elements.html">
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/polymerfire.html">
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body unresolved>
<!-- Configure Service Worker caching: -->
<platinum-sw-register
auto-register
skip-waiting
clients-claim
reload-on-install
href="/service-worker.js">
<platinum-sw-cache
default-cache-strategy="networkFirst">
</platinum-sw-cache>
</platinum-sw-register>
<!-- Configure Firebase app: -->
<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com">
</firebase-app>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!--<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">-->
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>ProcWeb</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">Home</a>
<a name="view1" href="/view1">Gestão de Clientes</a>
<a name="view2" href="/view2">Gestão de Processos</a>
<a name="view3" href="/view3">Agenda</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>ProcWeb</div>
</app-toolbar>
</app-header>
<!-- Configure Firebase app: -->
<!--<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com"
storageBucket="procweb-28a01.appspot.com"
messagingSenderId="621427834965">
</firebase-app>-->
<firebase-auth
id="auth"
app-name="procWeb"
user="{{user}}"
on-error="showError">
</firebase-auth>
<div hidden$="[[user]]" class="card">
<h3>Email/Password</h3>
<form on-submit="signInWithEmailAndPassword">
<paper-input label="Email" type="email" value="{{email}}"></paper-input>
<paper-input label="Password" type="password" value="{{password}}"></paper-input>
<paper-button type="submit" on-tap="signIn" raised class="custom indigo">Sign In</paper-button>
</form>
</div>
<div hidden$="[[!user]]">
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</div>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
signIn: function() {
// firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(function(response){
// this.page = 'view1';
// }).catch(function(error){
// console.log(error);
// });
this.$.auth.signInWithEmailAndPassword(this.email, this.password).then(function(response){
}).catch(function(error){
});
}
});
})();
</script>
</dom-module>
:主持人{
--app原色:#4285f4;
--app二次颜色:黑色;
显示:块;
}
应用程序标题{
颜色:#fff;
背景色:var(--app原色);
}
应用程序标题纸图标按钮{
--纸张图标按钮墨水颜色:白色;
}
1.出票人名单{
利润率:0.20px;
}
.出票人名单a{
显示:块;
填充:0 16px;
文字装饰:无;
颜色:var(--app二次色);
线高:40px;
}
.抽屉列表a.已选定{
颜色:黑色;
字体大小:粗体;
}
:主持人{
显示:块;
填充:10px;
}
ProcWeb
电子邮件/密码
登录
(功能(){
"严格使用",;
聚合物({
是:“我的应用程序”,
特性:{
第页:{
类型:字符串,
reflectToAttribute:true,
观察者:''u pageChanged'
}
},
观察员:[
“_routePageChanged(routeData.page)”
],
_routePageChanged:功能(第页){
this.page=page | |“view1”;
},
_页面更改:功能(第页){
//按需加载页面导入。如果失败,则显示404页面
var resolvedPageUrl=this.resolveUrl('my-'+page+'.html');
this.importHref(resolvedPageUrl,null,this.\u showPage404,true);
},
_showPage404:函数(){
this.page='view404';
},
签名:函数(){
//firebase.auth().signiWithEmailandPassword(this.email,this.password)。然后(函数(响应){
//this.page='view1';
//}).catch(函数(错误){
//console.log(错误);
// });
this.$.auth.signiWithEmailandPassword(this.email,this.password)。然后(函数(响应){
}).catch(函数(错误){
});
}
});
})();
我用的是Polymer 1.0和Firebase 3.0。
我错过什么了吗?谢谢。试着取出表单标签。但它仍然不起作用,因为this.email和this.password将是未定义的,因为它们不是您元素的属性。嗨@RyanTyler,谢谢,但它不起作用。我基本上只是通过将firebase应用程序元素复制到每个iron页面来实现这一点。没有找到解决此问题的正确方法。请取出表单标签。但它仍然不起作用,因为this.email和this.password将是未定义的,因为它们不是您元素的属性。嗨@RyanTyler,谢谢,但它不起作用。我基本上只是通过将firebase应用程序元素复制到每个iron页面来实现这一点。还没有找到一个合适的解决办法