Ионная проблема перенаправления аутентификации Facebook

Question

Я следовал этому уроку шаг за шагом https://ionicthemes.com/tutorials/about/ionic-facebook-login

Проблема, с которой я столкнулся, заключается в том, что после входа мое приложение не перенаправляет на нужную мне страницу. Нет ошибки на консоли при тестировании этого на эмулированном устройстве Pixel 2 под управлением Android 9. Вот код для обработки аутентификации:

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 - Ионная документация

Положите туда логин

Поместите некоторые 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, но в основном это было решено. Я не до конца понимаю, что это такое, но, возможно, вы читаете устаревшее руководство по Firebase.