Firebase $ onAuth在Facebook的$ authWithOAuthRedirect之后有错误的authData

我正在尝试使用Facebook登录验证我的Firebase（Angularfire）应用的用户。

当我使用弹出式窗口进行身份验证时，一切都按预期工作，但支持尽可能多的浏览器（iOS上的Chrome不支持弹出式窗口，例如）我想使用重定向进行身份验证（$authWithOAuthRedirect）。

我已经证实了我在Facebook的设置是正确的（我的应用程序ID和秘密，对EG），但是当我在Facebook的一个重定向验证后重定向回我的应用程序，$onAuth大火，但我没有我的Facebook authData做。

相反，我有匿名authData。有点背景;所有用户如果未经其他方式认证（例如在此例中为Facebook），则匿名认证。

我不明白为什么会这样 - 用户现在应该通过Facebook进行身份验证，并有Facebook authData。我的代码

节选低于一些背景：

触发，当用户点击登录按钮

function logIn() { 
    firebaseAuth 
     .$authWithOAuthRedirect('facebook', function (error) { 
      if (error) { 
       console.log(error); 
      } 
     }); 
}

$onAuth（在我的角度应用程序的run）

function run ($rootScope, firebaseAuth, sessionStore) { 
    $rootScope 
     .$on('$routeChangeError', function (event, next, prev, error) { 
      if (error === 'AUTH_REQUIRED') { 
       console.log(error); 
      } 
     }); 

    $rootScope 
     .$on('$routeChangeSuccess', function (event, current, prev) { 
      $rootScope.title = current.$$route.title; 
     }); 

    firebaseAuth 
     .$onAuth(onAuth); 

    function onAuth (authData) { 
     console.log(authData); 
    } 
}

路由解析器t o否则匿名用户进行身份验证

function sessionState ($q, firebaseAuth) { 
    var deferred = $q.defer(); 

    firebaseAuth 
     .$requireAuth() 
     .then(deferred.resolve, guest); 

    return deferred.promise; 

    function guest() { 
     firebaseAuth 
      .$authAnonymously() 
      .then(deferred.resolve, rejected); 
    } 

    function rejected() { 
     deferred.reject('AUTH_REQUIRED'); 
    } 
}

路由解析（sessionState）检查是否用户已经通过身份验证，如果没有，尝试以匿名方式验证他们的身份。

在Facebook身份验证重定向之后，用户将已经通过身份验证，因此不需要进行匿名身份验证。

但是，看起来他们是？由于$onAuth将authData记录到控制台，并且它是匿名的。

任何与此有关的帮助将不胜感激！我相信它与我的路由解析器有关，因为弹出式身份验证正常工作（路由已经解决）。

编辑：我试图完全删除我的路由解析器，以防万一它是导致问题，但它没有区别。用户只是'未经认证'，而不是通过Facebook（在$authWithOAuthRedirect之后）或匿名认证。

更新：我尝试使用Twitter和重定向传输进行身份验证，并且遇到了完全相同的问题。我也尝试使用端口80，而不是端口3000，我的应用程序在本地服务，但没有喜悦。

UPDATE：当我关闭html5Mode模式在我的应用程序 - 和路线现在# s。开头 - $authWithOAuthRedirect完美的作品。由此我只能假设$authWithOAuthRedirect不支持AngularJS的html5Mode。任何人都可以确认这是一个问题，或者我是否需要更改我的代码以支持html5Mode和authWithOAuthRedirect？

例REPO下面是一个例子演示回购问题：https://github.com/jonathonoates/myapp

照照dist目录 - 你应该能够下载这个并运行应用程序来重现问题。在scripts/main.js是应用程序的JS;我已经添加了一些评论，但它很自我解释。

重现问题：点击'Facebook登录'按钮，你会被重定向到Facebook进行身份验证。 FB将重定向你回到应用程序，但是，这里存在的问题 - 你会不会进行认证，并返回的authData将是空的 - 你会在控制台中看到这个

UPDATE：当我添加hashPrefix in html5Mode eg

$locationProvider 
    .html5Mode(true) 
    .hashPrefix('!');

的应用工程，我所期望的 - 与Facebook和重定向交通工程验证。

夫妇niggles的，但：

的URL已#%3F附加到它，并使用/在浏览器的历史记录中看到。
这会在不支持History.pushState（html5Mode）的浏览器中重写网址#!，而一些不太先进的搜索引擎可能会因为“hashbang”而寻找HTML片段。

我会考虑从Facebook重新导向而不是使用hashPrefix来劫持URL。在URL中有一个__firebase_request_key，这可能是重要的，例如，

http://localhost:3000/#%3F&__firebase_request_key=

来源

2016-01-16 Jonathon Oates

乔纳森，你可以尝试下载2.4.0？一在那个版本中修复了哈希URL，我怀疑它会有帮助。 – Kato

然后，而不是代码摘录，我们将需要一个最小的repro。请参阅[创建一个mcve] – Kato

这里有一个MCVE让你看看 - 在这里，我已经验证了Facebook的重定向传输不能与'html5mode'打开。我还会用链接更新我的Q：https：//github.com/jonathonoates/myapp –

看起来这确实是Firebase和AngularJS的html5mode之间的不兼容性，正如您怀疑的那样。在重定向流程结束时，Firebase将URL作为“http://.../#？”，而Angular显然不喜欢这样做，因此它重定向到了“http://.../”。此重定向中断Firebase（页面在我们尝试auth对后端），因此无法完成身份验证过程。

我做了一个实验性的修复，以确保我们恢复的网址http://.../#“的重定向流量，这是角与快乐，从而防止问题的重定向结束时，如果你愿意，你可以在这里抓住它。https://mike-shared.firebaseapp.com/firebase.js

我会确保此修复程序进入的JS客户端的下一个版本，你可以确保我们对changelog的眼睛看到当它被释放。

来源

2016-02-03 17:37:36

感谢您的回复 - 这里需要大量的试验和错误，但我很高兴我们正在接近解决方案。有一点需要注意;我没有使用AngularJS 2 - 我在应用程序和repro中使用1.4.4。你认为这是同样的问题吗？ –

哦，对不起。那只是让我感到困惑。我想你提到过Angular 2，但我看到我错了。 :-)我会编辑我的答案。我使用你的repro应用程序调试了这个问题，所以它绝对是一样的。 :-) –

太棒了，我会寻找下一个版本的Firebase。希望它不会太遥远！相当有趣，我发现了一个错误;-) –

Firebase $ onAuth在Facebook的$ authWithOAuthRedirect之后有错误的authData

回答

相关问题