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.

Dans cet article, nous allons voir comment récupérer la liste des calendriers Office365 de l'utilisateur. L'api pour cela est simple, c'est juste un GET vers l'URL /me/calendars. Mais pour avoir quelque chose de plus générique et qui va nous servir pour les autres appels, nous allons créer une classe/service de base.

Cette classe contiendra juste 2 méthodes, l'une qui encapsule les appels des méthodes REST qui ne renvoi qu'une seule entité et l'autre qui renvoi un tableau d'entité :

import { HttpHeaders } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

export const GraphUrl = 'https://graph.microsoft.com/v1.0/';

export class GraphBaseService {
  constructor(
    protected httpClient: HttpClient) { }

  protected getClient<T>(api: string, select: string = null, args: string = null): Observable<T> {
    const queryParams = [];
    if (select) { queryParams.push('$select=' + select); }
    if (args) { queryParams.push(args); }
    const url = GraphUrl + api + '?' + queryParams.join('&');
    return this.httpClient.get<T>(url);
  }

  protected getClientArray<T>(api: string, select: string = null, args: string[] = null): Observable<ArrayResponse<T>> {
    let queryParams = [];
    if (select) { queryParams.push('$select=' + select); }
    if (args) { queryParams = queryParams.concat(args); }

    const url = GraphUrl + api + '?' + queryParams.join('&');
    const headers = new HttpHeaders()
      .set('prefer', 'outlook.timezone=\"Europe/Paris\"');
    return this.httpClient.get<ArrayResponse<T>>(url, { headers: headers });
  }
}

export class ArrayResponse<T> {
  value: T[];
}

 Ces méthodes ont des arguments optionnels pour laisser la liberté au code client et ce sont des méthodes génériques.

De façon général, quand on appele une api REST de MS Graph, elle retorune l'ensemble des propriétés directes de l'entité. Si l'on veut optimiser la requête et ne récupérer qu'une partie des informations, il suffit d'ajouter $select=liste des propriétés voulues dans l'url.

Pour les propriétés qui sont plus complexes (plus profondes dans l'arbre de l'objet), ce sont des arguments supplémentaires que l'on doit passer (d'ou le paramètre args).

Regardons avec les calendriers le code client.

Récupération des calendriers

Dans notre application, on n'a besoin que du nom du calendrier. D'ou notre classe calendarsService :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { GraphBaseService } from '@services/msgraph';
import { HttpClient } from '@angular/common/http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CalendarsService extends GraphBaseService {

  constructor(
    httpClient: HttpClient
  ) {
    super(httpClient);
  }

  /**Liste des calendriers du user connecté */
  getCalendars(): Observable<MicrosoftGraph.Calendar[]> {
    return this.getClientArray<MicrosoftGraph.Calendar>('me/calendars', 'name, color, canEdit, owner, events')
      .pipe(map(r => r.value));
  }
}

Ce service hérite de notre service de base GraphBaseService, appele l'url me/calendars et demande les seulement les propriétés name, color, etc...

Simple non ?

Toutes les autres classes/services de notre application seront du même type.