Unable to fetch user using Facebook js sdk v2.10 on Firefox - facebook

I am trying to add facebook authentication on our website using Facebook Javascript SDK v2.10. My aim is to login via Facebook and then fetch the user which was authenticated.
The problem I am facing is that on Firefox, I am unable to fetch the authenticated user.
I have created a test page HERE
When you click on the button 'Login via Facebook', the FB.login function is called. When the response is received, I am calling the FB.api function. Following is my code
FB.login(function(response) {
let p1 = document.createElement('p');
p1.innerHTML = "FB.login response follows:<br>"+ JSON.stringify(response);
document.body.appendChild(p1)
FB.api('/me', {fields: 'id,first_name'},
function(response) {
let p2 = document.createElement('p');
p2.innerHTML = "FB.api response follows:<br>"+ JSON.stringify(response);
document.body.appendChild(p2)
});
});
In Chrome,the callback of FB.api is called and the response is received,but, in Firefox, this is not happening. Kindly help me figure out why this is happening

Ok. I was using Facebook sdk in Polymer app. The sdk documentation suggests adding the sdk initialization code in index.html.
But, for Polymer, you need to add the code in the connectedCallback method of your root app (my-app.html if you are using polymer-starter-kit)
For reasons unknown, the webcomponent-loader.js blocks Facebook initialization on Firefox, if sdk code is added in index.html.

Related

how to integrate facebook js login and laravel socialite?

i'm facebook js sdk for users login,
at the server side i want to get the user data
i'm trying to use
Socialite::with('facebook')->user()
to make it work it need 2 query string code and status
in my JavaScript i'm using the following
var auth_status_change = function(response) {
console.log(response);
if(response.status == "connected")
{
window.location = "{{URL::to(App::getLocale()."/fb_login")}}?code="+??+"&state="+???;
}
}
FB.Event.subscribe('auth.statusChange', auth_status_change);
how to get the state and code values to create a valid callback URL for socialite
You're trying to combine 2 things that do the same thing, but one on the server side and one on the client side, that won't work.
Laravel Socialite uses your app token to redirect your user to Facebook, authorize your app to use Facebook on their behalf (token) and provides you with user data. With the token you can do API calls from Laravel.
The Facebook JS SDK does the same thing, but in the browser. It fetches a token which it uses to do API calls.
Check out https://laracasts.com/series/whats-new-in-laravel-5/episodes/9 on how Socialite works.
Unless you are using the JS SDK functionality, you can leave it out and just add a link to a socialite route which redirects it to Facebook. That call will provide you with the code and state required to fetch the user.

Facebook Login with PhoneGap/Cordova App

I recently integrated the phonegap-facebook-plugin (https://github.com/phonegap/phonegap-facebook-plugin) into both iOS and Android (same app).
I want to do something that I believe to be simple: by-pass the call to native facebook for login/authentication and always use the web dialog. How does one go about accomplishing this?
My login code currently looks like this:
Init code:
//facebook initialization
FB.init({
appId: 'xxxxxxxxxxxx', //'<%#= FB_APP_ID %>',//'',
nativeInterface: CDV.FB,
useCachedDialogs: false
});
And the login call is:
FB.login(function(response) {
if (response.authResponse) {
// connected
me.signInFacebook({
token: response.authResponse.accessToken,
email: response.authResponse.email,
success: function (data) {
// hide login view and show tabview
form.destroy();
// continue whatever action was previously happening
me.continueAction(tabIndexBack, callback);
},
failure: function (response) {
// show errors Ext.Viewport.down('tabscontainerview').setActiveItem(3);
}
});
} else {
//go back
Ext.Viewport.down('tabscontainerview').setActiveItem(3);
alert('fb login error');
}
},{ scope: "email" });
Thanks for your help!!
I created a plugin to facilitate the connection between Facebook and phonegap without using Plugin Native only with Jquery:
https://github.com/studiosoton/faceGap
To bypass native FB login, you can make your own manual facebook authentication flow without using JavaScript SDK of the Facebook (https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/v2.3) via inAppBrowser or ChildBrowser plugins.
Your app must initiate a redirect to an endpoint which will display the login dialog:
https://www.facebook.com/dialog/oauth?client_id={app-id}&redirect_uri={redirect-uri}&response_type=token&scope=email
Facebook redirects people to the redirect_uri mentioned above and places an access token along with some other metadata (such as token expiry time) in the URI fragment:
https://www.facebook.com/connect/login_success.html#
access_token=ACCESS_TOKEN...
Your app needs to detect this redirect and then read the access token out of the URI. You can then skip straight to the Inspecting access tokens step.
On the Android version of the plugin, you can force it to use the dialog by modifying the way the plugin calls me.facebook.authorize in the login action of theorg.apache.cordova.facebook.ConnectPlugin class.
You'll need to pass in an additional activityCode parameter with Facebook.FORCE_DIALOG_AUTH:
me.facebook.authorize(cordova.getActivity(), me.permissions, Facebook.FORCE_DIALOG_AUTH, new AuthorizeListener(me));
I'm not entirely sure about iOS, but you might be able to try with openWithBehavior and FBSessionLoginBehaviorForcingWebView
Without any Facebook plugins you can use Facebook functionality,for that use phonegap.facebook.inappbrowser.js using this js you can easily access all Facebook functionality for more information visit this URL : Facebook Integration Step without any plugins

calling $.ajax without having my canvas page being redirected to post url

I want to submit a form from my Facebook canvas app via ajax.
If I run my app outside of facebook, it works fine. However, if I do the ajax call running as a Facebook canvas app, the user is redirected to the the ajax post url!
The server response is valid json.
I've spent over an hour on this.
I found that Facebook has a deprecated FBJS ajax api. The new js api does not provide any ajax functionallity. The documentation on the deprecated API listed above states:
If you are building a new app on Facebook.com, please implement your
app using HTML, JavaScript and CSS.
What is the magic recipe to make an ajax post from a canvas app?
The relevant code boils down to this:
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action, // I tried also submitting to the apps.facebook.com/... url, but it made no difference
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#result').html(result);
alert('TESTING - WORKS!!');
}
});
}
return false;
});
});
A night's sleep does wonders to your mind. It was very late yesterday when I posted this question.
When I woke up this morning I knew what to check for. The action I was posting to via ajax was in a controller that required Facebook authentication... Moved the action to a different controller and it now works. solved

FB Login : Don't know how to get response after a successful login

I have added an fblogin button to my website
it is working fine
a button is placed and when user clicks on it a dialogue box opens for login.
But i don't know how to get response after a successful login.
Please suggest
You can use the JS SDK to subscribe to events of that type. Take a look at the facebook javascript documentation, the method you are looking for is 'auth.authResponseChange' :
FB.Event.subscribe('auth.authResponseChange', function(response) {
alert('The status of the session is: ' + response.status);
});

webview is not redirecting anymore (Facebook API in webos)

I am trying to implement the possibility to post on your facebook wall from my app. http://developers.facebook.com/docs/authentication/ web application section.
It used to work. What i did was open the following URL in a webview
"https://graph.facebook.com/oauth/authorize?client_id=123456789123456&redirect_uri=http://www.mydomain.com&scope=publish_stream&display=wap"
And after the user typed his credentials and gives me the neede permissions, the webview was redirected to the redirect uri (www.mydomain.com) including a get variable from which i parsed a code which is needed.
But all of a sudden i am not redirected to the redirect_uri anymore. I am redirected to a blank facebook page (http://m.facebook.com/connect/uiserver.php)
It DOES work on a PC Browser and even in the webos browser, but not in the webview.
I even wrote a complete new application with nothing but a webiveiw in it. The main-assistant.js looks like this.
function MainAssistant(argFromPusher) {
}
MainAssistant.prototype = {
setup: function() {
Ares.setupSceneAssistant(this);
console.log("setup");
//this.controller.get("facetimes").mojo.clearCookies();
//this.controller.get("facetimes").mojo.clearCache();
this.controller.get("facetimes").mojo.openURL("https://graph.facebook.com/oauth/authorize?client_id=123456789&redirect_uri=http://www.mydomain.com/callback&scope=publish_stream&display=touch");
this.controller.listen("facetimes",Mojo.Event.webViewTitleUrlChanged,this.titleChanged.bind(this));
},
cleanup: function() {
Ares.cleanupSceneAssistant(this);
},
titleChanged: function(event){
console.log(event.url + " DAS IST DIE URL");
}
};
Any ideas?
Thanks in advance.
Blockquote
I wrote up the entire SDK with facebook api example on my blog
Facebook Connect WebOS
It's open sourced, the guide will give you the github address