I tried to implement facebook login in local,i used below code in my website
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any authentication related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct interaction from people using the app (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.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));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
after i login to my website , facebook login button is appering.but when i click on login button, i is showing URL error
I tried all below url to set Site URL in facebook dashboard
but still am getting same error.
am using wamp(php)
can any one help me, what is the url ia have to set as site url in facebook dashboard to it should work locally??????
Here is two solutions to run your facebook application in your localhost..
Running Facebook application on localhost
http://ankurm.com/blog/using-localhost-for-facebook-app-development/
also you have to enable curl extension in your php..
After proving your App Id for facebook , use redirect_url and set it to local address.
Related
I'm using the following form to allow users register to my web app through their facebook account. I have my own policy regarding Username's length, password's complexity etc. and I want to force it also on user that register through facebook, I know that I can do it in the register.php file (the Facebook php api: Verify user details according to my app's policy, see below) but then the user is already registered from facebook's perspective.
My question is, then, how can I prevent a user from being registered to my app without providing registration details which fit my app's policy?
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_FB_APP_ID',
channelUrl : 'channel.html',
status : true,
cookie : true,
oauth : true,
xfbml : true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(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>
<div class="fb-registration"
data-fields='[{"name":"name"},
{"name":"birthday"},
{"name":"location"},
{"name":"gender"},
{"name":"email"},
{"name":"username","description":"Username","type":"text"},
{"name":"password"}]'
data-redirect-uri= MY_DOMAIN . "register.php" >
</div>
You can make a DELETE call to /user/permissions. Since this would make the user re-auth your app, I wouldn't do this as soon as the user tries to create an invalid registration on your site. Instead, depending on your complexity, issue the DELETE call when the user has left your registration page for good.
According to the docs:
The second thing you can do is to completely de-authorize the app
making the delete call. Once this is done, anyone using your app will
have to go through the Facebook Login process as if they were a new
user. This can be effective when an explicit 'log out' function is
provided, or an option to delete in-app accounts
I'm trying to create a website that allows users to login with their Facebook account. I do not need to make any requests or store any info when they are not on the website and so I do not need a database.
I am only going to accept login with Facebook and no other login types are required. I will need the typical login with Facebook button on the login page and the ability to keep them logged in across multiple pages. I would also like to add an ability to log out.
I've downloaded the PHP SDK and I am using the JavaScript SDK together on my pages, but I am having so much trouble.
Is it just me or does the Facebook SDK completely suck?
My first problem is that the JavaScript SDK on the login page doesn't redirect the user to the main page after authentication. I am manually refreshing the page currently (the PHP SDK realizes that the user is logged in and sends the user to the main page).
Another issue is logout. I am using the PHP SDK's getLogoutURL() function, and it logs the user out of Facebook, but my access token is still fully valid and PHP refuses to send the user to the login page. Why? I have no idea. Personally, I'd like that the user be logged out of my website and not Facebook.
I'm trying to make a seamless login system with Facebook, but I'm having nothing but trouble! I can't seem to find any good documentation on Facebook Connect at all. I'm using their examples and problems like this are happening. Maybe they just can't make a good SDK. I'd like to use the PHP SDK and the JavaScript SDK to make a very nice user experience, but it just doesn't seem possible.
login.php's PHP code
require_once("../fb-sdk/src/facebook.php");
$Facebook = new Facebook(array(
'appId' => 'xx',
'secret' => 'xx',
));
$User = $Facebook->getUser();
if ($User)
{
try
{
// Proceed knowing you have a logged in user who's authenticated.
$UserProfile = $Facebook->api("/me");
} catch (FacebookApiException $e) {
error_log($e);
$User = null;
}
}
if ($User)
{
header("Location: index.php");
}
?>
login.php's JavaScript code
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xx', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/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>
<div class="fb-login-button">Login with Facebook</div>
index.php's PHP code
require_once("../fb-sdk/src/facebook.php");
$Facebook = new Facebook(array(
"appId" => "xx",
"secret" => "xx",
));
$User = $Facebook->getUser();
if ($User)
{
try
{
// Proceed knowing you have a logged in user who's authenticated.
$UserProfile = $Facebook->api("/me");
} catch (FacebookApiException $e) {
error_log($e);
$User = null;
}
}
if (!$User)
{
header("Location: login.php");
}
?>
You have to subscribe for login event to get callback and then you can refresh your page. Also for logout you should used your own SESSION of site for login logout beside facebook login, so lets say if you get userid from facebook by calling this function (means user is login with facebook)
$User = $Facebook->getUser();
Then set something like this in your session, and use this variable to check login status of user with your web.
$_SESSION['LOGIN'] = 1;
and when you logout you can simply unset this variable or destroy session.
Here are the links of tutorial which gives you more detail on facebook SDK in PHP / JS
http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/
http://thinkdiff.net/facebook/php-sdk-3-0-graph-api-base-facebook-connect-tutorial/
I currently have the facebook js sdk to login to the site and then I want to use the PHP sdk for everything else. How can I pass the accessToken to the PHP SDK to allow me to do this? I want to pass it to a PHP script at a different url, so for example I login at /login/ and then open up a modal box to /facebook/?accessToken=gfdhjsfghjkfgdh or what ever.
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
Please check this link.
A sample code may look like this,
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//got the token
var accessToken = response.authResponse.accessToken;
//send it to php via _GET
window.location = "/facebook/?accessToken=" + accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
//but not connected to the app
} else {
// the user isn't even logged in to Facebook.
}
});
You can get the accesstoken then send it to php.
I added a Facebook comment box to my website a while ago. What I want now is to trigger some code "mail() in php" when someone adds a comment. I want my website to send an email to the user telling him/her that a visitor has left a comment on your item/page.
It was easy to do with the old comment section I created but I don't know now how to do it with FB. Is it even possible?
If yes please include a detailed answer if you don't mind since I am not that good at this :)
If you are not happy with the solution FB already provides (as scjosh explained), you can use Facebooks Javascript SDK a bit of ajax (jquery would be my favorite) to load a script with the mail() function.
First load the JS SDK (make sure you change 'YOUR_APP_ID' and the channelURL!!):
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelURL : '//WWW.YOUR_DOMAIN.COM/channel.html', // 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
});
// Additional initialization code here
};
// 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>
more information about js sdk, the loading and the channel file can be found here. You should have an app or create an app in facebook for that reason. Information about setting up an app is here.
Next step is to load the script with the mail() per jquery:
FB.Event.subscribe('edge.create',
function(response) {
$(document).load('mail.php?response='+response);
}
);
And finally the mail.php:
if(isset($_GET['response'])) {
$msg = 'A comment was left on '.$_GET['response'];
mail('user#webpage.com','New comment',$msg);
}
Hope that helps!
If I understand you correctly, Facebook already includes integrated email communications via their website. I.E., if the Facebook user has notifications enabled for your comment threads, an email will be sent to that user upon request. The only other way to make this possible would be to hack together your own comment box and hook it with the Facebook API.
I am trying to implement Facebook Login System into my website.
While it try to connect to facebook, I get an error from console log:
Unsafe JavaScript attempt to access frame with URL https://s-static.ak.fbcdn.net/connect/xd_proxy.php?xxxxxxxxxxxxxxxx
I am using JavaScript SDK
I added this in the body tag:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true
});
};
(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>
Facebook Login button:
<div class="fb-login-button" data-perms="email">Login with Facebook</div>
I am testing from localhost - I have register my website on facebook develop apps (Site URL: http://localhost)
How to fix this problem? or should I use PHP SDK?
Edit: Same problem when I uploaded to server with public domain.
The error that you see there is a non-fatal error. There is no workaround for this, as your browser is advising you that it is not a great idea to load JavaScript from foreign domains. Just ignore this message and look elsewhere for bugs if your scripts do not run. Sajith is also correct that you can't debug from localhost.
See here also,
"Unsafe JavaScript attempt to access frame with URL..." error being continuously generated in Chrome webkit inspector
Be sure to have this line on the top of your page (it works for me) :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml">
It is not possible to test all Facebook integration using domain localhost. You need to place your script in any public access domain and need to update the url in developer app settings page. The security error showing from JavaScript is due to this localhost access by facebook scripts
You can only use the same domain name in which you have registered with Facebook apps.
1. You need a public domain name (www.example.com).
2. You need to register with Facebook apps.
3. Get the 2 keys from the Facebook and use in the code:
appId : 'xxxxxxxxxxxxxx',
Had this error when I implemented fileglu and it may be a CORS error since you are running off localhost. Try running on Facebook and can you replace the bottom half with the code below:
(function() {
var e = document.createElement('script');
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js#appId=<your-app-id>&xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
I also had Oauth 2.0 and custom channel enabled in my FB.init() page. See: http://fbdevwiki.com/wiki/FB.init for more information.
You can tweak your localhost machine to appear to be of the domain that facebook requires.
On linux or OSX, add an entry to /etc/hosts; on windows, edit c:\windows\system32\drivers\etc\hosts. Add an entry like this:
127.0.0.1 local-dev.mydomain.com local-dev
Where "mydomain.com" is the domain with which your FB app ID is registered.
In my case error was caused by like widget that was loaded using addthis on the site that already had FB app.
It looked like problem was in conflicting with multiple fb js-sdk.
So solution could be replace addthis facebook like wdiget by native facebook like widget.
I've also had another bug in webkit when js-sdk was not loaded. I fixed that by replacing window.fbAsyncInit by jQuery.getScript().
Eventually it fixed error "Unsafe JavaScript attempt to access frame with URL" also.
Here is example:
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function() {
FB.init({
appId: 'your app id',
cookie: true,
xfbml: true,
oauth: true,
status: true
});
// Trigger custom event so we can use it to run init dependent actions in different places.
$(document).trigger('FBSDKLoaded');
//...
});