如何使用React来使用oauth2密码授予对用户登录进行身份验证？

Question

我和我的朋友们正在使用Spring-Boot Java作为后端以及Reactjs作为前端来构建这个反馈Web应用程序。我们最近弄清楚了Oauth2的工作原理以及在何处可以使用Postman进行设置和测试。现在，我们陷入尝试在Reactjs中进行POST提取的过程，其中包括ClientID，Secret，用户名，密码并返回Token。我们能够执行常规的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);      });  });}我正在做的只是对Rest API的“静态”请求。我试图在Reactjs中重新创建我在邮递员中所做的事情：有没有人可以帮助我重写上面的代码，以便我可以对尝试登录的用户进行身份验证？另外，关于收到令牌后如何继续前进的任何建议？我们是学生，他们试图更多地了解我们对CS的热情，任何建议均深表感谢。

Answer 1

OAuth2请求要求使用内容类型：application / x-www-form-encoded的请求，这意味着您需要发送x-www-form-encoded正文，而不是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“

  }

)

另请注意，从不受信任的客户端发送请求时，您不应包含客户端密码（即，服务器上未运行的任何内容）。这是没有必要的，并且可以向攻击者公开此秘密。