SO WIRD'S GEMACHT - Sichern Sie Ihr ReactJS-Frontend mit Azure AD B2C

Vor ein paar Monaten wurde ich in die Welt von ReactJS eingeführt. Eine Clientanforderung zum Erstellen eines Web-Frontends. In all meinen Entwicklertagen habe ich Backend-Systeme mit Microsoft ASP.NET Web API und C # entwickelt. Und Sie können Ihren Kunden nicht nein sagen, oder? Wenn du es tun musst, musst du es tun. Betreten Sie also ein neues Gebiet der Erstellung von Frontend-Anwendungen.

Mein Kunde hatte bereits eine WEB-API und ein Web-Frontend. Diese Anforderung bestand darin, ein weiteres separates Untermodul mit ReactJS zu erstellen, um mit dieser Web-API zu interagieren. Wie üblich werden Sicherheitsbedenken in die Tabelle aufgenommen und ja, sie verfügen bereits über ein Azure AD B2C-Setup für die Benutzerverwaltung. Die Herausforderung bestand darin, mithilfe von ReactJS mit Azure AD B2C zur Authentifizierung und Autorisierung zu interagieren.

Vertrauen Sie mir, es gab nur wenige Lernprogramme zum Verbinden von Azure AD und Azure AD B2C mit Frontend-Technologien. Aber alle waren hier und da Kleinigkeiten. Ich konnte kein vollständiges Tutorial finden, das Sie durch die einzelnen Schritte führt. Also überlegte, warum man nicht eins schreibt.

Ich habe hier ein paar Vermutungen angestellt, dass Sie bereits:

  1. Sie haben Erfahrung mit ReactJS und wissen nicht, wie Sie Azure AD B2C verbinden können.
  2. Besitzen Sie ein Azure-Konto. Sie haben noch keinen? Klicken Sie auf diesen Link: https://azure.microsoft.com/en-us/ und klicken Sie auf den großen, fettgrünen Knopf mit der Aufschrift "Start Free>".
  3. Verfügen Sie über ein voll funktionsfähiges Azure AD B2C-Verzeichnis mit Benutzern. Wenn Sie ein Azure-Konto haben und ein Azure AD B2C-Konto erstellen müssen, sehen Sie sich diesen Link an: https://bit.ly/2U8X9Ft

Beginnen wir mit der Erstellung eines brandneuen ReactJS-Projekts

  • Wenn Sie Windows verwenden, starten Sie die Eingabeaufforderung oder das Terminal für andere Plattformen wie Mac oder Linux.
  • Gehen Sie in Ihr Arbeitsverzeichnis.
  • Geben Sie den folgenden Befehl ein und drücken Sie die EINGABETASTE, um ein ReactJS-Projekt zu erstellen.
$ create-react-app rjaadb2c
  • Navigieren Sie nun zum neu erstellten Projektverzeichnis, indem Sie Folgendes eingeben:
$ cd rjaadb2c
  • Öffnen Sie Ihren bevorzugten Code-Editor (ich verwende VS-Code) und öffnen Sie das Verzeichnis, das Sie im vorherigen Schritt erstellt haben.
  • Ihr Editor sollte so aussehen
Neu erstelltes ReactJS-Projekt in VS Code

VS Code hat dieses nette kleine Feature namens Terminalfenster. Dies öffnet ein Terminal im Code-Editor. Dies ist eine sehr praktische Funktion. Klicken Sie in der Menüleiste auf Terminal> Neues Terminal.

  • Jetzt im Terminalfenster eingeben
$ npm start

Dadurch wird das ReactJS-Projekt ausgeführt. Und es sollte so aussehen.

Ihre ReactJS-App läuft unter http: // localhost: 3000

Alles klar, bereiten wir jetzt unsere Azure AD B2C-Umgebung vor.

Vorbereiten der Azure AD B2C-Umgebung

In diesem Abschnitt bereiten wir unsere Azure AD B2C-Umgebung für die Authentifizierung und Autorisierung vor.

  • Melden Sie sich jetzt bei Azure Portal an, indem Sie auf diesen Link klicken: https://portal.azure.com
  • Klicken Sie in der Menüleiste auf die Schaltfläche Filter und wechseln Sie in Ihr B2C-Verzeichnis
Schaltfläche Filter, um zum B2C-Verzeichnis zu wechseln
  • Klicken Sie nun im Menü der Seitenleiste auf Alle Dienste.
  • Geben Sie "Ad b2c" in das Suchfeld "Alle Dienste" ein.
  • Klicken Sie auf die Azure AD B2C-Bezeichnung
Azure AD B2C
  • Klicken Sie im Azure AD B2C-Blade auf die Anwendungsbezeichnung.
  • Klicken Sie im Anwendungsblatt auf die Schaltfläche Hinzufügen +.
  • Geben Sie nun die Informationen ein, die zum Erstellen einer neuen Azure AD B2C-Anwendung erforderlich sind (siehe unten)
Erstellen Sie eine neue Anwendung
  1. Wie Sie sehen, ist es klar. Geben Sie Ihrer Anwendung einen eindeutigen "Namen".
  2. Wählen Sie dann "Ja" für "Web App / Web API", da wir eine Webanwendung erstellen.
  3. Und lassen Sie "Ja" als Standard für "Impliziten Datenfluss zulassen".
  4. Geben Sie die Antwort-URL ein, in diesem Fall unsere lokale Hostadresse. Geben Sie "api" oder einen beliebigen Bezeichner Ihrer Wahl in "App ID URI (optional)" ein.

Mit dieser URI gewähren Sie Ihrer Anwendung die Berechtigung, auf bestimmte Funktionen in Ihrem Verzeichnis zuzugreifen. Dies könnte beispielsweise das Lesen von Benutzerprofilinformationen sein.

Ich habe dies speziell markiert, da Sie unter "Veröffentlichte Bereiche" keinen Bereich sehen, wenn Sie an dieser Stelle keinen Bezeichner angegeben haben. Ich bin mir nicht sicher, ob es ein Fehler ist oder nicht, aber ohne ihn erhalten Sie hier keine Standardbereiche und können auch keine neuen erstellen.

  • Klicken Sie nun auf die Schaltfläche Erstellen, um die neue Anwendung zu erstellen.
Anwendung erfolgreich erstellt
  • Klicken Sie jetzt im Azure AD B2C - Applications-Blade auf die Beschriftung Benutzerflüsse (Richtlinien).
  • Klicken Sie auf die Schaltfläche + Neuer Benutzerfluss.
Neuer Benutzerfluss
  • Klicken Sie im Blade "Benutzerfluss erstellen" unter "Empfohlen" auf den Link "Anmelden und anmelden".
Erstellen Sie einen Benutzerfluss
  • Vergewissern Sie sich, dass Sie im Blatt "Erstellen" das Formular gemäß dem folgenden Bild ausfüllen. Sie haben alle Anweisungen und Informationen gegeben, die Sie im Blade selbst benötigen.
Anmelde- und Anmelde-Benutzerfluss
  • Jetzt haben Sie erfolgreich einen Anmelde- und Anmelde-Benutzerfluss erstellt. Durch Klicken auf die Schaltfläche Benutzerfluss ausführen können Sie diesen Fluss testen.
Benutzerfluss erstellt

Dies ist alles, was Sie am Ende von Azure AD B2C benötigen. Machen wir eine Checkliste.

  1. Azure-Konto []
  2. Azure AD B2C-Mandant []
  3. Azure AD B2C-Anwendung []
  4. Ein Benutzerfluss zum Anmelden und Anmelden []

Ausgezeichnet, jetzt ist das Setup fertig. Kehren wir zu unserer Anwendung "Reagieren" zurück und führen Sie eine Codierung durch.

Installation der Bibliothek

Kehren Sie jetzt zu Ihrer ReactJS-Anwendung zurück. Geben Sie im Terminal den folgenden Befehl ein, um die Bibliothek zu installieren. Denken Sie daran, dass wir das VSCode-Terminalfenster verwendet haben.

$ npm installiere react-azure-adb2c --save
react-azure-adb2c ist eine Bibliothek, mit der Sie die Funktionalität von Azure AD B2C in Ihre ReactJS-Anwendung integrieren können. Wenn Sie hier klicken, erhalten Sie eine kurze Dokumentation zur Verwendung in Ihrer ReactJS-Anwendung.

Jetzt haben Sie die Bibliothek erfolgreich installiert. Klicken Sie in Ihrer ReactJS-Anwendung auf die Datei index.js, und fügen Sie oben in der Datei die folgende Codezeile hinzu.

Fügen Sie diese Codezeile nach dem Import hinzu, um sie zu initialisieren.

Jetzt müssen Sie die in "<>" markierten Elemente aus den Werten in Ihrer Azure AD B2C-Anwendung ersetzen.

Kehren Sie jetzt zum Azure-Portal zurück und greifen Sie auf die folgenden Informationen zu.

Um den Wert für den Mandanten zu ermitteln, kehren Sie zu Ihrem Azure AD B2C-Verzeichnis zurück. Kopieren Sie unter Übersicht den Wert in das Feld „Domainname“.

Domainname ist Ihr Mieter.

Um die applicationId abzurufen, klicken Sie auf die Anwendungsbezeichnung und kopieren Sie die ID aus der neu erstellten Anwendung, in diesem Fall "ReactJS AADB2C", und ersetzen Sie den Wert im Feld "applicatoinId".

Anwendungs-ID

Klicken Sie nun auf die Beschriftung Benutzerflüsse (Richtlinien), kopieren Sie den Namen der Richtlinie und ersetzen Sie den Wert im Feld signInPolicy.

Anmelderichtlinie

Nun das Bereichsarrayfeld. Dieses Array gibt Ihrer Anwendung die erforderlichen Berechtigungen. Mit diesen Berechtigungen kann Ihre ReactJS-Anwendung auf Funktionen in Azure AD B2C zugreifen.

So greifen Sie auf diese Informationen zu:

  1. Klicken Sie auf Anwendungsbezeichnung.
  2. Klicken Sie auf Ihre Anwendung "ReactJS AADB2C".
  3. Klicken Sie auf das Label Veröffentlichte Bereiche
  4. Erfassen Sie den Wert in der Spalte FULL SCOPE VALUE für den Gültigkeitsbereich user_impersonation.
  5. Ersetzen Sie den Wert im Bereichs- Array.
Besuchen Sie diesen Link, um eine ausführliche Dokumentation zu den Bereichen zu erhalten.

Hervorragend, wir sind fast fertig. Nun sollte Ihr Initialisierungscode so aussehen.

Noch etwas hinzuzufügen. Ersetzen wir den Standardcode ReactDOM.render () durch diesen Code.

Nach all diesen Änderungen sollte Ihre index.js-Datei so aussehen.

Fast dort. Machen wir einen Testlauf. Geben Sie in Ihr Terminalfenster den folgenden Befehl ein und führen Sie ihn aus.

$ npm start

Sie sollten diesen Bildschirm sehen.

Azure AD B2C-Anmeldebildschirm.

Verwenden Sie jetzt Ihre Anmeldedaten für das Azure-Portal, oder erstellen Sie ein neues Konto, indem Sie auf "Jetzt anmelden" klicken. Merken? Wir haben einen Benutzerfluss sowohl für die Anmeldung als auch für die Anmeldung erstellt. Cool, nicht wahr?

Anmeldebildschirm.

Nachdem Sie ein neues Konto erstellt oder ein vorhandenes Konto verwendet haben, können Sie sich bei der Anwendung anmelden. Möglicherweise wird jedoch die Standard-ReactJS-Seite nicht angezeigt. Dies kann auf unzureichende Anwendungsberechtigungen zurückzuführen sein.

Chrome-Entwicklertools. Anwendungssitzungsspeicher.

Um dies zu beheben,

  1. Kehren Sie zum Azure-Portal zurück
  2. Wechseln Sie zum Azure AD B2C-Verzeichnis
  3. Klicken Sie auf die Anwendungsbezeichnung
  4. Klicken Sie auf die Anwendung („ReactJS AADB2C“), die Sie gerade erstellt haben.
  5. Klicken Sie auf API-Zugriffsbezeichnung
  6. Klicken Sie auf + Hinzufügen
  7. Wählen Sie die Anwendung in Schritt 4 aus der Dropdown-Liste API auswählen aus.
  8. Wählen Sie "Auf diese App im Namen des angemeldeten Benutzers zugreifen ..."
  9. OK klicken
Geben Sie Ihrer Anwendung die erforderlichen Berechtigungen.

Kehren wir zu unserer ReactJS-Anwendung zurück und aktualisieren Sie sie oder führen Sie sie erneut aus.

Herzliche Glückwünsche !!! Du bist fertig.

ReactJS App

Nehmen wir einige Informationen aus Azure AD B2C und zeigen sie unter dem React-Logo an.

Kehren Sie zum Terminal zurück und installieren Sie das folgende Paket.

$ npm installiere jwt-decode --save
Mit diesem Paket können Sie das JWT-Token aus Azure AD B2C dekodieren und darin enthaltene Informationen abrufen.

Jetzt müssen Sie zum Azure-Portal zurückkehren und diese Informationen von Azure AD B2C senden lassen. Um dies zu tun,

  1. Kehren Sie zum Azure-Portal zurück.
  2. Wechseln Sie zu Ihrem Azure B2C-Verzeichnis.
  3. Klicken Sie auf die Bezeichnung Benutzerflüsse (Richtlinien).
  4. Klicken Sie auf die von Ihnen erstellte Anmelderichtlinie.
  5. Klicken Sie auf den Link Antragsansprüche
  6. Wählen Sie die Felder aus, die Sie benötigen. In diesem Fall habe ich Stadt, Land / Region, E-Mail-Adressen, Anzeigename, Vorname (dies ist der Vorname) und Nachname (dies ist der Nachname) ausgewählt.
  7. Klicken Sie auf Speichern.
Anwendungsansprüche aktivieren.

Kehren Sie zu Ihrer ReactJS-Anwendung zurück und klicken Sie auf src directory. Füge eine neue Datei hinzu. Nennen Sie es Auth.js. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

Öffnen Sie nun die App.js und ersetzen Sie sie durch diesen Code.

Wir sind alle fertig. Führen Sie unsere ReactJS-Anwendung erneut aus.

$ npm start

Sie werden aufgefordert, den Microsoft-Anmeldebildschirm aufzurufen. Nach einer erfolgreichen Anmeldung sollte dieser Bildschirm angezeigt werden.

Wir haben Informationen aus Azure AD B2C abgerufen

Und nimm den Code von hier.

Einen schönen Tag noch.