Using Facebook API with AngularJs app - Part 2

Hi, This is the second part of “Facebook API with AngularJs app”. If you haven’t read the first part yet, I suggest you to read that first.

1. Initial setup

You can find explanations in the first part, here I just show the code.

angular.module ('myFacebookApp', ['bnx.module.facebook']);

And we need this HTML snippet somewhere in our document body. This directive is actually loads Facebook Javascripts.

<div ng-app="myFacebookApp">
    <facebook app-id="<app-id>"></facebook>
</div>

We are done! Very simple :) Now we have initialized Facebook API and it’s ready to be used.

2. Login button

I want a Facebook login button in my app, so users can click and login using their Facebook account. [Facebook doesn't reveal account credentials to 3rd party apps]. We can get from a very basic information of user's public profile to full access to all photos and posts and albums. For purpose of this app I only setup minimum requirement which is "Basic Info access". If you want to access more advanced information you've to submit your app to be reviewed by Facebook first.

Here is the Angular Directive for Facebook login button:

<facebook-login auto_logout="true" scope="basic_info"> </facebook-login>

That's it. This snippet will show a standard medium size Facebook login button and grants basic_info access when user logs into her Facebook account. If you need more details on this please refer to mentioned Github repository. All details explained in code documents. Now you can see a login button right here.

Wait, please login using above button to continue reading...

Thanks, {{ user.name }}

3. Control Login action

Now we successfully added Login button to our page. You are reading these lines, thus I manged to capture your login status and display some hidden parts of this article. Here I explain how you can achieve that using this API.

When user clicks on Login button, Facebook API opens a small window in order to ask user if she wants to login to this web site using her Facebook account. If user accepts this request, Facebook authentication state for that user will be changed to connected. AngularFacebook API will broadcast fb.auth.authResponseChange to inform app about this change. knowing all that, by listening to this event we can update our app according to user's new status.

Here is the javascript code which is used in this article to show/hide this section of article according to user's login state:

app.controller('mainCtrl', function ($scope, facebook) { 
    $scope.$on('fb.auth.authResponseChange', function (event, response) { 
        $scope.$apply (function () { 
            $scope.connected = (response.status == 'connected'); 
        }); 
    }); 
});

Inside angular controller I used $scope.$on to bind a listener on fb.auth.authResponseChange event. The event handler receives an event object and Facebook api response as first and seconds arguments respectively. By examining response.status we know whether user is currently logged in our app or not. Why I put assignment inside $apply is because I need to inform angular about $scope changes.

4. Get user basic info

If you've noticed after logging into Facebook app, I showed your name right below Login button. With AngularFacebook API this is also very simple. I used api function, to fetch that information. This code goes into above controller code, inside listener function right after $scope.connected = (response.status == 'connected'); line.

if ($scope.connected) { 
    facebook.api('me').then (function (result) { 
        $scope.user = result; 
    }); 
} else { 
    $scope.user = null; 
}

This code checks if user is already logged into app (by examining connected property of $scope from previous line), then fetches user information by calling api function. passing 'me' as parameter which means we are interested, in currently logged in user information. user.name contains user's name. For more details on user information object please refer to Facebook documentations Facebook documentations

5. Conclusion

Using AngularFacebook library is an easy way to utilize both Facebook API and AngularJs framework and the same time. Integrating these two libraries is no longer a problem and time consuming task. If you have any enquiries about this library or want to add/request new features please contact me or submit a merge request on Github.

In next article (3rd part) I'll show how you can post information on user's wall.

Thank you for reading this article, if you've found these articles useful please share using buttons below. You are very welcome to leave comments using provided form at button of this page.

Twitter  facebook  Google+