In meinen früheren Beiträgen habe ich Ihnen umfassende Schritt-für-Schritt-Anleitungen gezeigt, wie Sie mit Next.js 14 von Grund auf beginnen können. Sie finden dort Ratschläge, wie Sie das Projekt einrichten, wie Sie es stylen, wie Sie ein fantastisches CMS wie Contentful mühelos integrieren und wie Sie Ihre Daten mit Algolia (einer hochmodernen KI-gestützten On-Site-Suche und Datenmaschine) synchronisieren. Alles, was Sie brauchen, ist ein kostenloses GitHub-Konto, das Sie für den sozialen Login bei den genannten Diensten nutzen können. Sie alle bieten großzügige kostenlose Pakete an, die für eine normale Website/Blog ausreichen.
Aber ein Teil fehlt, und zwar die Benutzerregistrierung und -anmeldung (Authentifizierung und Autorisierung), die heutzutage von entscheidender Bedeutung sind.
Authentifizierungs Lösungen
Es gibt viele Angebote auf dem Markt, aber lassen Sie uns auf die großen wie Auth0, Aws, Microsoft und Google konzentrieren.
Auth0: Auth0 ist eine anpassbare Identitätsmanagement-Plattform, die B2B- und B2C-Szenarien unterstützt. Sie bietet Funktionen wie Social Login, Multi-Faktor-Authentifizierung und vollständig anpassbare universelle Login-Seiten. Auth0 ist bekannt für seinen entwicklerfreundlichen Ansatz und seine umfangreiche Dokumentation.
Amazon Cognito: Als Teil der Amazon Web Services bietet Amazon Cognito eine einfache und sichere Benutzeranmeldung, Sign-in und Zugriffskontrolle für mobile und Web-Anwendungen. Es unterstützt die Integration mit sozialen Identitätsanbietern sowie SAML und OpenID Connect.
Google Firebase Auth: Dieser Dienst bietet Backend-Unterstützung und gebrauchsfertige UI-Bibliotheken zur Authentifizierung von Benutzern in Ihrer Anwendung. Er unterstützt die Authentifizierung mit Passwörtern, Telefonnummern, beliebten föderierten Identitätsanbietern wie Google, Facebook und Twitter und mehr. Firebase Auth lässt sich nahtlos in andere Firebase-Dienste integrieren und ist so konzipiert, dass es einfach implementiert und verwaltet werden kann, um das Benutzererlebnis zu verbessern.
Azure AD B2C: Bietet eine hoch skalierbare, sichere und anpassbare Identitätsmanagementlösung. Ihre Stärken liegen in der Unterstützung verschiedener Authentifizierungsmethoden, der nahtlosen Integration mit zahlreichen Anwendungen und der Bereitstellung robuster Compliance-Funktionen, wodurch sie sich ideal für Unternehmen eignet, die umfangreiche Verbraucheridentitäten effizient verwalten möchten.
In diesem Beitrag werde ich mich auf die Vorbereitung eines Microsoft Azure AD B2C Tenant konzentrieren, den wir dann in dem realen Next.js 14 Beispiel verwenden werden, das bereits Contentful als CMS, Algolia als On-Site-Suche, Google oder Piwik für Analysen usw. integriert hat.
Azure AD B2C bietet einen kostenlosen Plan mit einem Limit von 50.000 MAU (monthly active users). Wenn Sie diese Grenze überschreiten, können Sie zu einer kostenpflichtigen Lösung wechseln, aber 50k User sind eine Menge, glauben Sie mir ;-) 50 K MAU ist auch die Grenze für Google Firebase und AWS Cognito.
Azure-Konto erstellen
Wie eingangs erwähnt, ist es am einfachsten, ein kostenloses GitHub-Konto zu erstellen, das Sie wiederverwenden können, um die zusätzlichen Konten zu erstellen, die Sie benötigen. In diesem Beispiel werden wir ein Azure-Konto mit einer Subscription erstellen, um den AD B2C Tenant zu erstellen. Die Erstellung des Azure-Kontos ist kostenlos, aber Sie müssen eine Zahlungsmethode angeben (ich habe eine Kreditkarte verwendet), um den Erstellungsprozess abzuschließen.
Gehen Sie zu https://signup.live.com/signup und geben Sie Ihre E-Mail-Adresse, Ihren Namen, Ihre Region und Ihr Geburtsdatum an. Danach erhalten Sie eine Bestätigungsmail/einen OTP-Code, und schon sind Sie fertig.
Dann gehen wir zu portal.azure.com, und Sie sind bereits angemeldet. Microsoft hat bereits ein Abonnement für Sie erstellt, das mit einem neuen Azure AD Directory verbunden ist.
Kleine Randnotiz zur Namensgebung, denn Microsoft hat vor einiger Zeit beschlossen, den Dienst Active Directory in Entra ID umzubenennen, was für eine Auth-Lösung etwas seltsam ist, aber das ist Microsofts Geheimnis ;-)
Nun klicken wir auf das Hamburger-Menü in der oberen linken Ecke und wählen "Home", was uns zu diesem Bildschirm führt.
Erstellung der neuen Ressource "Entra ID"
Wir klicken auf "Ressource erstellen", was zu einer neuen Seite führt, auf der wir nach dem Dienst suchen können, den wir erstellen wollen.
Suchen Sie nach "Entra ID" und wählen Sie "Erstellen" am unteren Rand der Ergebniskarte.
Geben Sie die erforderlichen Daten ein und achten Sie auf den "anfänglichen Domänennamen", da dieser später wiederverwendet wird und Teil Ihrer Mieter-URL sein wird.
Klicken Sie auf "Weiter: Überprüfen + Erstellen", und sobald der Erstellungsprozess abgeschlossen ist, sehen Sie den zweiten Tenant unter der Verzeichnisübersicht.
Falls noch nicht ausgewählt, wählen Sie den neuen AD B2C-Tenant aus.
Nun können wir mit der Erstellung von zwei neuen App-Registrierungen beginnen. Sie finden den Menüpunkt unter Verwalten innerhalb Ihres AD B2c Tenants auf der linken Seite.
1 - Localhost
2- Produktionsstandort
Es gibt auch einen Standardbenutzer, der bereits im Verzeichnis vorhanden ist und den wir für bestimmte Aktionen benötigen. Ich werde ihn später erklären. Unten sehen Sie die vom System zugewiesenen Rechte für diesen Benutzer.
Benutzerattribute
Kehren wir zur Übersichtsseite von Azure AD B2C zurück und wählen wir "Benutzerattribute", denn wir wollen ein neues benutzerdefiniertes Attribut "Rolle" hinzufügen, das wir im nächsten Abschnitt benötigen, wenn wir den Azure AD B2C-Tenant in unser Next.js 14-Projekt integrieren.
Hinzufügen eines neuen Benutzerflusses
Jetzt klicken wir auf "New User Flow" oben links
und dann "Erstellen".
Füllen Sie die Pflichtfelder aus und aktivieren Sie die richtigen Attribute für die Spalten "Sammelattribut" und "Rückgabeanspruch".
Collect Attribute sind die Attribute, die wir während des Registrierungsprozesses abfragen und Return Claim sind die Attribute, die uns der Azure Endpoint nach erfolgreicher Anmeldung zurücksendet.
Mit dem Userflow können wir nun endlich die benötigten App-Registrierungen erstellen, die wir in unserem Next.js14 Projekt benötigen. Gehen wir also zurück zur Azure-Tenant-Übersicht und klicken oben links auf "New Registration".
Sobald die neue App-Registrierung fertig ist, klicken Sie auf "Localhost" und wählen Sie "Certificates & secrets" im linken Menü, dann wählen Sie den Reiter "Client secrets" und klicken Sie auf "New client secret".
Verwenden Sie "Localhost" für das Beschreibungsfeld oben rechts und verwenden Sie die empfohlene Gültigkeitsdauer von 180 Tagen. Klicken Sie auf "Speichern" und kopieren Sie den "Secret Value", den Sie nach der Erstellung sehen werden, da wir ihn für das Next.js-Projekt benötigen.
Gut, jetzt sind wir fertig und haben die Informationen, die wir für die Next.js 14-Integration benötigen.
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.
