web-dev-qa-db-ja.com

Ionicページで画像srcの認証ヘッダーをリモートサーバーに渡す

Ionicアプリがあり、リモートサーバーからデータを取得して、Ionic htmlページに表示します。

リモートURLは次のようになります。

http://foo.com/api/content/1

これにより、「content」のJSONオブジェクトが提供され、さらにIonic app。のhtmlページで使用されます。

Ionic app：内のhtmlページでこのように使用されています。

<div class="article-desc">
  <p [innerHtml]="myObject?.Body"></p>
</div>

「myObject」は、サーバーから受信した応答のJSONオブジェクトです。

「本文」フィールドには、段落に表示されるHTMLが含まれています。この「HTML」フィールドは、「コンテンツ」オブジェクト全体とともにサーバーからのみ返されます。

「本文」フィールドには、次のようなコンテンツを含めることができます。

<p>blah blah <img src="http://foo.com/image/1"/> blah blah <img src="http://foo.com/image/2"/>blah blah blah </p>

上記の例から、画像がそのhtmlにあることがわかります。

そのフィールドからhtmlをIonic Page。

画像がそこにレンダリングされていないという問題が1つあります。

ここに理由があります。

私のアプリはゲストユーザーに対してロックされているため、リクエストごとに認証のためにAuthorizationヘッダーを送信する必要があります。この場合、各画像リクエストはここではサーバーとしてゲストとして扱われるため、すべての画像はレンダリングできません。

Htmlにある私の画像やその他のソースをすべて通過させ、サーバーに承認ヘッダーを送信できる共通の場所を提案できますか。

ローカルストレージアイテムに認証トークンが既にあります。

私の目標は、Ionic app。

angularcordovatypescriptionic-framework
9
Raghav

1）認証ヘッダーを設定するインターセプターを作成する

import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
            setHeaders: {
                Authorization: `Bearer <your token>`
            }
        });

        return next.handle(request);
    }
}

の代わりに <your token> AuthServiceをこのインターセプターに注入する必要があります。たとえば、ローカルストレージからトークンをロードするthis.authService.getToken（）などです。

2）blobとして画像を取得し、src属性で使用できるblobのオブジェクトURLを作成する「セキュア」パイプを実装します

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';

@Pipe({
    name: 'secure'
})
export class SecurePipe implements PipeTransform {

    constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

    transform(url): Observable<SafeUrl> {
        return this.http
            .get(url, { responseType: 'blob' })
            .map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
    }

}

3）使用する

<img [attr.src]="'your link' | secure | async" />
33
Milan Hlinák

最初のオプション：「URL署名」を探します

<img src="http://foo.com/image/1">を使用する場合、認証ヘッダーを渡す方法はないという考え方です。そのため、代わりにバックエンドに投稿リクエストを行い、画像の一時的な公開リンクを要求し、このリンクを画像のソースとして配置します。

以下にフローの例を示します

  1. 「 http://foo.com/image/1 」を表示する必要があります

  2. ブラウザから、バックエンドへの投稿リクエストを行い、あなたが承認されたクライアントであることを伝え（承認ヘッダーを含めて）、画像を公開する一時的なURLを要求します

  3. バックエンドから、限られた期間有効で、画像を表示するための認証ヘッダーを必要としない署名付きURLを生成します。

  4. 受け取った一時的な署名付きURLをimgタグのsrcとして使用します。

2番目のオプション：イメージをダウンロードして、blob URLを使用します

この質問への回答はそれについてあなたに教えます： 動的ngSrcリクエストでHTTPインターセプターを強制します

2
Hasan

インターセプターの作成方法は次のとおりです。

  1. angular 4/5。で提供されているHttpInterceptorというクラスを拡張する必要があります。
  2. インターセプトと呼ばれるメソッドをオーバーライドし、

すべてのhttpリクエストにヘッダーを追加します。これは理想的には衛生ロジックを配置する必要がある場所です。たとえば、そのヘッダーを使用して特定のリクエストのみを配置する場合は、インターセプトメソッドで決定できます。

export class YourInterceptor implements HttpInterceptor{    
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
const NewRequest= req.clone({ headers: req.headers.set(‘Auth-Token’, ‘YourAuthToken’) });

return next.handle（NewRequest）; }

この後、以下に示す方法でapp.module.tsファイルにこれを登録する必要があります。

import { YourInterceptor } from './Your-interceptor';

@NgModuleセクションに移動し、プロバイダー配列でこれを実行します。これは、以下に示すプロバイダー配列になります。

providers: [{provide: HTTP_INTERCEPTORS,useClass: YourInterceptor,multi: true}],

ここでアプリを再起動すると、HTTP呼び出しを行うたびに、コードをインターセプトするコントロールが内部に含まれるようになり、航行できるようになります。

0
Deepak Jha