angularjs - Facebook的$ authWithOAuthRedirect后，Firebase $ onAuth的authData错误

Question

我正在尝试使用Facebook登录名验证我的Firebase(Angularfire)应用程序的用户。

使用弹出窗口进行身份验证时，一切正常，但要支持尽可能多的浏览器(例如，iOS上的Chrome不支持弹出窗口)，我想回退到使用重定向($authWithOAuthRedirect)进行身份验证。

我已经确认我在Facebook中的设置正确(例如，我的应用ID和 secret )，但是当我通过Facebook重定向进行身份验证后将我重定向回我的应用时，$onAuth会触发，但我没有我的Facebook authData。

相反，我有匿名的authData。有一点背景知识；如果未通过其他方式对所有用户进行身份验证，则将对所有用户进行匿名身份验证(例如在Facebook中)。

我看不出为什么会这样-用户现在应该通过Facebook进行身份验证，并拥有Facebook authData。

在某些情况下，以下是我的代码的异常(exception):

当用户单击登录按钮时触发

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

$onAuth(在我的Angular应用程序的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);
    }
}

路由解析器以其他方式匿名认证用户

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，但没有任何乐趣。

更新:当我在应用程序中关闭html5Mode模式时-现在路由以#开头-$authWithOAuthRedirect可以正常工作。由此，我只能假定$authWithOAuthRedirect不支持AngularJS的html5Mode。任何人都可以确认这是一个问题，还是需要更改我的代码以支持html5Mode和authWithOAuthRedirect？

示例REPO 这是一个演示该问题的示例repo:https://github.com/jonathonoates/myapp

在dist目录中查找-您应该能够下载该文件并运行该应用程序以重现该问题。在scripts/main.js中是应用程序的JS；我添加了一些评论，但这很容易解释。

重现该问题:单击“Facebook登录”按钮，您将被重定向到Facebook进行身份验证。 FB会将您重定向回应用程序，但这是问题所在-您将无法通过身份验证，并且返回的authData将为null-您将在控制台中看到此信息

更新:当我在hashPrefix中添加html5Mode时，例如

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

该应用程序符合我的预期-通过Facebook进行身份验证，并且重定向传输有效。

几个小问题:

该URL附加了#%3F，并且在浏览器的历史记录中可用/可见。

这将在不支持#!(History.pushState)的浏览器中使用html5Mode重写URL，并且某些不那么高级的搜索引擎可能会因为“hashbang”而寻找HTML片段。

从URL重定向回Facebook而不是使用hashPrefix时，我将调查该URL的劫持现象。 URL中有一个__firebase_request_key，可能很重要，例如

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

Answer 1

您似乎怀疑这确实是Firebase与AngularJS的html5mode不兼容的原因。在重定向流程结束时，Firebase将URL保留为“http://.../#？”，而Angular显然不喜欢这样，因此它重定向到了“http://.../”。此重定向中断了Firebase(在我们尝试执行以下操作时页面会重新加载)对后端进行身份验证)，因此它无法完成身份验证过程。

我进行了一项实验性修复，以确保在重定向流程结束时将URL还原为http://.../#“(Angular对此很满意)，从而避免了有问题的重定向。如果愿意，可以在此处进行抓取:https://mike-shared.firebaseapp.com/firebase.js

我将确保此修复程序进入JS客户端的下一版本。您可以随时关注我们的changelog，以了解何时发布。