Перенаправление Fetch API не работает так, как я предполагал

Question

Привет, ребята, переполнители стека! Я создаю небольшое приложение с использованием battle.net api.

Я пытаюсь пройти аутентификацию в API, используя Oauth с API выборки, но, похоже, он не делает то, что я хочу!

Итак, это мой код ''

      const authUrl =
  "https://eu.battle.net/oauth/authorize?client_id=clientid&scope=wow.profile&state=state&redirect_uri=https://localhost:3000/&response_type=code";
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});

и он должен перенаправить меня обратно сюда https: // localhost:3000 /? code ="code" & state ="state", причем код является фактическим кодом аутентификации.

Но когда я пытаюсь вызвать эту конечную точку, она не перенаправляет меня обратно. Из консоли разработчика я вижу, что он действительно делает звонок здесь https://eu.battle.net/oauth/authorize?client_id=clientid&scope=wow.profile&state=state&redirect_uri=https://localhost:3000/&response_type=code который дает статус 302. а затем перенаправляет меня на этот URL:

https://eu.battle.net/login/en/?ref=https://eu.battle.net/oauth/authorize?client_id%3clientId%26scope%3Dwow.profile%26state%3Dsdagdf324asdas%26redirect_uri%3Dhttps:/ / localhost:3000% 26response_type% 3Dcode & app = oauth, который дает статус 200.

Но не вернемся к localhost. НО, если я вставляю authUrl прямо в браузер, он работает по назначению.

Что я делаю не так, внутри реагирую?

Извините, если я не совсем понимаю или сбиваю с толку. Если я пропустил что-то важное, просто спросите, и я предоставлю! Если бы кто-нибудь мог попытаться мне помочь, я был бы очень признателен! Заранее спасибо!

Answer 1

Поток кода аутентификации OAuth2 работает примерно так:

1. Вы отправляете пользователя на адрес авторизации.
2. Пользователь входит в систему, используя форму
3. Пользователь перенаправляется обратно.

Если пользователь уже вошел в систему и есть файлы cookie, 2 можно пропустить.

Этот процесс никогда не будет работать с выборкой, так как он не предназначен для этого. Даже если перенаправление работает для вас, когда вы переходите вручную, это просто потому, что модель безопасности для прямого перехода к URL-адресу отличается от использования fetch.

Таким образом, вы не можете сделать это с помощью fetch. Вместо этого отправьте пользователя по этому URL-адресу, используя document.location.

Answer 2

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

Что-то вроде этого:

        `https://eu.battle.net/oauth/authorize?client_id=${clientid}&scope=wow.profile&state=${state}&redirect_uri=https://localhost:3000/&response_type=code`;
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});

В качестве альтернативы вы можете использовать конкатенацию строк.

      const authUrl =
  "https://eu.battle.net/oauth/authorize?client_id=" + clientid + "&scope=wow.profile&state=" + state + "&redirect_uri=https://localhost:3000/&response_type=code";
fetch(authUrl, {
  method:"GET"
  redirect: "follow",
  mode: "no-cors",
});