Hinzufügen von Identitätsanbietern (Google, Github und Microsoft) zu Azure AD B2C Tenant, um Social Login zu ermöglichen

In dieser letzten Geschichte einer dreiteiligen Serie werden wir uns auf mögliche Identitätsanbieter für unseren Azure B2C-Mandanten konzentrieren, da wir alle Hindernisse für unsere Benutzer während des Anmeldevorgangs beseitigen möchten. Da wir in den kommenden Beiträgen auch eine Kommentarfunktion hinzufügen werden, muss die Anmeldung so benutzerfreundlich wie möglich sein. Also beginnen wir mit den Identitätsanbietern von Github, Google und Microsoft.

Was wir in den letzten Tutorials gezeigt haben:

• Erstellen eines Azure AD B2C Mandanten

• Integration des Azure AD B2C Mandanten in hier Next.js 14 Projekt

• Styling der von Azure zur Verfügung gestellten Anmelde und Registrierungsseite

Wir werden nun drei Identitätsanbieter hinzufügen, die es unseren Benutzern ermöglichen, sich sehr schnell über ihr bestehendes Konto (Social Login) anzumelden. Um neue Identitätsanbieter zu unserem B2C-Mandanten hinzuzufügen, öffnen wir den Azure B2C-Mandanten und wählen dann links „Identitätsanbieter“ aus. Wir sehen nun alle möglichen Anbieter, konzentrieren uns aber auf die zu Beginn erwähnten drei.

Voraussetzungen

(sind für alle ID-Anbieter anwendbar)

• User Flow erstellen (Haben wir im ersten Tutorial bereits umgesetzt)

GitHub Konto

Erstellen einer GitHub OAuth-Anwendung Um die Anmeldung mit einem GitHub-Konto in Azure Active Directory B2C (Azure AD B2C) zu ermöglichen, müssen Sie eine Anwendung im GitHub-Entwicklerportal erstellen. Weitere Informationen finden Sie unter Erstellen einer OAuth-App. Wenn Sie noch kein GitHub-Konto haben, können Sie sich unter https://www.github.com/ anmelden.

1. Melden Sie sich beim GitHub-Entwicklerportal mit Ihren GitHub-Zugangsdaten an.

2. Wählen Sie OAuth Apps und dann New OAuth App.

3. Geben Sie einen Anwendungsnamen und Ihre Homepage-URL ein (in unserem Fall verwenden wir unsere Beispiel-URL von der Vercel-Bereitstellung -> https://nextjs14-auth-azureb2c.vercel.app/).

4. Für die Autorisierungs-Callback-URL geben Sie https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp ein (Für meinen Anwendungsfall -> https://cloudappdevorg.b2clogin.com/cloudappdevorg.onmicrosoft.com/oauth2/authresp). Wenn Sie eine benutzerdefinierte Domain verwenden, geben Sie https://your-domain-name/your-tenant-name.onmicrosoft.com/oauth2/authresp ein. Ersetzen Sie your-domain-name durch Ihre benutzerdefinierte Domain und your-tenant-name durch den Namen Ihres Mandanten. Verwenden Sie beim Eingeben Ihres Mandantennamens ausschließlich Kleinbuchstaben, auch wenn der Mandant in Azure AD B2C mit Großbuchstaben definiert ist.

5. Klicken Sie auf Register application.

6. Kopieren Sie die Werte von Client ID und Client Secret (Sie müssen einen neuen Geheimschlüssel erstellen mit dem CTA -> generate a new client secret). Speichern Sie die Werte, insbesondere das Geheimnis, an einem sicheren Ort. Sie benötigen beide, um den Identitätsanbieter zu Ihrem Mandanten hinzuzufügen.

GitHub als Identitätsanbieter konfigurieren

1. Melden Sie sich beim Azure-Portal an und kehren Sie zu unserem Azure AD B2C-Mandanten zurück (die URL sollte -> https://portal.azure.com/#view/Microsoft_AAD_B2CAdmin/TenantManagementMenuBlade/~/overview sein).

2. Wählen Sie Identitätsanbieter aus und dann GitHub (Vorschau).

3. Geben Sie einen Namen ein. Zum Beispiel GitHub ID Provider.

4. Für die Client-ID geben Sie die Client-ID der GitHub-Anwendung ein, die Sie zuvor erstellt haben.

5. Für das Client-Geheimnis geben Sie das Client-Geheimnis ein, das Sie zuvor erstellt und aufgezeichnet haben.

6. Wählen Sie speichern.

Hinzufügen des GitHub-Identitätsanbieters zu einem Benutzerfluss

An diesem Punkt wurde der GitHub-Identitätsanbieter eingerichtet, ist jedoch noch nicht auf einer der Anmeldeseiten verfügbar. Um den GitHub-Identitätsanbieter zu einem Benutzerfluss hinzuzufügen:

1. Wählen Sie in Ihrem Azure AD B2C-Mandanten Benutzerflüsse aus.

2. Klicken Sie auf den Benutzerfluss, dem Sie den GitHub-Identitätsanbieter hinzufügen möchten.

3. Wählen Sie unter den sozialen Identitätsanbietern GitHub aus.

4. Wählen Sie Speichern.

5. Um Ihre Richtlinie zu testen, wählen Sie Benutzerfluss ausführen.

6. Wählen Sie für die Anwendung die Webanwendung namens Localhost, die Sie zuvor registriert haben. Die Antwort-URL sollte https://jwt.ms anzeigen

7. Wählen Sie die Schaltfläche Benutzerfluss ausführen.

8. Wählen Sie auf der Anmelde- oder Registrierungsseite GitHub, um sich mit einem GitHub-Konto anzumelden.

Wenn auf der rechten Seite kein „https://jwt.ms“ verfügbar ist, müssen Sie zur „Localhost“-App-Registrierung zurückkehren und eine neue „Authentifizierungsplattform“ vom Typ Web mit der URL „https://jwt.ms“ hinzufügen.

Super, jetzt sind wir mit GitHub fertig. Lassen Sie uns mit Google und dann Microsoft fortfahren.

Google Account

Um die Anmeldung für Benutzer mit einem Google-Konto in Azure Active Directory B2C (Azure AD B2C) zu ermöglichen, müssen Sie eine Anwendung in der Google Developers Console erstellen. Weitere Informationen finden Sie unter Einrichten von OAuth 2.0. Wenn Sie noch kein Google-Konto haben, können Sie sich unter https://accounts.google.com/signup anmelden.

1. Melden Sie sich in der Google Developers Console mit Ihren Google-Kontodaten an.

2. Wählen Sie in der oberen linken Ecke der Seite die Projektliste aus und dann Neues Projekt.

3. Geben Sie einen Projektnamen ein und wählen Sie Erstellen.

4. Stellen Sie sicher, dass Sie das neue Projekt verwenden, indem Sie das Dropdown-Menü für Projekte in der oberen linken Ecke des Bildschirms auswählen. Wählen Sie Ihr Projekt nach Namen aus und dann Öffnen.

5. Wählen Sie im linken Menü APIs und Dienste und dann OAuth-Zustimmungsbildschirm aus. Wählen Sie Extern und dann Erstellen.

6. Geben Sie einen Namen für Ihre Anwendung ein.

7. Wählen Sie eine E-Mail-Adresse für den Benutzersupport aus.

8. Geben Sie im Abschnitt App-Domain einen Link zu Ihrer Anwendungs-Startseite, einen Link zu Ihrer Datenschutzrichtlinie und einen Link zu Ihren Nutzungsbedingungen ein.

9. Geben Sie im Abschnitt Autorisierte Domains b2clogin.com und nextjs14-auth-azureb2c.vercel.app (Beispieldomain) ein.

10. Geben Sie im Abschnitt Entwicklerkontaktinformationen durch Kommas getrennte E-Mail-Adressen ein, damit Google Sie über Änderungen an Ihrem Projekt benachrichtigen kann.

11. Wählen Sie Speichern und Fortfahren

12. Fügen Sie einen Testbenutzer hinzu und wählen Sie erneut Speichern und Fortfahren.

13. Wählen Sie im linken Menü Anmeldeinformationen und dann Anmeldeinformationen erstellen > OAuth-Client-ID.

14. Unter Anwendungstyp wählen Sie Webanwendung

15. Geben Sie einen Namen für Ihre Anwendung ein

16. Für die autorisierten JavaScript-Ursprünge geben Sie https://your-tenant-name.b2clogin.com ein (in meinem Fall https://cloudappdevorg.b2clogin.com). Wenn Sie eine benutzerdefinierte Domain verwenden, geben Sie https://your-domain-name ein.

17. Für die autorisierten Weiterleitungs-URIs geben Sie https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp ein. Wenn Sie eine benutzerdefinierte Domain verwenden, geben Sie https://your-domain-name/your-tenant-name.onmicrosoft.com/oauth2/authresp ein. Ersetzen Sie your-domain-name durch Ihre benutzerdefinierte Domain und your-tenant-name durch den Namen Ihres Mandanten. Verwenden Sie beim Eingeben Ihres Mandantennamens ausschließlich Kleinbuchstaben, auch wenn der Mandant in Azure AD B2C mit Großbuchstaben definiert ist. In allen Fällen ersetzen Sie your-tenant-name durch das Verzeichnis (Tenant)-Subdomain. Wir verwenden immer cloudappdevorg.

18. Wählen Sie Erstellen.

19. Kopieren Sie die Werte von Client-ID und Client-Geheimnis. Sie benötigen beide, um Google als Identitätsanbieter in Ihrem Mandanten zu konfigurieren. Das Client-Geheimnis ist eine wichtige Sicherheitskennung.

Konfigurieren Sie Google als Identitätsanbieter

1. Hier können Sie den zuvor für GitHub beschriebenen Schritten folgen.

Hinzufügen des Google-Identitätsanbieters zu einem Benutzerfluss (User flow)

Der Google-Identitätsanbieter wurde an diesem Punkt eingerichtet, ist jedoch noch nicht auf einer der Anmeldeseiten verfügbar. Um den Google-Identitätsanbieter zu einem Benutzerfluss hinzuzufügen:

1. Hier können Sie den zuvor für GitHub beschriebenen Schritten folgen.

Microsoft Konto

Um die Anmeldung für Benutzer mit einem Microsoft-Konto in Azure Active Directory B2C (Azure AD B2C) zu ermöglichen, müssen Sie eine Anwendung im Azure-Portal erstellen. Weitere Informationen finden Sie unter Registrierung einer Anwendung mit der Microsoft-Identitätsplattform. Wenn Sie noch kein Microsoft-Konto haben, können Sie eines unter https://www.live.com/ erstellen.

1. Melden Sie sich beim Azure-Portal an.

2. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Einstellungssymbol im oberen Menü, um über das Menü Verzeichnisse + Abonnements zu Ihrem Microsoft Entra ID-Mandanten zu wechseln.

3. Wählen Sie im oberen linken Bereich des Azure-Portals Alle Dienste und suchen Sie nach App-Registrierungen und wählen Sie diese aus.

4. Wählen Sie Neue Registrierung

5. Geben Sie einen Namen für Ihre Anwendung ein, zum Beispiel Azure AD B2C ID Provider.

6. Unter Unterstützte Kontotypen wählen Sie Konten in jedem Organisationsverzeichnis (Jeder Microsoft Entra ID-Mandant — Mehrmandanten) und persönliche Microsoft-Konten (z. B. Skype, Xbox)

7. Unter Umleitungs-URI (optional) wählen Sie Web und geben https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp ein. Wenn Sie eine benutzerdefinierte Domain verwenden, geben Sie https://your-domain-name/your-tenant-name.onmicrosoft.com/oauth2/authresp ein. Ersetzen Sie your-tenant-name durch den Namen Ihres Azure AD B2C-Mandanten und your-domain-name durch Ihre benutzerdefinierte Domain.

8. Wählen Sie Registrieren

9. Notieren Sie sich die Anwendungs-ID (Client-ID), die auf der Übersichtsseite der Anwendung angezeigt wird. Sie benötigen die Client-ID, wenn Sie den Identitätsanbieter im nächsten Abschnitt konfigurieren.

10. Wählen Sie Zertifikate & Geheimnisse

11. Klicken Sie auf Neuer geheimer Clientschlüssel (Client Secret)

12. Geben Sie eine Beschreibung für den geheimen Schlüssel ein, zum Beispiel AD B2C APP Reg Secret, und klicken Sie dann auf Hinzufügen.

13. Notieren Sie sich das Anwendungskennwort, das in der Spalte Wert angezeigt wird. Der geheime Clientschlüssel wird benötigt, wenn Sie den Identitätsanbieter im nächsten Abschnitt konfigurieren.

Konfigurieren Sie Microsoft als Identitätsanbieter

1. Hier können Sie den zuvor für GitHub beschriebenen Schritten folgen.

Hinzufügen des Microsoft-Identitätsanbieters zu einem Benutzerfluss (User flow)

An diesem Punkt wurde der Microsoft-Identitätsanbieter eingerichtet, ist jedoch noch nicht auf einer der Anmeldeseiten verfügbar. Um den Microsoft-Identitätsanbieter zu einem Benutzerfluss hinzuzufügen:

1. Hier können Sie den zuvor für GitHub beschriebenen Schritten folgen.

Erfolgreicher Login

Was für alle drei Identitätsanbieter gilt, ist die Tatsache, dass Ihr Browser, wenn der Anmeldevorgang erfolgreich ist, zu https://jwt.ms umgeleitet wird, wo der Inhalt des von Azure AD B2C zurückgegebenen Tokens angezeigt wird. Sie können so viele Identitätsanbieter hinzufügen, wie Sie möchten. Der Prozess ist immer derselbe.

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.