Facebook login is not working. I dont know why.
Following is the FB js code :
<script>
window.fbAsyncInit = function () {
FB.Event.subscribe('auth.statusChange', function (response) {
$(document).trigger('fbStatusChange', response);
});
FB.init({
appId: '419718681491265', // App ID
channelUrl: 'http://127.0.0.1/9377/', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
// 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));
Following is the App dashboard:
Please help..Tired of banging my head
The error is :
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.
It seems that you can't test Facebook connect locally.
So a URL of 127.0.0.1 will not work.
Related
I have an angular-ui-router web app.
There's code:
window.fbAsyncInit = function () {
console.log('loginCtrl.window.fbAsyncInit: initiating FB ...');
FB.init({
appId: '1058057514286456', // rand's peoplecount-www app
//status: true,
//cookie: true,
xfbml: true,
version: 'v2.5'
});
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
When I click on the login-with-facebook button, it calls:
FB.login(function (response) {
console.log('FB Reg : Response - ' + JSON.stringify(response));
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', {fields: 'name, email,first_name,last_name,verified'}, function (response) {
$scope.saveUserInfo('$scope.fbRegistration', response);
console.log('fbReg: api response='+JSON.stringify(response));
});
} else {
console.log('fbReg: User cancelled login or did not fully authorize. response='+JSON.stringify(response));
}
});
When I hit the facebook login button, I a facebook dialog opens with a message:
URL Blocked
This redirect failed because the redirect URI is not whitelisted
in the app’s Client OAuth Settings. Make sure Client and Web OAuth
Login are on and add all your app domains as Valid OAuth Redirect URIs.
What redirect URI is it using? Where do I set it?
https://developers.facebook.com/docs/facebook-login/web === nothing on this web page talks about the redirect URI
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow === this has a call to a url with a redirect_uri on it. Do I have to use this manual method?
https://www.facebook.com/dialog/oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
Thanks
All redirect URI should be whitelisted in the App's Dashboard.
The Dashboard can be accessed at https://developers.facebook.com/
Under PRODUCTS category you should see "Facebook Login" (if not - just create it through "+Add Product" option)
On the "Facebook Login" you'll find "Valid OAuth redirect URIs" parameter where you can whitelist your URIs.
Facebook security guys explains why it may be necessary https://www.facebook.com/FacebookforDevelopers/videos/10152795636318553/ at around 9:50.
Starting March 2018 only such whitelisted URIs will be able call Facebook API.
I'm trying to integrate Facebook login into my website with Facebook Javascript SDK. According to the step by step instructions provided by Facebook Developer document here, here is the test code I wrote:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{$MY_APP_ID}',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.1', // use version 2.1
status : true, // check FB login status
});
};
function fblogin() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert('Logged in.');
}
else {
FB.login();
}
}, true);
}
</script>
<button onclick="fblogin()">login</button>
<script src="//connect.facebook.net/en_US/sdk.js"></script>
Sorry, because of the restriction of website domain, I can't take this to fiddle. But I tried on my own domain, the Facebook login window popuped in Chrome and Firefox, but blocked by Safari. This is kind of weird, is there anything wrong for the code snippets provided by Facebook Developer Document?
As we already discussed in the comments, FB.login must be called on user interaction, the example in the docs is not correct.
This should be a working example how to do a login correctly, copied together from several articles in the Facebook docs:
<script>
//call this on user interaction (click)
function doLogin() {
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email,user_friends'});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated 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;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<button onclick="doLogin()">login</button>
More explanation: http://www.devils-heaven.com/facebook-javascript-sdk-login/
I have been racking my brain for 2 days now. I am trying to build a simple Facebook app using the Javascript SDK and I just want a simple alert if the user is not authorized using getLoginStatus(). It works fine in my website but not in the canvas. I get no alert. I am using very simple code that Facebook provides.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '354932757968708', // App ID from the app dashboard
channelUrl : '//www.staging.socialdigi.com/channel.html', // Channel file
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("Youre In");
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
alert("Not Authorized");
} else {
// the user isn't logged in to Facebook.
}
});
};
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I get the following errors in the console but have been told it doesnt have anything to do with my issue
Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://staging.socialdigi.com". The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access.
I do not have an ssl
Its in sandbox mode
I have the canvas url correct and nothing for secure canvas url
app id is correct
any help is appriciated
thanks
About 50% of the time, when calling FB.init, I get this javascript error:
Refreshing the page sometimes fixes the issue. I can't discern any particular pattern.
Does anyone recognize this code? Is it part of the facebook js sdk?
How do I figure out what is going wrong? I checked the open issues at the Facebook support site but did not see anything.
This is my init code straight out of the fb docs:
<script>
window.fbAsyncInit = function () {
debugger;
FB.init({
appId: xxxx,
status: true,
cookie: true,
xfbml: true
});
};
// Load the SDK Asynchronously
(function (d) {
debugger;
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>
Currently FB.getLoginStatus is not at all firing after the facebook changes with new SDK and OAuth 2.0.
We used to get the response in FB.getLoginStatus and call our callback function that in turn was redirecting
the users to our facebook application.
Please help.
The code snippet -
FB.init({
appId: '<%=ConfigurationManager.AppSettings["APIKey"]%>', // App ID
//channelURL: 'xd_receiver.htm', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
oauth: true // enable OAuth 2.0
//xfbml: true // parse XFBML
});
update_user_is_connected();
function update_user_is_connected()
{
FB.getLoginStatus(function(response)
{
callback();
});
}
function callback() {
var fbURL = "http://apps.facebook.com/" + '<%=Suffix%>' + "/MyPage.aspx";
eval("parent.location='" + fbURL + "'");
}
Now FB.getLoginStatus is not working.
Regards,
KK
I've had the same issue and fixed it by adding true as a second parameter :
FB.getLoginStatus(function(response) {
callback();
},
true);
This disables the cache and forces reloading. See the docs
Just encountered this error whilst trying to check whether the user is already logged in with Facebook as soon as the page finished loading.
If you're trying to do this, you need to wait for facebook sdk to finish loading, Make your call to your checkLoginState() method inside window.fbAsyncInit after FB.init().
This code works very well with me to check login status and request login and fetch oauth info (Name, User Id, Token ... ) based on Java script SDK.
I have some recommendations which are that you have to make sure your application and channel file should be located within your domain which you have setup in your Facebook App settings.
Also make sure you have the div fb-root in your code:
<div id="fb-root"></div>
As shown below
Hope this may help ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Page</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxx', // App ID
channelUrl : 'https://xxxxxxxxxxxxx/channel.html',
status : true,
cookie : true,
xfbml : true,
oauth : true
});
var token = "";
var userId = "";
FB.getLoginStatus(function(response) { // Get Login Status
if (response && response.authResponse) { // Check if User is Logged In
var token = response.authResponse.accessToken; // Get Token
var userId = response.authResponse.userID; // Get User ID
} else {
// alert("Not Auhtenticated");
FB.login(function(response) { // Promot User to Authenticate App
if (response && response.authResponse) {
var token = response.authResponse.accessToken;
var userId = response.authResponse.userID;
}
}, {scope: 'user_likes,friends_likes,publish_stream,read_friendlists,offline_access'}); // Scopes Example...
}
});
};
//Load asynchronously
(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_GB/all.js#xfbml=1&appId=xxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
My problem was in the window.fbAsyncInit function.
FB.init({
appId : '321677491886687',
cookie : true,
xfbml : true,
version : '3.2'
});
I needed to change 3.2 to v3.2
Kamal,
I believe you can fix your problem by replacing
FB.getLoginStatus(function(response)
{
callback();
});
with
FB.Event.Subscribe('auth.login', callback());
Regards
Make sure all you URLs are correct, I had the same problem while running locally but had the site URL pointing to the production website, once I corrected this, getLoginStatus worked all right.