User is unknown on when FB.login is triggered - facebook

Question

I am new to using the FB JS SDK so please bear with me..
I am currently trying to setup facebook login for a website. The problem I have is that when I click the login button and enter my login details facebook ONLY returns user info when I use the account I made the app on. When I use a different account response.authResponse returns a status of "unknown" which I find unusual.
The main function I'm reffering to here is this.loginUser.
I've also noticed that when I enter my details on the account I made the app on facebook will notify me that the app wants access to ... details however when I use a different account the login panel will disapear on login submit and not ask for permission.
Here is my code:
var FBUser = function(options) {
this.userInfo = null;
var that = this;
/* **********************************************
* Default parameter options
* **********************************************/
this.options = $.extend({
signInBtn: null,
messageContainer: null,
accountContainer: null
}, options);
/* **********************************************
* Initialise functions
* **********************************************/
this.init = function (){
//Load FB JS SDK
this.checkIfLoggedIn();
//Bind event handlers
this.bindEventHandlers();
};
//Check if user is already logged in, if so return data
this.checkIfLoggedIn = function(){
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log("You logged in before so were retrieving your info...");
// the user is logged in and has authenticated your app
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
that.userInfo = response;
that.showUserInfo();
// connected
} else if (response.status === 'not_authorized') {
alert("not connected");
// not_authorized
} else {
// not_logged_in
}
});
};
//Run event handlers to window
this.bindEventHandlers = function() {
if(that.options.signInBtn !== null){
//Trigger fb Login
$(document).on("click", that.options.signInBtn, function(){
console.log("triggered get login");
that.loginUser();
});
}else{
console.log("Btn ID's are null");
}
};
//Trigger FB login
this.loginUser = function(){
FB.login(function(response) {
console.log("RESPONSE IS: ");
console.log(response);
if (response.authResponse) {
var access_token = FB.getAuthResponse()['accessToken'];
console.log('Access Token = '+ access_token);
console.log('Welcome! You just logged in. Fetching your information.... ');
that.userInfo = response;
that.showUserInfo();
} else {
// sign out
console.log('User does not grant extended permissions');
}
}, {scope: 'email, read_friendlists, user_birthday, user_location'});
};
//Show user info
this.showUserInfo = function (){
var info = this.userInfo;
if(this.userInfo){
FB.api('/me', function(info) {
console.log('Good to see you, ' + info.name);
console.log("USER DATA IS: ");
console.log(info);
//Append user info
if(that.options.messageContainer){
$(that.options.accountContainer).show();
$(that.options.messageContainer).html(info.name)
.prepend('<img src="https://graph.facebook.com/'+info.id+'/picture" alt="'+info.name+'">');
}else{
console.log("facebook container is null");
}
if(that.options.signInBtn){
$(that.options.signInBtn).hide();
}else{
console.log("Login button is null");
}
});
}
};
//Log user out
this.FBLogout = function(){
FB.logout(function(response) {
console.log("user is now logged out");
$(that.options.signInBtn).show();
$(that.options.accountContainer).hide();
});
};
return this.init();
};
/* **********************************************
* Initialise FB app
* **********************************************/
window.fbAsyncInit = function() {
FB.init({
appId : '', // App ID
channelUrl : ''
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
FB.Event.subscribe('auth.statusChange', function(response) {
alert('The status of the session is: ' + response.status);
});
/* **********************************************
* Initialise FB user object
* **********************************************/
//Make sure document is ready before creating object due to jquery references
$(document).ready(function (){
//FB initialise options
var FBUserOptions = {
signInBtn: '#fb_login',
messageContainer: '#welcome',
accountContainer: '#account_area'
};
//create FB user object
var fb_user = new FBUser(FBUserOptions);
});
};
/* **********************************************
* Load FB JS 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));
The HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Facebook Login</title>
<script type="text/javascript" src="static/js/plugins/jquery-1.9.1.min.js"></script>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="static/js/fb_login.js?=v33"></script>
<style type="text/css">
body{font-family: Arial, Helvetica, sans-serif;}
#account_area{display: none;}
</style>
</head>
<body>
<div id="fb-root"></div>
Login to facebook
<div id="account_area">
<div id="welcome"></div>
Sign out
</div>
</body>
</html>