PassportJS + RestAPI + SPA

Question

Я использую ExpressJS для создания RestAPI, клиент SPA и поддержка аутентификации Google/FaceBook/GitHub/... через PassportJS. Мой вопрос, обратный вызов из социального входа, вернется в RestAPI или SPA? Если система возвращается в RestAPI, как можно перенаправить на домашнюю страницу в SPA. В другом случае, если системный callback SPA, как RestAPI может получать и проверять токен от клиента. Пожалуйста, дайте мне знать общие подходы.

Спасибо,

Answer 1

Вы обеспечиваете обратный вызов URL для службы аутентификации, вы решить, следует ли обращаться вы маршрут по СПУ или API. Аутентификация Oauth (упрощенная) имеет два шага. Иллюстрация на GitHub:

Шаг 1) https://github.com/login/oauth/authorize?client_id=*YOUR_CLIENT_ID*$redirect_uri=*YOUR_REDIRECT_URI*
Открывает всплывающее диалоговое окно, которое запрашивает пользователя авторизовать приложение, в случае успеха возвращается к вашему redirect_uri с параметром запроса кода = AUTHORIZATION_CODE

Шаг 2)? Вы обменяете вышеуказанный AUTHORIZATION_CODE на токен доступа через https://github.com/login/oauth/access_token

В вашей архитектуре вы должны сделать Шаг 1 в SPA и Шаг 2 в остальном api. Вы должны полагаться на спа-центр, чтобы получить код авторизации от поставщика проверки подлинности, отправить его в ваш априори отдыха, позволить остальному api обмену на токен долгосрочного доступа, сохранить этот токен в базе данных, использовать его для извлечения информации пользователя или сделать независимо от того, что вы хотите с ним, затем войдите в систему пользователя.

Для шага 1 для CLIENT_ID и CLIENT_SECRET требуется только CLIENT_ID, поэтому вы можете защитить ваше приложение, сохранив CLIENT_SECRET только на стороне сервера.

Проблема с обратным вызовом uri, обработанная вашим приемом rest api, заключается в том, что callback uri вызывается поставщиком проверки подлинности (в данном случае github), а не вашим SPA, поэтому вы не можете отправить ответ, который перенаправляет пользователя на домашнюю страницу. Это будет работать, только если ваши шаблоны и маршрутизация будут обрабатываться на стороне сервера, что, я полагаю, не так в вашей архитектуре.

Это не очевидно из документации, но когда вы регистрируете промежуточное ПО для паспорта на маршруте, например app.post('/login', passport.authenticate('github'),, промежуточное программное обеспечение проверяет, содержит ли параметр запроса «код» AUTHORIZATION_CODE, если нет, то он запускает шаг 1, если да шаг 2.

Answer 2

Я использовал тот же стек (экспресс, угловой, паспорт) и следовал этому подходу.

Я создал кнопку.

<a href="/auth/facebook">Login with facebook</a> 

Также у меня есть два пути для паспорта

// send to facebook to do the authentication 
    app.get('/auth/facebook', passport.authenticate('facebook', {scope: 'email'})); 

    // handle the callback after facebook has authenticated the user 
    app.get('/auth/facebook/callback', passport.authenticate('facebook', { 
    successRedirect: '/#/profile', 
    failureRedirect: '/' //Redirect Homepage 
    })); 

Этот код показывает, что если вы войти в систему, успешно вы будете переадресованы на угловой маршрут (/ #/профиля) После того, как переориентировать вы будете иметь печенье который имеет токен с именем connect.sid, поскольку passjs использует экспресс-сессию.

Затем вы можете проверить, если пользователь вошел в везде этого промежуточного слоя

// route middleware to ensure user is logged in 
function isLoggedIn(req, res, next) { 
    if (req.isAuthenticated()) 
    return next(); 

    res.redirect(301, '/'); 
} 

Вы посмотрите на мой репозиторий, который содержит код, приведенный выше может. https://github.com/AOnurOzcan/meanTest

Если у вас возникли проблемы, пожалуйста, дайте мне знать.