Как отправить токен Oauth от обратного вызова на сервере клиенту?

Question

Я использую ExpressJs и паспорт для аутентификации. Я использую Google Oauth2.0 для входа со стандартным паспортом GoogleStrategy. На клиенте я использую axios для отправки запроса входа на сервер. Мой логин маршруты:

router.get(
    "/google",
    passport.authenticate("google", { scope: ["profile", "email"] }));

router.get(
    "/google/callback",
    passport.authenticate("google", { failureRedirect: "/"}),
    function(req, res) {

        const token = jwt.sign({id: req.user.id}, configAuth.secretKey);
        console.log("generated token: ", token);
        res.json({success: true, token: 'bearer ' + token});

    }
);

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

На клиенте я использую axios, чтобы отправить запрос, получить JWT и сохранить его в localstore.

axios.get('http://localhost:3001/google')
  .then((result) => {
    console.log("result", result);
    localStorage.setItem('jwtToken', result.data.token);
  })
  .catch((error) => {
    // if(error.response.status === 401) {
    //   this.setState({ message: 'Login failed. Username or password not match' });
    // }
    console.log("Login error", error);
  });

Но Axios не ждет, когда произойдет перенаправление, и возвращает HTML-документ с сообщением Loading.... Если вы попытаетесь получить доступ к API в браузере, он вернет нужный объект JSON. Есть ли способ ждать перенаправления. Должен ли я использовать другую библиотеку для отправки запроса на вход?

Я попытался отправить токен в качестве параметра URL с

res.redirect()

но клиент и сервер находятся на разных портах, поэтому он не работает. Есть ли другой способ сделать это?

Answer 1

Если вы не решили проблему, в passportjs вместо googleOAuth используйте обходной путь googleTokenStategy. Таким образом, вы можете использовать реагирующий плагин GoogleLogin, чтобы получить токен доступа от внешнего интерфейса и отправить его через axios.post на внутреннюю ссылку, а затем настроить jwt. Ссылка здесь

Answer 2

Путь Google OAuth2 перенаправляет ваш браузер, что приводит к перезагрузке страницы, пару раз до ее завершения. В результате ваш клиентский код,

axios.get('http://localhost:3001/google')
  .then((result) => {
    console.log("result", result);
    localStorage.setItem('jwtToken', result.data.token);
  })...

никогда не достигнет .then() блок. Вы, вероятно, видите это в браузере; Вы нажимаете кнопку или что-то, чтобы перейти к 'http://localhost:3001/google', и ваш localhost:3001 Сервер перенаправляет ваш браузер на страницу входа в Google. Теперь, когда ваш браузер находится на странице входа, он не запоминает axios.get Заявление выше - этот код веб-страницы пропал.

Вам нужно обработать JWT в коде на стороне клиента, который ваш сервер отправляет в ответ

axios.get('http://localhost:3001/google/callback').

Это последняя остановка вашего браузера на пути OAuth2 - как только вы туда попадете, вас больше не перенаправят. Вы можете поставить свой axios.get Функция выше внутри этого клиентского кода.