5

HTTP 基本認証を使用して保護された Web API と通信する phonegap アプリケーションがあります。API は、セキュリティで保護されたサーバー上にある画像を参照する img タグを含む html を返します。どういうわけか、アプリがこれらの画像をリクエストしてロードできるようにする必要があります。基本的な認証資格情報を src (つまり、src=http://username:password@MySecuredServer.com/...) に挿入しても機能しません。また、サーバーを制御していないため、base64 で画像を送信できません。

私の現在のアプローチは、$.ajax を使用して画像を要求し、Authorization ヘッダーを設定してから、画像をキャッシュから DOM にロードすることです (画像は ajax 呼び出しによってキャッシュされるため)。理想的には、$.ajax を使用して各画像を 1 回リクエストし、その画像をキャッシュからページにロードできるようにする必要があります。このアプローチは、ページがリロードされた場合 (画像が既にキャッシュされているため) に機能しますが、最初にリクエストが行われたときは画像をロードしません (リクエストが完了するのを待っていても)。私の phonegap アプリには (html DOM の観点から) コンテンツが動的にロードおよびアンロードされるページが 1 つしかないため、メイン ページがリロードされることはありません。これが私が現在試していることです：

$.ajax({
       url: 'http://MySecuredServer.com/images/example.png',
       beforeSend: function(req){
           req.setHeader('Authorization', 'Basic ' + base64UserCredentials);
       },
       cache: true,
       complete: function(){
            var img = document.createElement('img');
            img.src = 'http://MySecuredServer.com/images/example.png';
            $('#target').append(img);
       }
       });

私も次のようなことを試しました

complete: function(){
    var img = new Image();
    img.src = http://.....
    $(img).on('load', function(){
          $('#target').append(img);
    });
}

ここで質問があります。セキュリティで保護されたイメージをアプリケーションに取り込むにはどうすればよいですか? これは正しいアプローチですか? もしそうなら、私は何を間違っていますか? そうでない場合、これらの保護されたイメージを要求するにはどうすればよいですか? 一般的な概念または特定のシナリオに関するヘルプは本当に素晴らしいでしょう. 前もって感謝します！

4

1 に答える 1

2

ここで提供されているNiKoのソリューションを使用してバイナリデータをbase64に変換し、ヘッダーに認証資格情報を設定するだけでした。

//request image
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.responseType = 'arraybuffer';
xhr.setRequestHeader('Authorization', 'Basic ' + encodedCredentials);
xhr.onload = function(e) {
    $("#target").attr('src', 'data:' + type + ';base64,' + base64ArrayBuffer(e.currentTarget.response));
};
xhr.send();

base64ArrayBuffer は NiKo が提供する関数です。

于 2012-12-17T20:08:24.467 に答える