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.
Related
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.
I am trying to implement Dreamfactory OAuth in Ionic app.
I am following this resource for implementation:
http://wiki.dreamfactory.com/DreamFactory/Tutorials/Using_OAuth
This is the call I am making:
$http.post('/api/v2/user/session?service=facebook').then(function (result) {
console.log("result: "+ JSON.stringify(result));
});
The log above shows me json data as it itself redirects to the facebook url returned by the call and it just returns HTML for that facebook page.
Is there a different approach I should be using in hybrid/Ionic apps for DF OAuth login?
Make that an Ajax call (or simply set request header [X-Requested-With: XMLHttpRequest]). This will return the actual URL that is needed, not the redirected response in html. Let me know if you have any questions.
I have doubts about security of my process of authentication oauth with facebook..
I use login for web with javascript sdk with fb button:
I get an Access Token successfully and pass it to server(calling check_facebook_session.php) to make API call to Facebook Provider..
In the following code there is also the log in console of access token.
Everything works!!! on the server I use the php sdk to call the API REST with APPID, APPSECRET and ACCESS_TOKEN:
**
Now my question, have I a security problem?
Is a bad idea to pass the token to the server?
The token that is visible on the client can be used WITHOUT APP SECRET to get information about the user logged?
**
Note: Google+ Sign-In for server-side apps Implementing the one-time-code flow with step:
- Include the Google+ script on your page.
- Add the sign-in button to your page.
- Sign in the user.
- Send the authorization code to the server.
as explained in: https://developers.google.com/+/web/signin/server-side-flow
Unlike facebook google in the js client return a CODE, not an ACCES TOKEN and the server receive and use it to request ACCESS TOKEN.
Thanks..
Following is the javascript code for facebook:
window.fbAsyncInit = function() {
FB.init({
appId : FACEBOOK_APP_ID, // App ID
status : true, // check login status
cookie : false, // enable/disable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
var accessToken = FB.getAuthResponse()['accessToken'];
console.log(accessToken);
$.ajax({
type: 'POST',
url: check_facebook_session.php,
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
processData: false,
data: 'token=' + accessToken,
success: function(result)
{
if(result == 'SUCCESS'){window.location.href = fb_callback_url}
},
error: function(xhr)
{
alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
}
});
}
else if (response.status === 'not_authorized')
{
FB.login();
}
else
{
FB.login();
}
});
};
// Load the SDK asynchronously
.......
}(document));
I did some testing and came to the conclusions that I hope can be useful.
In Facebook SDK for JavaScript it automatically handles access token storage and tracking of login status, so apps using it do not need to create their own mechanisms for doing so, and can proceed to making API calls.
The system seems safe because I believe that the callback url of the call is the site that host the page and configured between those of the facebook application, so I can change the application id in the javascript code but the sdk response with error message and get the user's token pretending to be another application. This was already obvious to those who know the flow :-)
Passes the token to the server is definitely a bad idea because it can be snorted and used by simply calling https://graph.facebook.com/me?access_token=... to get user information, In the different flow of google the token is not passed but is passed the code necessary to obtain it.
The best solution to use advantage of client and server is it:
Used in conjunction with the Facebook SDK for JavaScript,
the PHP SDK can share user sessions seamlessly across the client and server.
If people are logged in with Facebook and have authorized your app,
the JavaScript SDK can pick up the user session and persist this in a cookie,
which the PHP SDK reads without any intervention on the developer's part.
To enable this functionality, ensure that when you embed and initialize the JS SDK,
you set both the status and the cookie parameters of the object passed to FB.init() to true.
Regards..
i think it is secure because the user's data is only returned with connected status after user authentication with facebook.
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
I have followed Facebook example on getting access token by using $fb->getJavaScriptHelper();
https://developers.facebook.com/docs/php/howto/example_access_token_from_javascript
$helper = $fb->getJavaScriptHelper();
$accessToken = $helper->getAccessToken();
echo $accessToken->getValue();
P.S. Add try{} catch() {} blocks, as in Facebook example for error handling.
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
As stated in the Facebook Oauth Documentation, in order to use the Client Side Flow with a Desktop App, the special return_uri https://www.facebook.com/connect/login_success.html is required.
Opening a new tab from Chrome to the url
https://www.facebook.com/dialog/oauth?client_id=MYAPPID&redirect_uri=https://www.facebook.com/connect/login_success.html&response_type=token
works as expected, I am redirected to the login_success page with an access_token parameter containing the token. I can request data from the Graph API using simple GET requests (e.g., with jQuery):
$.getJSON("https://graph.facebook.com/me", {access_token : token}, function (d)
{
.. process returned data
});
My question is, can I continue to use the Javascript SDK without using the SDK's internal authorization methods.
FB.getLoginStatus returns an error that my Connect/Canvas URI isn't correct. How am I supposed to check the token status without that method [apart from a manual GET and response matching]?
FB.login obviously fails with the following error:
API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri
(url does not match domain url in the app's config), as there seems to be no way to internally specify the return_uri above.
Is there a way to still rely on the Javascript SDK (especially events) while accessing a token externally? Am I supposed to override the access token?
Yes, you can use it for the normal events (i.e. someone clicked a like button) like so:
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1" id="facebook-jssdk"></script>
<script type="text/javascript">
FB.Event.subscribe('edge.create',
function(response) {
console.log(response);
}
);
</script>
Unfortunately for regular API calls you can't use the Facebook JS SDK from within your extensions. You'll have to roll your own API wrapper for that.
An easy way to see if the access token is valid, is to make a graph API call to /me?fields=id with the access token you have saved. That will be fast and you can use the response to see if the access token is still valid. Best practice for extensions is to request the permission offline_access.
Also, I would recommend having the redirect URI be on a domain you own. That way if other extensions are doing the same, your scripts won't interfere. Accessing the token will be the same.