Вход в систему с помощью js oauth2 с использованием команды реакции и весенней загрузки показывает окно авторизации - PullRequest
0 голосов
/ 10 февраля 2019

Я реализовал сервер oauth2, используя весеннюю загрузку и responsejs.

На стороне сервера работает нормально, на первом шаге я хочу получить токен, используя имя пользователя и пароль, вот мой логин реакции или получить

export const dologin = (username, password) => {

  let details = {
    username: username,
    password: password,
    grant_type: 'password'
  };

  let formBody = [];
  for (let property in details) {
    let encodedKey = encodeURIComponent(property);
    let encodedValue = encodeURIComponent(details[property]);
    formBody.push(encodedKey + "=" + encodedValue);
  }


  return fetch('/oauth/token', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic '+btoa('someclientid:dTHfdd4TRDvcsaSS'),
        "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
    },
    body: formBody.join("&")
    }).then(res => {
      return res.json();
    }).then((data) => {
      console.log(data)
    }).catch((err) => {
      console.log(err);
    });
}

Однако, если я отправляю запрос, я получаю оповещение об окне http auth в браузере, даже если принимаю json.

'Accept': 'application/json',

Не знаете, почему это происходит?

enter image description here

1 Ответ

0 голосов
/ 11 февраля 2019

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

'Authorization': 'Basic...'

Попробуйте использовать Носитель вместо Basic

oauth2 flow

Поток приложения будет следующим:

  • (1) Ваши пользователи запустят веб-приложение.
  • (2) Поскольку они не были зарегистрированы ранее, ваше веб-приложение покажет им экран входа в систему (страницу, предоставляемую сервером авторизации).
  • (3) После аутентификации сервер авторизации выполнитпредоставьте вашему веб-приложению код.
  • (4) Веб-приложение отправит запрос конечной точке токена на обмен этого кода на токен доступа и / или токен id.
  • (5) После получения этих токенов веб-приложение может использовать конечные точки вашего личного отдыха apis , отправив один из этих токенов в качестве заголовка.
  • (6) Ваше личноеостальные apis должны проверить, если токен веб-приложения (заголовок) действителен sendinдайте это одной конечной точке сервера авторизации
  • (7) Если токен действителен, ваш api rest может отвечать веб-клиенту.Например, json с информацией о пользователе, выполните обновление сведений о заказе клиента и т. Д.

Здесь некоторые потоки oauth2

azure oauth2 oauth2 flow oauth2 flow

Для выполнения шагов (2), (3) и (4) вам понадобятся значения clientId, clientSecret и другие , поэтому я предлагаю вам выполнить эти шаги в бэкэнде вашего внешнего интерфейса !.Я знаю, это звучит странно, но из следующего примера вы поймете:

Если вы размещаете сборку своего приложенияact.js на простом сервере, таком как apache http или nginx, это серверная часть вашегоfrontend

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

В этом случае вы можете использовать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...