I m trying to use Passportjs with Angular and express. I am trying to test facebook strategy in passportjs.
The authentications seems to succeed but does not navigate to the callback url. It simplay hangs.
Firebug console shows : GET http:// localhost:7000/auth/facebook 302 Moved Temporarily"
it however opens the callback url (index) successfully in the browser window when i manually click this url but not automatically redirecting
my login view ( jade ) looks as below :
a(href='/auth/facebook')
p Login
and the serverside routes is :
app.get('/auth/facebook', passport.authenticate('facebook'));
app.get('/auth/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/login' }),
function(req, res) {
res.render('index');
});
Kindly help. This is my first experience with Angularjs & Node js
EDIT : To be more precise , The issue only happens if my request is from client side ( login page in Angular ) to my express server. There is no issue if I serve the login page from within express. The authentication goes through fine and redirects to my applicatin as expected.
Can we not make the authentication request from client side ( using http get / post ) to the server while the server handles the authentication using passportjs ?
I'm currently trying to do the same thing and running into problems, but perhaps I can clear some things up and offer some suggestions.
Behind the scenes PassportJS's Facebook strategy is using OAuth. By using this approach it is offloading all of the authentication onto Facebook's servers. When you click a link with an href="/auth/facebook", your express server redirects the user to Facebook and then back to your application. This has to be done in order to ensure a secure authentication, otherwise someone could claim they are Facebook and "authenticate" users themselves. That is also why calling an Angular $http.get("/auth/facebook") is not going to work, it is simply going to return a 302 redirect.
Unfortunately this is where it gets challenging. If you simply include a link with the href "/auth/facebook" the server will authenticate the user and return to your app, but Angular has no way of knowing that your user has been authenticated. I found an angular-oauth example here https://github.com/enginous/angular-oauth but am having some trouble digesting it. Essentially he is using a popup window to open the authentication link, in your case "/auth/facebook", and using a browser $window.postMessage to communicate back to his main application window with the access token he received once the user was authenticated and then closing the popup window.
I think this may be the best approach, but I still haven't gotten this working with Passport. Would love to hear some others ideas/opinions as I'm still to new to Angular as well!
UPDATE: I recently came across this blog post http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/ which shows an example of using Passport's Facebook strategy with Angular. He seems to be setting a cookie after successful authentication and having Angular poll for the cookie on page loads. This might be an easier solution.
I ran into the same problem, the issue was how angular sends the req. I started by using $http.get, which reached my node server but as you said, hung there.
when I switched to $window.location.href it worked perfectly, as this req could be chained.