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.

Помогите пожалуйста в руководстве как убрать двойную попытку.

0 ответов

Другие вопросы по тегам