代码之家  ›  专栏  ›  技术社区  ›  VK321

react js oauth2使用react登录,spring引导显示auth窗口

  •  0
  • VK321  · 技术社区  · 7 年前

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

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

    'Accept': 'application/json',
    

    不知道为什么会这样?

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  3
  •   JRichardsz    7 年前

    模式弹出窗口被触发,因为您被配置为 基本身份验证 发送此标题时:

    'Authorization': 'Basic...'
    

    持票人 相反 基本的

    应用程序的流程如下所示:

    • (3) 验证后,授权服务器将为您的web应用程序提供一个代码。
    • (4) web应用程序将向令牌端点发出请求,以将此代码交换为访问令牌和/或id令牌。
    • 发送 其中之一 代币
    • (6) 您的私有RESTAPI必须通过将web应用(头)的令牌发送到授权服务器的一个端点来验证它是否有效

    这里有一些oauth2流

    azure oauth2 oauth2 flow oauth2 flow

    为了执行步骤(2)、(3)和(4),您需要clientId、clientSecret和其他 敏感值 ,因此我建议您在 后端 你的

    如果您将react.js应用程序的构建托管在一个简单的服务器(如apache http或nginx)中,

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