Express, Passport-Google, React - Ведение правильной информации о сеансе - PullRequest
Новая
       64

Express, Passport-Google, React - Ведение правильной информации о сеансе

0 голосов
/ 20 декабря 2018

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

Используя passport-google в моем приложении node / express, я хотел бы аутентифицировать пользователя и успешно перенаправить в мое приложение React (загруженное с помощью create-реагировать-приложение), работающее на другом порту с соответствующим сеансом Expressустановлен для этого порта, на котором запущен React.

Это мой поток, проблема и то, что я до сих пор собирал:

  1. Пользователь нажимает <a href="http://localhost:8000/auth/google">Login with Google</a> на моем Reactприложение.

  2. Паспорт перенаправляет и предоставляет пользователю экран входа в систему и в конечном итоге отправляет пользователя обратно на auth/google/callback в моем экспресс-заявлении

  3. auth/google/callback отправляет свой successRedirects моему приложению React на порт 3000.

На данный момент кажется, что экспресс-сеанс, который я хочу привязать к порту 3000, подключен к порту 8000. Для ясности,вызов пользовательской конечной точки /session через порт 8000, который отправляет обратно экспресс-сеанс, показывает, чего я хочу, в то время как вызов этого номера с 3000 ничего не показывает.Я предполагаю, что это происходит, потому что это было на порту 8000, где изначально.Исходя из этого поста Я думаю, что я могу быть прав.

Кроме того, меня действительно смущает то, что когда я перенаправлен обратно в свое приложение React на порт 3000, я вижу connect.sidcookie с правильным sessionId, который я вижу на порту 8000. Такое ощущение, что он работал и не работал в то же время.Почему connect.sid должен быть настроен на порт 3000, но любой вызов req.session не предоставляет паспортную информацию?Когда / как это устанавливается?Насколько я понимаю, паспорт устанавливает его в процессе сериализации / десериализации

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

В конечном итоге я хочу, чтобы пользовательские данные были извлечены из Google под рукой, чтобы я мог использовать их для звонков на мою базу данных.Я предполагаю, что если у меня есть connect.sid в качестве файла cookie в приложении React, я мог бы использовать его для поиска информации о сеансе в моем MongoStore, которая, похоже, имеет то, что мне нужно, но было бы лучше просто зарегистрировать эту информацию всервер в моей сессии?Кроме того, я не уверен, является ли хорошей практикой делать мои куки доступными с флагом httpOnly в экспресс-сессиях и анализировать куки, используя document.cookie.Я также использовал WebSockets в прошлом проекте для отправки информации с сервера клиенту (чтобы устранить эту же проблему), но я не уверен, является ли это ошибкой из-за моего непонимания потока паспортов или реальной альтернативы проблемеПаспорт не был создан для облегчения.

Вот некоторые из потока аутентификации в произвольном порядке.Будем очень благодарны за любые идеи, комментарии, предложения или исправления! 

router.get("/google", passport.authenticate("google", { scope: ["profile"] }))
router.get(
    "/google/callback",
    passport.authenticate("google",
    {
        successRedirect: "http://localhost:3000",
        failureRedirect: "http://localhost:3000/auth-failed",
    }, (req, res) => {
        // empty
    })
)

app.use(
  session({
    secret: process.env.APP_SECRET || "keyboardcat",
    store: new MongoStore({ mongooseConnection: dbConnection }),
    resave: false,
    saveUninitialized: false,
    cookie: {
      httpOnly: false
    }
  })
)

passport.serializeUser((user, done) => {
    done(null, { _id: user._id })
})

passport.deserializeUser((id, done) => {
    User.findOne(
        { _id: id },
        (err, user) => {
            if (err) {
                console.log(err)
            }
            done(null, user)
        }
    )
})

Sidenote: Я действительно получил эту работу, используя Next.js, потому что это исключилопроблема работы с разными портами.Если я продолжу находить его в качестве жизнеспособного решения, меня могут убедить отказаться от моего приложения create-реагировать.

...