javascript - Passport JS session data in Angular2 - Stack Overflow

admin管理员组

文章数量:1387398

What is the best way to send passport session informations from the back end to the frontend?

My application that works on port 3000. First two gets are for facebook login and redirection. Next one is to get user data from the database (user id should be stored in req.user)

routes.js:

app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' }));

app.get('/auth/facebook/callback',
        passport.authenticate('facebook', {
            successRedirect : 'http://localhost:8000/',
            failureRedirect : '/fail'
        })
);

app.get('/auth/userdata', isLoggedIn, function(req, res) {
    Donator.findById(req.user, function(err, fulluser) {
        if (err) throw err;
        res.json(fulluser);
    })
});

function isLoggedIn(req, res, next) {
    if (req.isAuthenticated()) {
        next();
    } else {
        res.json(false);
    }
};

passport config.js

'facebookAuth' : {
        'clientID'      : 'secret',
        'clientSecret'  : 'secret',
        'callbackURL'   : 'http://localhost:3000/auth/facebook/callback'
    },

So in my Angular2 application I can go to the http://localhost:3000/auth/facebook, be redirected to the FB login page and if success redirected to the http://localhost:3000/auth/login/callback which takes me to the http://localhost:8000/.

And in my Angular2 application that works on port 8000

getUser(){
    this.http.get('http://localhost:3000/auth/userdata')
    .map(res => return res.json())
}

Everytime getUser() is called, it returns 'false'. Is there a simple and safe way to "inject" this session data to my frontend on the different port? Also when I go http://localhost:3000/auth/userdata in browser I can see this profile rendered as JSON.

When I set backend and frontend on the same port It works, facebook, twitter, google, local, everything is fine and getUser returns full user profile.

I hope it's clear.

What is the best way to send passport session informations from the back end to the frontend?

My application that works on port 3000. First two gets are for facebook login and redirection. Next one is to get user data from the database (user id should be stored in req.user)

routes.js:

app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' }));

app.get('/auth/facebook/callback',
        passport.authenticate('facebook', {
            successRedirect : 'http://localhost:8000/',
            failureRedirect : '/fail'
        })
);

app.get('/auth/userdata', isLoggedIn, function(req, res) {
    Donator.findById(req.user, function(err, fulluser) {
        if (err) throw err;
        res.json(fulluser);
    })
});

function isLoggedIn(req, res, next) {
    if (req.isAuthenticated()) {
        next();
    } else {
        res.json(false);
    }
};

passport config.js

'facebookAuth' : {
        'clientID'      : 'secret',
        'clientSecret'  : 'secret',
        'callbackURL'   : 'http://localhost:3000/auth/facebook/callback'
    },

So in my Angular2 application I can go to the http://localhost:3000/auth/facebook, be redirected to the FB login page and if success redirected to the http://localhost:3000/auth/login/callback which takes me to the http://localhost:8000/.

And in my Angular2 application that works on port 8000

getUser(){
    this.http.get('http://localhost:3000/auth/userdata')
    .map(res => return res.json())
}

Everytime getUser() is called, it returns 'false'. Is there a simple and safe way to "inject" this session data to my frontend on the different port? Also when I go http://localhost:3000/auth/userdata in browser I can see this profile rendered as JSON.

When I set backend and frontend on the same port It works, facebook, twitter, google, local, everything is fine and getUser returns full user profile.

I hope it's clear.

• javascript
• angular
• authentication
• passport.js

Share Improve this question Follow edited Feb 19, 2018 at 17:07 Martijn Pieters 1.1m321321 gold badges4.2k4.2k silver badges3.4k3.4k bronze badges asked Jan 16, 2017 at 18:25 dmh126dmh126 25766 silver badges1515 bronze badges 6

• why don't you serve your angular2 app on port 3000? – Aᴍɪʀ Commented Jan 19, 2017 at 1:41
• 1 I'd like to have the frontend end the backend on separate hosts for now. – dmh126 Commented Jan 19, 2017 at 9:17
• I'd suggest to run everything on the same port. You can have two servers on different ports, but proxy one of them to another using express-http-proxy. – Aᴍɪʀ Commented Jan 19, 2017 at 23:45
• This may be a Cross-origin resource sharing (CORS) issue. Can you check the network tab of the developer console in your web browser? Take a look at the response to the request made by "getUser()", is there an error? – Pádraig Galvin Commented Jan 24, 2017 at 2:28
• There is no error. It behaves like a request from pletely different place. – dmh126 Commented Jan 24, 2017 at 13:26

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

It was a problem with requests in the Angular2. I've added credentials to each request:

getUser(){
    this.http.get('http://localhost:3000/auth/userdata', {withCredentials: true})
    .map(res => return res.json())
}

And now it is fine.

本文标签： javascriptPassport JS session data in Angular2Stack Overflow