luiscarlosjayk/angular-facebook

An Angularjs module to take approach of Facebook javascript sdk.

Angular-Facebook

An AngularJS module based approach to the Facebook Javascript SDK.

Demo

Sample application.

Install

install with bower

bower install angular-facebook

or download the master.zip

Usage

You first have to declare the facebook module dependency inside your app module (perhaps inside your app main module). Then you need to configure the facebook module using the 'FacebookProvider':

angular.module('app', ['facebook'])

  .config(function(FacebookProvider) {
     // Set your appId through the setAppId method or
     // use the shortcut in the initialize method directly.
     FacebookProvider.init('YOUR_APP_ID');
  })

  .controller('authenticationCtrl', function($scope, Facebook) {

    $scope.login = function() {
      // From now on you can use the Facebook service just as Facebook api says
      Facebook.login(function(response) {
        // Do something with response.
      });
    };

    $scope.getLoginStatus = function() {
      Facebook.getLoginStatus(function(response) {
        if(response.status === 'connected') {
          $scope.loggedIn = true;
        } else {
          $scope.loggedIn = false;
        }
      });
    };

    $scope.me = function() {
      Facebook.api('/me', function(response) {
        $scope.user = response;
      });
    };
  });

You can use the isReady function to get notified when the Facebook SDK is ready

$scope.$watch(function() {
  // This is for convenience, to notify if Facebook is loaded and ready to go.
  return Facebook.isReady();
}, function(newVal) {
  // You might want to use this to disable/show/hide buttons and else
  $scope.facebookReady = true;
});

Development

Install all dependencies and use gulp to watch the tests

# Install node.js dependencies
npm install

# Install bower components
bower install

# Run karma tests
gulp watch

To run protractor tests you need to install protractor first. (Protractor Setup)

# Prepare the testapp
gulp prepare-testapp

# Run protractor tests
protractor protractor.config.js

angular-facebook's Issues

Preventing session cookie creation

How can I avoid the facebook sdk from creating a session cookie on login? All I'm needing is to get the user info once and then associating it to their account, there is no need to store a session token.

file protocol detection

Hi,

First of all, thanks for your work on this plugin.
Just a quick fix that you can make I think. In the protocol detection (line537), you have "$window.location.protocol === 'file'" and on my chrome, the protocol is to "file:". Maybe you have to add this test as well ?

Thanks in advance.

Cheers !

Where is user email?

Facebook API offers the user email. I get useless value of updated_time property but the real value of user email is missing.

Scope not passed when doing Facebook.login

Hello, facebook is not getting scope information when calling Facebook.login();

Facebook.login(function(response) {
     //Do stuff
},{scope : 'publish_stream'});

When doing this, facebook is only asked for default permissions.

Change App Authorizations

Hi
I can't find where to set the scope for the App.. like "read_friendlist" or others...

Typo when declaring 'settings' object for FB.init()

Hi there. It looks like settings.xfbml has accidentally been created as settings.xbfml (switched 'f' and 'b'). This breaks all of the DB rendering services.

Deferred initialization of the provider

Hi!

Is there any way how one can init Facebook dynamically when on specific stage AppId gets known? It is being received by some query and is not defined on config phase.

So what I would like to know - is how could I provide following sequence:

1. Angular initializes
2. User clicks some button
3. We receive appId which should be used (specific customer's)
4. User gets logged in via customer's app.

Thank you in advance!

time to refactoring ?

I know it is a development version and I know Angular doesn't have strict rules what pattern should do what, but there are some issues that should be addressed. I believe the huge Facebook provider should be split into infrastructure settings (provider) and the communication part (client <=> FB SDK/API) should be (any kind of) service.
Such service could be consumed by controllers and directives. For security and other reasons there should be a 'fb-logged' html attribute instead of $scope.logged variable inside the controller or several controllers. Such attribute and other HTML suggars would help integrate the code with other auth providers across the whole app (account&permission management, navbar, views, etc.)

How to RequireJS

I'm trying to import the library using requireJS but I'm not sure I'm doing it right 👅
Do I need the shim section?
(PS: it's working like this but I'm not sure I'm doing it right)

define({
    waitSeconds: 15,
    baseUrl: 'js',
    paths: {
        'jquery': 'bower_components/jquery/dist/jquery.min',
        'domReady': 'bower_components/requirejs-domready/domReady',
        'angular': 'bower_components/angular/angular',
        'ngResource': 'bower_components/angular-resource/angular-resource',
        'ui.router': 'bower_components/angular-ui-router/release/angular-ui-router',
        'angular-facebook': 'bower_components/angular-facebook/lib/angular-facebook'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'ngResource': ['angular'],
        'ui.router' : ['angular'],
        'angular-facebook':  ["angular"]
    }
});

And then in the module declaration:

define([
    'angular',
    'ui.router',
    '../../config',
    'angular-facebook'
], function (ng) {
    'use strict';

    return ng.module('app.auth', [
        'app.constants',
        'ui.router',
        'facebook'
    ]).config(['$stateProvider', '$locationProvider', 'FacebookProvider', 'CONFIG', function ($stateProvider, $locationProvider, FacebookProvider, CONFIG) {
        FacebookProvider.init(CONFIG.facebook_app_id);
        $stateProvider
            .state('facebook', {
                url: '/',
                templateUrl: '/js/modules/auth/views/facebook.html',
                controller: 'FacebookController'
            })
            ;
        $locationProvider.html5Mode(true);
    }]);
});

Sessions

On page reload, logged user is lost, even though the user is still logged into his/her facebook account. Is there a way to create fix this (perhaps creating a session or subscribing to an event)?

Email Added in scope but not returned or asked for permission?

Facebook.api('/me?scope=email', function(response){
            $scope.$apply(function(){
                var data = {
                    fb_user : response
                };

I am trying to ask the user for permission to read their primary email from the api, but when I add the permission to the scope the email is not returned. Is there another way to do this?

Facebook API v1 no more supported?

Hi,

I saw that on current master branch you use Facebook API v2.0 but we can't configure the version. I'd like to use master (v0.2.2 triggers Facebook events 2 times) with Facebook API v1.0.

Moreover Facebook API v2.1 is already available so it could be cool to make it configurable :-).

cordova facebook connect plugin fail on init!

I have not tested in ios but in android it pops this errors as soon as app started:

Alert 1: Cordova Facebook Connect plugin fail on init!
Alert 2: Cordova Facebook Connect plugin fail on auth.status!

UPDATE: Tested in ios and it works fine, but the android emits above errors.

rename the package to align it with the angular name conventions

We should rename the package / repo to align it with the angular name conventions

Logout logs me out of the FB not from App

I was surprised when the logout button logged me out from Facebook Account. WHAT? The expected behaviour is to null FB credentials an set the user as Guest in my App (just as described in the logout function in the demo, its the service that does something weird).

bad facebook login response

Why do I get the following response if i cancel the login?
{ authResponse=true, status="connected"}

The expected:

{
    status: 'unknown', // or not_authorized
    authResponse: null
}

My code:

$scope.doLogin = function () {
     console.log('Perform to login');
     Facebook.login(function (data) {
           console.log(data);
     }, { scope: 'email' });
};

HTML:

<button ng-click="doLogin()">Login</button>

Initialization failed

Hi,

I want to connect my angular SPA with facebook and I found your repo which can help me. I downloaded the source and added it to my app, then I am setting the module with my facebook app ID and then I refresh the browser and see nothing. The plugin is breaking my app, event the partial html is not loaded and I see a blank page.

I am working on my localhost and I redirected from hosts files when I type 127.0.0.1 to go to my domain because of the facebook.

So do you have any idea why your plugin won't run or what can make the problem?
Thanks

Edit: I found where is my problem for now. Sorry for the issue.

Documentation

Can you provide some examples?

Should be using sdk.js instead of all.js?

Using sdk.js allows for the use of "version" in the config settings passed to init. This allows developers to specify 1.0 of the SDK as the version to still use some options (like create_events) that is being deprecated but at this point is still usable if you specify the version. It's also the version of the SDK that should be used moving forward.

https://developers.facebook.com/docs/javascript/quickstart/v2.0

https://github.com/Ciul/angular-facebook/blob/master/lib/angular-facebook.js#L532

It is not possible to specify many appids for variable environments

I can only configure FacebookProvider in the app.config(), where I cannot easily retrieve enviroment information using $location.

It is also not possible to just FacebookProvider.init() in the app.config() and then
Facebook.appId = "893289238923"
in the app.run()
because it throws an error "missing appid"

Maybe I am doing something wrong.

Invalid $watch syntax in README

$watch is not a function, it should be $scope.$watch

FB.init invocation delay in the fbAsyncInit

hi,

I think there might be an issue where sometimes the loadDeferred is resolved before the FB.init is invoked. This is causing API requests to fail.

I am wondering why the call to FB.init is wrapped in a timeout. This may be causing the issue. I tried removing the timeout, and have not seen the issue yet.

Best,
-Eric

UPDATE: I did just have an issue where the API requests were not being called, but I am unsure yet if this is related to the init not being called in the right sequence. I will keep an eye on this.

Given URL is not allowed by the Application configuration

Hello,

I am getting error from facebook . Any Idea?

ERROR: "Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of the one of the App's domains."

UPDATE: Now I am using native phonegap facebook plugin sdk. So this is no more a problem.

On Facebook.Logout, how do you set "next" parameters.

On Facebook.Logout, how do you set "next" parameters.

I think currently, the "next" parameter causing a problem if I using in phonegap. How do you set next parameter before calling facebook.logout?

https://www.facebook.com/logout.php?next=[http://www.yoursite.com]&access_token=[current_token]

error: Refused to display 'https://www.facebook.com/home.php' in a frame because it set 'X-Frame-Options' to 'DENY'.

Facebook login callback not called

Hi,

The login callback is never called the first time the user authorize the app, which forces the user to reload the page and re-click on the login button. Any idea how to make it work? The same issue happens in your demo. I also tried watching for the facebook events but none of them are happening.

$scope.login = function() {
    Facebook.login(function(response) {
        // this is never called ;_;
        if (response.status == 'connected') {
          // I need to do stuff here
        }
      }, {scope: 'email,user_birthday,user_likes'});
};

Thanks

Question: Why did you use callbacks instead of promises (for 'login', 'ui', etc.)?

I am just curious!

Thanks for this library by the way :)

After signing in, the logout button displayed, but if page reloaded, the sign in buttons displayed again

After signing in, the logout button displayed, but if page reloaded, the sign in buttons displayed again! However, the popup is not appearing again, that tells me that the user is actually logged in but somehow wrong button is displayed!

Add protractor tests

In order of #48 it would be really good to have some tests for the login method and maybe more

Scope requirements

Great job by the way but I looked through your javascript (even on the Plunker) and couldn't find where you put the scope requirements (email, location, etc). It clearly pops up on your Plunker app what your app will access but I haven't been able to find it. Any help would be greatly appreciated.

I have used your usage and getting "Provider Facebook must define $get factory method. from facebook" what could be the reason?

I have used your usage and getting "Provider Facebook must define $get factory method. from facebook" what could be the reason?

Prevent Login redirect?

I seem to be unable to prevent the Facebook redirect after calling "Login"...can anyone think of a way to prevent this redirect? I'm using modals for login and really just want to hide the modal, not get redirected.

Shawn

Wrong code in example over Reaadme.md

  $scope.getLoginStatus = function() {
   Facebook.getLoginStatus(response) { //My ide detect an error of { here.
      if(response.status == 'connected')
        $scope.$apply(function() {
          $scope.loggedIn = true;
        });
      } else {
        $scope.$apply(function() {
          $scope.loggedIn = false;
        });
      }
    };

Cannot login on IE

I implemented this code into my AngularJS app and it enables me to login with Facebook on Chrome and Firefox beautifully, but not IE9 (I have not tested on other versions of IE). When I run Facebook.login(), I get Facebook's dialog popup. After I enter my login info and click "Log In", the popup goes blank and nothing happens after that (though, if I open Facebook.com in another tab, it has logged me in there). The popup doesn't close and nothing seems to run after Facebook.login().

Is anyone else able to login on IE? I have AngularJS version 1.0.4, but I don't see why I would need to upgrade if it works on Chrome and Firefox. Any ideas?

move FB API callbacks into Angular $apply

Currently the angular-facebook notes call out that all facebooks should be wrapped in $scope.$apply. It would be relatively trivial to detect if the application using angular-facebook supplied a callback function. If it did let's wrap it in a $rootScope.$apply to make sure Angular picks up the effects of the callback.

This may not always be desirable so perhaps having a boolean flag in the configuration phase to enable or disable the feature would be cool. Let me know if you're interested in adding this and I'll set up a pull request.

Missing Facebook localSDK ?

I am getting this error in my console.

Uncaught Missing localSDK setting pointing to the local javascript file with the Facebook SDK angular-facebook-phonegap.js:45

I cannot find any place to define the local sdk in the example and the references in the code doesn't help me. I dont know how to define it. I can download the javascript sdk from facebook but where do i put it and how do I set the location?

Wiki request

Hi, wanted to use your facebook angular but don't know how. I've manage to change the appId but don't know how to add the fblogin or other events in facebook api.

Provide better specs, examples of mocking the API

I am opening this issue, but I will try to post this myself.

Facebook SDK loaded check

Hi,

How can I be sure that the Facebook JS SDK has been loaded before running any controller in my app?

For example, I have a view displaying Facebook permissions authorised by the signed in user. I need to be sure Facebook JS SDK is loaded before querying permissions to FB API.

Plunk not available

When trying to view the plunk offered as an example, Plunker just says it is "not found"...

FacebookProvider should allow set of arbitrary config items such as 'frictionlessRequests : true'

When initting the Facebook API it's possible that users would like to add things like frictionless requests to their FB.init parameter map. Adding a method like so to the provider would be nice:

this.setInitParameter = function(key, value) {
  settings[key] = value;
};

this.getInitParameter = function(key) {
  return settings[key];
};

Using a conventional directory structure

@obibring whats your opinion to use a more conventional src and dist directory structure ?

Possible reorganization of proxying and promises

Hey there,

I've recently rewritten parts of the angular-facebook to use promises in what feels like a more standard, angularjs way. For example instead of:

Facebook.getLoginStatus(function (data) {
  if (data.status === 'unknown') ...
})

You would use:

Facebook.getLoginStatus().then(function (data) {
  if (data.status === 'unknown') ...
})

This probably seems subtle on the surface but in practice it makes a big difference as you can then can actually chain facebook promises together with other promises. It also keeps the execution of code upon response of facebook APIs within the angular context so no need for $timeouts or $scope.$apply etc.

When working with async resources like Facebook in complex ways it's really critical to be able to chain promises with other promises.

Let me know if you would like me to generate a pull request for my changes.

Passing options to the login function

Hi,

The implementation looks like it appends a function to be the last argument in the list of arguments passed down to the Facebook API invocation: $window.FB[name].apply(FB, args);

However, the FB.login API function takes a function as its first argument, and allows for passing an object containing options as its last argument.

I ran into an issue trying to pass extra options to the login call. Is there another way to do this? Let me know if I can provide further details.

Thanks!

getLoginStatus hangs

Using the example code in the readme, Facebook.getLoginStatus(function(){}) never calls back..

Anyone else experiencing this issue?

FB.login() called when user is already connected.

Getting this when I try to trigger a login function.

FB.login() called when user is already connected.

Facebook popup up is blocked in Chrome (v31)

It seems that Chrome blocks the Facebook pop-up, when using your module (try the demo). In Firefox it is working fine.

How to show the login dialog on page?

I am using your JS SDK, I have a requirement to show the login dialog on page instead of popup? I could not figure out a way with your SDK, can you please help on this.

Facebook auth.authResponseChange event

hi,

Would it be possible to add the auth.authResponseChange to the list of subscribed Facebook events?

This event is triggered when the authResponse changes, might be handy to have. There's a bit more information on the Facebook javascript reference on events in the events section and best practices section.

Thanks!
-Eric

Facebook Login Pop-up is Blocked on IE10 & Firefox

Using the example, http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview, if I do it in IE10, the pop-up is blocked without warning. Firefox at least tells you they blocked the popup.

Can't not used parseXFBML()

I think there is a typo inside the function:

$window.FB.parse();

It should be:

$window.FB.XFBML.parse();