Firebase 中的 Google 身份驗證顯示空白屏幕 Progressive Web App

Question

我正在創建我的第一個使用 firebase 存儲數據的 Progressive Web 應用程序。 我還使用Gmail作為所有將使用該應用程序的用戶的入口點。 但是我堅持實現登錄。 下面是我的登錄代碼：

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');
    })
  }

這是服務：

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

還要檢查auth狀態，我在app.component.ts構造函數中有這個：

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(['']);
        }
      }
    )

現在，該應用程序顯示了幾種行為：

1. 這個登錄功能在瀏覽器上工作正常，因為如果我點擊登錄按鈕，它會打開一個新窗口，授權我並返回到打開應用程序的同一個選項卡。

2. 當我將應用程序添加到主屏幕並嘗試再次登錄時，它會提示我輸入以下選項：

一旦我點擊 chrome，它就會授權我並將我重定向到該應用程序，但該應用程序現在顯示一個空白屏幕，而 oAuth 屏幕只是進入無限處理狀態。 為什么會這樣？ 我的意思是它不應該像在瀏覽器中運行應用程序時那樣正常工作。

同樣在單擊登錄按鈕時，它不應提示如上圖所示的選項； 相反，它應該打開一個 oAuth 對話框。 我也嘗試使用以下代碼執行此操作：

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');

  }

現在，這不是提示選項，而是打開一個所需的對話框。 但是在授權之后，這讓我回到了登錄頁面。 為什么會這樣？ 當我已經檢查app.component.ts的身份驗證狀態並在用戶獲得授權時將用戶重定向到主頁時。

感謝您的耐心和閱讀到最后。 幫助將不勝感激。

編輯

正如signInWithRedirect所建議的：嘗試使用signInWithRedirect 。 當我第一次登錄時它有 2 秒的輕微延遲。 但是后來我注銷並嘗試再次登錄，登錄后出現空白屏幕。

Answer 1

我的寵物網絡應用程序上的行為幾乎相同。 為了我自己，我將通過以下步驟解決它：

1. 我將app.module.ts初始化移動到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. 重定向到我在auth.guard.ts管理的LoginPage

 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. 我在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; } } 

我希望它對你有所幫助。

Answer 2

在移動設備上看，您的應用程序會打開身份驗證，而不是當前瀏覽器的新選項卡，但是在新的瀏覽器中，因此在使用Google進行身份驗證后，無法將有效的重定向返回到初始瀏覽器。 如果您使用重定向登錄，則會保留在同一瀏覽器中，因此您需要將服務更改為：

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

Answer 3

重定向auth不適用於PWA（在某些情況下可能使用不同的瀏覽器實例）。 您可以使用彈出式身份驗證流程解決此問題：

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

它看起來像這樣：

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;
  // ...
});

只有流量差異是它啟動彈出瀏覽器窗口，而不是重定向當前實例。 這簡化了獲取auth結果的一些邏輯。 如果您希望在非PWA上保留正常流量，則可以檢測應用程序是否從主屏幕啟動：

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

Answer 4

我遇到了同樣的問題， 這對我有用，如果我能提供幫助，請告訴我。