Как использовать Reactjs для аутентификации входа пользователя с помощью oauth2 Password Grant?

Question

Мои друзья и я создаем это веб-приложение обратной связи, используя Spring-Boot Java для бэкэнда и Reactjs для веб-интерфейса.Недавно мы выяснили, как работает Oauth2 и где его можно настроить и протестировать с помощью Postman.

Теперь мы застряли на попытке сделать POST-выборку в Reactjs, которая включает в себя ClientID, Secret, Username, Password ивозвращает токенМы смогли сделать обычный запрос POST и сохранить пользователя на нашем сервере, но тот факт, что для авторизации требуется больше параметров, усложнил нам задачу.

Это то, что я пробовал до сих пор:

export function PostData(type, userData)  { //disregard parameters for now
  let BaseURL = "http://localhost:8080/";

  return new Promise((resolve, reject) => {
    fetch(
      "http://localhost:8080/oauth/token?grant_type=password&username=user&password=user123",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          clientId: "my-trusted-client",
          clientSecret: "secret",
          scope: "user_info"
        })
      }
    )
      .then(response => response.json())
      .then(res => {
        resolve(res);
        console.log(res);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Все, что я делаю, - это «статический» запрос к нашему API отдыха.Я пытаюсь воссоздать в Reactjs то, что я делаю в Postman:

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

Мы являемся студентами, пытающимися узнать больше о нашей страсти к CS, любой совет очень ценится.

Заранее спасибо,

Answer 1

Запросы OAuth2 ожидают запроса с Content-Type: application / x-www-form-encoded, что означает, что вам нужно отправлять тело в кодировке x-www-form, а не в json (например, grant_type = password & username = ... )

fetch(
  "http://localhost:8080/oauth/token",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-encoded"
    },
    body: “grant_type=password&clientId=my-trusted-client&username=user&password=user123&scope=user_info“
  }
)

Также обратите внимание, что вы не должны включать секрет клиента при отправке запросов от ненадежного клиента (т. Е. Всего, что не работает на ваших серверах). Это не нужно и может раскрыть секрет злоумышленникам.