Firebase $authWithOAuthRedirect 不会在没有页面刷新的情况下调用 $onAuth [英] Firebase $authWithOAuthRedirect doesn't call $onAuth without page refresh

问题描述

我按照 official 设置了一个简单的 Firebase Facebook OAuth 登录设置，如下所示Ionic Firebase Facebook 登录教程.

问题是，一旦我使用 Facebook 按钮点击登录，我就会被重定向到 Facebook，我登录后又被重定向回我的应用程序.但是，问题是我停留在登录页面.奇怪的是，如果我通过按 F5 物理刷新我的浏览器(使用 ionic serve 进行测试)，onAuth 会触发并且我被重定向到 Items页.如果我不刷新浏览器，则不会调用 onAuth.

有人遇到过这个问题吗?你是怎么解决的?

请注意，是的，我做了我的研究(并且有点开始失去它)，但无法让它工作.我搜索了 SO，尝试使用来自 Google 群组的 $timeout，尝试调用 $scope.$apply()，但都无济于事 - 所以请帮我找出我做错了什么?

.controller('AppCtrl', function($scope, Items, Auth, $state, $ionicHistory) {$scope.login = 函数(提供者){Auth.$authWithOAuthRedirect(provider).then(function(authData) {}).catch(函数(错误){if (error.code === "TRANSPORT_UNAVAILABLE") {Auth.$authWithOAuthPopup(provider).then(function(authData) {});} 别的 {控制台日志(错误)；}});};$scope.logout = function() {Auth.$unauth();$scope.authData = null;$window.location.reload(true);};Auth.$onAuth(function(authData) {如果(authData === null){console.log("尚未登录");$state.go('app.login');} 别的 {console.log("登录身份", authData.uid);$ionicHistory.nextViewOptions({禁用返回:true});$state.go('app.items');}$scope.authData = authData;//这将在我们的视图中显示用户名});})

<ion-content padding="true"><div ng-if="!authData"><button class="button button-positive button-block" ng-click="login('facebook')">使用Facebook登录</button>

<div ng-if="authData.facebook"><div class="card"><div class="item item-text-wrap">你好{{authData.facebook.displayName}}！</div>

<button class="button button-assertive button-block" ng-click="logout()">注销</button>

</离子含量></ion-view>

我通过使用 $timeout 解决了它:

$timeout(function(){Auth.$onAuth(function(authData) {如果(authData === null){console.log("尚未登录");$state.go('app.login');} 别的 {console.log("登录身份", authData.uid);$ionicHistory.nextViewOptions({禁用返回:true});$state.go('app.items');}$scope.authData = authData;//这将在我们的视图中显示用户名});}, 3000);

然而，这只是感觉不对(温和地说)，必须有更好的方法，所以请提出一个.此外，我注意到高达 3 秒的延迟几乎不够(我发现很少有资源建议 500 毫秒就足够了，但在我的情况下，情况并非如此).

解决方案

已在 github 问题上发帖，但也会在这里回复.

这只会在使用 $authWithOAuthRedirect 的浏览器中发生.该示例适用于cordova 应用程序，因此这真的不应该成为问题.

但如果你真的需要它，你可以跳过重定向并使用弹出窗口.

 Auth.$authWithOAuthPopup(authMethod).then(function(authData) {控制台.dir(authData);});

I have a simple Firebase Facebook OAuth login set like below by following the official tutorial for the Ionic Firebase Facebook login.

The problem is that once I click on the login with Facebook button, I get redirected to Facebook, I log in, and I get redirected back to my app. However, the problem is that I stay in the login page. Strange thing is that if I physically refresh my browser (testing with ionic serve) by pressing F5 the onAuth triggers and I get redirected to the Items page. If I don't refresh the browser, onAuth doesn't get called.

Did someone have this issue? How did you solve it?

Please note that yes, I did my research (and am slightly starting to lose it), but can't get it to work. I searched SO, tried with $timeout from google groups, tried to call $scope.$apply(), but all to no avail - so please help me figure out where I'm doing it wrong?

.controller('AppCtrl', function($scope, Items, Auth, $state, $ionicHistory) {
    $scope.login = function(provider) {
        Auth.$authWithOAuthRedirect(provider).then(function(authData) {

        }).catch(function(error) {
            if (error.code === "TRANSPORT_UNAVAILABLE") {
                Auth.$authWithOAuthPopup(provider).then(function(authData) {
                    
                });
            } else {
                console.log(error);
            }
        });
    };

    $scope.logout = function() {
        Auth.$unauth();
        $scope.authData = null;

        $window.location.reload(true);
    };

    Auth.$onAuth(function(authData) {
        if (authData === null) {
            console.log("Not logged in yet");
            $state.go('app.login');
        } else {
            console.log("Logged in as", authData.uid);
            
            $ionicHistory.nextViewOptions({
                disableBack: true
              });
            $state.go('app.items');
        }
        $scope.authData = authData; // This will display the user's name in our view
    });
})

<ion-view view-title="Members area">
    <ion-content padding="true">
        <div ng-if="!authData">
            <button class="button button-positive button-block" ng-click="login('facebook')">Log In with Facebook</button>  
        </div>       
        
        <div ng-if="authData.facebook">
            <div class="card">
                <div class="item item-text-wrap">Hello {{authData.facebook.displayName}}!</div>                
            </div>

            <button class="button button-assertive button-block" ng-click="logout()">Log out</button>
        </div>        

    </ion-content>
</ion-view>

edit: I sort of solved it by using $timeout:

$timeout(function(){
    Auth.$onAuth(function(authData) {
        if (authData === null) {
            console.log("Not logged in yet");
            $state.go('app.login');
        } else {
            console.log("Logged in as", authData.uid);

            $ionicHistory.nextViewOptions({
                disableBack: true
              });
            $state.go('app.items');
        }
        $scope.authData = authData; // This will display the user's name in our view
    });
}, 3000);

However, this just feels wrong (mildly put), and there has to be a better way, so please suggest one. Also, I noticed that the whopping 3second delay is barely enough (few of the resources I found suggested 500ms would be enough, but in my case, that's not the case).

解决方案

Posted on the github issues, but will reply here as well.

This only happens in the browser using $authWithOAuthRedirect. The example was intended for cordova apps, so this really shouldn't be an issue.

But if you really need it, you could just skip the redirect and use a popup.

    Auth.$authWithOAuthPopup(authMethod).then(function(authData) {
      console.dir(authData);
    });

这篇关于Firebase $authWithOAuthRedirect 不会在没有页面刷新的情况下调用 $onAuth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！