angularjs – 来自Facebook的$authWithOAuthRedirect之后,Fireba

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

我已经确认我在Facebook中的设置是正确的(我的应用程序ID和秘密,例如)但是当我在使用重定向进行Facebook身份验证后重定向回我的应用程序时,$onAuth会触发,但我没有我的Facebook authData.

相反,我有匿名authData.有点背景;如果没有以其他方式验证所有用户,则匿名进行身份验证(例如,使用Facebook).

我无法找到为什么会这样 – 用户现在应该通过Facebook验证,并拥有Facebook authData.

在某些情况下,我的代码的例外情况如下：

用户单击登录按钮时触发

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

$onAuth(在我的Angular应用程序运行中)

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

    $rootScope
        .$on('$routeChangeSuccess',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模式 – 现在路由以#s开头 – $authWithOAuthRedirect完美运行.由此我只能假设$authWithOAuthRedirect不支持AngularJS的html5Mode.任何人都可以确认这是一个问题,还是我需要更改我的代码以支持html5Mode和authWithOAuthRedirect？

示例REPO以下是演示此问题的示例repo：https://github.com/jonathonoates/myapp

查看dist目录 – 您应该能够下载并运行应用程序以重现问题.在scripts / main.js中是应用程序的JS;我添加了几条评论,但这是非常自我解释的.

要重现问题：点击“Facebook登录”按钮,您将被重定向到Facebook进行身份验证. FB会将你重定向回应用程序,但这里存在问题 – 你将不会被验证,并且返回的authData将为null – 你会在控制台中看到这一点

更新：当我在html5Mode中添加hashPrefix时,例如

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

该应用程序正如我所期望的那样 – 通过Facebook验证和重定向传输工作.

几个小小的但是：

>网址有#？附加到它,并在浏览器的历史记录中可用/可见.
>这会用#重写URL！在不支持History.pushState(html5Mode)的浏览器中,由于’hashbang’,一些不太高级的搜索引擎可能会寻找HTML片段.

我将研究从Facebook重定向而不是使用hashPrefix来劫持URL.在URL中有一个__firebase_request_key,它可能很重要,例如

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