Was ist die React MSAL Library?

Die React MSAL Library [1] ist eine von Microsoft entwickelte JavaScript-Bibliothek, die die Integration von Authentifizierungsfunktionen in React-Anwendungen vereinfacht. MSAL steht für Microsoft Authentication Library und bietet eine umfassende Unterstützung für verschiedene Authentifizierungsszenarien, einschließlich OAuth 2.0 und OpenID Connect. Die React MSAL Library stellt React-Komponenten bereit, die nahtlos in React-Anwendungen eingebunden werden können, um eine einfache Authentifizierung zu ermöglichen.

Authentifizierung mit der React MSAL Library

Die React MSAL Library vereinfacht den Authentifizierungsprozess, indem sie vordefinierte React-Komponenten bereitstellt. Mit nur wenigen Zeilen Code können Entwickler die Authentifizierungsfunktionen in ihre React-Anwendung integrieren. Die Library unterstützt verschiedene Authentifizierungsszenarien, darunter die Anmeldung mit Benutzername und Passwort, die Verwendung von Azure Active Directory (Azure AD) und vieles mehr. Durch die Integration der React MSAL Library können Entwickler sicherstellen, dass nur autorisierte Benutzer auf ihre Anwendungen zugreifen können.

Zugriff auf die Graph-API

Ein Hauptvorteil der React MSAL Library ist die nahtlose Integration mit der Microsoft Graph-API [2]. Die Graph-API bietet Entwicklern einen umfangreichen Satz von APIs, um auf Daten und Funktionen von Microsoft 365 (früher Office 365) zuzugreifen. Mit der React MSAL Library können Entwickler mühelos auf die Graph-API zugreifen, um beispielsweise Benutzerprofile abzurufen, E-Mails zu senden, Kalenderereignisse zu erstellen und vieles mehr. Die Library stellt spezielle Funktionen und Hooks bereit, die den Zugriff auf die Graph-API vereinfachen und Entwicklern ermöglichen, schnell auf wichtige Daten und Funktionen zuzugreifen. Die Möglichkeiten durch die Nutzung der Graph-API schauen wir uns weiter unten genauer an.

Die Graph-API in unserem // – E-Mail Footer Generator

Bei doubleSlash generieren wir unseren E-Mail Footer mit einem eigens entwickelten Generator, den wir ganz einfach über eine Confluence-Seite erreichen können:

Die Anwendung wurde in React geschrieben und kann über ein iFrame auf eine Confluence-Seite eingebunden werden. Damit ist die Generierung eines E-Mail Footers ein Kinderspiel. Das ist aber noch nicht alles: Wir wollten es noch weitertreiben und Informationen eines Users automatisch befüllen lassen könnten! Dazu haben wir uns entschieden, von der React MSAL Library Nutzen zu machen. Ein Proof of Concept konnte angefertigt werden:

Mit einem Klick auf den Button „Benutzerdaten laden“ erscheint ein Login-Pop-up, bei dem wir uns mit unserem Microsoft-Konto einloggen. Die React Applikation sendet bei einer erfolgreichen Anmeldung eine Anfrage an die Graph-API, um Daten des angemeldeten Nutzers abzufragen, welche dann in die Browserkonsole geschrieben werden:

Jetzt müssten die Daten nur noch in die Felder gesetzt werden. Wenn wir Informationen des Benutzers sicher beziehen und eintragen lassen können, ist es möglich, damit noch viel mehr Use Cases in Confluence umzusetzen. Ein paar Beispiele:

• One-Click Teilnehmerzustimmung (Confluence HTML Makro) mit automatischem Hinterlassen von Personendaten ([Name] nimmt beim Event x teil + Kontaktinfos)

• Generierung einer tabellarischen Auflistung von Teammitgliedern (Teamleiter Berechtigung)

• Zusätzliche Authentifizierung bei Stimmabgaben (bpsw. authentifiziertes Voting)

• Zusätzliche Sichtbarkeitseinstellungen (Internet -/ Externer Mitarbeiter)

• AutoFill von eigenen Daten (Personendaten, Skills, Rolle, etc.) bei einer Seite wo eine Auflistung erfordert wird

Noch viel mehr Use Cases können beim Durchlesen der Graph-API Dokumentation [3] abgeleitet werden. Wozu die Graph-API noch verwendet werden könnte, sowohl mit Confluence als auch ohne, schauen wir uns als Nächstes an.

Use Cases bei der Nutzung der Graph-API

Die Verwendung der React MSAL Library in Verbindung mit der Graph-API bietet eine Vielzahl von Use Cases für Entwickler. Hier sind einige Beispiele:

• Benutzerprofile abrufen: Entwickler können die Graph-API verwenden, um detaillierte Informationen über Benutzer abzurufen, einschließlich Namen, E-Mail-Adresse, Abteilung usw. Diese Informationen können in der Anwendung angezeigt oder für personalisierte Funktionen verwendet werden.

• Kalenderintegration: Durch den Zugriff auf die Graph-API können Entwickler Kalenderdaten abrufen und erstellen. Dies ermöglicht beispielsweise das Anzeigen von Terminen, das Erstellen von Veranstaltungen und das Senden von Einladungen über die Anwendung.

• E-Mail-Integration: Mit der Graph-API können Entwickler E-Mails abrufen, senden und verwalten. Dies ermöglicht beispielsweise das Anzeigen von Posteingängen, das Senden von E-Mails im Namen des Benutzers und das Verwalten von E-Mail-Ordnerstrukturen.

• Dateiverwaltung: Entwickler können mithilfe der Graph-API auf Dateien und Ordner in OneDrive oder SharePoint zugreifen. Dies ermöglicht das Hochladen, Herunterladen und Verwalten von Dateien über die Anwendung.

Diese Use Cases sind nur einige Beispiele für die vielfältigen Möglichkeiten, die die React MSAL Library in Kombination mit der Graph-API bietet. Entwickler können die Funktionen der Graph-API nutzen, um benutzerfreundliche und leistungsstarke Anwendungen zu erstellen, die nahtlos mit Microsoft 365 integriert sind.

Fazit

Die React MSAL Library ermöglicht unter anderem eine einfache Integration der Authentifizierung in Anwendungen. Die nahtlose Integration mit der Microsoft Graph-API eröffnet als Datenquelle eine Fülle an Use Cases für die Nutzung mit Confluence. Kombiniert man die Library mit einem Confluence HTML-Makro, können Zeit- und Aufwand sparende Applikationen entwickelt werden.

[1] https://www.npmjs.com/package/@azure/msal-react

[2] https://learn.microsoft.com/de-de/graph/use-the-api

[3] https://learn.microsoft.com/en-us/graph/api/resources/users?view=graph-rest-1.0