Using Angular to interact with an API that requires HTTP Digest Authentication

Question

Using Angular to interact with an API that requires HTTP Digest Authentication

Creating a web administration panel has been my goal, and I've written a backend controller to assist in delivering the necessary data. However, due to sensitive information, I decided to implement HTTP Digest authentication. When accessing the site via a browser, users can enter their username and password into the browser-generated login screen (standard browser auth box). If the credentials are correct, the data is displayed in JSON format as it functions as a RESTful API.

I have attempted to implement this feature in Angular for days without success. While I came across blog posts with instructions, they only covered HTTP Basic authentication, which is not what I'm looking for.

Trying to retrieve the realm/nonce and other details by sending a GET request to the specified URL has proven unsuccessful. Every attempt results in receiving the "WWW-Authenticate" header along with an error message (401 unauthorized), making it impossible to read the required information for further steps involving md5(username:realm:password) encryption. Reading the WWW-Authenticate header or utilizing X-headername has also proven challenging.

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

In search of a solution to this issue, Google hasn't been much help to me. Any assistance would be greatly appreciated!

angular typescript http authentication

Answer 1

Answer №1

If anyone is curious about my approach:

I created a custom class for implementing digest authentication:

If anyone is interested in the details (it's functional for me, but not fully compliant with the HTTP Digest Authentication Standard): -> The NC and Nonce are sent on the initial step by my Server, while the username and password are retrieved from an HTML form

    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.')
    )
      }

  
    }

Answer 2

If anyone is curious about my approach:

I created a custom class for implementing digest authentication:

If anyone is interested in the details (it's functional for me, but not fully compliant with the HTTP Digest Authentication Standard): -> The NC and Nonce are sent on the initial step by my Server, while the username and password are retrieved from an HTML form

    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.')
    )
      }

  
    }

Using Angular to interact with an API that requires HTTP Digest Authentication

Answer №1

Similar questions

Personalized webpage displaying HTTP errors

Discover the fundamentals of integrating scripts into Angular 2 by utilizing Node.js and npm alongside ASP.NET Core 1

Binding an ID to an <ion-textarea> in Ionic 3

Angular 4 Universal - Utilizing Google Analytics with Solely Client Side Code

Get the latest version of Node Stream using Angular 2

The interface "App" is not properly implemented by the class "FirebaseApp" causing an error

The system was expecting a stream but received a value of 'undefined'

The variable 'React' is defined but not utilized in the code

Developing an angular 6 web client for GRPC

What are some ways I can incorporate PrimeNG components into my Ionic 4 project?

Continuing the operation following the closure of a modal

Is it possible to dynamically modify the custom CSS property --background of ion-item in Ionic 4?

Utilizing observable services efficiently in Angular

Encountered an issue while setting up MDBoostrap Pro using oauth authentication in docker-compose

What is the best way to incorporate padding into an Angular mat tooltip?

What causes the child component to be rendered four times when the parent component is first loaded?

Unable to utilize React Icons component as an object value in typescript

Is it possible to configure TypeScript (or a tool similar to ESLint) to throw an error when a library returns undefined?

Guide to importing a markdown document into Next.js

The search for a supporting object '[object Object]' of type 'object' was unsuccessful. NgFor is limited to binding to Iterables like Arrays