Original Post:
I am trying to use the "Client-side Authentication with the Javascript SDK" on Chrome for OS X (17.0.963.83). The code is copied directly from the Facebook example (with the YOUR_APP_ID updated):
<!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">
<a href="#" id="auth-loginlink">Login</a>
</div>
<div id="auth-loggedin" style="display:none">
Hi, <span id="auth-displayname"></span>
(<a href="#" id="auth-logoutlink">logout</a>)
</div>
</div>
</body>
</html>
When I click on "Login", the Facebook pop-up window appears. I click on "Log In with Facebook", the pop-up disappears, and the "auth-loggedin" div appears along with my name and the logout link. However, when I refresh the page, the page loses its Facebook authorization status and returns to the logged-out state.
The expected behavior would be for the page to remain in the logged-in state.
Using the console, I noticed that the fbsr cookie appears temporarily, and disappears once the page is refreshed. In addition, the following error is caught in the console:
Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php#cb=f16adb7b1c&origin=http%3A%2F%2F[BASE DOMAIN]%2Ff22295b918&relation=opener&transport=postmessage&frame=f3e8d40458&access_token=[ACCESS TOKEN]&expires_in=4221&signed_request=[SIGNED REQUEST]&base_domain=[BASE DOMAIN] from frame with URL [MY CODE URL]#. Domains, protocols and ports must match.
I made sure that the channel file was available and am unable to reproduce this error in Firefox or Safari on OS X or on IE, Firefox, or Chrome on Windows. Any ideas? I can work around this using server-side authentication but prefer to use client-side, if possible.
1st EDIT: Further testing
So I now think that the "Unsafe JavaScript" error is a red herring. I am using the channel file, but it is not being hit either in Firefox or Chrome.
Looking at the network traffic on Firefox vs Chrome, when the page first loads, and assuming I'm logged into Facebook on both browsers, I see the following requests being processed:
Firefox
[facebook url]/dialog/oauth?api_key=[app_id]&app_id=[app_id]&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df24509714bbf8d%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ff193ade24ab412%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=[app_id]&display=none&domain=[base_domain]&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2b6c8dce7b8936%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ff193ade24ab412%26relation%3Dparent%26transport%3Dpostmessage%26frame%3Df22112636bf762a&response_type=token%2Csigned_request%2Ccode&sdk=joey
[ssl facebook url]/dialog/oauth?api_key=[app_id]&app_id=[app_id]&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df24509714bbf8d%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ff193ade24ab412%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=[app_id]&display=none&domain=[base_domain]&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2b6c8dce7b8936%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ff193ade24ab412%26relation%3Dparent%26transport%3Dpostmessage%26frame%3Df22112636bf762a&response_type=token%2Csigned_request%2Ccode&sdk=joey
[ssl fbcdn url] /connect/xd_proxy.php#cb=f2b6c8dce7b8936&origin=http%3A%2F%2F[base_domain]%2Ff193ade24ab412&relation=parent&transport=postmessage&frame=f22112636bf762a&code=2.AQBMIMy0rSFAnqaA.3600.1332514800.1-5322361%7CU-RUi4ON2SbzfzzDT03CTeT-DgQ&signed_request=[signed_request]&access_token=[access_token]&expires_in=4302&base_domain=[base_domain]&https=1
Chrome
[facebook url] /dialog/oauth?api_key=[app_id]&app_id=[app_id]&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df1b2a93294%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ffdca87bc8%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=[app_id]&display=none&domain=[base_domain]&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df14d4dd364%26origin%3Dhttp%253A%252F%252F[base_domain]%252Ffdca87bc8%26relation%3Dparent%26transport%3Dpostmessage%26frame%3Df230336ee8&response_type=token%2Csigned_request%2Ccode&sdk=joey
[ssl fbcdn url] /connect/xd_proxy.php#cb=f14d4dd364&origin=http%3A%2F%2F[base_domain]%2Ffdca87bc8&relation=parent&transport=postmessage&frame=f230336ee8&error=unknown_user
I imagine this is because Chrome does not have the fbsr cookie set; which is a long way of leading me back to my original question. Why isn't Chrome setting the fbsr cookie (and, does it have something to do with the "Unsafe JavaScript attempt to access frame with URL" since that is sending the signed_request value in the hash?)
After all that, I'm going with bug. Unless anybody has a better idea!
No comments:
Post a Comment