Een toepassing met één pagina registreren in Azure Active Directory B2C

Belangrijk

Vanaf 1 mei 2025 is Azure AD B2C niet meer beschikbaar voor nieuwe klanten. Meer informatie vindt u in onze veelgestelde vragen.

Voordat uw toepassingen kunnen communiceren met Azure Active Directory B2C (Azure AD B2C), moeten ze worden geregistreerd in een tenant die u beheert. Deze handleiding laat zien hoe u een single-page applicatie ("SPA") registreert met behulp van de Azure portal.

Overzicht van verificatieopties

Veel moderne webtoepassingen zijn gebouwd als toepassingen met één pagina aan de clientzijde ('SPA's'). Ontwikkelaars schrijven ze door gebruik te maken van JavaScript of een SPA-framework zoals Angular, Vue en React. Deze toepassingen worden uitgevoerd in een webbrowser en hebben verschillende verificatiekenmerken dan traditionele webtoepassingen aan de serverzijde.

Azure AD B2C biedt twee opties waarmee toepassingen met één pagina gebruikers kunnen aanmelden en tokens kunnen krijgen voor toegang tot back-endservices of web-API's:

Autorisatiecodestroom (met PKCE)

Met OAuth 2.0-autorisatiecodestroom (met PKCE) kan de toepassing een autorisatiecode uitwisselen voor id-tokens om de geverifieerde gebruikers- en toegangstokens weer te geven die nodig zijn om beveiligde API's aan te roepen. Daarnaast worden vernieuwingstokens geretourneerd die langdurige toegang bieden tot resources namens gebruikers zonder tussenkomst van die gebruikers.

Dit is de aanbevolen aanpak. Als u tokens voor het vernieuwen van een beperkte levensduur hebt, kan uw toepassing zich aanpassen aan privacybeperkingen voor moderne browsers, zoals Safari ITP.

Als u van deze stroom wilt profiteren, kan uw toepassing een verificatiebibliotheek gebruiken die deze ondersteunt, zoals MSAL.js.

Impliciete toekenningsstroom

Sommige bibliotheken, zoals MSAL.js 1.x, ondersteunen alleen de impliciete toekenningsstroom of uw toepassingen worden geïmplementeerd om impliciete stroom te gebruiken. In deze gevallen ondersteunt Azure AD B2C de impliciete OAuth 2.0-stroom. Met de impliciete toekenningsstroom kan de toepassing id- en toegangstokens ophalen van het autorisatie-eindpunt. In tegenstelling tot de autorisatiecodestroom retourneert impliciete toekenningsstroom geen vernieuwingstoken.

Deze verificatiestroom bevat geen toepassingsscenario's die gebruikmaken van platformoverschrijdende JavaScript-frameworks zoals Electron en React-Native. Deze scenario's vereisen verdere mogelijkheden voor interactie met de systeemeigen platforms.

Vereiste voorwaarden

• Als je geen Azure-abonnement hebt, maak dan een gratis account aan voordat je begint.

• Als u geen Azure AD B2C-tenant hebt, maakt u er nu een. U kunt een bestaande Azure AD B2C-tenant gebruiken.

De SPA-applicatie registreren

1. Meld u aan bij het Azure-portaal.

2. Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het hoofdmenu om over te schakelen naar uw Azure AD B2C-tenant vanuit het menu Mappen + abonnementen.

3. Zoek en selecteer Azure AD B2C in de Azure-portal.

4. Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.

5. Voer een naam in voor de toepassing. Bijvoorbeeld spaapp1.

6. Selecteer onder Ondersteunde accounttypenaccounts in een id-provider of organisatiemap (voor het verifiëren van gebruikers met gebruikersstromen)

7. Selecteer onder Omleidings-URIde optie Toepassing met één pagina (SPA) en voer https://jwt.ms het tekstvak URL in.

   De omleidings-URI is het eindpunt waarnaar de autorisatieserver (Azure AD B2C, in dit geval) de gebruiker verzendt nadat deze de interactie met de gebruiker heeft voltooid. Het omleidings-URI-eindpunt ontvangt ook het toegangstoken of de autorisatiecode bij een geslaagde autorisatie. In een productietoepassing is dit doorgaans een openbaar toegankelijk eindpunt waarop uw app wordt uitgevoerd, zoals https://contoso.com/auth-response. Voor testdoeleinden zoals deze handleiding kunt u deze instellen op https://jwt.ms, een webtoepassing die eigendom is van Microsoft waarmee de gedecodeerde inhoud van een token wordt weergegeven (de inhoud van het token verlaat uw browser nooit). Tijdens het ontwikkelen van apps kunt u het eindpunt toevoegen waar uw toepassing lokaal luistert, zoals http://localhost:5000. U kunt op elk gewenst moment omleidings-URI's toevoegen en wijzigen in uw geregistreerde toepassingen.

   De volgende beperkingen zijn van toepassing op omleidings-URI's:

   • De antwoord-URL moet beginnen met het schema https, tenzij u dit gebruikt localhost.
   • De antwoord-URL is hoofdlettergevoelig. Het hoofdlettergebruik moet overeenkomen met het URL-pad van de actieve toepassing. Als uw toepassing bijvoorbeeld deel uitmaakt van het pad .../abc/response-oidc, specificeer .../ABC/response-oidc niet in de antwoord-URL. Omdat de webbrowser paden als hoofdlettergevoelig behandelt, kunnen cookies die gekoppeld zijn aan .../abc/response-oidc worden uitgesloten als ze worden omgeleid naar een URL met niet-overeenkomend hoofdlettergebruik, zoals .../ABC/response-oidc.

8. Schakel onder Machtigingen het selectievakje Beheerderstoestemming verlenen in voor openid en offline_access machtigingen .

9. Selecteer Registreren.

De impliciete toekenningsstroom inschakelen

U kunt impliciete toekenningsstroom om twee redenen inschakelen, wanneer u MSAL.js versie 1.3 of eerdere versie gebruikt of wanneer u een app-registratie gebruikt om een gebruikersstroom te testen voor testdoeleinden.

Gebruik deze stappen om impliciete toekenningsstroom in te schakelen voor uw app:

1. Selecteer de app-registratie die u hebt gemaakt.

2. Onder Beheren, selecteer Verificatie.

3. Schakel onder Impliciete toekenning en hybride stromen zowel de selectievakjes Voor toegangstokens (gebruikt voor impliciete stromen) als id-tokens (gebruikt voor impliciete en hybride stromen) in.

4. Selecteer Opslaan.

Opmerking

Als uw app gebruikmaakt van MSAL.js 2.0 of hoger, schakelt u geen impliciete toekenningsstroom in, omdat MSAL.js 2.0+ de OAuth 2.0-autorisatiecodestroom (met PKCE) ondersteunt. Als u impliciete toekenning inschakelt om een gebruikersstroom te testen, moet u ervoor zorgen dat u de instellingen voor impliciete toekenningsstroom uitschakelt voordat u uw app in productie implementeert.

Migreren vanuit de impliciete toekenningsstroom

Als u een bestaande toepassing hebt die gebruikmaakt van de impliciete stroom, raden we u aan om de autorisatiecodestroom met PKCE te gebruiken met behulp van een framework dat dit ondersteunt, zoals MSAL.js 2.0+.

Wanneer alle productie-SPA's die door een app-registratie worden vertegenwoordigd de autorisatiecodestroom gaan gebruiken, schakelt u de instellingen voor de impliciete toekenningsstroom als volgt uit:

1. In het linkermenu, onder Beheren, selecteer Verificatie.
2. Schakel onder Impliciete toekenning de selectievakjes voor toegangstokens en id-tokens uit.
3. Selecteer Opslaan.

Toepassingen die gebruikmaken van de impliciete stroom kunnen blijven functioneren als u de impliciete stroom ingeschakeld laat (ingeschakeld).

Volgende stappen

Informatie over het maken van gebruikersstromen in Azure Active Directory B2C.