I have a site that has a login through facebook option
I can't figure out what's wrong, I'm getting two kinds of errors
The first, even though for me it works (Chrome, Explorer) my friend receives a "new_fb_login() not defined" error
And just now I started getting those ambiguous errors (chrome debug):
Unsafe JavaScript attempt to access frame with URL **facebooky URL** from
frame with URL http://site.co.il/. The frame being accessed set
'document.domain' to 'facebook.com', but the frame requesting access did not.
Both must set 'document.domain' to the same value to allow access.
I thought it might have something to do with my site currently password protected, because now when I put the password back I just started getting them, but after disabling back they didn't stop, maybe takes some time to refresh?...
I'd appreciate some light upon this, thanks!
this is my code, right after the tag
<div id="fb-root"></div>
<script>
function new_fb_login() { //
if(!fb_connected){
FB.login(function(response) {
if (response.authResponse) {
fb_connected = true;
console.log('connected'); //Approved the app just now
login(true);
} else {
fb_connected = false;
console.log('cancelled');
}
});
}
else{
FB.api('/me', function(response) {
login(true);
});
}
}
function testAPI() {
console.log('Logged');
FB.api('/me', function(response) {
console.log('Welcome, ' + response.name + '.');
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'MyActualCode', // App ID
channelUrl : '//WWW.site.CO.IL/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('connected');
fb_connected = true;
//testAPI();
} else if (response.status === 'not_authorized') {
fb_connected = false;
console.log('not_authorized');
//login();
} else {
console.log('not_logged_in');
fb_connected = false;
//login();
}
});
};
// 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));
Related
This question already has an answer here:
Email scope is not working which is used in FB Login
(1 answer)
Closed 7 years ago.
I am making a site to make people login via their Facebook account.
I am able to fetch Name and the users image but I'm not getting users email. Email is returning as undefined. My code for Facebook login is:
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXX', // Set YOUR APP ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
document.getElementById("message").innerHTML += "<br>";
}
else if (response.status === 'not_authorized')
{
}
});
};
function Login()
{
FB.login(function(response) {
if (response.authResponse)
{
getUserInfo();
getPhoto();
} else
{
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,user_photos,user_videos'});
}
function getUserInfo() {
FB.api('/me', function(response) {
var str="You have succesfully logged in<br>";
var name=response.name;
var email=response.email;
console.log(name+email);
});
$(document).ajaxStop(function(){
window.location.reload();
});
}
function getPhoto()
{
FB.api('/me/picture?type=normal', function(response) {
var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";
$('#getphoto').html(str);
});
}
function Logout()
{
FB.logout(function(){document.location.reload();});
}
// 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));
I've tried to get the email by all ways mentioned in Stack Overflow and developers.facebook.com, but failed.
Trigger for the Facebook login:
<img src='img/fblogin.jpg' onclick='login()'>
I tried to alert response properties by
for (key in response){ alert("response["+ key +"]="+ response[key]); }
it is returning name and id not email
I think issue is on your app that you have created on here https://developers.facebook.com/apps/
can you please make below changes first ?
login in https://developers.facebook.com/apps/ and open your app.
Click on "Status & Review" then find this "
Do you want to make this app and all its live features available to the general public?" make it yes.
After that check did you get email or not and let me know.
I need a apps where user can login & after login some info will shown. But I have faces many problems several times. Please help me to correct this. SOmetime shows FB not recognized, sometimes shows GET file://connect.facebook.net/en_US/all.js net::ERR_FILE_NOT_FOUND .
<html>
<head>
<title> Facebook </title>
<script src="jquery.js"></script>
</head>
<body>
Login
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxx', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
testAPI() ;
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// 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));
</script>
</body>
</html>
add http: in front of //. I think this is necessary.
I have the following code for my Facebook Application:
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXX', // App ID
channelUrl : '/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
//***************************************************
//* FanGate for Facebook
//***************************************************
var hideLogin = function(){
$("#login-fb").hide();
}
var showLogin = function(){
$("#login-fb").show();
}
var doLogin = function(){
FB.login(function(response) {
if (response.session) {
hideLogin();
checkLike(response.session.uid)
} else {
// user is not logged in
}
});
}
var checkLike = function(user_id){
var page_id = "XXXXXXXXX"; //coca cola
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
var the_query = FB.Data.query(fql_query);
the_query.wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
$("#thirsty_thursdays").show();
} else {
$("#fan_gate").show();
}
});
}
FB.getLoginStatus(function(response) {
console.log(response.status);
if (response.status == 'connected') {
hideLogin();
checkLike(response.authResponse.userID)
} else {
showLogin();
}
}, true);
$("#login-fb a").click(doLogin);
};
// 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));
response.status always returns not_authorized and I am really unclear why. I am logged into Facebook and the application is a simple Page Tab. I have recently added App on Facebook to the setting to see if that helps but no luck.
I have not seen any additional info on the Facebook JS SDK docs that give any info.
I am basically looking to show content if the user is logged in and is a fan of a certain page and hide the content if not. (commonly called fan gate)
Would have posted this as a comment but I cant yet...
After your tab loads and the FB.getLoginStatus() response indicates "not_authorized" (and therefore, I assume, shows your login button) -- what happens if you then click your login button? Is it giving the facebook pop-up prompt to authorize the app? (I'm hesitant to ask this but are you in fact sure that you've authorized the app?) Or does it just do nothing?
-In the callback for FB.login.. what does it output if you add a console.log(response.authResponse) ?
-I believe the channelUrl is supposed to be fully qualified whereas you have it root relative.. Not sure that would have any impact on your issue but might want to try it.. see https://developers.facebook.com/docs/javascript/gettingstarted/#channel
I'm trying to integrate a Facebook login with my website, and I'm testing out my Facebook login right now through a local host. This is the code I've generated from following the instructions on the Facebook JavaScript SDK guide.
<html>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '*************', // App ID
channelUrl : 'http://localhost', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
testAPI();
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testApi();
} else {
// cancelled
console.log('Login failed!');
}
});
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
}
(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>
<script src="//connect.facebook.net/en_US/all.js"></script>
</body>
</html>
It's saying that it failed to load resource: file://connect.facebook.net/en_US/all.js It's basically failing GET all.js. What's wrong?
My Facebook App Dashboard has localhost as the AppDomain and Site URL as http://localhost.
Try following code.
(function(){
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = 'http://connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
2018 Updated Answer:
1) The test HTML file can't be loaded as file:// it needs to be loaded under a web server (eg: http://localhost/test.html )
2) Disable script/ad blockers. Most of them see the FB SDK as "evil" and block it.
I am able to get the registration form working with custom fields and retrieve the custom fields via a cookie on the redirect page. What I cannot figure out is how to retrieve the Facebook info (name,email,birthday) on the next page (I'm not a PHP guy). I have been over the documentation several times, the "reading the data" section (FB Documentation), and scoured the internet but can only find PHP and C# solutions.
I am looking for a javascript, jQuery, or ColdFusion solution if someone could help me out.
Below is my code as a quick reference. As it stands Page 2 just dumps out the cookie information.
Page 1
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<!--- Facebook Call --->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myAppID', // App ID
channelUrl : 'http://.../channel.html', // 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));
</script>
<!--- Output Facebook Box--->
<fb:registration redirect-uri="http://.../page2.cfm"
fields='[
{"name":"name"},
{"name":"email"},
{"name":"displayName","description":"Display Name:", "type":"text"},
{"name":"location"},
{"name":"birthday"}
]'
onvalidate="validateAndSave">
</fb:registration>
<!---Validation + set Cookie --->
<script>
function validateAndSave(form) {
if (!form.displayName) {
return({"displayName":"Display Name is Required"});
}
document.cookie = 'fbInfo='+'displayName='+form.displayName;
return {};
}
</script>
</body>
Here is my implementation based on trial and error with the FB javascript API.
function checkFB()
{
if (typeof(FB) === "undefined")
{
var t = setTimeout("checkFB()", 1000);
if (debug) console.log("FB is still undefined, try again in 1 second.");
}
else
{
if (debug) console.log("FB is defined, try to login -> ");
//Function to check the current login status of facebook
FB.getLoginStatus(function(r)
{
if (r.status === "not_authorized")
{
if (debug) console.log("-> NOT AUTHORIZED ");
}
else if (r.status === "connected")
{
if (debug) console.log("-> connected ");
if (r.authResponse)
{
FB.api('/me', function(rr) {
document.getElementById("fbFname").value = rr.first_name;
document.getElementById("fbLname").value = rr.last_name;
document.getElementById("fbEmail").value = rr.email;
document.getElementById("fbID").value = rr.id;
document.getElementById("status").value = "OK";
});
submitFB();
}
else
{
document.getElementById("status").value = "NOT AUTHORIZED";
history.go(-1);
if (debug) console.log("NOT AUTHORIZED");
}
}
else
{
if (debug) console.log("-> not connected -> POP UP BOX expected ");
// start login process
FB.login(function(re)
{
if (re.authResponse)
{
FB.api('/me', function(rr) {
document.getElementById("fbFname").value = rr.first_name;
document.getElementById("fbLname").value = rr.last_name;
document.getElementById("fbEmail").value = rr.email;
document.getElementById("fbID").value = rr.id;
document.getElementById("status").value = "OK";
});
submitFB();
}
else
{
document.getElementById("status").value = "NOT AUTHORIZED";
history.go(-1);
if (debug) console.log("NOT AUTHORIZED");
}
},
{scope: 'email'}); // we define what information we want to get from the user
}
});
}
}
I hope you have already gotten an appID from facebook and have a channel file, they need to replace 'myAppID' and 'http://.../channel.html'.
FB.init({
appId : 'myAppID', // App ID
channelUrl : 'http://.../channel.html', // Channel File