I'm using the Facebook JS SDK to do Client-Side Authentication per there example located here
<!DOCTYPE html>
<html>
<head>
<title>Facebook Client-side Authentication Example</title>
</head>
<body>
<div id="fb-root"></div>
<script>
// 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));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
FB.api('/me', function(me){
if (me.name) {
document.getElementById('auth-displayname').innerHTML = me.name;
}
})
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedin').style.display = 'block';
} else {
// user has not auth'd your app, or is not logged into Facebook
document.getElementById('auth-loggedout').style.display = 'block';
document.getElementById('auth-loggedin').style.display = 'none';
}
});
// respond to clicks on the login and logout links
document.getElementById('auth-loginlink').addEventListener('click', function(){
FB.login();
});
document.getElementById('auth-logoutlink').addEventListener('click', function(){
FB.logout();
});
}
</script>
<h1>Facebook Client-side Authentication Example</h1>
<div id="auth-status">
<div id="auth-loggedout">
Login
</div>
<div id="auth-loggedin" style="display:none">
Hi, <span id="auth-displayname"></span>
(logout)
</div>
</div>
</body>
</html>
What I haven't been able to figure out in my mucking around is how to add, to this code, the scope parameter to request access to the email address. Can anyone point me in the right direction?
Thanks!
--- EDIT ---
I've seen this code located in the documentation
FB.login(function(response) {
// handle the response
}, {scope: 'email'});
I guess I'm not sure how to incorporate that into this existing code though because it's not working
document.getElementById('auth-loginlink').addEventListener('click', function(){
FB.login();
});
If anyone can update the above line to incorporate the extra scope parameter I'm eager to try it.
Simple solution for you. Just add those parameters to the FB.login() function.
FB.login(function(){}, {scope: 'email'});
If you don't need to handle the login response then just provide an empty function.
Related
I’ve taken below code from Facebook developer, while login to FB it's showing only logout button not showing user name and profile with logout button. Is it possible to add our own button instead of Facebook login button?
<html>
<head><title>facelogin<title></head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '478566162309261',
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 testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
FB.logout(function(response) {
// Person is now logged out
});
</script>
<!--
Below we include the Login Button social plugin. This button uses the JavaScript SDK to
present a graphical Login button that triggers the FB.login() function when clicked. -->
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true">
</div>
</body>
</html>
You can use your own button and call FB.login on click:
document.getElementById('loginBtn').addEventListener('click', function() {
//do the login
FB.login(function(response) {
if (response.authResponse) {
//user just authorized your app
document.getElementById('loginBtn').style.display = 'none';
getUserData();
}
}, {scope: 'email,public_profile', return_scopes: true});
}, false);
Source: http://www.devils-heaven.com/facebook-javascript-sdk-login/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</script>
<script>
window.fbAsyncInit = function () {
// FB JavaScript SDK configuration and setup
FB.init({
appId: // FB App ID
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
});
// Check whether the user already logged in
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
//display user data
getFbUserData();
}
});
};
// Load the JavaScript 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_GB/sdk.js#xfbml=1&version=v2.8&appId=FB APP ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Facebook login with JavaScript SDK
function fbLogin() {
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
} else {
document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';
}
}, {scope: 'email'});
}
// Fetch the user profile data from facebook
function getFbUserData() {
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
document.getElementById('fbLink').setAttribute("onclick", "fbLogout()");
document.getElementById('fbLink').innerHTML = 'Logout from Facebook';
document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.first_name + '!';
document.getElementById('userData').innerHTML = '<p><b>FB ID:</b> ' + response.id + '</p><p><b>Name:</b> ' + response.first_name + ' ' + response.last_name + '</p><p><b>Email:</b> ' + response.email + '</p><p><b>Gender:</b> ' + response.gender + '</p><p><b>Locale:</b> ' + response.locale + '</p><p><b>Picture:</b> <img src="' + response.picture.data.url + '"/></p><p><b>FB Profile:</b> <a target="_blank" href="' + response.link + '">click to view profile</a></p>';
});
}
// Logout from facebook
function fbLogout() {
FB.logout(function () {
document.getElementById('fbLink').setAttribute("onclick", "fbLogin()");
document.getElementById('fbLink').innerHTML = '<i class="fa fa-facebook-official" aria-hidden="true"></i>';
// document.getElementById('fbLink').innerHTML = '<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>';
document.getElementById('userData').innerHTML = '';
document.getElementById('status').innerHTML = 'You have successfully logout from Facebook.';
});
}
</script>
I'm trying to integrate Facebook login into my website with Facebook Javascript SDK. According to the step by step instructions provided by Facebook Developer document here, here is the test code I wrote:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{$MY_APP_ID}',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.1', // use version 2.1
status : true, // check FB login status
});
};
function fblogin() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert('Logged in.');
}
else {
FB.login();
}
}, true);
}
</script>
<button onclick="fblogin()">login</button>
<script src="//connect.facebook.net/en_US/sdk.js"></script>
Sorry, because of the restriction of website domain, I can't take this to fiddle. But I tried on my own domain, the Facebook login window popuped in Chrome and Firefox, but blocked by Safari. This is kind of weird, is there anything wrong for the code snippets provided by Facebook Developer Document?
As we already discussed in the comments, FB.login must be called on user interaction, the example in the docs is not correct.
This should be a working example how to do a login correctly, copied together from several articles in the Facebook docs:
<script>
//call this on user interaction (click)
function doLogin() {
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.');
}
}, {scope: 'email,user_friends'});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
FB.getLoginStatus(function (response) {
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
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
};
(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'));
</script>
<button onclick="doLogin()">login</button>
More explanation: http://www.devils-heaven.com/facebook-javascript-sdk-login/
Facebook login is not working. I dont know why.
Following is the FB js code :
<script>
window.fbAsyncInit = function () {
FB.Event.subscribe('auth.statusChange', function (response) {
$(document).trigger('fbStatusChange', response);
});
FB.init({
appId: '419718681491265', // App ID
channelUrl: 'http://127.0.0.1/9377/', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
// 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));
Following is the App dashboard:
Please help..Tired of banging my head
The error is :
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 one of the App's domains.
It seems that you can't test Facebook connect locally.
So a URL of 127.0.0.1 will not work.
I have been racking my brain for 2 days now. I am trying to build a simple Facebook app using the Javascript SDK and I just want a simple alert if the user is not authorized using getLoginStatus(). It works fine in my website but not in the canvas. I get no alert. I am using very simple code that Facebook provides.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '354932757968708', // App ID from the app dashboard
channelUrl : '//www.staging.socialdigi.com/channel.html', // Channel file
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("Youre In");
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
alert("Not Authorized");
} else {
// the user isn't logged in to Facebook.
}
});
};
// 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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I get the following errors in the console but have been told it doesnt have anything to do with my issue
Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://staging.socialdigi.com". The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access.
I do not have an ssl
Its in sandbox mode
I have the canvas url correct and nothing for secure canvas url
app id is correct
any help is appriciated
thanks
Currently FB.getLoginStatus is not at all firing after the facebook changes with new SDK and OAuth 2.0.
We used to get the response in FB.getLoginStatus and call our callback function that in turn was redirecting
the users to our facebook application.
Please help.
The code snippet -
FB.init({
appId: '<%=ConfigurationManager.AppSettings["APIKey"]%>', // App ID
//channelURL: 'xd_receiver.htm', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
oauth: true // enable OAuth 2.0
//xfbml: true // parse XFBML
});
update_user_is_connected();
function update_user_is_connected()
{
FB.getLoginStatus(function(response)
{
callback();
});
}
function callback() {
var fbURL = "http://apps.facebook.com/" + '<%=Suffix%>' + "/MyPage.aspx";
eval("parent.location='" + fbURL + "'");
}
Now FB.getLoginStatus is not working.
Regards,
KK
I've had the same issue and fixed it by adding true as a second parameter :
FB.getLoginStatus(function(response) {
callback();
},
true);
This disables the cache and forces reloading. See the docs
Just encountered this error whilst trying to check whether the user is already logged in with Facebook as soon as the page finished loading.
If you're trying to do this, you need to wait for facebook sdk to finish loading, Make your call to your checkLoginState() method inside window.fbAsyncInit after FB.init().
This code works very well with me to check login status and request login and fetch oauth info (Name, User Id, Token ... ) based on Java script SDK.
I have some recommendations which are that you have to make sure your application and channel file should be located within your domain which you have setup in your Facebook App settings.
Also make sure you have the div fb-root in your code:
<div id="fb-root"></div>
As shown below
Hope this may help ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Page</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxx', // App ID
channelUrl : 'https://xxxxxxxxxxxxx/channel.html',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
var token = "";
var userId = "";
FB.getLoginStatus(function(response) { // Get Login Status
if (response && response.authResponse) { // Check if User is Logged In
var token = response.authResponse.accessToken; // Get Token
var userId = response.authResponse.userID; // Get User ID
} else {
// alert("Not Auhtenticated");
FB.login(function(response) { // Promot User to Authenticate App
if (response && response.authResponse) {
var token = response.authResponse.accessToken;
var userId = response.authResponse.userID;
}
}, {scope: 'user_likes,friends_likes,publish_stream,read_friendlists,offline_access'}); // Scopes Example...
}
});
};
//Load 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_GB/all.js#xfbml=1&appId=xxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
My problem was in the window.fbAsyncInit function.
FB.init({
appId : '321677491886687',
cookie : true,
xfbml : true,
version : '3.2'
});
I needed to change 3.2 to v3.2
Kamal,
I believe you can fix your problem by replacing
FB.getLoginStatus(function(response)
{
callback();
});
with
FB.Event.Subscribe('auth.login', callback());
Regards
Make sure all you URLs are correct, I had the same problem while running locally but had the site URL pointing to the production website, once I corrected this, getLoginStatus worked all right.