Аутентификация от onelogin и перенаправление на панель инструментов

Question

У меня есть приложение с веб-интерфейсом response / redux и express, которое я создал с помощью create-react-app. Я хочу сделать аутентификацию, используя onelogin и паспорт js. Следуя этому руководству (https://developers.onelogin.com/quickstart/authentication/nodejs), я смог все настроить, проблема в том, что мой сервер express работает на порту 5000, но приложение реакции работает на порту 3000.

Если я go до localhost:3000/login, ничего не происходит, и если я go до localhost:5000/login, я получаю аутентификацию с onelogin, но ничего не возвращается, и он просто застревает.

Это мой /login код

app.get('/login', passport.authenticate('openidconnect', {
    successReturnToOrRedirect: "/",
    scope: 'profile',
}));

А это обратный вызов

app.get('/oauth/callback', passport.authenticate('openidconnect', {
    callback: true,
    successReturnToOrRedirect: '/',
    failureRedirect: '/login'
}));

Вот полный код (https://github.com/onelogin/onelogin-oidc-node/blob/master/1.%20Auth%20Flow/app.js)

Я понимаю, почему это все происходит, так как мой express сервер ничего не рендерит. Но как я могу справиться с этим?

Answer 1

вы должны прокси-запрос к бэкэнду, добавить эту строку в ваши пакеты. json

"proxy": "http://127.0.0.1:5000/"

как вы делаете запрос на аутентификацию от внешнего интерфейса? при выполнении аутентификации с помощью реакции я использую реагирующий маршрутизатор, а затем использую axios для аутентификации

, поэтому, когда пользователь отправляет форму входа в систему, я отправляю запрос на маршрут входа для возврата JWT (я не использовал паспорт перед). Все будущие запросы от клиента я включаю в jwt для проверки подлинности пользователя.

    import Cookies from "js-cookie";
    import QueryString from "query-string";
    import axios from 'axios';
    
    let myUrl =  "login/";
    let myData = QueryString.stringify({
        ...this.state.form, 
    });


    axios.post(myUrl, myData,{
      headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        "cache-control": "no-cache",
      },
    })
    .then((response) => {
      // store token in cookies
      // redirect to authenticated route
      Cookies.set('token', response.data.token,  { expires: 1/24 }) 
     })
    .catch((error) => {
      //handle displaying error to user here
     })

, если вы не используете реагирующий маршрутизатор или пытаетесь обслуживать данные из своего бэкэнда, в отличие от извлечения их из внешнего интерфейса, пожалуйста, дайте мне знать, и я изменю мой пост, чтобы соответствовать вашему потоку аутентификации

Answer 2

Исправлено перенаправление на localhost:3000/create вместо /create. Не уверен, что лучшая практика.

app.get('/login', passport.authenticate('openidconnect', {
    successReturnToOrRedirect: "localhost:3000/create",
    scope: 'profile',
}));

app.get('/oauth/callback', passport.authenticate('openidconnect', {
    callback: true,
    successReturnToOrRedirect: 'http://localhost:3000/create',
    failureRedirect: 'http://localhost:3000/login'
}));