Angular Facebook app, want to save both login status for different pages

Question

I have an angular app generated by yeoman,and it has two pages. And I set a routeProvider for these two pages:

angular
    .module('fbPostApp', ['ngCookies', 'ngResource', 'ngSanitize', 'ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .when('/friend-filter', {
                templateUrl: 'views/friend-filter.html',
                controller: 'FriendFilterCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
        });
    });

MainCtrl:

function MainCtrl($scope,$http) {
    $scope.login = function(){
        FB.login(function(response) {
            $scope.uid = response.authResponse.userID;
            $scope.accessToken = response.authResponse.accessToken;
            login_success($scope.uid,$scope.accessToken);
        });
    };
    var require = 'friends_birthday,friends_about_me,friends_relationships,friends_likes,read_stream,user_about_me,publish_stream';
    FB.login(function(response) {
        if (response.status === 'connected') {
            $scope.uid = response.authResponse.userID;
            $scope.accessToken = response.authResponse.accessToken;
            login_success($scope.uid, $scope.accessToken);
        };
    },{scope:require});
    ...

FriendFilterCtrl:

function FriendFilterCtrl($scope,$http) {
    $scope.login = function() {
        var require = 'friends_birthday,friends_about_me,friends_relationships,friends_likes,friends_about_me';
        FB.login(function(response) {
            if (response.status === 'connected') {
                $scope.uid = response.authResponse.userID;
                var uid = response.authResponse.userID;
                var accessToken = response.authResponse.accessToken;
                var userURL = "https://graph.facebook.com/"+uid+"";
                var dataURL = "https://graph.facebook.com/"+uid+"?fields=friends.fields(birthday,name,relationship_status)&access_token="+accessToken+"";
                ...

I now set both pages a login function,and when I switch to another page I will login "again".But I want that I only need to login once at any page, and can still ajax data when I switch to another one.How to do that??

You don't want two `.otherwise` calls as second one replaces the first one. There can only be one `.otherwise` call, that will be used when no other route definition matches. — Robert Koritnik, Jan 28 '14 at 10:37

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

User authentication service

For authentication purposes one creates a service that provides authentication functionality as well as user status. Then consume your service in your controllers.

angular.module("fbPostApp")
       .service("UserAuthentication", function() {
           ...
       });

There are several examples of this on the web that will help you understand and get started with your own implementation.

The one that actually implements FB authentication can be read here. And there's also a GitHub project (Angular Facebook Utils) that implements it in a reusable way.

edited May 23 '17 at 12:15

Community

1
1

answered Jan 28 '14 at 11:43

Robert Koritnik

103,639
52
277
404

upvote. also check out angular-easyfb: https://github.com/pc035860/angular-easyfb – Connor Leech May 20 '14 at 17:17

score -1 · Answer 2 · answered Apr 01 '14 at 04:16

If you like to have a detailed instruction on how to integrate FacebookAPI into AngularJs you might consider reading this article.

http://www.boynux.com/angularjs-facebook-integration/

That simply creates a Facebook modules that you can easily use in your application. Then you can call login only once, and use the same info in all pages.

Alternatively (this is what personally do) you can wrap that Facebook Modules into another service and use that throughout your app. This should be much cleaner.

Angular Facebook app, want to save both login status for different pages

2 Answers2

User authentication service