Google-Authentifizierung in Firebase zeigt leeren Bildschirm Progressive Web App

Question

Ich bin auf dem Weg, meine erste Progressive Web-App zu erstellen, die Firebase für die Speicherung von Daten verwendet. Ich verwende auch Gmail als Einstiegspunkt für alle Benutzer, die die App verwenden würden. Ich bin jedoch bei der Implementierung der Anmeldung festgefahren. Unten ist mein der Code für die Anmeldung:

html:

<button md-raised-button color="warn" (click)="logInGoogle()"><md-icon>group</md-icon>Sign in with google to enjoy the app</button> 

ts:

logInGoogle(){ 
    this.authService.loginWithGoogle().then(user => { 
     console.log("User is logged in"); 
     //this.router.navigate(['/addweather']); 
    }) 
    .catch(err => { 
     console.log('some error occured'); 
    }) 
    } 

Hier ist der Service:

loginWithGoogle() { 
    return this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); 
    } 

Auch die auth Zustand zu überprüfen, ich habe dies in meinem app.component.ts Erbauer:

this.authService.afAuth.authState.subscribe(
     (auth) => { 
     if(auth === null){ 
      console.log("Not Logged in."); 
      this.router.navigate(['login']); 
      this.isLoggedIn = false; 
     } 
     else { 
      console.log("Successfully Logged in."); 
      this.isLoggedIn = true; 
      this.router.navigate(['']); 
     } 
     } 
    ) 

Nun gibt es ein paar Verhaltensweisen, die die App zeigt, ist:

1. Diese Login-Funktionalität auf Browsern funktioniert Coz, wenn ich auf den Login-Button öffnet sich ein neues Fenster, autorisiert mich und kehrt zu demselben Tab zurück, auf dem die App geöffnet ist.

2. Wenn ich die App auf dem Bildschirm zu Hause hinzufügen und versuchen Sie es erneut einzuloggen es mir unter Optionen veranlassen:

Sobald ich auf Chrom klicken, ermächtigt sie mich und leitet mich zur App, aber die App zeigt jetzt einen leeren Bildschirm und der oAuth-Bildschirm geht gerade in einen unendlichen Verarbeitungszustand. Warum passiert das? Ich meine, sollte es nicht einfach so funktionieren, wie es funktionierte, wenn die App im Browser ausgeführt wurde.

Auch beim Klicken auf den Login-Button sollte die Option nicht wie im obigen Bild angezeigt werden; Stattdessen sollte es einen oAuth-Dialog öffnen. Ich habe versucht, dies zu tun auch mit dem folgenden Code:

logInGoogle(){ 
    var newWindow = window.open('https://accounts.google.com/o/oauth2/auth?scope=https://www.google.com/m8/feeds&client_id=9722-j3fstr5sh6pumie.apps.googleusercontent.com&redirect_uri=https://weatherapp321.firebaseapp.com/__/auth/handler&response_type=token', 'name', 'height=600,width=450'); 

    } 

Dies nun statt Aufforderung mit den Optionen öffnet einen Dialog, das gewünscht wird. Aber nach der Autorisierung landet das auf der Anmeldeseite. Warum passiert das? wenn ich bereits den Authentifizierungsstatus in app.component.ts überprüfe und den Benutzer auf die Startseite umadressiere, wenn der Benutzer autorisiert wird.

Danke für Geduld und Lesen bis zum Ende. Hilfe wäre sehr willkommen.

bearbeiten

Wie von Yevgen vorgeschlagen: mit signInWithRedirect Versuchte. Es funktionierte, als ich mich zum ersten Mal mit einer leichten Verzögerung von 2 Sekunden anmeldete. Aber dann loggte ich mich aus und versuchte mich erneut einzuloggen, ich bekomme einen leeren Bildschirm nachdem ich mich eingeloggt habe.

Answer 1

Sieht aus wie auf Mobilgeräten deine App öffnet keine neue Registerkarte deines aktuellen Browsers, sondern in einem neuen Browser, also so kann nach der Authentifizierung mit Google keine gültige Weiterleitung an Ihren ursprünglichen Browser zurückgeben.Wenn Sie mit Umleitung anmelden werden werden Sie im gleichen Browser bleiben, so dass Sie Ihren Service ändern müssen:

loginWithGoogle() { 
    return this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()); 
} 

Answer 2

ich auf meinem Haustier Web-App fast gleiches Verhalten hatte. Für mich selbst ich es von den nächsten Schritten lösen:

1. I Feuerbasis Initialisierung der app.module.ts

@NgModule({ 
 
    ... 
 
    providers: [ 
 
     { provide: APP_INITIALIZER, useFactory: appConfig, deps: [AuthService], multi: true } 
 
    ] 
 
}) 
 

 
export function appConfig(authService) { 
 
    const app = firebase.initializeApp({ 
 
     apiKey 
 
     authDomain 
 
    }); 
 
    return() => new Promise((resolve, reject) => { 
 
     firebase.auth() 
 
     .onAuthStateChanged(data => { 
 
      if (data) { 
 
       firebase.auth().currentUser.getToken() 
 
       .then((token: string) => authService.setToken(token);); 
 
      } 
 
      resolve(true); 
 
     }, error => resolve(true)); 
 
    }); 
 
}

2. Redirection bewegen LoginPage ich verwaltet in auth.guard.ts

export class AuthGuard implements CanActivate { 
 
    constructor(
 
     private authService: AuthService, 
 
     private router: Router 
 
    ) {} 
 

 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
 
     if (this.authService.isAuthenticated()) { 
 
      return true; 
 
     } else { 
 
      this.router.navigate(['/signin']); 
 
      return false; 
 
     } 
 
    } 
 
}

3. hatte ich den nächsten Code in meinem auth.service.ts

export class AuthService { 
 
    token: string; 
 

 
    signinUser(email: string, password: string) { 
 
     return new Promise((resolve, reject) => { 
 
      firebase.auth().signInWithEmailAndPassword(email, password) 
 
       .then(resp => { 
 
        firebase.auth().currentUser.getToken() 
 
         .then((token: string) => { 
 
          this.token = token; 
 
          resolve(resp); 
 
         }).catch(reject); 
 
        return resp; 
 
       }) 
 
       .catch(reject); 
 
      }); 
 
    } 
 

 
    signoutUser() { 
 
     return firebase.auth().signOut() 
 
      .then(resp => this.token = null); 
 
    } 
 

 
    getToken() { 
 
     firebase.auth().currentUser.getToken() 
 
      .then((token: string) => this.setToken(token)); 
 
     return this.token; 
 
    } 
 
    
 
    setToken(token) { 
 
     this.token = token; 
 
    } 
 

 
    isAuthenticated() { 
 
     return this.token != null; 
 
    } 
 
}

Ich hoffe, es wird hilfreich sein für dich.

Answer 3

Die Weiterleitungsauthentifizierung funktioniert nicht auf PWAs (wahrscheinlich verwendet in einigen Fällen verschiedene Browser-Instanzen). Sie können mithilfe der Pop-up-Auth Umströmung diese:

https://firebase.google.com/docs/auth/web/google-signin

Es würde wie folgt aussehen:

firebase.auth().signInWithPopup(provider).then(function(result) { 
    // This gives you a Google Access Token. You can use it to access the Google API. 
    var token = result.credential.accessToken; 
    // The signed-in user info. 
    var user = result.user; 
    // ... 
}).catch(function(error) { 
    // Handle Errors here. 
    var errorCode = error.code; 
    var errorMessage = error.message; 
    // The email of the user's account used. 
    var email = error.email; 
    // The firebase.auth.AuthCredential type that was used. 
    var credential = error.credential; 
    // ... 
}); 

Nur fließen Unterschied ist, dass es ein Pop-up-Browser startet Fenster, anstatt die aktuelle Instanz umzuleiten. Dies vereinfacht einige der Logik, um auch das Auth-Ergebnis zu erhalten. Wenn Sie es vorziehen, den normalen Fluss auf nicht-PWAs zu behalten, können Sie erkennen, ob die App auf dem Startbildschirm ins Leben gerufen wurde:

https://developers.google.com/web/updates/2015/10/display-mode