Access denied while redirecting back to application - facebook

Question

This is my implementation of facebook login functionality using Facebook SDK.
<script type="text/javascript">
window.fbAsyncInit = function () {
// Initialize the SDK upon load
FB.init({
appId: '1xxxxxxxxxxxx', // App ID
channelUrl: '//' + window.location.hostname + '//Home/Index',
scope: 'id,name,gender,user_birthday,email,first_name,last_name,access_token',
status: true,
cookie: true,
xfbml: true
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', OnLogin);
};
// This method will be called after the user login into facebook.
function OnLogin(response) {
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
$('#AccessToken').attr('value', access_token);
$("#AuthenticatedWithFacebook").attr("value", true);
FB.api('/me', LoadValues);
}
else {
$("#AuthenticationToken").removeAttr('value');
$("#AuthenticatedWithFacebook").attr("value", false);
}
}
//This method will load the values to the labels
function LoadValues(me) {
if (me.id) {
$("#UserId").attr("value", me.id);
$("#AuthenticationToken").attr("value", "facebook/" + me.id);
$("#FirstName").attr("value", me.first_name);
$("#LastName").attr("value", me.last_name);
$("#EmailAddress").attr("value", me.email);
}
}
</script>
<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/all.js#xfbml=1&appId=1xxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Login Pop-Up works just fine but after logging in I'm getting following exception:
Exception was thrown at line 38, column 184 in http://static.ak.fbcdn.net/rsrc.php/v2/yQ/r/Yax99g-1J46.js
0x80070005 - JavaScript runtime error: Access is denied.
I'm testing here on localhost (http://localhost:59777/) which I have configured in my Facebook application as well.