Facebook authentication to AngularJS app with php backend
I am working on an application that is mainly CRUD based. It is written in PHP and exposed via the JSON API.
The front end is written in AngularJS, and I get to the scene where I need to deal with authentication. I know I want this to be token based and it is desirable that it can just log into Facebook.
Since all data, etc. are on the PHP backend, I assume there should be authentication there. My idea is for the AngularJS front end to ask the PHP login to log in, after which the backend will shutdown and login with facebook, save the token in the database and send it back to the AngularJS frontend so that it can provide it with subsequent requests ...
Where I'm a bit stuck is you get AngularJS to ask the backend to authenticate. What's the best way to handle this? Should I just have a link to the interface that makes the HTTP request to the backend? But if I do this, how does the user ever get the submitted login with the facebook dialog.
Suppose my frontend is http://front.myapp.com and the backend is http://back.myapp.com , then authentication is handled with http://back.myapp.com/auth
My question is, what code would I write on the AngularJS side to get it to talk to the backend correctly, given that the backend should also go away and talk to facebook? Real code examples would be most helpful.
source to share
I advise you to use this library http://jberta93.github.io/ng-facebook-api/ and do Facebook authentication in your frontend. You can fetch user data easily and then with $ http.post you can post that data to your backend application! Then, if you need to talk to the Facebook backend, you can use the authResponse returned from the library in frontend authentication! This way, in app domains, you only specify the external URL. And your user doesn't see the backend app!
Small example:
$scope.logAndRetriveFacebookUser = function(){
facebook.getUser().then(function(r){
var user = r.user; //User data returned;
var authResponse = r.authResponse; //Token auth, id etc..
$http.post('/backend-login-url', {user:user,authResponse:authResponse});
}, function(err){
console.log("Ops, something went wrong...");
});
}
source to share