PWA, использующий Polymer 2.0 при установке на устройстве Android, требует двойной попытки входа
Я реализовал PWA, используя Polymer 2.0. Для аутентификации я использую Firebase Polymerfire.
Я сталкиваюсь с проблемой входа в Twitter и Facebook с помощью опции signinwithredirect, которую пользователь должен повторить дважды. 1-й раз пользователь инициирует аутентификацию. Он перенаправляется на страницу входа соответствующего провайдера, а в случае успеха перенаправляется на мою целевую страницу PWA. Но на целевой странице, настроенной как URL перенаправления, ничего не происходит. Затем второй раз пользователь снова нажимает на попытку входа в систему, и теперь его не спрашивают о входе на страницу входа провайдера, а просто перенаправляют на целевую страницу, и пользователь успешно входит в систему.
Вот фрагмент кода. Не уверен, что не так, и я много чесал голову, чтобы исправить это.
Index.html - это страница, на которой весь родительский элемент my-app.html находится с app-routing. my-app.html имеет все остальные дочерние страницы.
мой-app.html
<script src="bower_components/firebase/firebase-app.js"></script>
<script src="bower_components/firebase/firebase-auth.js"></script>
<script src="bower_components/firebase/firebase-database.js"></script>
<script src="bower_components/firebase/firebase-firestore.js"></script>
<script src="bower_components/firebase/firebase-messaging.js"></script>
<script src="bower_components/firebase/firebase-storage.js"></script>
....
<!-- and other necessary dependencies in the file -->
<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
</app-location>
<app-route
route="{{route}}"
pattern="[[rootPath]]:page"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
<app-drawer-layout fullbleed narrow="{{narrow}}" has-scrolling-
region>
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
<div style="height: 100%; overflow: auto;">
<app-toolbar condenses>
<template is="dom-if" if="[[!user]]">
<span id="tabMenu"> <h6>Menu</h6></span>
</template>
<template is="dom-if" if="[[user]]">
<span id="tabUser"> <h6>Hi
[[user.displayName]]!</h6></span>
</template>
</app-toolbar>
<a name="dashboard" href="[[rootPath]]dashboard-page">
<paper-button><iron-icon icon="icons:select-all"></iron-icon>
<h5>Dashboard</h5></paper-button>
</a>
<a name="transactions" href="[[rootPath]]transactions-page">
<paper-button><iron-icon icon="icons:select-all"></iron-icon>
<h5>Bank Transactions</h5></paper-button>
</a>
</div>
</app-drawer>
<app-header-layout has-scrolling-region>
<div style="float:left; width:100%">
<div style="float:left; width:10%;">
<paper-icon-button id="menuElement" disabled icon="icons:menu"
drawer-toggle halign="left"></paper-icon-button>
</div>
</div>
<div fit class="content">
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="not-found-404"
role="main">
<landing-page name="landing-page" user="{{user}}" signedin="
{{signedIn}}" statusknown="{{statusKnown}}" ></landing-page>
<dashboard-page name="dashboard-page" user="{{user}}" signedin="
{{signedIn}}" statusknown="{{statusKnown}}" ></dashboard-page>
...
</iron-pages>
</div>
</app-header-layout>
</app-drawer-layout>
Login-page.html (для реализации одной реализации провайдера)
twitterSignIn(){
console.log('inside login-page twitterSignIn()');
var provider = new firebase.auth.TwitterAuthProvider();
return this.$.auth.signInWithRedirect(provider).then(function (result){
console.log('Twitter result' + JSON.stringify(result));
console.log('Firstime Login: ' + result.additionalUserInfo.isNewUser);
document.getElementById('toast').show(result.user.displayName +' signed in using Twitter');
});
firebase.auth().getRedirectResult().then(result => {
if(result.user!== null)
{
console.log('result =>'+JSON.stringify(result));
console.log('result.user =>'+result.user.uid);
console.log('currentUser =>'+ JSON.stringify(firebase.auth().currentUser) );
if(firebase.auth().currentUser !== null)
{
if (result.user.uid === firebase.auth().currentUser.uid) {
console.log('user state changed - login success');
console.log('isNew = ' + result.additionalUserInfo.isNewUser);
} else {
console.log('new user signed in');
}
}
else
{
console.log('Current user is null');
}
}
else{
console.log('User signed in is = '+JSON.stringify(result));
}
})
.catch((err) => {
console.log('Some error = '+err);
});
}
в Twitter Developer API в настройках приложения у меня URL обратного вызова настроен так, как указано в настройках проекта firebase. например, https://firebaseproject/__/auth/handler.
Если доступ к PWA осуществляется через Chrome, то все работает нормально. При первой попытке вход в твиттер перенаправляется и успешно переходит на целевую страницу приложения PWA.
Помогите пожалуйста в руководстве как убрать двойную попытку.