Wie Sie Azure AD Single Sign On mit Cypress verwenden

Die Herausforderung

Bei meiner aktuellen Aufgabe haben wir vor kurzem Azure Active Directory-basiertes Single Sign On (SSO) eingeführt. Da wir eine React-App entwickeln, konnten wir die React-Adal-Bibliothek nutzen und die Implementierung von SSO auf der Frontend-Seite war eine Sache von Stunden statt von Tagen.Dies stellte jedoch eine Herausforderung für unsere End-to-End-Tests dar. Wir wollen einen möglichst vollständigen Zyklus in unseren End-to-End-Tests durchführen und haben beschlossen, dass ein gültiges JWT-Token und seine Validierung ebenfalls Teil dieser Suite sein sollten. Cypress ist unser End-to-End-Testtool und bietet ein Rezept für das Testen von Anwendungen, die Single Sign On verwenden. Leider haben wir mit diesem Rezept keine funktionierende Lösung gefunden, vor allem weil die (react-)adal-Bibliothek herkunftsübergreifende Iframes für die (Re-)Authentifizierung verwendet. Cypress führt die zu testende Anwendung außerdem in einem iframe aus, so dass wir die von react-adal angebotene iframe-Erkennung nicht nutzen können.

Die Herausforderung angehen

Unsere Lösung umfasst 2 Komponenten: eine leicht angepasste runWithAdal-Funktion und ein Cypress-Dienstprogramm, das das Verhalten der (react-)adal-Bibliothek nachahmt.

Die angepasste Funktion runWithAdal

So sieht das runWithAdal ursprünglich aus:

Die ursprüngliche runwithadal-Methode prüft, ob sie in einem iframe ausgeführt wird und reagiert nicht, wenn dies der Fall ist. Wir lockern diese Einschränkung, damit sie auch innerhalb eines Rahmens ausgeführt werden kann, der Cypress global enthält. Die zweite Prüfung ist, ob ein authentifizierter Benutzer vorhanden ist. Da wir nur ein Zugriffstoken und kein Identitätstoken anfordern, können wir das Vorhandensein eines authentifizierten Benutzertokens nicht imitieren. Wir lockern diese Prüfung noch einmal, indem wir auch das Vorhandensein eines Cypress Global zulassen. Daraus ergibt sich die folgende runWithAdal-Funktion:

Cypress-Dienstprogramm zur Nachahmung von react-adal

Um nun das Zugriffstoken zu erhalten, verwenden wir die Client-ID und das Client-Geheimnis. Wir stellen sicher, dass die Client-ID und das Geheimnis nicht fest in unseren Tests kodiert sind, indem wir sie mit Cypress.env aus Umgebungsvariablen auslesen. Auf diese Weise kann unsere CI-Umgebung die Kennung und das Geheimnis bereitstellen, ohne dass die Entwickler sie erfahren müssen. Mit cy.request führen wir den Aufruf der Token-API durch und speichern das resultierende Token über die adal-Authentifizierungskontext-API, damit es beim Start der Anwendung abgerufen werden kann.

Die adalCofig-Datei, die oben im Dienstprogramm importiert wird, ist dieselbe Konfiguration wie die, die Sie in Ihrem Webanwendungsprojekt verwenden, sie sollte also in etwa so aussehen:

Fazit

Mit ein paar kleinen Anpassungen können Sie Ihre End-to-End-Tests weiter verwenden und die Handhabung der Autorisierung in Ihrer Anwendung testen, während Sie sie ausführen. Das Login-Dienstprogramm ahmt das Verhalten der React Adal-Bibliothek so genau wie möglich nach, so dass Ihre Webanwendung genauso läuft wie in der Produktion. Viel Spaß beim Testen!