Angular - 将 API 与 HTTP Digest Auth 一起使用

Question

我想创建一个网络管理面板。为此，我编写了一个后端控制器来帮助我提供所需的数据……但是，有一些合理的数据，因此，我实现了 HTTP Digest 身份验证。如果您在浏览器中访问该站点，您只需在浏览器生成的登录屏幕（标准浏览器身份验证框）中输入您的用户名和密码，如果用户名/密码正确，则数据显示为 JSON（或其他指定格式 - 这是一个 RESTful API )。

我已经尝试了几天在 Angular 中实现它，但它不起作用... - 我找到了一些带有说明的博客文章，但只有 HTTP Basic 身份验证 - 我不想使用 Basic授权。

我尝试向指定的 Url 发送 Get 请求以获取领域/随机数等，但这不起作用 - 每次我收到标题“WWW-Authenticate”但带有错误消息（401 未授权（当然^^ - 这对我来说很清楚^^）） - 但我无法读出标题以将其用于进一步的步骤（md5（用户名：领域：密码）。这不起作用......我想读出 WWW-Authenticate 标头（使用 X-headername 也不起作用）

sendCredentials()
{
console.log("Send cred");
this.http.get(this.targetUrl, {observe: 'response'}).subscribe(res => {
  console.log(res.headers.get('WWW-Authenticate'));
}) //Normally i want to set the nonce here and then i 
 //want to generate my md5 Value to send this in the next step with a new http get request)
}

我不知道如何解决这个问题 - 在这种情况下，谷歌对我没有帮助......

希望有人能帮帮我^^

Answer 1

如果有人对我的解决方案感兴趣：

我编写了自己的类来使用摘要身份验证：

如果有人感兴趣：（它对我有用 - 但不是完整的 HTTP Digest Auth 标准） -> NC 和 Nonce 将在第一步由我的服务器发送从 HTML 表单读取的用户名和密码

    export class AuthComponent {

  loggedIn: string = "false";
  sessionID: string = "n.s";
  username = "";
  password = "";
  targetUrl: string = "<<targetUrl>>";

  md5gen: Md5 = new Md5();
  nc = "<<your nc>>";
  nonce = "";
  opaque = "";
  qop = "";
  realm = "";
  uri = "";
  cNonce = '<<your nonce>>';

  constructor(private http: HttpClient, private router: Router, private toast: HotToastService) 
  {
    this.http.get<authModel>(this.targetUrl).subscribe(res =>
      {
          console.log(res);
          this.loggedIn = res.loggedIn;
          this.nc = res.counter;
          this.nonce = res.nonce;
          this.opaque = res.opaque;
          this.qop = res.qop;
          this.realm = res.realm;
          this.uri = res.uri;
          this.username = res.username;
      })
   }


   sendCredentials() {    
    //Create needed Hashes or auth
    this.md5gen.start();
    var A1 = this.md5gen.appendStr(this.username + ":" + this.realm + ":" + this.password).end();
    
    this.md5gen.start();
    var A2 = this.md5gen.appendStr("GET:" + this.uri).end();

    var stuff = A1 + ":" + this.nonce + ":" + this.nc + ":" + this.cNonce + ":" + this.qop + ":" + A2;
    
    this.md5gen.start();
    var resp =  this.md5gen.appendStr(stuff).end();

    /*
    console.log("Response: " + resp);
    console.log(this.password + " -> " + A1);
    console.log(resp);
    console.log("---------------");
    console.log("RQ-Method: " + "GET", 0);
    console.log("RQ-Uri: " + res.uri, 0);
    console.log("RQ-NONCE: " + res.nonce, 0 );
    console.log("RQ-NC: " + this.nc, 0 );
    console.log("RQ-CNONCE: " + cNonce, 0 );
    console.log("RQ-QOP: " + res.qop, 0 );
    */

    var header = 
    {
      headers: new HttpHeaders(
        {
          'Content-Type': 'application/json; charset=utf-8',
          'requestModule' : 'auth-Module',
          'Authorization': 'Digest username="' + this.username + '", realm="' + this.realm + '", nonce="' + this.nonce + '", uri="' + this.uri + '", response="' + resp + '", opaque="' + this.opaque + '", qop=' + this.qop + ', nc=' + this.nc + ', cnonce="' + this.cNonce + '"',
        }
      )
    }

    this.http.get<boolean>(this.targetUrl + "/auth", header).subscribe(
      res => {
        if(res == true)
        {
          successToast(this.toast, 'Successfully loggedIn! - Welcome ' + this.username);
          console.log("Logged In!");
          this.router.navigate(['/']);
        }
        else
        {
          if(res == null)
          {
            console.log("No Data!");

          }
          else
          {
            console.log("Wrong User/Pass!");
          }
          errorToast(this.toast, 'Wrong password or username!');
        }
      },
      err => console.log('HTTP Error', err),
      () => console.log('HTTP request completed.')
    )
      }

  
    }