• Cloud, Guide, Microsoft 365
• 14 Aprile 2022

Introduzione

Bentornati su ICTPower in questa pazzesca serie di articoli che descrivono le meraviglie e l’utilizzo di Microsoft Graph nelle vostre applicazioni front end.

Siamo al terzo episodio della serie e siete ancora qui, il che denota coraggio e voglia di imparare cose che spero renderanno la vostra esperienza di sviluppo migliore.

Microsoft Graph Toolkit nasce proprio con questa intenzione: rendere più intuitivo e semplice l’utilizzo di web components (nel nostro caso costruiti con React) per utilizzare le funzionalità e i dati resi disponibili da Microsoft Graph.

Infatti, Microsoft Graph Toolkit (da qui in poi mgt) è un insieme di componenti che semplificano la connessione tra le nostre applicazioni e Microsoft Graph tramite l’utilizzo di pacchetti distribuiti per essere utilizzati con le nostre librerie preferite.

Alcuni esempi:

• Vanilla Javascript
• React (che utilizzeremo in questo articolo)
• Angular
• SharePoint
• Teams
• Electron

Se volete seguire passo dopo passo questo articolo, leggermente più tecnico delle scorse volte, potete scaricare il repository che ho preparato per voi a questo link https://github.com/404answernotfound/microsoft-graph-toolkit-ictpower-community

Prima di iniziare, ma subito dopo esserci introdotti

Questo articolo utilizza Azure Active Directory per creare un’applicazione cloud, necessaria per poter avere alcuni metadati di configurazione, come quelli nello screenshot d’esempio.

Figura 1

Se non siete ancora a vostro agio con AAD vi consiglio un breve corso del mio carissimo amico Nicola Ferrini così che possiate essere up and running quanto prima.

Se avete domande o dubbi potete scrivermi tranquillamente o inserire una issue sul repository nel link poco sopra cliccando su “New Issue” e vi risponderò appena possibile 🙂

Figura 2

Microsoft Graph Toolkit

Ed eccoci finalmente al bello dell’articolo, e non sto parlando di te, lettore, bensì della “ciccia sulla brace” (o verdurine, per i nostri amici veg), del contenuto che tutti, compreso te, stavano aspettando.

Se hai già scaricato il repository che abbiamo detto poco fa nella sezione “Introduzione” dovresti già essere in grado di leggere il codice insieme a questo articolo, nel caso ci fossero dubbi, ti invito di nuovo a scrivere una issue sul repository stesso.

Come abbiamo detto, Microsoft Graph Toolkit non è altro che un pacchetto installabile che rende disponibili dei componenti (in questo caso React) da poter utilizzare nelle nostre applicazioni fin da subito e con velocità di esecuzione.

Questi componenti sono stati sviluppati direttamente da Microsoft quindi sappiamo che hanno fatto un buon lavoro ma nel caso vi interessasse spulciarli insieme, sarà un argomento interessante per un prossimo articolo.

Procediamo con l’installazione

Figura 3

Come descritto nei commenti e se non vogliamo utilizzare il repository messo a disposizione, possiamo creare una applicazione React tramite il comando “npx create-react-app nome-app”. Seguendo il tutorial direttamente dal repository non dovrete fare solamente questo comando:

Figura 4

Semplice vero? Vi consiglio di scaricare il repository!

Adesso abbiamo il codice, le dipendenze del progetto sono state installate e siamo pronti per aprire il nostro editor di fiducia (il mio preferito è VSCode)

Noterete che le cartelle del progetto sono poche.

Figura 5

Non tutte le cartelle e i file sono di nostro interesse per questo progetto ma questi sono importanti!

1. .git, è la cartella che contiene tutti i file e le configurazioni necessarie per il sistema di versionamento
2. node_modules, cartella che contiene tutti i pacchetti e le dependency del progetto
3. public, cartella in cui possiamo trovare i file statici (tipo index.html)
4. src, cartella dove troviamo i nostri componenti e il nostro codice sorgente prima della build
5. package.json, file di configurazione che ci permette di installare le dependencies e far partire gli script per utilizzare la nostra web application

La nostra applicazione ha come entry point il file index.js

Figura 6

Andando a sostituire la variabile di configurazione con i nostri client id e tenant id potremmo già far partire il progetto che abbiamo messo a vostra completa disposizione. Questi dati possiamo prenderli dopo aver creato una nuova applicazione sul nostro tenant Azure AD.

(Lasciate una stella su Github se vi va! Mi aiuterà a rilasciare contenuti sempre migliori!)

Figura 7

Importando nel nostro index.js il Provider del nostro Microsoft Graph Toolkit e il provider per fare autenticazione con MSAL 2.0 possiamo connettere la nostra applicazione al cloud di Azure così che i nostri utenti, una volta inseriti i propri dati e loggati sui nostri sistemi, possano usufruire dei componenti del Microsoft Graph Toolkit così come pensati da Microsoft.

Sarà necessario abilitare gli scopes in maniera tale da rendere fruibili i component che hanno necessità di utilizzare alcune funzionalità di Microsoft Graph.

Ad esempio, se volessimo utilizzare il component Agenda senza richiedere tramite gli scope il permesso dell’utente a calendars.read, non potremmo utilizzarlo!

Gli scopes infatti sono un particolare oggetto che rendono noto all’utente e ad Azure quali permessi stiamo utilizzando, delegati dall’utente o meno a seconda del caso d’uso.

Se la nostra configurazione è andata a buon fine, scopriremo che il file App.js contiene tutta la logica utile al componente per farci fare login e utilizzare i components di Microsoft Graph Toolkit.

Figura 8

Se state seguendo il tutorial attraverso il repository messo a disposizione e avete inserito il client id e il tenant id sarete già in grado di far funzionare l’app scrivendo sulla vostra console preferita:

npm run start

Questo comando farà partire il nostro server React sulla porta 3000, a meno che non abbiate configurato una porta diversa con le variabili d’ambiente.

Figura 9

Premendo su “Sign In” sarete indirizzati a inserire i vostri username e password per il tenant che avete configurato. Queste applicazioni sono configurabili anche con un tenant common, per permettere l’autenticazione oAuth anche a utenti che non fanno parte di organizzazioni enterprise.

Figura 10

Noterete che non c’è nessun calendario, eppure nel nostro codice è presente l’elemento “Agenda”.

Nel mio caso non vediamo nessun evento in quanto quando ho fatto lo screenshot non avevo inserito impegni sul mio calendario di Outlook, ma negli ultimi cinque minuti ho pensato a tante belle cose da fare in giornata e quindi ecco qui il nuovo componente Agenda.

Figura 11

Figura 12

Ed eccoci qui, con dei component utilizzabili con poche righe di codice e con la possibilità di fornirci tutti i dati di cui abbiamo bisogno e che possiamo prendere dal nostro tenant su Microsoft Azure.

Ma quali altri componenti mette a disposizione la libreria Microsoft Graph Toolkit?

Andiamo a vederli insieme sulla documentazione ufficiale!

E con questo grande potenziale terminiamo il terzo articolo di questa serie ma rimaniamo a disposizione per rispondere alle vostre domande, aiutarvi e incoraggiarvi nel provare questo prodotto Microsoft!

Come muoversi da qui in poi

Abbiamo scoperto così tante cose che adesso non ci resta che provare con le nostre mani Microsoft Graph. L’unico limite è dato da noi stessi e dai nostri poteri di amministrazione.

Vi ringrazio per essere rimasti con me durante la lettura di questo articolo e vi invito a leggere il prossimo di questa serie che ha come argomento, rullo di tamburi, Microsoft Graph! In pieno stile Forrest Gump, andremo a vedere Graph così come Gump vedeva i gamberetti.

Se intanto non sapete cosa fare, potete trovare altri articoli sul mio blog personale 404answernotfound.eu, e potete trovarmi su Twitter e LinkedIn!