Правильный способ реализации Github OAuth в клиентском приложении?

Question

Я добавляю OAuth в свое клиентское приложение на github.У меня успешно получен окончательный токен авторизации, но я чувствую, что взломал свой рабочий процесс.

Текущий поток архитектуры:

1) Пользователь нажимает href ссылку из компонента, чтобы попасть в начальный OAUTHroute

2) Извлечь токен из Github для идентификации пользователя

3) Github перенаправляет на маршрут к моему серверу, и мой маршрут сервера отправляет дополнительный POST на страницу запроса /access_token с помощью client_secret, id и code из вышеприведенного шага.

4) Наконец, я перенаправляю с вышеуказанного маршрута обратно на свой пользовательский интерфейс и устанавливаю параметр URL в процессе

5)В componentDidMount я удаляю последний токен авторизации из window.url и устанавливаю его в моем состоянии

Примечание: я планирую хранить токен в Redux позже, но это базовый уровень, так какк тому, что я делаю.

Фактический код

Сервер

app.get("/login", async (req, res) => {
  // Get the identity token from GitHub origin
  return await axios
    .post("https://github.com/login/oauth/access_token", {
      code: req.query.code,
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET
    })
    .then(async resp => {
      // Little hack to parse out the query params into an object 
      let data = await url.parse("http://parse.com?" + resp.data, {
        parseQueryString: true
      }).query;

      res.redirect(
        url.format({
          pathname: Environment.getUrl(),
          query: {
            token: data.access_token
          }
        })
      );
    });
});

Компонент аутентификации пользовательского интерфейса

export default class GithubAuthentication extends React.Component {
  state = {
    authToken: "DATA"
  };

  componentDidMount() {
    let currUrl = window.location.href;
    this.setState({ authToken: currUrl.split("token=")[1] });
  }

  render() {
    return (
      <React.Fragment>
        <a href="https://github.com/login/oauth/authorize?client_id=b5cd37110eb31620aad7">
          {this.state.authToken ? "Logout" : "Login With Github"}
        </a>
        <span>{this.state.authToken}</span>
      </React.Fragment>
    );
  }
}

Вопросы

1) Единственное, чего я не смог понять, это сделать ссылку href продолженной.свернул компонент и фактически нажал на URL авторизации что-то вроде SuperAgent или Axios.Вместо этого я вынужден использовать эту ссылку href, не знаю почему.

2) Действительно ли это разумный поток для получения окончательного токена аутентификации?

Answer 1

1) Я думаю, что вы должны реорганизовать свое приложение, чтобы вы могли использовать компонент вместо ссылки href.Вы бы знали, прошли ли вы аутентификацию или нет, основываясь на значении свойства состояния.Это значение может быть передано как опора вашему компоненту, в который вы бы поместили логику аутентификации?«Выход из системы»: «Вход в систему» ​​или что-либо еще.

2) поток в порядке, но вы должны убедиться, что вы выполняете проверку токена на стороне сервера, поскольку легко просто переключить переключатель на интерфейсе пользователя ипритворяться, что вы очень легко аутентифицировались.