0

你好，堆栈溢出者！我正在使用 Battle.net api 构建一个小应用程序。

我正在尝试使用带有 fetch 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。

但不回到本地主机。但是，如果我将 authUrl 直接粘贴到浏览器中，它会按预期工作。

我在里面做错了什么反应？

对不起，如果我不清楚或令人困惑。如果我遗漏了任何重要的东西，请问我会提供！如果有人可以尝试帮助我，将不胜感激！提前致谢！

4

2 回答 2

0

OAuth2 authentication_code 流程大致如下：

  1. 您将用户发送到授权网址。
  2. 用户使用表单登录
  3. 用户被重定向回来。

如果用户已经登录并且有 cookie，则可以跳过 2。

这个过程永远不会与 fetch 一起工作，因为它的设计目的是不这样做。即使在您手动访问时重定向对您有效，但这只是因为直接访问 url 的安全模型与使用 fetch 不同。

所以你不能用 fetch 做到这一点。相反，使用document.location.

于 2021-02-26T06:46:03.640 回答
0

所以你在这里的问题，看起来你没有正确传递变量，你不能只在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",
});
于 2021-02-25T00:17:34.267 回答