使用react和spring boot来反应js oauth2登录，并显示auth窗口 [英] react js oauth2 login using react and spring boot shows auth window

问题描述

我已经使用spring boot和reactjs实现了oauth2服务器.

I have implemented the oauth2 server using spring boot and reactjs.

服务器端工作正常，第一步，我想使用用户名和密码获取令牌，这是我的反应登录名或获得

Server side working ok, in first step I want to get token using username and password here is my react login or get

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);
    });
}

但是，如果我发送请求，即使我接受json，我也会在浏览器上收到http auth窗口警报.

However if I send request, I get http auth window alert on the browser even I am accepting json.

'Accept': 'application/json',

不确定为什么会这样吗?

Not sure why it is happening?

推荐答案

由于发送此标头时配置了基本身份验证，因此触发了模式弹出窗口:

The modal popup is triggered because you are configured a basic authentication when you send this header:

'Authorization': 'Basic...'

尝试使用 Bearer 代替 Basic

应用程序的流程如下:

• (1)您的用户将启动Web应用程序.
• (2)由于以前没有登录，因此您的Web应用程序将向他们显示一个登录屏幕(授权服务器提供的页面).
• (3)认证后，授权服务器将为您的Web应用程序提供一个代码.
• (4)Web应用程序将向令牌端点发出请求，以将此代码交换为访问令牌和/或id令牌.
• (5)取回这些令牌后，Web应用程序可以使用令牌其中的一个 send 作为标头使用您的私人休息api的端点.
• (6)您的私有rest api必须通过将其发送到授权服务器的一个端点来验证Web应用程序(标头)的令牌是否有效
• (7)如果令牌有效，则允许您的api其余部分响应Web客户端.例如带有用户信息的json，执行客户订单明细的更新等

• (1) Your users will start the web application.
• (2) As they were not signed in before, you web app will show them a login screen (a page provided by the authorization server).
• (3) After authenticating, the authorization server will provide your web app a code.
• (4) The web app will issue a request to a token endpoint to exchange this code for an access token and/or an id token.
• (5) After getting back these tokens, the web app can consume the endpoints of your private rest apis sending one of these tokens as header.
• (6) Your private rest apis must validate if token of the web app (header) is valid by sending it to one endpoint of the authorization server
• (7) If token is valid, your api rest is allowed to respond to the web client. For instance a json with information of user, perform an update of customer order details, etc

这里有一些oauth2流

Here some oauth2 flows

要执行步骤(2)，(3)和(4)，您将需要clientId，clientSecret和其他敏感值，因此我建议您在<前端的strong>后端！我知道这听起来很疯狂，但是在下一个示例中您将理解:

In order to perform the steps (2), (3) and (4) you will need clientId, clientSecret and other sensitive values, so I suggest you, to perform these steps in the backend of your frontend!. I know this sounds crazy but with the next example you will understand:

如果您在apache http或nginx这样的简单服务器中托管react.js应用的构建，这是前端的后端

If you host the build of your react.js app in a simple server like apache http or nginx, this is the backend of your frontend

这些服务器的缺点是它们仅用于服务静态资产，而不能执行复杂的步骤.

The disadvantage of these servers is that they are only used to serve the static assets not to perform complex steps.

在这种情况下，您可以使用

In this case you can use

• node.js与护照js 模块.还要检查此
• php，ruby等

这篇关于使用react和spring boot来反应js oauth2登录，并显示auth窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！