Share via

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

  • Artikel

Voordat uw toepassingen kunnen communiceren met Azure Active Directory B2C (Azure AD B2C), moeten deze worden geregistreerd in een tenant die u beheert. In deze handleiding staat hoe u een toepassing met één pagina (SPA) registreert met de Azure Portal.

Overzicht van verificatieopties

Veel moderne webtoepassingen zijn gebouwd als toepassingen met één pagina (SPA’s) aan de clientzijde. Ontwikkelaars schrijven deze met JavaScript of een SPA-framework, zoals Angular, Vue en React. Deze toepassingen worden uitgevoerd in een webbrowser en hebben andere verificatiekenmerken dan traditionele webtoepassingen aan de serverzijde.

Azure AD B2C biedt twee opties om toepassingen met één pagina te gebruiken om gebruikers aan te melden en tokens op te halen voor toegang tot back-endservices of web-API’s:

Autorisatiecodestroom (met PKCE)

Met de OAuth 2.0 autorisatiecodestroom (met PKCE) kan de toepassing een autorisatiecode uitwisselen voor id-tokens om de geverifieerde gebruiker te vertegenwoordigen, en de benodigde toegangstokens om beveiligde API’s aan te roepen. Daarnaast worden met deze stroom vernieuwingstokens geretourneerd, die namens gebruikers langetermijntoegang bieden tot resources, zonder dat interactie met deze gebruikers is vereist.

Dit is de aanbevolen methode. Vernieuwingstokens met een beperkte levensduur helpen om uw toepassing aan te passen aan de privacybeperkingen van cookies van de moderne browser, zoals Safari ITP.

Uw toepassing kan een verificatiebibliotheek gebruiken, zoals MSAL.js, om te profiteren van deze stroom.

Single-page applications-auth

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. De impliciete toekenningsstroom stelt de toepassing in staat om id-tokens en toegangstokens op te halen. In tegenstelling tot de autorisatiecodestroom retourneert de impliciete toekenningsstroom geen vernieuwingstoken.

Single-page applications-implicit

In deze verificatiestroom zijn geen toepassingsscenario's opgenomen waarin wordt gebruikgemaakt van platformoverschrijdende JavaScript-frameworks, zoals Electron en React-Native. Deze scenario's vereisen extra mogelijkheden voor interactie met de systeemeigen platformen.

Vereisten

  • Als u geen Azure-abonnement hebt, maakt u een gratis account voordat u 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-toepassing registreren

  1. Meld u aan bij de Azure-portal.

  2. Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het bovenste menu om over te schakelen naar uw Azure AD B2C-tenant in het menu Mappen en 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 accounttypen de optie Accounts in een id-provider of organisatieadreslijst (voor het verifiëren van gebruikers met gebruikersstromen)

  7. Selecteer onder Omleidings-URI de optie Toepassing met één pagina (SPA) en voer vervolgens https://jwt.ms in het URL-tekstvak 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 eindpunt van de URI voor omleiding ontvangt na geslaagde autorisatie ook het toegangstoken of de autorisatiecode. 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 dit instellen op https://jwt.ms, een webtoepassing van Microsoft die de gedecodeerde inhoud van een token weergeeft (de inhoud van het token verlaat nooit uw browser). Tijdens het ontwikkelen van apps kunt u het eindpunt daar 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 localhost wordt gebruikt.
    • De antwoord-URL is hoofdlettergevoelig. Het hoofdlettergebruik moet overeenkomen met het URL-pad van de actieve toepassing. Als uw toepassing bijvoorbeeld .../abc/response-oidc als deel van het pad bevat, geeft u .../ABC/response-oidc niet op in de antwoord-URL. Omdat de webbrowser paden als hoofdlettergevoelig behandelt, kunnen cookies die zijn gekoppeld aan .../abc/response-oidc worden uitgesloten als ze worden omgeleid naar de qua hoofdlettergebruik niet-overeenkomende URL .../ABC/response-oidc.

  8. Selecteer in Machtigingen het selectievakje Beheerdersgoedkeuring verlenen aan machtigingen van OpenID en offline_access.

  9. Selecteer Registreren.

De impliciete stroom inschakelen

Als u MSAL.js 1.3 of een eerdere versie gebruikt met de impliciete toekenningsstroom in uw beveiligd-WACHTWOORDVERIFICATIE-app of als u de https://jwt.ms/ app configureert voor het testen van een gebruikersstroom of aangepast beleid, moet u de impliciete toekenningsstroom inschakelen in de app-registratie:

  1. Selecteer hiervoor Verificatie in het linkermenu onder Beheren.

  2. Schakel onder Impliciete toekenning en hybride stromen zowel de selectievakjes Toegangstokens (gebruikt voor impliciete stromen) als Id-tokens (gebruikt voor impliciete en hybride stromen) in.

  3. Selecteer Opslaan.

Als uw app gebruikmaakt van MSAL.js 2.0 of hoger, schakelt u impliciete toekenningsstroom niet in omdat MSAL.js 2.0+ de autorisatiecodestroom ondersteunt met PKCE.

Migreren vanuit de impliciete stroom

Als u een bestaande toepassing hebt die gebruikmaakt van de impliciete stroom, raden we aan de autorisatiecodestroom te gebruiken, door gebruik te maken van een framework dat hier ondersteuning voor biedt, zoals MSAL.js 2.0.+.

Als al uw productietoepassingen met één pagina die worden vertegenwoordigd door een app-registratie, de autorisatiecodestroom starten, schakelt u de instellingen voor de impliciete toekenningsstroom als volgt uit:

  1. Selecteer hiervoor Verificatie in het linkermenu onder Beheren.
  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 houdt (aangevinkt).

Volgende stappen

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