How to get access token from FB.login method in javascript SDK - facebook

I need to get the access token from FB.login method in Javascript SDK. My login code is
FB.login(function(response) {
if (response.session) {
if (response.perms) {
} else {
// user is logged in, but did not grant any permissions
alert("No Permission..");
}
} else {
// user is not logged in
alert("Please login to facebook");
}
}, {perms:'read_stream,publish_stream,offline_access'});
Is there any way to get access token? I am able to get the access token using PHP.

You can get access token using FB.getAuthResponse()['accessToken']:
FB.login(function(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log('Access Token = '+ access_token);
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: ''});
Edit:
Updated to use Oauth 2.0, required since December 2011. Now uses FB.getAuthResponse();
If you are using a browser that does not have a console, (I'm talking to you, Internet Explorer) be sure to comment out the console.log lines or use a log-failsafe script such as:
if (typeof(console) == "undefined") { console = {}; }
if (typeof(console.log) == "undefined") { console.log = function() { return 0; } }

response.session.access_token doesn't work in my code. But this works:
response.authResponse.accessToken
FB.login(function(response) { alert(response.authResponse.accessToken);
}, {perms:'read_stream,publish_stream,offline_access'});

If you are already connected, simply type this in the javascript console:
FB.getAuthResponse()['accessToken']

https://developers.facebook.com/docs/facebook-login/login-flow-for-web/
{
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
signedRequest:'...',
userID:'...'
}
}
FB.login(function(response) {
if (response.authResponse) {
// The person logged into your app
} else {
// The person cancelled the login dialog
}
});

response.session doesn't work anymore because response.authResponse is the new way to access the response content after the oauth migration.Check this for details:
SDKs & Tools › JavaScript SDK › FB.login

window.fbAsyncInit = function () {
FB.init({
appId: 'Your-appId',
cookie: false, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.0' // use version 2.0
});
};
// Load the SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function fb_login() {
FB.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me', function (response) {
var email = response.email;
var name = response.name;
window.location = 'http://localhost:12962/Account/FacebookLogin/' + email + '/' + name;
// used in my mvc3 controller for //AuthenticationFormsAuthentication.SetAuthCookie(email, true);
});
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'email'
});
}
<!-- custom image -->
<img src="/Public/assets/images/facebook/facebook_connect_button.png" />
<!-- Facebook button -->
<fb:login-button scope="public_profile,email" onlogin="fb_login();">
</fb:login-button>

window.fbAsyncInit = function () {
FB.init({
appId: 'Your-appId',
cookie: false, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.0' // use version 2.0
});
};
// Load the SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function fb_login() {
FB.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
//console.log(response); // dump complete info
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me', function (response) {
var email = response.email;
var name = response.name;
window.location = 'http://localhost:12962/Account/FacebookLogin/' + email + '/' + name;
// used in my mvc3 controller for //AuthenticationFormsAuthentication.SetAuthCookie(email, true);
});
} else {
//user hit cancel button
console.log('User cancelled login or did not fully authorize.');
}
}, {
scope: 'email'
});
}
<!-- custom image -->
<img src="/Public/assets/images/facebook/facebook_connect_button.png" />
<!-- Facebook button -->
<fb:login-button scope="public_profile,email" onlogin="fb_login();">
</fb:login-button>

Related

Facebook SDK 2.8 doesnot give email address

I am trying to implement FacbookSDK 2.8 for my website and below is the simplified version of the code.
<button onclick="logout()">Logout</button>
<button onclick="login()">LogIn</button>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
setTimeout(() => {
window.fbAsyncInit = () => {
FB.init({
appId: 'xxxxxxx', //My app id here
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.8' // use graph api version 2.8
});
checkFBLoginStatus();
}
})
function checkFBLoginStatus() {
FB.getLoginStatus((response) => {
console.log(response)
});
}
function logout() {
FB.logout(function(response) {
console.log(response)
})
}
function login() {
FB.login(function(response) {
console.log(response)
FB.api('/me?fields=id,email,name', function(response) {
console.log(JSON.stringify(response));
});
}, {
scope: 'email'
})
}
function onLoginSuccess() {
FB.getLoginStatus(function(response) {
console.log(response)
})
}
</script>
I am getting the response on logout and login
Here are my questions
On FB.api call i am getting only ID and Name whereas i need user email to set as an unique user identifier.
When is the condition i can achieve not_authorized. I am getting status 'connected' if i login and 'unknown' if i logout. I am not able to reproduce the condition un_authorized, so that i could code for it.
You should use the ID of the user to identify him, not the email. Users do not have to have an email, they can also use their phone number to login. Make sure you get asked for the email permission in the login process/popup. Also, use this form instead:
FB.api('/me', {fields: 'id,email,name'}, function(response) {
console.log(JSON.stringify(response));
});

Facebook Login Failing on Test Server

I'm trying to authenticate using facebook I've setup a simple html page on my web server (Web Server 2008 R2).
When I go onto my page and click the login button I get a dialog that says:
"Not Logged In: You are not logged in. Please login and try again."
The console says:
"Given URL is not whitelisted in Client OAuth Settings: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs."
I've got it setup as as a Test App in facebook with the domain and SiteURL set to http://localhost and I've put my public IP into the whitelist field and I've add http://localhost to the Valid OAuth redirect URIs field.
This is the code. (I've removed my appID for this example)
<body>
<input type="button" onclick="fbLogIt();" value="Testing Login">
<div id="status"></div>
</body>
function statusChangeCallback(response)
{
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected')
{
testAPI();
}
else if (response.status === 'not_authorized')
{
document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
}
else
{
document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
}
}
function checkLoginState()
{
FB.getLoginStatus(function (response)
{
statusChangeCallback(response);
});
}
window.fbAsyncInit = function ()
{
FB.init({
appId: 'xxxxxxxxxxxxxx',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version: 'v2.5' // use version 2.2
});
FB.getLoginStatus(function (response)
{
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
function fbLogIt()
{
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.');
}
});
}

Facebook app: permission not updating

I am making a facebook app for which i need permissions other than the basic permission. I have tried using scope as well as changing in the app settings, still I get only the basic permissions and no more other permissions. Below is the code :
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function(response) {
// handle the response
}, {scope:'user_photos,user_friends,friends_photos,user_status,publish_stream,user_photo_video_tags'});
} else {
FB.login(function(response) {
// handle the response
}, {scope:'user_photos,user_friends,friends_photos,user_status,publish_stream,user_photo_video_tags'});
}
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
});
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
I understand that it takes some time for app permissions to propagate, but I have waited for hours. Any hint on whats going wrong here?
Thanks.
Not sure why your code is not working and I am yet to try running it on my machine by I am posting a working code here. Please try using this code after following steps mentioned below
Create a new app on facebook.
In Permissions tab, select the user permissions that you want from user.
In code mentioned below, input your app id and try running it.
Code below is taken from http://hayageek.com/examples/oauth/facebook/oauth-javascript/index.php and is basic implementation of Javascript SDK.
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXX', // App ID
channelUrl : 'http://192.168.1.146/facebook/index.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
document.getElementById("message").innerHTML += "<br>Connected to Facebook";
//SUCCESS
}
else if (response.status === 'not_authorized')
{
document.getElementById("message").innerHTML += "<br>Failed to Connect";
//FAILED
} else
{
document.getElementById("message").innerHTML += "<br>Logged Out";
//UNKNOWN ERROR
}
});
};
function Login()
{
FB.login(function(response) {
if (response.authResponse)
{
getUserInfo();
} else
{
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'user_photos'});
}
function getUserInfo() {
FB.api('/me', function(response) {
var str="<b>Name</b> : "+response.name+"<br>";
str +="<b>Link: </b>"+response.link+"<br>";
str +="<b>Username:</b> "+response.username+"<br>";
str +="<b>id: </b>"+response.id+"<br>";
str +="<b>Email:</b> "+response.email+"<br>";
str +="<input type='button' value='Get Photo' onclick='getPhoto();'/>";
str +="<input type='button' value='Logout' onclick='Logout();'/>";
document.getElementById("status").innerHTML=str;
});
}
function getPhoto()
{
FB.api('/me/picture?type=normal', function(response) {
var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";
document.getElementById("status").innerHTML+=str;
});
}
function Logout()
{
FB.logout(function(){document.location.reload();});
}
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
</div>
</body>
</html>
Update: Hope this solves your problem, I will have a look at your tonight and explain what is going wrong with it.

how to get email address in face book api

I already use this code,i get user name but i can't get email address please some example how to get email address in face api .but many user give some example it does n't work so give valuable code
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '64530546436364535', // App ID
channelUrl : '//WWW.loginhire.com', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
}, { scope: 'email' });
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.' + ' Email: ' + response.email + ' Facebook ID: ' + response.id);
//console.log('Good to see you, ' + response.name + '.');
console.log(' Email: ' + response.email+'.' );
});
}
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '645304363653fghdfg', // App ID
channelUrl : '//WWW.channelUrl .com', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
}, { scope: 'email'/'phone' });
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.' + ' Email: ' + response.email + ' Facebook ID: ' + response.id);
//console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<fb:login-button show-faces="false" width="200" max-rows="1" scope="email" onclick="testAPI();" onlogin="Log.info('onlogin callback')">
Login with Facebook
</fb:login-button>
</span>

FACEBOOK O-AUTH dialog opening on load automatically

i have a login page where i will give link for facebook login but unfortunately the facebook oauth dialog opens up as soon as i land on the the login page .I want it on click of the link and not on page load.Can any help?
<p><a onclick='login(); return false;'>Login</a></p>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : '3423243443', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true // enable OAuth 2.0
// channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
alert("connected1"+response.authResponse.expiresIn);
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
alert("not logged in");
login();
}
},true);
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
/*function login() {
FB.login(function(response) {
if (response.authResponse) {
testAPI(response)
// connected
alert("connected2 "+response.authResponse);
} else {
// cancelled
alert("cancelled");
alert("cancelled"+response.authResponse);
}
});
} ;
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.email + '.');
});
} ;*/
</script>
Because you inserted the FB.getLoginStatus, which calls your login function, in window.fbAsyncInit on every page's loads.
You should fire FB.getLoginStatus only though a button, with an onclick trigger.
Here is a little example: http://facebook.stackoverflow.com/a/15720747/2212966
I have mine wrapped with a jquery button click event handler. Here is a snippet from my code:
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id',//use your facebook appId in here
status : false,
cookie : true,
xfbml : true,
version : 'v2.2'
});
jQuery('#signUpWithFacebookButtonId').click(function(){
FB.login(function(response) {
if (response.status === 'connected') {
console.log('Logged into your app and Facebook.');
} else if (response.status === 'not_authorized') {
console.log('The person is logged into Facebook, but not your app.');
} else {
console.log('The person is not logged into Facebook, so we are not sure if they are logged into this app or not.');
}
}, {scope: 'public_profile, email'});
});
};//end window.fbAsyncInit function