luiscarlosjayk / angular-facebook Goto Github PK
View Code? Open in Web Editor NEWAn Angularjs module to take approach of Facebook javascript sdk.
License: MIT License
An Angularjs module to take approach of Facebook javascript sdk.
License: MIT License
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!
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 :-).
It seems that Chrome blocks the Facebook pop-up, when using your module (try the demo). In Firefox it is working fine.
$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;
});
}
};
I am just curious!
Thanks for this library by the way :)
Facebook API offers the user email. I get useless value of updated_time property but the real value of user email is missing.
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
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.
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
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.
We should rename the package / repo to align it with the angular name conventions
I have used your usage and getting "Provider Facebook must define $get factory method. from facebook" what could be the reason?
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).
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.
Can you provide some examples?
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.
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.
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.
I think there is a typo inside the function:
$window.FB.parse();
It should be:
$window.FB.XFBML.parse();
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:
Thank you in advance!
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!
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.
In order of #48 it would be really good to have some tests for the login
method and maybe more
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.
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?
Hi
I can't find where to set the scope for the App.. like "read_friendlist" or others...
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 !
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?
$watch
is not a function, it should be $scope.$watch
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.
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'.
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];
};
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
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.
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.
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);
}]);
});
Using the example code in the readme, Facebook.getLoginStatus(function(){})
never calls back..
Anyone else experiencing this issue?
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.)
@obibring whats your opinion to use a more conventional src
and dist
directory structure ?
I am opening this issue, but I will try to post this myself.
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>
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.
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)?
Getting this when I try to trigger a login function.
FB.login() called when user is already connected.
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.
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.
When trying to view the plunk offered as an example, Plunker just says it is "not found"...
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?
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.