log on to facebook through extension - facebook

I've already registered my app on Facebook developer and got an ID, but had hard time to characterize the my app(chrome extension), it's website app, mobile app, facebook app? What I wanna do is a simple extension that allows users simply to click on it, and the background JavaScript calls the Facebook API to ask the users to log in like this.
window.fbAsyncInit = function() {
FB.init({
appId : '123456789',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
chrome.browserAction.onClicked.addListener(function(tab) {
FB.login(function(response) {
if(response.authResponse) {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
alert('User cancelled login or did not fully authorize.');
}
});
});
However, it pops up a window that says an error occurred, it is another way of saying "I am not authorized", how do I specify my app's URL on the Facebook developer page, because the extension's URL is a garbage like this chrome extension://asdjlajsldj/ or anyone knows any workaround? Thank you

I would assume that Facebook's API uses OAuth 2 to let applications access users data. Google provides a way of doing this with an example in their API section. I have also have posted an alternative method on GitHub. Note that my method will require some alternations to fit Facebook's interface but the idea is the same (I have a GitHub branch to do this with GitHub).
Essentially your extension must get an access token for the user from Facebook, then using this token as a parameter you can query private data from the API. What makes it seem difficult is the fact the the chrome extensions are sandboxed and have no return URL, but using one of the two methods above should do you just fine.
Good Luck!

Related

Cannot list Ad Accounts in facebook app

I'm developing a pure-html/js web application (actually I'm using AngularJS; with "pure" I mean: I'm not using any server side technology) which uses a Facebook-Connect button like this:
<fb:login-button max_rows="1" size="xlarge" scope="email,public_profile,ads_management" show_faces="false" auto_logout_link="false"></fb:login-button>
Such button asks for permission: ads_management and basic user data. I'm testing ad-management functionality.
However, I ask two queries to facebook inside a controller:
$scope.fetchData = function() {
FB.api('/me', function(response){
$scope.$apply(function(){
console.log("InApp::fetchData()");
console.log(response);
console.log("~InApp::fetchData()")
});
});
};
$scope.fetchAccounts = function() {
FB.api('/me/adaccounts', function(response){
$scope.$apply(function(){
console.log("InApp::fetchAccounts()");
console.log(response);
console.log("~InApp::fetchAccounts()");
});
});
};
$scope.fetchAccountData = function(account_id) {
};
$scope.fetchData();
$scope.fetchAccounts();
For narrow-purposes I just printed the contents of a controller. Assume such controller exists, requires the person is logged in Facebook, and the user is currently logged in.
My Issues are:
The Login button does not update the page when I login. This is because no onlogin= was put. Question: How can I assign such attribute in an Angular way? (i.e. the handler coming from the scope).
$scope.fetchData is successfully executed. However, $scope.fetchAccounts is not. I'm asking this because I included the ads_management permission in the button. Question: What am I missing? (error: code: 10
message: "(#10) You do not have sufficient permissions to perform this action"
type: "OAuthException"). Edit - Additional notes: I deauthorized the application in my account, and reauthorized it: It never asks me the ads_management permission in the popup dialog.
The first question, no idea. The second question, your app is not whitelisted for Ads API usage. Look into the Ads APi documentation on how to request access.

Doubts about Security in Login for Web with Facebook Oauth JavaScript SDK that send ACCESS TOKEN to server

I have doubts about security of my process of authentication oauth with facebook..
I use login for web with javascript sdk with fb button:
I get an Access Token successfully and pass it to server(calling check_facebook_session.php) to make API call to Facebook Provider..
In the following code there is also the log in console of access token.
Everything works!!! on the server I use the php sdk to call the API REST with APPID, APPSECRET and ACCESS_TOKEN:
**
Now my question, have I a security problem?
Is a bad idea to pass the token to the server?
The token that is visible on the client can be used WITHOUT APP SECRET to get information about the user logged?
**
Note: Google+ Sign-In for server-side apps Implementing the one-time-code flow with step:
- Include the Google+ script on your page.
- Add the sign-in button to your page.
- Sign in the user.
- Send the authorization code to the server.
as explained in: https://developers.google.com/+/web/signin/server-side-flow
Unlike facebook google in the js client return a CODE, not an ACCES TOKEN and the server receive and use it to request ACCESS TOKEN.
Thanks..
Following is the javascript code for facebook:
window.fbAsyncInit = function() {
FB.init({
appId : FACEBOOK_APP_ID, // App ID
status : true, // check login status
cookie : false, // enable/disable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
var accessToken = FB.getAuthResponse()['accessToken'];
console.log(accessToken);
$.ajax({
type: 'POST',
url: check_facebook_session.php,
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
processData: false,
data: 'token=' + accessToken,
success: function(result)
{
if(result == 'SUCCESS'){window.location.href = fb_callback_url}
},
error: function(xhr)
{
alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
}
});
}
else if (response.status === 'not_authorized')
{
FB.login();
}
else
{
FB.login();
}
});
};
// Load the SDK asynchronously
.......
}(document));
I did some testing and came to the conclusions that I hope can be useful.
In Facebook SDK for JavaScript it automatically handles access token storage and tracking of login status, so apps using it do not need to create their own mechanisms for doing so, and can proceed to making API calls.
The system seems safe because I believe that the callback url of the call is the site that host the page and configured between those of the facebook application, so I can change the application id in the javascript code but the sdk response with error message and get the user's token pretending to be another application. This was already obvious to those who know the flow :-)
Passes the token to the server is definitely a bad idea because it can be snorted and used by simply calling https://graph.facebook.com/me?access_token=... to get user information, In the different flow of google the token is not passed but is passed the code necessary to obtain it.
The best solution to use advantage of client and server is it:
Used in conjunction with the Facebook SDK for JavaScript,
the PHP SDK can share user sessions seamlessly across the client and server.
If people are logged in with Facebook and have authorized your app,
the JavaScript SDK can pick up the user session and persist this in a cookie,
which the PHP SDK reads without any intervention on the developer's part.
To enable this functionality, ensure that when you embed and initialize the JS SDK,
you set both the status and the cookie parameters of the object passed to FB.init() to true.
Regards..
i think it is secure because the user's data is only returned with connected status after user authentication with facebook.
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
I have followed Facebook example on getting access token by using $fb->getJavaScriptHelper();
https://developers.facebook.com/docs/php/howto/example_access_token_from_javascript
$helper = $fb->getJavaScriptHelper();
$accessToken = $helper->getAccessToken();
echo $accessToken->getValue();
P.S. Add try{} catch() {} blocks, as in Facebook example for error handling.

Facebook Login with PhoneGap/Cordova App

I recently integrated the phonegap-facebook-plugin (https://github.com/phonegap/phonegap-facebook-plugin) into both iOS and Android (same app).
I want to do something that I believe to be simple: by-pass the call to native facebook for login/authentication and always use the web dialog. How does one go about accomplishing this?
My login code currently looks like this:
Init code:
//facebook initialization
FB.init({
appId: 'xxxxxxxxxxxx', //'<%#= FB_APP_ID %>',//'',
nativeInterface: CDV.FB,
useCachedDialogs: false
});
And the login call is:
FB.login(function(response) {
if (response.authResponse) {
// connected
me.signInFacebook({
token: response.authResponse.accessToken,
email: response.authResponse.email,
success: function (data) {
// hide login view and show tabview
form.destroy();
// continue whatever action was previously happening
me.continueAction(tabIndexBack, callback);
},
failure: function (response) {
// show errors Ext.Viewport.down('tabscontainerview').setActiveItem(3);
}
});
} else {
//go back
Ext.Viewport.down('tabscontainerview').setActiveItem(3);
alert('fb login error');
}
},{ scope: "email" });
Thanks for your help!!
I created a plugin to facilitate the connection between Facebook and phonegap without using Plugin Native only with Jquery:
https://github.com/studiosoton/faceGap
To bypass native FB login, you can make your own manual facebook authentication flow without using JavaScript SDK of the Facebook (https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.3) via inAppBrowser or ChildBrowser plugins.
Your app must initiate a redirect to an endpoint which will display the login dialog:
https://www.facebook.com/dialog/oauth?client_id={app-id}&redirect_uri={redirect-uri}&response_type=token&scope=email
Facebook redirects people to the redirect_uri mentioned above and places an access token along with some other metadata (such as token expiry time) in the URI fragment:
https://www.facebook.com/connect/login_success.html#
access_token=ACCESS_TOKEN...
Your app needs to detect this redirect and then read the access token out of the URI. You can then skip straight to the Inspecting access tokens step.
On the Android version of the plugin, you can force it to use the dialog by modifying the way the plugin calls me.facebook.authorize in the login action of theorg.apache.cordova.facebook.ConnectPlugin class.
You'll need to pass in an additional activityCode parameter with Facebook.FORCE_DIALOG_AUTH:
me.facebook.authorize(cordova.getActivity(), me.permissions, Facebook.FORCE_DIALOG_AUTH, new AuthorizeListener(me));
I'm not entirely sure about iOS, but you might be able to try with openWithBehavior and FBSessionLoginBehaviorForcingWebView
Without any Facebook plugins you can use Facebook functionality,for that use phonegap.facebook.inappbrowser.js using this js you can easily access all Facebook functionality for more information visit this URL : Facebook Integration Step without any plugins

Different Facebook access token JavaScript SDK

I'm quite confused with the access token from facebook..here is how I obtain the user's access token and use it to get data from graph API
window.fbAsyncInit = function() {
FB.init({
appId : 'app ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.getLoginStatus(getStatus);
FB.Event.subscribe('auth.authResponseChange', getStatus);
function getStatus(response) {
if ( response.status === 'connected' ) {
var accessToken = response.authResponse.accessToken;
console.log("accessToken = " + accessToken);
$.ajax({
dataType : "jsonp",
type : "GET",
url : "https://graph.facebook.com/me/albums?access_token=" + accessToken,
success : function(data) {
$.each(data, function(index, value) {
console.log(index + ": " + value);
})
}
});
}
}
};
However, I always get an empty data. After I visit the graph API documentation here: https://developers.facebook.com/docs/reference/api/ and click on one of the graph links, I notice that the access token generated there is always different from what I retrieve from my code. For example, the current access token in the graph api documentation is
"AAAAAAITEghMBAMwuyHZCO3VOAvCm9hHpaZC9PGV9238ixsZB7zSfuplZBTZCLRj6cEViZADJlVcjOfInwvcbhqu3XBF1w4ZAxvPbexcGQZAYzb4bHAKsMbLF"
and the one in console log is
"AAAG0ZCFantJ8BAAFcMdDOyDyT4OBtjrvULEaS2o94gZAU7U1xITaogFXCZBghQP8G9bjEh3XSCATQOZCUSZCuNWFvEfypIAmcz9bkbk5qRBlHUZAOE4guW"
I think that I may have done this the wrong way. Can anyone help explain to me how to retrieve data from graph API in a correct way?
Any kinds of help will be appreciated. Thanks in advance :)
Run this URL with your authToken first:
https://graph.facebook.com/me/permissions?access_token=USER_ACCESS_TOKEN
You'll almost certainly only see basic permissions in the response, which is why you aren't getting the data from your call to the user's album.
You'll then want to run your user through the Authentication Process, making sure you request the permissions you need (probably 'user_photos' in your case).
More info is available in those two links. Good luck!
access token will never be the same. So that behaviour is correct.
Back to your problem , I think its mostly scope related issue.
I had developed a application using facebook c# sdk, In that application i did it like this:
when a post is to be submitted , redirect the user to facebook (with some parameters like appid, app-secret, auth-token and
redirect-url);
Facebook will ask the user to login with his credentials.
When the user is logged in, facebook will redirect back to the redirect-url. (with the authtoken and a new auth-code).
Then we should use this auth-code, app-id and app-secret and obtain the user-access-token. (This is done by doing a rest api call to the
url
https://graph.facebook.com/oauth/access_token?client_id=client_id&redirect_uri=redirect_uri&client_secret=client_secret&code=auth-code
This will return the user-token and expiry time for the token
And then we can post using this user-access-token to the fb.
Initially i had misunderstood the auth-code and used it as the user-access-token, and i always got the result as unauthorised token .
Please check whether this will help you or not.

What is the correct setup for the auto-login of a returning, authenticated user with the Javascript SDK?

Hey fellow Facebook developers,
I've read dozens of related questions and hopefully tried every related example on developers.facebook.com but I can't get this one to work:
A user has visited my website and authorized the permissions I request from him via
FB.login(callback, {
scope: 'publish_actions,user_actions:news,user_interests'
});
after calling
FB.init({
appId: 'xxx', // App ID
status: true, // check login status
cookie: true,
xfbml: true // parse XFBML
});
I can now successfully request an access token that is valid for some time and use that to query all kind of information about the user.
Without logging out anywhere (Facebook or my own website), if I now navigate to that page again (or just hit reload), I would expect to immediately be able to use
FB.getLoginStatus(callback)
and receive a response of connected. In my understanding, the user should not have to click anything anymore.
What I do get, though, is unknown. No matter in what browser and no matter whether I am using a real developer profile or a Facebook test user.
I also have subscribed to the events auth.authResponseChange and auth.statusChange but they only fire, if I explicitly call FB.login().
It says in the example in the Facebook SDK documentation that my FB.init() from above should already get the necessary information from Facebook on page load time and that the events should fire accordingly.
Since I tried so many examples already and really think I understand the documentation, I can't see where the error happens.
Is there anything I'm missing, anything I am misunderstanding or a timing problem I should be aware of?
On a side note, I have already tried more than the mentioned Facebook events, a forced status update through FB.getLoginStatus(callback, true), running the code step by step by entering it in the Javascript console of Chrome and more suggestions from SO and Facebook forums.
If you set the status: true, the FB.getLoginStatus response object will be cached by the SDK and subsequent calls to FB.getLoginStatus will return data from this cached response.
To get around this, you have to call FB.getLoginStatus with the second parameter set to true to force a roundtrip to Facebook - effectively refreshing the cache of the response object.
Example:
window.fbAsyncInit = function() {
FB.init({
appId : '',
status : true,
cookie : true,
xfbml : true,
});
FB.getLoginStatus( function(response) {
//console.log(response);
if (response.status === 'connected') {
var accessToken = response.authResponse.accessToken;
alert(accessToken);
} else if (response.status === 'not_authorized') {
//login function
} else {
//login function
}
}, true);
FB.Event.subscribe('auth.authResponseChange', function(response) {
//console.log('The status of the session changed to: '+response.status);
alert(response.status);
});
};
Documentation: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
As an additional information to Philip's accepted answer, I would like to mention that a cookie blocker was the actual reason the auto-login did not work.
Make sure to disable any plugins you have running before testing your code and assuming "real world" conditions.