0
Я создал проект Firebase на основе Polymer Starter Kit и внес некоторые изменения в исправление маршрутизации, но всплывающее окно входа сразу закрывается и записывается в журнал ошибка:error-auth error «auth/popup-closed-by-user» 404 on popup redirect
The popup has been closed by the user before finalizing the operation.
_authenticate функции (в коде ниже) вызывается для аутентификации пользователя. Я смог правильно настроить его как на Facebook, так и на консоли Google, поэтому я не уверен, что означает ошибка.
Вот мой код:
<dom-module id="my-app">
<template>
!-- Firebase Setup -->
<firebase-app auth-domain="foodhop-manage.firebaseapp.com"
database-url="https://foodhop-manage.firebaseio.com"
api-key="AIzaSyA-1TEbd1EhlkPwjGBLNS74h3c5FNCHNo0"></firebase-app>
<!-- Firebase Authentication -->
<firebase-auth id="auth"
user="{{user}}"
signed-in="{{signedIn}}"
on-error="handleError"></firebase-auth>
<!-- App Routing -->
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<!-- Scroll Position Control -->
<app-scrollpos-control id="scrollpos" selected="[[page]]" reset></app-scrollpos-control>
<!-- Application -->
<app-header-layout>
<app-header condenses reveals shadow>
<app-toolbar>
<div main-title style="text-align:center;font-size:40px;padding-top:20px" class="font-beautify">FoodHop</div>
</app-toolbar>
<app-toolbar sticky>
<div class="flex"></div>
<paper-tabs selected="[[page]]" attr-for-selected="name" class="self-end">
<paper-tab link name="about">
<a href="/about" class="link" tabindex="-1">About</a>
</paper-tab>
<paper-tab link name="register" hidden$="[[signedIn]]">
<a href="/register" class="link" tabindex="-1">Register</a>
</paper-tab>
<paper-tab link name="login">
<a href="/login" class="link" tabindex="-1">Login</a>
</paper-tab>
</paper-tabs>
<div class="flex"></div>
</app-toolbar>
</app-header>
<div>
<iron-pages selected="[[page]]"
attr-for-selected="name"
fallback-selection="404"
role="main">
<my-about name="about"></my-about>
<my-register name="register"></my-register>
<my-login name="login"
signed-in="[[signedIn]]"
user="[[user]]"></my-login>
</iron-pages>
</div>
<!-- Go to Console -->
<!-- <paper-fab icon="input"></paper-fab> -->
</app-header-layout>
<paper-toast id="toast"></paper-toast>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
user: {
type: Object,
observer: '_userChanged'
},
signedIn: {
type: Boolean,
observer: '_signedInChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
listeners: {
'register': '_register',
'authenticate': '_authenticate',
'logout': '_logout',
'showToast': 'showToast'
},
ready: function() {
this.$.auth.signOut();
},
toast: function(message) {
this.$.toast.text = message;
this.$.toast.show(message);
},
showToast: function(e) {
this.$.toast.show({
text: e.detail.message
});
},
_authenticate: function(e) {
var provider = e.detail.provider;
this.$.auth.signInWithPopup(provider)
.then(function(response) {
console.log('successful!', response);
}).catch(function(error){
console.log('oops!', error);
});
},
_userChanged: function(user) {
// console.log(user);
},
_signedInChanged: function(signIn) {
console.log(signIn);
if (signIn) {
this.page = 'login';
this.set('route.path', '/login');
this.toast('Sweet. Thanks for logging in!');
} else {
this.toast('Y U NO sign in?');
}
},
_logout: function() {
this.$.auth.signOut();
},
_register: function() {
this.page = 'register';
this.set('route.path', '/register');
},
_routePageChanged: function(page) {
this.page = page || 'about';
},
_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 = '404';
},
handleError: function(e) {
console.log(e);
}
});
</script>
</dom-module>