web-dev-qa-db-fra.com

Passage de l'en-tête d'autorisation pour les images src au serveur distant dans la page Ionic

J'ai une application ionique où elle récupère les données du serveur distant et les affiche sur la page html ionique.

L'URL distante sera comme ceci:

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

Cela me donnera un objet JSON de "contenu" et sera utilisé plus loin dans la page html de l'application Ionic.

Il est utilisé comme ceci sur la page html de l'application Ionic:

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

"myObject" est l'objet JSON de la réponse reçue du serveur.

Le champ "Corps" contient le code HTML à afficher dans le paragraphe. Ce champ "HTML" est renvoyé du serveur uniquement avec l'objet "contenu" complet.

Le champ "Corps" peut avoir un contenu comme celui-ci:

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

Vous pouvez voir dans l'exemple ci-dessus que les images sont présentes dans ce code HTML.

Je n'ai aucun problème à rendre le code HTML de ce champ à Ionic Page.

J'ai un problème ici: mes images n'y sont pas rendues.

Voici pourquoi ..

Mon application est verrouillée pour les utilisateurs invités. Par conséquent, pour chaque demande, je dois envoyer un en-tête d'autorisation afin de l'authentifier. Dans ce cas, toutes les images ne peuvent pas être rendues, car chaque demande d'image sera traitée en tant qu'invité ici pour le serveur.

Pouvez-vous suggérer un lieu commun où toutes mes images et d’autres sources, comme là-bas dans hmtl, devraient passer et envoyer un en-tête d’autorisation au serveur.

J'ai déjà le jeton d'autorisation dans l'élément de stockage local.

Mon but est d'envoyer un en-tête d'autorisation à chaque source externe (image ici) présente dans ce champ Body lors du rendu dans l'application Ionic.

angularcordovatypescriptionic-framework
4
Raghav

1) Créer un intercepteur qui définit l'en-tête d'autorisation

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

Au lieu de "votre jeton", vous devez injecter votre AuthService dans cet intercepteur et utiliser par exemple this.authService.getToken (), qui charge le jeton à partir du stockage local.

2) Implémentez un canal "sécurisé" qui obtient une image sous forme de blob et crée une URL d'objet de ce blob pouvant être utilisée dans l'attribut src

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) l'utiliser

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

1ère option: recherchez "signature d'URL"  

L'idée est que, lorsque vous utilisez <img src="http://foo.com/image/1">, il est impossible de transmettre les en-têtes d'autorisation. Donc, au lieu de cela, vous faites une demande de publication à votre backend pour demander un lien public temporaire pour l'image et mettez ce lien comme source d'image.

Voici un exemple de flux

  1. J'ai besoin de montrer " http://foo.com/image/1 "

  2. À partir du navigateur, faites une demande de publication dans le backend, dites-leur que vous êtes un client autorisé (incluez l'en-tête d'autorisation) et demandez une URL temporaire permettant d'afficher l'image publiquement.

  3. À partir du backend, générez une URL signée valide pour une durée limitée et ne nécessitant pas d’en-têtes d’autorisation pour afficher l’image.

  4. Utilisez l'URL temporaire signée que vous venez de recevoir en tant que code source de la balise img.

2ème option: Téléchargez l'image et utilisez l'URL de blob

Les réponses à cette question vous le diront: Forcer un intercepteur HTTP dans une requête dynamique ngSrc

1
Hasan

Voici comment vous écrivez un intercepteur, 

  1. Besoin d'étendre une classe appelée HttpIntercept fournie dans angular 4/5.
  2. Ignorer une méthode appelée intercept, 

Cela ajoutera l'en-tête dans toute votre requête http, ce serait idéalement l'endroit où vous auriez peut-être besoin de mettre la logique d'assainissement. Par exemple, si vous souhaitez mettre uniquement certaines demandes avec cet en-tête, vous pouvez décider de la méthode intercept.

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

Après cela, vous devez l’inscrire dans votre fichier app.module.ts de la manière indiquée ci-dessous. 

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

maintenant, allez à la section @NgModule et faites-le dans votre tableau de fournisseurs, ce serait au tableau de fournisseurs comme indiqué ci-dessous,

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

Maintenant, redémarrez votre application et l'appel http que vous ferez aura un contrôle à l'intérieur qui interceptera votre code et vous pourrez naviguer.

0
Deepak Jha