離子Facebook身份驗證重定向問題

Question

我一步一步地遵循了本教程https://ionicthemes.com/tutorials/about/ionic-facebook-login

我遇到的問題是登錄后，我的應用程序沒有重定向到我需要的頁面。 在運行Android 9的模擬Pixel 2設備上進行測試時，控制台上沒有錯誤。 這是用於處理身份驗證的代碼：

const permissions = ['public_profile', 'email'];

await this.facebook.login(permissions).then(response => {
    this.uid = response.authResponse.userID;
    this.facebook.api('/me?fields=name,email', permissions)
    .then(user => {
    user.picture = 'https://graph.facebook.com/' + userId + 
    '/picture?type=large';
    this.dataService.getUser(this.uid).subscribe((data) => {
      if (data.data() !== undefined) {
        if (data.data().isNew) {
          this.zone.run(() => {
            this.router.navigate(['/profile']);
          });
        } else {
          this.zone.run(() => {
            this.router.navigate(['/home']);
          });
        }
      } else {
        this.dataService.addUser(....)}).then(() => {
          this.zone.run(() => {
            this.router.navigate(['/profile']);
        });
       }
     });
    });

我希望登錄成功后，可以使用路由器角度組件正確重定向應用。

Answer 1

問題原因

我認為問題與我的Angular Fire Auth Observable有關：

this.afAuth.auth.onAuthStateChanged((user) => {
              console.log('user state:', user);
              if (user) {
                this.fireUser = user;
                this.deviceStorage.set('uid', user.uid);
                this.dataService.userNewListener(user.uid);
              } else {
                    this.deviceStorage.set('uid', '');
                    this.router.navigate(['/login']);
              }
});

由於我使用的是本機解決方案（facebook cordova插件），因此可觀察性不會更改，因為它會將我重定向回登錄。

解

解決方案是，在使用插件成功執行登錄后，我可以使用響應訪問令牌作為憑證來繼續進行操作，並使用AngularFire進行登錄：

this.facebook.login(permissions).then(response => {

    const facebookCredential = firebase.auth.FacebookAuthProvider.credential(response.authResponse.accessToken);
    this.afAuth.auth.signInWithCredential(facebookCredential).then(() => {
              console.log('navigating profile');
              this.router.navigate(['/profile']);
    });
});

Answer 2

我將從解開代碼開始。

檢查日志

您可以使用Chrome瀏覽器查看發生的情況並對其進行調試：

使用Chrome DevTools-Android開發-Ionic文檔

在那里放一些日志

將一些console.logs放入代碼中，例如：

  if (data.data() !== undefined) {
    if (data.data().isNew) {
      this.zone.run(() => {
        console.log("routing to profile");
        this.router.navigate(['/profile']);
      });
    } else {
      this.zone.run(() => {
        console.log("routing to home");
        this.router.navigate(['/home']);
      });
    }
  } else {
    this.dataService.addUser(....)}).then(() => {
      this.zone.run(() => {
        console.log("adduser - routing to profile");
        this.router.navigate(['/profile']);
    });
  }

教程本身可以工作嗎？

剝離Firebase dataService調用，看看它是否達到了這一點。

您需要區域嗎？

我認為這是Ionic4 beta版的代碼，但大部分已經解決。 我不完全了解它是什么，但也許您正在關注過時的Firebase教程。