In der vorherigen Story haben wir eine Linux App Service-Instanz im F1-Plan (kostenlos) erstellt und müssen nun den App Service sichern, sodass nur autorisierte Anfragen akzeptiert werden. Zur Authentifizierung verwenden wir Azure AD B2C.
Was ist Azure AD B2C
Azure Active Directory (Azure AD) B2C ist eine cloudbasierte IAM-Lösung, die Kunden über Ihre Organisationsgrenzen hinaus sichert und verwaltet. Azure AD B2C basiert auf einer sicheren Plattform der Enterprise-Klasse und ist ein hochverfügbarer globaler Dienst, der auf Millionen von Identitäten skaliert werden kann.
Die Preise für Azure AD B2C basieren auf monatlich aktiven Benutzern (MAU), was Ihnen hilft, Kosten zu senken.
Kostenlos geht noch weiter: Ihre ersten 50.000 MAUs monatlich sind für die Premium P1- und Premium P2-Funktionen kostenlos.
Hier finden Sie eine Schritt-für-Schritt-Anleitung zur Erstellung des Azure AD B2C-Mandanten
Hier finden Sie eine umfassende Anleitung zur einfachen Integration von Azure AD B2C in Ihr bestehendes Next.js 14-Projekt.
https://www.cloudapp.dev/integrating-azure-ad-b2c-into-nextjs-14-with-ease
App-Registrierung für Website/App-Dienst
Wenn Sie bereits gemäß dem Tutorial „Azure AD B2C einfach in Next.js 14 integrieren“ eine App-Registrierung erstellt haben, können Sie diese wiederverwenden, um den von uns erstellten App-Dienst zu sichern. Andernfalls können Sie eine neue erstellen.
Client Secret hinzufügen
Nach der Erstellung der App-Registrierung klicken wir auf „Zertifikate & Geheimnisse“ und erstellen ein neues Client-Geheimnis. Bitte kopiere und speichere das Client-Geheimnis nach der Erstellung, da du es nur einmal siehst.
Informationen zur App-Registrierung abrufen
Nun klicken wir links auf „Übersicht“, um die „Application (client) ID“, welche wir zusammen mit dem zuvor kopierten „Client Secret“ benötigen, zu kopieren.
Konfigurieren der Authentifizierung im App Service
Wir klicken auf Einstellungen->Authentifizierung->Button „Identitätsanbieter hinzufügen“.
Setup Schritte
Hier wählen wir „OpenID Connect“ aus der Dropdown-Liste aus.
OpenID provider name: I opted for “aadb2c”, but is up to you
Select “Document URL”
Metadata URL-> You can get the URL from the User Flow Overview in the Azure Portal (open the needed User Flow and click on “Run user flow”, the URL is visible in the top right corner)
Client ID: Paste the previously saved Client ID
Client Secret: Paste the previously saved Client Secret
Restrict access: Require authentication
Unauthenticated requests: TTP 401 Unauthorized: recommended for APIs
Token store: Enable it
Click on “Add” to save it.
Das war’s. Sie können Ihre API-Aufrufe jetzt mit dem Zugriffstoken Ihres Azure AD B2C-Mandanten authentifizieren. Wenn Sie den Code aus dem Github-Repository in der vorherigen Story verwenden.
Endpunkte
Sie können diese Endpunkte verwenden und das Speicherkonto mithilfe der Tags erhalten
https://appserviceNameSelectedDuringCreation.azurewebsites.net/api/storage/search-resource-groups
https://appserviceNameSelectedDuringCreation.azurewebsites.net/api/storage/create-storage-account
etc.
Sie können es mit Postman testen. Wenn Sie eine ausführliche Anleitung für Postman benötigen, schreiben Sie einen Kommentar und ich werde Ihnen helfen.
Fazit
Sie müssen dieselbe App-Registrierung wiederverwenden, die Sie in Ihrem Next.js 14-Projekt verwenden, damit es funktioniert.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
