I have tried countless examples from all around.. Is there any real way to get the current users name in a fan page app using the JavaScript sdk without a pop up requesting authentication?
Here is my current JS:
window.fbAsyncInit = function() {
FB.init({
appId : 'ID', // App ID
channelUrl : 'url/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
frictionlessRequests : true, // enable frictionless requests
xfbml : true // parse XFBML
});
// Additional initialization code here
FB.api('/me', function(response) {
console.log("Welcome " + response.name);
});
};
// Load the JavaScript SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
and then my PHP:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="utf-8" />
<title>View Source App</title>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
<div id="fb-root"></div>
<div id="content">
<h2>My First App</h2>
<p>This is some text to make sure my app is working on Facebook</p>
</div><!--content -->
</body>
</html>
Any Help Greatly Appreciated.
The short answer is no. You need permission to access any user data.
Related
I am testing out some basic stuff and this is confusing.
Parse JavaScript SDK v1.9.0:
<script src="parse.min.js"></script>
<script>
Parse.initialize("KEY");
Parse.serverURL = 'URL'
</script>
Connect to Facebook:
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'ID',
xfbml : true,
version : 'v2.7'
});
};
(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'));
Get the current user:
var user = Parse.User.current();
All fine up to this point. I can read and display from user.
When I try to update the user:
user.set("name","test");
user.save();
RangeError: Maximum call stack size exceeded.
I checked for recursion. This is only being called one time. No idea why this error would be thrown.
EDIT: To fix syntax. Error still exists.
EDIT 2: I get the same error if I try to update the currentUser or if I set a pointer of another object to the currentUser. Example:
The following creates a new InterestObject just fine, unless I set the user column as a pointer to the currentUser. Then I get the same error.
var currentUser = Parse.User.current();
var InterestObject = Parse.Object.extend("CadetsInterest");
var intObj = new InterestObject();
intObj.save({
user: currentUser,
cadets: [checkCadets state],
cadets2: [checkCadets2 state],
cwg: [checkCWG state],
question: [txtQuestion stringValue]
}).then(function(object) {
[viewSuccess setHidden: NO];
[viewInterest setHidden: YES];
});
i think the syntax in your code should be:
user.set("name","test");
and in your case you wrote:
user.set("name"),"test"
UPDATE
From the code that you provided i don't see any logIn call in order to login with facebook.
I did some side project and managed to do it. What i did is the following:
Go to https://developers.facebook.com
Create facebook app of type Web
In your facebook app URL put your server URL (in my case i did it on my localhost so i put the URL where my app is hosted)
Go to your parse app and write put the following code:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide
</li>
<li>Parse JavaScript API Documentation
</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>We've also just created your first object using the following code:</p>
<code>
var TestObject = Parse.Object.extend("TestObject");<br/>
var testObject = new TestObject();<br/>
testObject.save({foo: "bar"});
</code>
</div>
</div>
<script type="text/javascript">
Parse.initialize("{PARSE_APP_ID}");
Parse.serverURL = '{PARSE_SERVER_URL}'
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId: '{YOUR_FB_APP_ID}',
xfbml: true,
version: 'v2.7'
});
};
(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'));
setTimeout(function() {
Parse.FacebookUtils.logIn(null, {
success: function(user) {
user.set("name", "test");
user.save();
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
}, 2000);
</script>
</body>
</html>
In this code i do exactly the same steps that you did but then i call to Parse.FacebookUtils.logIn. I am doing it after 2 seconds just to make sure that Parse.FacebookUtils.init was executed (it's better to do inside a callback but for testing purposed i did it like that).
then after i log in with my facebook account i get the user inside the success block, update his name and save it again.
then in my parse-dashboard i see the following:
Please also make sure that your current user is logged our before doing it because maybe there is a chance that you have an active session.
in order to do it simply call to
FB.User.logOut();
I'm trying to use facebook registration plugin on my localhost. But the problem is that the registration box won't show up.
Here are some screenshots:
https://dyp.im/FXwee52OJC
https://dyp.im/NRjFe2ulB9
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxxxxxxx',
cookie: true, // enable cookies to allow the server to access
// the session
xfbml: true, // parse social plugins on this page
version: 'v2.0' // use version 2.0
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:registration redirect_uri="http://www.google.com" />
test
</body>
</html>
See Documentation, Facebook requires that the redirect_uri be within your own site:
redirect_uri: The URI that will process the signed_request. It must be prefixed by your Site URL, defined in the app dashboard. This field is required.
So you need to change your registration tag to something like this:
<fb:registration redirect_uri="http://localhost/callback-fb-registered" />
I'm trying to get user information from facebook without sucess, someone can show me how and where should I put it in my code?
I already try using FB.getLoginStatus and some others that facebook tutorials had, I think I'm not knowing where to put it in my code...
I got to do this util the end of the mount, but I had never worked it html and javascript before.. so please help me guys!
thank you very much!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="text/html; charset=utf-8">
<title>SlickQuiz Demo</title>
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/slickQuiz.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/master.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css">
</head>
<body id="slickQuiz">
<div data-role="header">
<h1 class="quizName"><!-- where the quiz name goes --></h1>
</div>
<div data-role="content" class="quizArea">
<div class="quizHeader">
<!-- where the quiz main copy goes -->
<a class="button startQuiz" data-role="button" href="#" data-theme="b">Iniciar o teste!</a>
</div>
<!-- where the quiz gets built -->
</div>
<div class="quizResults">
<h3 class="quizScore">Pontuação: <span><!-- where the quiz score goes --></span></h3>
<h3 class="quizLevel"><strong>Nível:</strong> <span><!-- where the quiz ranking level goes --></span></h3>
<div class="quizResultsCopy">
<!-- where the quiz result copy goes -->
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/slickQuiz-config.js"></script>
<script src="js/slickQuiz.js"></script>
<script src="js/master.js"></script>
<fb:login-button show-faces="true" width="200" max-rows="1" perms="user_hometown,user_about_me,email,user_address" autologoutlink="true"></fb:login-button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '245686095571989', // App ID
channelUrl : 'http://localhost:8080/SlickQuiz/', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
FB.api('/me', function(response) {
alert(response.name);
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login();
} else {
FB.login();
}
});
};
(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));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert('3');
console.log('Good to see you, ' + response.name + '.');
alert(response.name);
});
}
</script>
</body>
</html>
Hmmm, there are multiple things in the above code which I don't understand why you need it there. For one, is there a reason why you gave oauth to true? Are you using oauth?
I tried to port this to a jsfiddle page to show you the working code but FB does block the usage of APPIDs outside the domain. This should give you an idea of what you needed: http://jsfiddle.net/7Ekz9/
window.fbAsyncInit = function () {
FB.init({
appId: '245686095571989', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true
});
FB.login(function (response) {
console.log(response);
if(response.authResponse){
testAPI();
}
});
};
FYI: I loaded the all.js as a external resource. You may try that as well.
Facebook API's FB object just seems to go null after init. This is the code I'm using, it's quite simple. The problem is that it says my "/me" response is undefined. I'm logged in, just double checked, so this is not the case. I already gave it permission to use my data.
Why is my "/me" responce undefined?
Also, is there a way I can move my code:
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
testAPI();
Into a separate .js file (with the code wrapped in a function), and have it load when function gets called inside window.fbAsyncInit? Cause every way I've tried to do that resulted in failure.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB-Stuff</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[my code]', // App ID
channelUrl : '//[my channel]', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
testAPI();
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
edit-------------------------------------------------------
Now I'm not getting any function calls/error messages at all. This is the new code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB-Stuff</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mycode.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx', // App ID
channelUrl : '//xxx/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
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
facebookInit();
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>
And inside mycode.js is:
function facebookInit(){
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
}
You need to defer the call to FB.api until after the status has been resolved - use FB.getLoginStatus or listen to one of the events for this.
Not sure what you mean with moving the code - you can put this code anywhere as long as it is loaded before the JS SDK.
Here is my code
<html>
<head>
<head>
<title></title>
<script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script>
<script type="text/javascript">
function go()
{
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.');
}
});
}
</script>
<body>
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '', // App ID
channelUrl : '', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true //oauth v2.0
});
};
// 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>
<input onclick="go();" type='submit' id='login-button' value='Login' name='login' >
</body>
</html>
Basically you click the button and it should show you a login pop-up. It works when I try in a normal browser but when I try in the iPhone simulator nothing happens. Iv also set the iPhone browser to allow pop-ups. what am I doing wrong?
I got it working using the phonegap plugin called Childbrowser :)