Terug naar lijst

Microsoft is actief om in Azure allerlei services toe te voegen die als ontwikkelaar van toegevoegde waarde zijn en die ervoor zorgen dat onderdelen van je programma’s ook extern beheerd worden. Een voorbeeld hiervan is het verschuiven je gebruikersregistratie en gebruikersbeheer van je apps naar een Azure B2C tenant. Dit scheelt veel tijd en energie. In deze blog neem ik je mee om je eerste .NET5 applicatie te maken waarbij de gebruikersregistratie volledig verschoven is naar een Azure B2C tenant.

Benodigdheden:

  • Visual Studio voor Mac
  • Een Microsoft Account met een Azure Subscription

Een B2C tenant aanmaken en inrichten

Om je eerste B2C tenant aan te maken verwijs ik je graag naar de eenvoudige handleiding die Microsoft hier beschikbaar stelt en je daarin stap voor stap meeneemt om een Azure AD B2C tenant aan te maken.

Nadat je de stappen hebt gevolgd komen we bij het tweede deel voor de inrichting en dat is de app registraties. Deze zijn nodig om zo meteen onze applicatie te koppelen aan deze inlog. Hiervoor heeft Microsoft ook een duidelijke handleiding gegeven om de app registraties uit te voeren. Deze handleiding kun je hier vinden. In deze handleiding wordt ook een verwijzing gedaan voor het aanmaken van een User Flow. In mijn situatie wil ik niet dat iedereen zich kan registeren voor de app, maar dat alleen reeds aangemaakte personen kunnen inloggen. De volgende stappen hebben we hiervoor uitgevoerd om dit te realiseren:

  1. Ga naar de Azure AD B2C tenant en ga naar het kopje User Flows.

  1. Maak een nieuwe user flow met de template Sign In en kies voor de versie Recommended en klik vervolgens op “Create”.

Afbeelding met tekst Automatisch gegenereerde beschrijving

  1. Geef de UserFlow een naam (bijvoorbeeld SignIn). En selecteer bij IdentityProvider Local Accounts en bij Application Claims selecteer je “Display Name” en “User’s Object ID” als return claim en klik vervolgens op create.
  2. Ga vervolgens naar de Azure AD B2C Service en kies in het menu voor “Users” en maak een nieuwe Azure AD B2C gebruiker aan.

  1. Nadat bovenstaande punten doorlopen zijn kunnen we onze app aanmaken met een gekoppelde authenticatie aan de Azure AD B2C tenant.

Een ASP.NET Core Blazor WebAssembly project maken

In deze blog maken we een Blazor WebAssembly project aan die ondersteuning biedt voor Progressive Web App. We maken de app aan via de CLI van dotnet om zodoende volledige grip te hebben op de instellingen.

Om de app aan te maken met de instellingen kun je gebruik maken van het volgende commando: “dotnet new blazorwasm -au IndividualB2C –aad-b2c-instance “{AAD B2C INSTANCE}” –api-client-id “{SERVER API APP CLIENT ID}” –app-id-uri “{SERVER API APP ID URI}” –client-id “{CLIENT APP CLIENT ID}” –default-scope “{DEFAULT SCOPE}” –domain “{TENANT DOMAIN}” -ho -o {APP NAME} -ssp “{SIGN UP OR SIGN IN POLICY}” –pwa”.
Vul op de variabele plekken de volgende gegevens in:

Placeholder Azure Portal Name Voorbeeld
{AAD B2C INSTANCE} Instance https://growteqblog.b2clogin.com/
{SERVER API APP CLIENT ID} d5b01737-03d8-4d58-91a0-24183e758c9c
{SERVER API APP ID URI} https://growteqblog.onmicrosoft.com/d5b01737-03d8-4d58-91a0-24183e758c9c
{CLIENT APP CLIENT ID} 766a8e16-e992-4fdb-aaef-11e387c07840
{DEFAULT SCOPE} API.Access
“{TENANT DOMAIN} growteqblog.onmicrosoft.com
{APP NAME} Growteq.Blog
{SIGN UP OR SIGN IN POLICY} B2C_1_SignIn

Nadat het commando succesvol uitgevoerd is kun je de solution openen met Visual Studio (for Mac). Je zult zien dat je 3 projecten hebt: Client, Server en Shared.

Let op! Bij het genereren van de code zit een kleine bug voor het Client project. Hierbij wordt de scope niet goed gedefinieerd. Om dit probleem op te lossen ga je naar het bestand Program.cs in de Client en verwijder je het dubbele stuk in de defaultaccessscopes.

 

Wanneer bovenstaande actie uitgevoerd is kun je de app starten en zal het startscherm er als volgt uit zien.

Afbeelding met tekst Automatisch gegenereerde beschrijving

Wanneer we nu rechts bovenin kiezen voor Log in komen we op de inlogpagina van de aangemaakte User Flow.

Afbeelding met schermafbeelding, monitor, elektronica, computer Automatisch gegenereerde beschrijving

Log in met het aangemaakte account uit de voorgaande stap en vervolgens zul je terugkomen op de pagina en ingelogd zijn als de gebruiker.

Vervolg

We hebben nu onze eerste app gemaakt die gekoppeld is aan een inlog via een eigen Azure AD B2C tenant. Het voordeel van een vergelijkbare koppeling is dat het mogelijk is om op 1 plek gebruikers te beheren die gebruik maken van meerdere apps in je organisatie. Daarnaast kan deze oplossing ook heel goed dienen om externe personen waarmee je zaken doet te registeren, zonder dat dit je eigen Azure AD omgeving beïnvloed.

Het tweede voordeel is dat met een enkele klik twee-staps verificatie ingeregeld kan worden voor een app en deze dus ook direct extra beveiligd is.

Het derde voordeel wat je hiermee hebt is de eenvoudige koppeling met allerlei andere identity providers om je gebruikers op die manier te laten inloggen. Wil je meer weten over de mogelijkheden voor het inrichten en beheer van een Azure AD B2C omgeving en eventueel gekoppeld aan apps neem dan contact met mij op!