I followed the info from this post : here to load the JS SDK into my page.
Here is the page : https://www.tkwk.be/client/babyboom/www/
It works great (SSL connection is valid) until I use the SDK.
The problem is that when I try to use the function setAutoGrow() just before my /head I got an error.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
</script>
The page at about:blank displayed insecure content from
http://static.ak.facebook.com/connect/canvas_proxy.php?version=3#behavior=p&method=setSize¶ms=%7B%22height%22%3A892%2C%22width%22%3A1630%2C%22frame%22%3A%22iframe_canvas%22%7D.
However I did load the JS SDK with https like this :
<div id="fb-root"></div><script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB._https = true;
FB._https = (window.location.protocol == "https:");
FB.init({
appId : 'XXXXXXXXXXX',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
I would like to understand where I made a mistake.
Thanks in advance for your time.
Related
I'm getting this error since i upgraded my worklight developer edition to v5.0.6:
wlclient init started worklight.js:1118
Uncaught ReferenceError: wlInitOptions is not defined
Look inside your application's js folder (yourProject\apps\yourApp\common\js). Make sure it contains an initOptions.js file and that its content is as follows (you can also create a new application and copy the file from there):
var wlInitOptions = {
// # Should application automatically attempt to connect to Worklight Server on application start up
// # The default value is true, we are overriding it to false here.
connectOnStartup : false
};
if (window.addEventListener) {
window.addEventListener('load', function() { WL.Client.init(wlInitOptions); }, false);
} else if (window.attachEvent) {
window.attachEvent('onload', function() { WL.Client.init(wlInitOptions); });
In addition, the HTML file must not contain a call to WL.Client.init in the <body> tag. It should look like this:
<body id="content" style="display: none;">
I'm creating a sample html file for testing fb login. I used the code from the facebook developer page as follows but cannot get FB.getLoginStatus to be called. For my facebook app settings i have sandbox mode NO and put a random site url:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'MYAPPID', // App ID from the App Dashboard
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
FB.getLoginStatus(function(stsResp) {
alert('get login status callback!');
});
};
// Load the SDK's source 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>
</body>
</html>
The Facebook JavaScript SDK does not support being used in a non-http/https context.
I'd recommend using localtunnel so you can map your localhost to a public HTTPS URL like this:
lt --subdomain yourapp --port 3001
And then you just setup https://yourapp.localtunnel.me as your website.
I have an app that uses facebook authentication. A user has no problem logging in when using any modern browser. With ie 7 & 8 the following happens -
The user clicks the login button.
A facebook login window pops up
The user enters their details and clicks submit.
The pop up remains open and goes to a blank page with this url -
https://my-app.heroku.com/channel.html?fb_xd_fragment#?=LotsOfRandomUrlParamaters
My code looks like this -
<div id="container" class="facebook_tab" >
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : false,
channelUrl : 'https://my-app.heroku.com/channel.html'
});
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);
}());
</script>
It's a rails app using this gem - https://github.com/fionnbharra/facebooker2 - but I don't think that is the cause of the problem.
The rails code used to genertae that login button looks like this -
<%= fb_login(:text=>"Log in") do %>
top.location.href='<%= APP_CONFIG[:my_app_url] %>';
<% end %>
Anyone have any idea what's going on here?
This is a Facebook SDK problem (all.js). Try searching on fb_xd_fragment in Google. There are multiple solutions, some are a solution, some not...
You may file a bug-report at https://developers.facebook.com/bugs
I am using the following code to rendered the facebook login button
<div id="facebook-login">
<script>
FB.init({
appId:"appid", cookie:true,
status:true, xfbml:true
});
FB.Event.subscribe("auth.login", function(response) {
window.location = "http://xxx"; // redirect if user has logged in
});
</script>
<fb:login-button perms="publish_stream"><?php print 'Login with Facebook'; ?></fb:login-button>
</div>
But it no longer works today, and I think it is related to the oauth2.
So I tried to update the code as suggested in Facebook's developer docs.
The new code:
<div id="facebook-login">
<script>
window.fbAsyncInit = function() {
FB.init({
appId:"appid", cookie:true,
status:true, xfbml:true, oauth:true, xfbml: true, channelUrl: '//mydomain/channel.php'
});
FB.Event.subscribe("auth.login", function(response) {
window.location = "http://xxx"; // redirect if user has logged in
});
};
// 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>
<fb:login-button scope="publish_stream"><?php print 'Login with Facebook'; ?></fb:login-button>
</div>
Now whenever I click the facebook login button, the chrome console keeps throwing the following error
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/login.php?...
I think it is a js cross domain issue, but I have setup the channel url. Any idea on how to solve this problem?
Thanks.
Regards,
Kit
Be sure to replace the code to the new oAuth 2.0
param => scope
response.session => response.authResponse
response.session.access_token => response.authResponse.accessToken
FB.getSession().uid => FB.getAuthResponse().userID
link:
https://developers.facebook.com/blog/post/525/
Finally i found the answer. the get_facebook_cookie() no longer works for OAuth 2.0. we need the facebook php-sdk as mentioned in Facebook Developers – Facebook for Websites
You can also tried the example in Facebook Javascript SDK – A Simple Login Page with OAuth 2.0
I'm setting up a rails app and trying to implement login via Facebook JS SDK. Missing Omniauth already... :(
Anyway, what happens is that the dialog pops up, the user provides the login info, but then it redirects to https://www.facebook.com/connect/window_comm.php?_id=some-string&_relation=opener&auth_token=some-big-string, a blank screen. The pop-up doesn't close.
If I close it manually, though, and then refresh my page, I can see the login happened.
A curious thing is that on the first login, when permissions are asked for, everything works as expected, with the pop-up closing after permissions are granted or denied.
Tested on Chrome, FF, Safari and Opera. Consistent behaviour.
If I debug the blank redirect page on Chrome, there are two errors:
1) Unsafe JavaScript attempt to access frame with URL http://something from frame with URL https://something. Domains, protocols and ports must match. (note http x https...)
2) window_comm.php:7Uncaught TypeError: Cannot call method '_recv' of undefined
Here's the relevant code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'my-app-id',
status : true,
channelURL : 'http://localhost:3000/channel.html',
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(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/pt_BR/all.js"
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1" perms="offline_access"></div>
Thanks a lot for any light on this... Driving me nuts! =(
Edit: Can it be a bug on Facebook, since it is redirecting from http to https?
This answers Q.1) only. Facebook new requirements:-
switching to Oauth2.0 to fetch token_access
using SSL (ie: https://) to authenticate (hence the cross domain issues)
Also, I'd generally start with the code below to figure out the possible user state during the login process. That means clicking on anything and everything during testing phase.
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});