in my site i Login using facebook js sdk, ( I tried the example in facebook page), but how can i tell the server that this user is authenticated ?.
I tried using ajax to post to the server .
but this seems unsecure !.
My question is the authentication process can be donr using only JS sdk ?
If the authentication process cannot be done using Js ,
what about facebook c# sdk or other unofficial facebook c# sdk.
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
// POST TO SERVER AND TELL HIM THAT THE USER IS AUTHENTICATED NOW
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
The JS SDK can set a cookie on login, that you can read out server-side. If you do another call to /me there, then you can be relatively sure everything’s OK.
Related
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.
I've been building out a social gifting platform, and have had an application running for a few months now at: http://egift.me/promos/venue/facebookconnect
There is a simple user flow for the app. Click the Login/Connect facebook button, login &/or authorize the application, and you're redirected to a 'thank you/confirmation' style page.
If I step through this on a standard browser, I have no problems. If I step through this on mobile, I ultimately get the lovely "The page you requested was not found" page.
I don't have a Mobile Web url configured, I'm simply using Website with Facebook Login. Even when I have tried adding a mobile web url (it's the same base URL, I'm using View Switching to serve up a desktop vs mobile optimized view), I get the same issue.
Anyone have any idea what's going on? Is there any additional information I can provide?
[UPDATE]
This works (be sure to change your scope):
//instead of onClick could just as easily use something like jQuery event binding
<button onClick="loginUser();">Login</button>
<script type="text/javascript">
function loginUser() {
FB.login(function (response) { }, { scope: 'YOUR_SCOPE_HERE' });
}
FB.getLoginStatus(function (response) {
FB.Event.subscribe('auth.authResponseChange', handleResponse);
});
handleResponse = function (response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
} else if (response.status === 'not_authorized') {
// the user is logged in to FB, but has not yet authenticated your app
} else {
// the user is not logged in to FB
}
};
</script>
For mobile web apps, I'd recommend to use FB.login via the SDK itself rather than through the use of the login button. If nothing else it gives you greater programmatic control of the user flow & experience.
The canonical "simplest ever social app" snippet is:
FB.login(function(response) {
if (response.authResponse) {
console.log('Fetching user info');
FB.api('/me', function(response) {
console.log('Hello ' + response.name + '!');
});
} else {
console.log('User cancelled login or did not fully authorize');
}
});
Also you're including the JS SDK for the plugin anyway, so there's no payload overhead. More details on FB.login here: https://developers.facebook.com/docs/reference/javascript/FB.login/
My friend called this like lambda-calculus, even though I know some lambas -- I am still confused how the authorization really works to get the access token.
So please explain this code, hopefully line-by-line. Source of the example is here.
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
P.s. Trying to categorize things here, the q is a sub-problem.
Perhaps related
Explain the Facebook access_token
Facebook get access Token
FB.login(function(response) {
FB is where all of the Facebooks functions live. All the methods are defined here: https://developers.facebook.com/docs/reference/javascript/ . Login in particular will popup a dialog asking the user to sign in or approve your app.
if (response.authResponse) {
If they approve your app or have it already added, the response.authResponse will be populated. authResponse also has accessToken, expiry, and UserID. See more details here: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
This goes to Facebook to ask for the user who just approved/signed into your app. Now you can get the basic information about the user. All the available fields with permissions you need to get them are available here: https://developers.facebook.com/docs/reference/api/user/
console.log('Good to see you, ' + response.name + '.');
This is just getting the name from the user object that you recieved from the /me endpoint.
});
} else {
console.log('User cancelled login or did not fully authorize.');
This means the user cancelled or did not approve your app so you cannot grab any of their information from 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!
Is it possible to use the the facebook login plugin with a custom UI button on my side? I dont want to use the standard FB plugin that comes with the plugin.
I want to be able to click a custom button and have it do the same action, launch pop/modal to sync.
Any help would be great.
Sure you can! But you'll have to do some JavaScript coding for it. If you use the Facebook JavaScript SDK you'll be able to log your users into your website using any element that you can trigger a JavaScript function with.
Check out the FB.login() function :
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
FB.logout(function(response) {
console.log('Logged out.');
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
This function will initiate a login popup for users that have not yet logged in and request their email addresses.
It's more work than just pasting the plugin, but if you want to customize the login features then this is the way you will accomplish it.