Javascript mit nativer Browser-Authentifizierung

Question

Ich entwickle gerade eine Web-Anwendung mit Angular2 mit TypeScript (wenn das wichtig ist).
Diese Anwendung muss mit einem Webserver kommunizieren, der nach einer Digest-Authentifizierung fragt.
Bis jetzt habe ich die native Login-Eingabeaufforderung des Browsers verwendet, die automatisch angezeigt wird, wenn der Server eine "401 nicht autorisierte" zurückgibt. Der Browser fragt nur einmal nach Authentifizierung und verwendet diesen Benutzernamen und das Passwort automatisch für zukünftige Anfragen. Ich muss also nicht auf die Authentifizierung achten, der Browser tut alles für mich.
Leider muss ich jetzt einen benutzerdefinierten Login-Bildschirm erstellen, da ich einige Standardaktionen wie "register" oder "reset passwort" implementieren muss, auf die normalerweise von diesem Bildschirm aus zugegriffen werden kann.
Da Digest-Authentifizierung ziemlich komplex ist und der Browser bereits all die komplexen Dinge für mich tun würde, würde ich gerne die Browser-Funktionalität weiter verwenden, aber ohne seine Login-Eingabeaufforderung zu verwenden.
So ist es möglich, die Browser-Authentifizierungsfunktion zu verwenden?
Wenn es möglich ist, wie kann ich den Benutzernamen und das Passwort festlegen, das es verwenden soll?

EDIT:
Als jemand diese Frage als „zu breit“ schließen wollte, ich werde versuchen, etwas mehr Details hinzuzufügen.
Die Web-Anwendung erhält Daten von einem erholsamen Webservice. Dieser Webservice erfordert Digestauthentifizierung und antwortet mit einem 401, wenn Sie einen falschen Benutzernamen oder ein falsches Passwort verwenden.
Wie oben erwähnt, zeigt der Browser automatisch eine Anmeldeaufforderung an, wenn er einen Fehler 401 erhält. Wenn Sie eine gültige Anmeldung eingeben, speichert der Browser diese Werte irgendwo zwischen und speichert sie automatisch für jede zukünftige Anfrage.
Jetzt möchte ich grundsätzlich die Login-Eingabeaufforderung ersetzen und programmatisch die Werte festlegen, die der Browser für die Anmeldung verwenden soll.
Ich hoffe, dies hilft, um die Frage klar zu machen.

Answer 1

Grundsätzlich müssen Sie einen HTTP Dekorator schreiben, um den Antwortcode 401 abzufangen. Anschließend fügen Sie den Header Authentication hinzu und wiederholen die Anfrage.

import { Injectable } from '@angular/core'; 
import { Http, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class CustomHttp extends Http { 

    /** 
    * intercept request 
    * @param {Observable<Response>} observable to use 
    * @param {string} url to request 
    * @returns {Observable<Response>} return value 
    * @private 
    */ 
    private _intercept(observable: Observable<Response>, url: string): Observable<Response> { 
     return observable.catch(error => { 
      if (error.status === 401) { 

       // add custom header 
       let headers = new Headers(); 
       headers.append('Authentication', '<HEADER>'); 

       // replay request with modified header 
       return this.get(url, new RequestOptions({ 
        headers: headers 
       }); 

      } else { 
       return Observable.throw(error); 
      } 
     }); 
    }; 

    /** 
    * constructor 
    * @param {ConnectionBackend} backend to use 
    * @param {RequestOptions} defaultOptions to use 
    * @returns {void} nothing 
    */ 
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
     super(backend, defaultOptions); 
    }; 

    /** 
    * get request 
    * @param {string} url to request 
    * @param {RequestOptionsArgs} options to use 
    * @returns {Observable<Response>} return value 
    */ 
    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this._intercept(super.get(url, options), url); 
    }; 

} 

Was noch nicht für mich gearbeitet hat ist richtige Antworten zu bestimmen, da es einen Fehler gegen Angular2 (https://github.com/angular/angular/pull/9355) eingereicht wurde, die vor wenigen Tagen verschmolzen wurde.

Sie haben die Anforderungszähler für jede gültige Anfrage nach dem ersten erfolgreichen eins zu erhöhen.

Vielleicht jemand anderes mit einer Arbeitslösung zeigen kann.