Sommaire

• Introduction - Créer son app Office365,
• S'identifier auprès de MS Graph,
• Récupération des calendriers d'un utilisateur,
• Ajouter des évènements dans son calendrier avec des données personnalisées,
• Charger/Télécharger un fichier sur OneDrive,
• Télécharger une image protégée,
• Astuce: les dates de Microsoft Graph,
• Le projet sur Github,
• La démo sur www.myTjm.fr.

Un dernier petit point sur cette application concerne l'affiche de l'image de l'utilisateur dans la barre de menu :

Cela peut paraitre bête, mais cette image est dans Office365 donc protégé par notre token oAuth. Si l'on met juste un tag avec un lien vers l'image, on aura une erreur de sécurité (contenu interdit).

L'URL de la miniature de l'utilisateur est https://graph.microsoft.com/v1.0/me/photo/$value. Donc mettre :

ne fonctionnera pas. Il faut intercepter l'appel Http de l'image. Pour cela, nous allons créer une nouvelle directive et utiliser URL.createObjectURL :

import { HttpClient } from '@angular/common/http';
import { Directive, ElementRef, Input, HostListener } from '@angular/core';
import { map } from 'rxjs/operators';

@Directive({
  selector: '[appHttpSrc]'
})
export class HttpSrcDirective {
  private _appHttpSrc: string;
  private _url: string;

  constructor(
    private el: ElementRef,
    private http: HttpClient) {
  }

  public get appHttpSrc(): string {
    return this._appHttpSrc;
  }
  @Input()
  public set appHttpSrc(v: string) {
    this._appHttpSrc = v;
    // on fait un appel Http pour récupére l'image(format blob)
    this.http.get(v, { responseType: 'blob' }).pipe(
      map(val => {
        // on crée l'url
        return URL.createObjectURL(val);
      }))
      .subscribe(url => {
        // on dit au tag img que son url c'est l'url crée ci-dessus
        this.el.nativeElement.src = url;
      });
  }

  @HostListener('load') onLoad() {
    if (this._url != null) {
      // on libère la mémoire du blob sauvegardé 
      URL.revokeObjectURL(this._url);
    }
  }
}

Remarquez l'appel à revokeObjectURL quand l'image a été téléchargée pour libérer de la mémoire l'URL inutile.