I am using HTML 5 to develop a few things and inserting Facebook JavaScript SDK within the same.
I have developed a Facebook application where I want to:
1) If user is not logged in facebook, it will ask for login, but if the user is logged in and opens the application, it should ask for the persmission automatically rather than the user needing to click the link having FB.LOGIN() again.
There is one Stack Overflow question, How do I get my Facebook application to automatically ask for the required permissions post installation where they do it by using window.top.location = "<?php echo $loginUrl; ?>";, but how can I find this authenication URL within JavaScript?
JavaScript code:
<div id="fb-root"></div>
<script>
// 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/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : 'appid', // App ID
channelUrl : '//www.domain/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') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedinnotauthenticate').style.display = 'none';
document.getElementById('loginauthenicated').style.display = 'block';
}
else
if (response.status === 'not_authorized') {
window.top.location = ";redirect_uri=/";
}
else {
window.top.location = ".php?api_key=id&skip_api_login=1&display=page&cancel_url=/";
}
});
</script>
I am using HTML 5 to develop a few things and inserting Facebook JavaScript SDK within the same.
I have developed a Facebook application where I want to:
1) If user is not logged in facebook, it will ask for login, but if the user is logged in and opens the application, it should ask for the persmission automatically rather than the user needing to click the link having FB.LOGIN() again.
There is one Stack Overflow question, How do I get my Facebook application to automatically ask for the required permissions post installation where they do it by using window.top.location = "<?php echo $loginUrl; ?>";, but how can I find this authenication URL within JavaScript?
JavaScript code:
<div id="fb-root"></div>
<script>
// 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/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : 'appid', // App ID
channelUrl : '//www.domain./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') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedinnotauthenticate').style.display = 'none';
document.getElementById('loginauthenicated').style.display = 'block';
}
else
if (response.status === 'not_authorized') {
window.top.location = "https://www.facebook./dialog/oauth?client_id=id&redirect_uri=http://apps.facebook./appp/";
}
else {
window.top.location = "https://www.facebook./login.php?api_key=id&skip_api_login=1&display=page&cancel_url=http://apps.facebook./appp/";
}
});
</script>
2 Answers
Reset to default 3Use this:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
fbUserId = response.authResponse.userID;
token = response.authResponse.accessToken;
}
else {
FB.login(function(response) {
if (response.authResponse) {
fbUserId = response.authResponse.userID;
token = response.authResponse.accessToken;
}
else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'user_location'});
}
},true);
I think that the best option for you is to use the authenticated referrals feature which means that Facebook will take care of the authentication for you, along with the permissions you need.
The user will be passed to your application only after the user went through the authentication process.
If that does not suit you for any reason, please check out the documentation for authentication and especially the server-side flow since it seems like that's what you're after from what you've wrote.
From your JavaScript code, it seems that you are not using the channel URL property when you init the Facebook SDK. As it states in the JavaScript SDK documentation (Channel File section):
The channel file addresses some issues with cross domain munication in certain browsers
And then:
The channelUrl parameter is optional, but remended.
I can't promise that it will fix it, but it might.
It should be like this:
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : 'appid', // App ID
channelUrl : '//www.domain./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') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
document.getElementById('auth-loggedout').style.display = 'none';
document.getElementById('auth-loggedinnotauthenticate').style.display = 'none';
document.getElementById('loginauthenicated').style.display = 'block';
}
else
if (response.status === 'not_authorized') {
window.top.location = "https://www.facebook./dialog/oauth?client_id=id&redirect_uri=http://apps.facebook./appp/";
}
else {
window.top.location = "https://www.facebook./login.php?api_key=id&skip_api_login=1&display=page&cancel_url=http://apps.facebook./appp/";
}
});
// 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/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
As you can see, first you need to define the window.fbAsyncInit callback method, and only then load the SDK.