I'm trying to add Facebook Login to my website using the Facebook Javascript SDK.
Everything seems to work, but the login popup opens with annoying scrollbars when asking for permissions (I'm already logged in Facebook). I tested it with Firefox 16, IE 9. Other sites that uses the Facbook login in a popup don't have the same behavior on my machine.
Perhaps they use a different approach?
Here is my code.. it's pretty simple, and you can just copy/paste in an html page to test it. Just set your APP-ID.
<html>
<body>
<img src="images/facebooklogin.png" id="login-fb" onclick="login();" />
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({
appId : 'APP-ID',
status : true,
cookie : true,
xfbml : false
});
};
// 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()
{
facebookPerms = [
'user_photos', 'email', 'offline_access', 'user_relationships', 'read_stream',
'user_about_me', 'user_birthday', 'user_education_history', //'publish_stream',
'user_hometown', 'user_interests', 'user_location', 'user_likes',
'user_religion_politics', 'user_activities', 'user_work_history'
];
//Get the facebook login status
FB.getLoginStatus(function(response) {
if (response.session) {
// logged in and connected user, someone you know
ajaxLogin();
} else {
//Display the facebook login dialog
FB.login(function(response) {
if (response.authResponse) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
ajaxLogin();
} else {
// user is not logged in, display the error dialog box
errorNotLogged();
}
}, {
//Ask for permissions of Facebook
scope: facebookPerms.join(',')
});
}
});
}
</script>
</body>
</html>
Related
I have my web application deployed in tomcat. Application loads fine with the URL:
http://domain.com/portal-app/ (domain.com=10.124.23.33:8081 i couldn't enter ip:port in url.) i have also pasted the same URL in my app settings page.
But still i get the error on console while loading the home page. I don't get js alerts too. When i click on "login" button and enter username and pwd, it just throws the same message in the facebook pop-up window. Any help on this would be much appreciated.
"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."
I had several times verified the URL in app settings. Both the application url that i use in browser and Facebook are same. Rather i just copy pasted the url.
Here is the code
<html>
<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 = "./js/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
window.fbAsyncInit = function() {
FB.init({
appId : '488834651123456',
channelUrl : 'http://domain/portal-app/channel.html',
status : true,
cookie : true,
xfbml : true
});
FB.getLoginStatus(function(response) {
alert(response.status);
if (response.status === 'connected') {
alert("hi");
} else if (response.status === 'not_authorized') {
FB.login(function(response) {
if (response.authResponse) {
alert("hi");
} else {
// The person cancelled the login dialog
}
}, {scope: 'user_about_me,user_birthday,user_groups,user_hometown,user_interests,user_likes,user_location,read_stream'});
}else {
FB.login(function(response) {
if (response.authResponse) {
alert("hi");
} else {
// The person cancelled the login dialog
}
}, {scope: 'user_about_me,user_birthday,user_groups,user_hometown,user_interests,user_likes,user_location,read_stream'});
}
});
};
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
It looks like channelUrl is missing the .com and should be http://domain.com/portal-app/channel.html in your init function.
I have a website with facebook connect and a facebook page tab in witch the user must login to facebook.
I use the JS API and it open a popup to let the user connect.
It work fine everywhere but in ie 7 and 8.
instead of opening in a popup it open in a new tab. The user can log in but after it stay open and redirect to a blank page (https://www.facebook.com/dialog/permissions.request).
The login was successful and if the page is refreshed the user is logged in, but I need it be a popup and close itself after and do a callback so I can refresh the page like in other browser.
anyone have an idea on how to fix this, tried everything i could find and nothing work.
a part of my code :
$`
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '<cfoutput>#appId#</cfoutput>',
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // OAuth 2.0
status : true, // check login status
xfbml : true, // parse XFBML
channelUrl: 'http://192.168.1.96/gocoupons/OngletFacebook/channelUrl.cfm' //custom channel
});
};
(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() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());*/
function login() {
//$.cookie('fbsr_<cfoutput>#appId#</cfoutput>',null);
FB.login(function(response) {
if (response.authResponse) {
window.location.reload();
}
}, {scope: 'email,user_checkins'});
}
function addToPage() {
FB.ui({method: 'pagetab'}, function(response){
$('#pageid').val(JSON.stringify(response));
$('#formAjoutPage').submit();
});
}
</script>
`
I am trying to request additional permissions at the time of a facebook login using Facebook's suggested Javascript SDK. I am using the scope parameter to make the additional request as a part of the FB.login(). My chrome browser has blocked popups. When I load the page containing the FB.login and the scope parameters into my browser, Chrome blocks the automatic popup. When I then click on an html button to perform the facebook login and authorization request, the only permissions that the fb popup shows is the one for basic info. However, if I allow popups, then when I load the page, a facebook authorization popup automatically displays without the need to click on the button to launch the fb login. When this automatic popup displays, it now shows the additional permissions I included in the scope parameters. How can I get the additional permissions to display in the fb login popup when popups are blocked?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID', // App ID
channelUrl : 'channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
function login() {
FB.login(
function(response) {
if (response.authResponse) {
// connected
} else {
// cancelled
}
},
{scope: 'email, user_birthday'}
);
}
// 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>
</head>
<body>
<button type="button" onclick="FB.login()">login</button>
</body>
</html>
FB.login can not be used outside of an event handler (user initiated) due to it creating a popup when used outside of Canvas.
Instead, display a button that the user can click in order to execute FB.login.
The reason why your button does not ask for permissions is simply because you havent added any to the function call - you use FB.login() - no perms there.
I am trying to make a WordPress submit form using Gravity Forms where the visitors see a "Login with Facebook" button.
Once the visitor logs in and grants the permission, the section then refreshes to show the Facebook user profile link and picture, letting the visitor know that they are submitting with the Facebook profile.
I have already copied the codes but I need some help to complete it.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXXX', // App ID
channelUrl : '//www.MY-DOMAIN.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<script>
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
</script>
Now, what do I put to get the section where I can show a "login button" and then show the user profile link after someone logs in?
For log-in you may use one of:
FB.login method of JavaScript SDK
Login Button (which have HTML5/XFBML/Iframe version)
Your call the to API is too premature in the page load. First it need to be done after facebook scripts are ready to be run. You can put the code into the fbAsyncInit() function. Secondly, you should follow this paradigm to ensure the user is logged into your app, see: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
status : true,
cookie : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
$.ajax({
url: "http://example.com/fbconnect",
success: function(){
window.location.reload();
}
});
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button" data-perms="email,user_birthday,user_hometown,user_location">Login with Facebook</div>
It's working with only two cases.
1- when a user is NOT logged in and log in to facebook it triggers.
2- when a user is logged in but didn't authorize the app yet it triggers.
the third scenario which is not working is when a user is logged in and He is already authorized the app the FB.Event.subscribe('auth.login) won't trigger !!!
I encountered the same thing as you and I found a function, "getLoginStatus", that might be of interest for you.
When the user is already logged in and has granted your app all the permissions, then there is no need to log in again and therefore the event won't be triggered.
However, if the response of the "getLoginStatus" is "connected" you can do the stuff you want to do when the user is already logged in and has granted your app all the permissions.
The complete script might look something like this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APPID', // App ID
channelUrl : 'CHANNEL_URL', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and connected to 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;
FB.api('/me', function(response) {
if (response.name != undefined ) {
console.log("Welcome, " + response.name);
}
});
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but not connected to the app
} else {
// the user isn't even logged in to Facebook.
}
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Got the exact same issue here and it's driving me nuts. Not liking the Facebook Javascript SDK atm.
It's really complex with the status check in FB.init() and makes it even harder when you put facebook comments on the page...
A workaround I just tested is to have your own login button and use the FB.login() method, there you can hook in to the callback (this replaces your code for the auth.login event).
window.fbAsyncInit = function () {
FB.init({
...
});
$('#fb-login-button-custom').show().click(function () {
var scopeList = $(this).data('scope');
FB.login(function (response) {
alert('FB.login callback');
console.log(response);
document.location.href = document.location.pathname + '?fblogin=1';
}, { scope: scopeList });
});
});
That default login event is actually only triggered when the user authorizes your application. So when loging out the user, you could revoke the authorization. But then every time they log in they have to 'allow' the app.
Using FB.Event.subscribe('auth.statusChange', handleStatusChange); will notify you status changes..
hope it helps