火力地堡$ authWithOAuthRedirect不调用$ onAuth无刷新页面 [英] Firebase $authWithOAuthRedirect doesn't call $onAuth without page refresh

查看:186
本文介绍了火力地堡$ authWithOAuthRedirect不调用$ onAuth无刷新页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个简单的火力地堡的Facebook的OAuth登录按照href=\"http://blog.ionic.io/adding-social-login-with-firebase/\" rel=\"nofollow\">官员的离子火力地堡Facebook登录。

问题是,一旦我点击与Facebook按钮登录,我重定向至Facebook,我登录,我重定向回我的应用程序。然而,问题是,我停留在登录页面。奇怪的是,如果我身体刷新我的浏览器(测试用离子服务)以pressing F5的 onAuth 触发器和我重定向到项目页。如果我没有刷新浏览器, onAuth 不会被调用。

是不是有人有这个问题?你是怎么解决的?

请注意,是的,我做我的研究(和我稍微开始失去它),但不能让它开始工作。我找遍所以,用 $从谷歌群体超时,试图尝试调用$ $范围适用于(),但都无济于事 - ?所以请帮我找出在那里我做错了。

\r
\r

.controller('AppCtrl',函数($范围,项目,验证,$状态,$ ionicHistory){\r
    $ scope.login =功能(供应商){\r
        验证。$ authWithOAuthRedirect(供应商)。然后(功能(的authData){\r
\r
        })赶上(功能(错误){\r
            如果(误差。code ===TRANSPORT_UNAVAILABLE){\r
                验证。$ authWithOAuthPopup(供应商)。然后(功能(的authData){\r
                    \r
                });\r
            }其他{\r
                的console.log(错误);\r
            }\r
        });\r
    };\r
\r
    $ scope.logout =功能(){\r
        。验证$ UNAUTH();\r
        $ scope.authData = NULL;\r
\r
        $ window.location.reload(真);\r
    };\r
\r
    验证。$ onAuth(功能(的authData){\r
        如果(的authData === NULL){\r
            的console.log(未登录尚);\r
            $ state.go('app.login');\r
        }其他{\r
            的console.log(被当作,authData.uid);\r
            \r
            $ ionicHistory.nextViewOptions({\r
                disableBack:真\r
              });\r
            $ state.go('app.items');\r
        }\r
        $ scope.authData =的authData; //这将在我们的视图中显示该用户的名称\r
    });\r
})

\r

<离子查看查看标题=会员区>\r
    <离子含量填充=真正的>\r
        < D​​IV NG-IF =的authData!>\r
            <按钮类=按钮按钮阳性按钮块NG点击=登录(的Facebook')>登录Facebook和LT; /按钮>\r
        < / DIV>\r
        \r
        < D​​IV NG-IF =authData.facebook>\r
            < D​​IV CLASS =一卡通>\r
                < D​​IV CLASS =项项文本换行>您好{{authData.facebook.displayName}}<!/ DIV>\r
            < / DIV>\r
\r
            <按钮类=按钮按钮主见按钮块NG点击=退出()>注销< /按钮>\r
        < / DIV>\r
\r
    < /离子含量>\r
< /离子视图>

\r

\r
\r

编辑:我用$超时样的解决了这个问题:

  $超时(函数(){
    验证。$ onAuth(功能(的authData){
        如果(的authData === NULL){
            的console.log(未登录尚);
            $ state.go('app.login');
        }其他{
            的console.log(被当作,authData.uid);            $ ionicHistory.nextViewOptions({
                disableBack:真
              });
            $ state.go('app.items');
        }
        $ scope.authData =的authData; //这将在我们的视图中显示该用户的名称
    });
},3000);

不过,这只是觉得错了(轻度放),并且必须有一个更好的办法,所以请建议之一。另外,我注意到,高达3秒延迟是勉强够(我很少发现建议500ms的就足够资源,但对我来说,这不是这种情况)。


解决方案

发表于GitHub的问题,反而会回复这里。

这仅在使用 $ authWithOAuthRedirect 发生在浏览器中。这个例子的目的是为科尔多瓦的应用程序,所以这个真的不应该是一个问题。

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

 验证。$ authWithOAuthPopup(authMethod)。然后(功能(的authData){
      console.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);
    });

这篇关于火力地堡$ authWithOAuthRedirect不调用$ onAuth无刷新页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆