Inhaltsverzeichnis
- Env Variables
- Geänderte und Hinzugefügte Dateien
- Name der App Registrierung (wir verwenden “TestProd”)
- Auswahl “Authentication” -> Add a platform -> Single Page Application
- Zertifikate & Geheimnisse -> Geheimnis hinzufügen (Client Secret)
- API Berechtigungen (offline_access and openid)
- Cloudapp-dev und bevor Sie uns verlassen
Im vorherigen Beitrag habe ich eine Schritt-für-Schritt-Anleitung zur Erstellung eines kostenlosen Azure AD B2C-Tenants gegeben. Wir werden uns auf die Integration dieses Tenants in ein vollwertiges Next.js 14-Projekt konzentrieren. Als Grundlage nehmen wir das Beispiel, das wir in den vergangenen Beiträgen erstellt haben und das auf dem Headless CMS Contentful, der On-Site-Suche Algolia usw. basiert.
Hier ist das GitHub repo mit dem vollständigen Code
Und hier ist ein Spoiler zum Frontend, mit der integrierten Azure AD B2C Auth Solution.
Als ersten Schritt rufen wir den API Key von Azure AD B2C ab und verwenden ihn in unserer .env.local-Datei.
Env Variables
Dann installieren wir ein neues Paket, "next-auth", Version 4.24.7, welches die Grundlage der Integration bildet. Zusätzlich fügen wir zwei neue Umgebungsvariablen für next-auth hinzu.
Sie können diese Webseite https://www.lastpass.com/features/password-generator für die Generierung eines "Hashes" für die Variable (NEXTAUTH_SECRET) verwenden.
Geänderte und Hinzugefügte Dateien
Hier ist eine Liste aller Dateien, die wir hinzufügen oder ändern werden.
Nun erstellen wir eine neue Datei unter src/app mit dem Namen providers.tsx.
die wir dann als Wrapper in der layout.tsx-Datei unter src/app/[locale] verwenden. Dies ermöglicht uns, den next-auth-Schutz überall verfügbar zu haben.
Die Hauptdatei, die die Logik verarbeitet, befindet sich unter src/lib und heißt auth.ts. Hier definieren wir Azure AD als Auth Provider und legen die erforderlichen Details für die Integration sowie eine benutzerdefinierte Anmeldeseite fest. Hier können Sie die Umgebungsvariablen sehen, die wir von Azure AD B2C erhalten. Wir definieren die beiden Scopes "offline_access" und "openid" und lesen die "token.role" aus und weisen sie "session.role" zu, sodass wir sie in unserem gesamten Projekt verwenden können.
Mit der Hauptkonfiguration an Ort und Stelle können wir die benötigte API-Route unter src/app/api/auth/[..nextauth]/route.ts erstellen.
Da das Projekt auf TypeScript basiert, müssen wir auch eine Datei für die verwendeten Typen bereitstellen. Erstellen wir also eine unter src/types/next-auth.d.ts.
Die Logik ist jetzt fertig, daher werden wir unsere Header-Komponente anpassen, da wir ein neues Icon für die Anmeldung/Registrierung und Abmeldung anzeigen müssen. Dazu passen wir die navbar.component.tsx unter src/components/header an. Unten ist die vollständige Datei.
Was hat sich seit dem letzten Beitrag geändert, in dem wir die Contentful-Tags zu unserem Projekt hinzugefügt haben? Da wir “useSearchParams” als Import hinzugefügt haben, wird Next.js 14 während des Build-Prozesses eine Fehlermeldung präsentieren.
daher müssen wir die Navbar-Komponente in der Header-Komponente in eine Suspense Boundary einfügen.
Da wir im Dropdown-Menü auf eine Profilseite verlinken, müssen wir diese unter src/app/[locale]/profile/page.tsx erstellen.
Da wir neue Labels eingeführt haben, müssen wir auch die Übersetzungsdatei (common.json) für jede Sprache unter src/app/i18n/locales/... anpassen. Das war's. Jetzt haben wir die grundlegende Integration, und Sie können sie bereits in Ihrer lokalen Umgebung testen mit
Im vorherigen Beitrag haben wir den Azure AD B2C-Mandanten erstellt, indem wir nur eine App-Registrierung, „Localhost“, erstellt haben. Für die Live-Bereitstellung müssen wir eine zweite App-Registrierung erstellen, die für die Vercel-Bereitstellung verwendet wird.
Name der App Registrierung (wir verwenden “TestProd”)
Auswahl “Authentication” -> Add a platform -> Single Page Application
Zertifikate & Geheimnisse -> Geheimnis hinzufügen (Client Secret)
API Berechtigungen (offline_access and openid)
Wird bei der Erstellung der App-Registrierung zugewiesen
Nach der Bereitstellung haben Sie ein voll funktionsfähiges Authentifizierungssystem basierend auf Azure AD B2C - und das kostenlos. Klicken Sie auf das Benutzer-Icon oben rechts, damit das Dropdown-Menü geöffnet wird. Klicken Sie nun auf „Login/Register“.
Klicken Sie nun auf „Login/Register“, um die von Azure bereitgestellte Seite zu öffnen.
Sobald Sie eingeloggt sind, wird im Dropdown-Menü (oben rechts) ein zweiter Menüpunkt mit dem Namen "Profil" angezeigt. Klicken Sie darauf, um die Details Ihrer Registrierung zu sehen. Genießen Sie es, verwenden Sie es für Ihr Produktionssystem oder spielen Sie damit herum, um es besser zu verstehen. Wenn Sie Hilfe benötigen oder während der Bereitstellung auf Probleme stoßen, lassen Sie es mich bitte in den Kommentaren wissen, damit ich Ihnen helfen kann. Mit diesem vollständigen Beispiel haben wir die Grundlagen implementiert, und in den kommenden Beiträgen werden wir es nutzen, um Authentifizierungsabläufe zu integrieren, wo wir sie benötigen. Bleiben Sie dran.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.
