Ionic Facebook 身份验证重定向问题

Posted 2023-05-06

【中文标题】Ionic Facebook 身份验证重定向问题

【英文标题】：Ionic Facebook Authentication Redirection Problem

【发布时间】：2019-11-16 23:56:24

【问题描述】：

我一步一步跟着这个教程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']);
        );
       
     );
    );

我希望在登录成功后，应用程序会使用路由器角度组件正确重定向。

【参考方案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 插件），因此 observable 不会改变，因为它会将我重定向回登录。

解决方案

解决方案是，在我使用插件成功执行登录后，我可以使用响应访问令牌作为凭据继续并使用 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']);
    );
);

【参考方案2】：

我将从解开代码开始。

检查日志

您可以使用 Chrome 查看正在发生的事情的输出并对其进行调试：

Using Chrome DevTools - Android Development - Ionic Documentation

在那里输入一些日志

在代码中加入一些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 教程。

【讨论】：

我从提供的代码中删除了日志，以尽量简化它的阅读。在模拟设备上进行测试时，Chrome 控制台显示了预期的输出，但路由器导航仍然无法正常工作（在角度区域内或之外）。没有错误，只是没有导航到我需要它的页面：/

您是否已注销路由器以查看其是否存在？ console.log(router: this.router);

就在那里，我在该服务中有许多其他功能，它们使用路由器导航到整个应用程序的不同页面。它在服务的构造函数中。