2016-04-04 11 views
0

私は現在、TypeScriptでAngular2を使用しているWebアプリケーションを開発中です(問題がある場合)。
このアプリケーションはダイジェスト認証を求めるWebサーバーと通信する必要があります。
これまでは、ブラウザーのネイティブログインプロンプトを使用していました。これは、サーバーが「401 unauthorized」を返すと、自動的に表示されます。ブラウザは一度だけ認証を要求し、将来の要求にこのユーザー名とパスワードを自動的に使用します。だから私は認証に気を付ける必要はありません、ブラウザは私のためにすべてを行います。
残念ながら、私はカスタムレジストリ画面を作成しなければなりません。これは、 "register"や "reset passwort"のようなデフォルトのアクションを実装しなければならないためです。
ダイジェスト認証は非常に複雑で、ブラウザはすべて私のために複雑な作業をすべて行いますので、ブラウザの機能を使用したいと思いますが、ログインプロンプトは使用しません。
ブラウザの認証機能を使用することは可能ですか?
可能であれば、使用するユーザー名とパスワードはどのように設定できますか?ネイティブブラウザ認証を使用するJavascript

EDIT:
誰かが「広義の」として、この質問を閉じたいと思ったとして、私はいくつかの詳細を追加しようとするでしょう。
Webアプリケーションは、安らかなWebサービスからデータを取得します。このWebサービスではダイジェスト認証が必要で、間違ったユーザー名またはパスワードを使用している場合は401で応答します。
上記のように、401エラーが発生した場合、ブラウザは自動的にログインプロンプトを表示します。有効なログインを入力すると、ブラウザはこれらの値をどこかにキャッシュし、将来のすべての要求に対して自動的に設定します。
ここでは、基本的にログインプロンプトを置き換え、ブラウザがログインに使用する値をプログラムで設定します。
私はこれが質問を明確にするのに役立つことを願っています。

+0

これで、使用しているログインは何ですか? HTAccess? – epascarello

+0

現在、私はブラウザのネイティブログインプロンプトを使用しています – Springrbua

+0

ログインはどこで有効であることを確認するのですか? – epascarello

答えて

0

HTTPデコレータを記述してレスポンスコード401を傍受する必要があります。その後、Authenticationヘッダを追加してリクエストを再生します。

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

} 

ほんの数日前に合併したAngular2(https://github.com/angular/angular/pull/9355)に対して提出バグが、そこにあったように何まだ私のために働いていなかったことは、正しい応答を決定しています。

有効なリクエストのたびに、最初に成功したリクエストカウンタを増やす必要があります。

誰かが実際の解決策を提示する可能性があります。

関連する問題