Verificatie configureren in een Angular-toepassing met één pagina met behulp van Azure Active Directory B2C

In dit artikel wordt een voorbeeld van een Angular-toepassing met één pagina (SPA) gebruikt om te illustreren hoe u Verificatie van Azure Active Directory B2C (Azure AD B2C) toevoegt aan uw Angular-apps.

Overzicht

OpenID Connect (OIDC) is een verificatieprotocol op basis van OAuth 2.0 waarmee u een gebruiker veilig kunt aanmelden bij een toepassing. In dit Angular-voorbeeld wordt MSAL Angular en de MSAL-browser gebruikt. MSAL is een door Microsoft geleverde bibliotheek die het toevoegen van verificatie- en autorisatieondersteuning aan Angular SPA's vereenvoudigt.

Inlogproces

De aanmeldingsstroom omvat de volgende stappen:

1. De gebruiker opent de app en selecteert Aanmelden.
2. De app start een verificatieaanvraag en stuurt de gebruiker om naar Azure AD B2C.
3. De gebruiker meldt zich aan of meldt zich aan en stelt het wachtwoord opnieuw in of meldt zich aan met een sociaal account.
4. Na een geslaagde aanmelding retourneert Azure AD B2C een autorisatiecode naar de app. De app voert de volgende acties uit:
   1. Hiermee wordt de autorisatiecode voor een id-token, toegangstoken en vernieuwingstoken uitgewisseld.
   2. Leest de id-tokenclaims.
   3. Slaat het toegangstoken en het vernieuwingstoken op in een cache in het geheugen voor later gebruik. Met het toegangstoken kan de gebruiker beveiligde resources aanroepen, zoals een web-API. Het vernieuwingstoken wordt gebruikt om een nieuw toegangstoken te verkrijgen.

App-registratie

Als u wilt dat uw app zich kan aanmelden met Azure AD B2C en een web-API wilt aanroepen, moet u twee toepassingen registreren in uw Azure AD B2C-tenant:

• Met de registratie van een toepassing met één pagina (Angular) kan uw app zich aanmelden met Azure AD B2C. Tijdens de app-registratie geeft u de omleidings-URI op. De omleidings-URI is het eindpunt waarnaar de gebruiker wordt omgeleid nadat deze is geverifieerd met Azure AD B2C. Het toepassingsregistratieproces genereert een toepassings-id, ook wel client-id genoemd, waarmee uw toepassing op unieke wijze wordt aangeduid. In dit artikel wordt de voorbeeld-app-id 1 gebruikt.

• Met de web-API-registratie kan uw app een beveiligde web-API aanroepen. De registratie toont de web-API-machtigingen (bereiken). Het app-registratieproces genereert een toepassings-id die uw web-API uniek identificeert. In dit artikel wordt de voorbeeld-app-id 2 gebruikt. Verleen uw app (App-ID: 1) machtigingen aan de web-API-scopes (App-ID: 2).

In het volgende diagram worden de app-registraties en de app-architectuur beschreven.

Aanroepen naar een web-API

Nadat de verificatie is voltooid, communiceren gebruikers met de app, die een beveiligde web-API aanroept. De web-API maakt gebruik van verificatie via een Bearer-token. Het Bearer-token is het toegangstoken dat de app van Azure AD B2C heeft gekregen. De app geeft het token door in de autorisatieheader van de HTTPS-aanvraag.

Authorization: Bearer <access token>

Als het bereik van het toegangstoken niet overeenkomt met de bereiken van de web-API, verkrijgt de verificatiebibliotheek een nieuw toegangstoken met de juiste bereiken.

Afmeldingsstroom

De afmeldingsstroom omvat de volgende stappen:

1. Gebruikers melden zich af vanuit de app.
2. De app wist de sessieobjecten en de verificatiebibliotheek wist de tokencache.
3. De app brengt gebruikers naar het afmeldingseindpunt van Azure AD B2C om de Azure AD B2C-sessie te beëindigen.
4. Gebruikers worden teruggeleid naar de app.

Vereiste voorwaarden

Voordat u de procedures in dit artikel volgt, moet u ervoor zorgen dat uw computer werkt op:

• Visual Studio Code of een andere code-editor.
• Node.js runtime en npm.
• Hoekige CLI.

Stap 1: Uw gebruikersstroom configureren

Wanneer gebruikers zich proberen aan te melden bij uw app, start de app een verificatieaanvraag naar het autorisatie-eindpunt via een gebruikersstroom. De gebruikersstroom definieert en bepaalt de gebruikerservaring. Nadat gebruikers de gebruikersstroom hebben voltooid, genereert Azure AD B2C een token en leidt het gebruikers vervolgens terug naar de toepassing.

Maak een gebruikersstroom of een aangepast beleid als u dit nog niet hebt gedaan. Herhaal de stappen om de volgende drie afzonderlijke gebruikersstromen te maken:

• Een gecombineerde gebruikersstroom voor aanmelden en registreren, zoals susi. Deze gebruikersstroom ondersteunt ook de ervaring Wachtwoord vergeten.
• Een gebruikersstroom voor profielbewerking, zoals edit_profile.
• Een gebruikersstroom voor Wachtwoord opnieuw instellen, zoals reset_password.

Azure AD B2C voegt B2C_1_ aan de naam van de gebruikersstroom toe. susi wordt bijvoorbeeld B2C_1_susi.

Stap 2: uw Angular SPA en API registreren

In deze stap maakt u de registraties voor de Angular SPA en de web-API-app. U geeft ook de toepassingsgebieden van uw web-API op.

2.1 Registreer de web-API-toepassing

Voer de volgende stappen uit om de web-API-app (app-id: 2) te registreren:

1. Meld u aan bij het Azure-portaal.

2. Zorg ervoor dat u de map gebruikt die uw Azure AD B2C-tenant bevat. Selecteer op de portalwerkbalk het pictogram Mappen + abonnementen.

3. Ga op de pagina Portalinstellingen | Directory's en abonnementen naar uw Azure AD B2C-directory in de lijst Directorynaam en selecteer vervolgens Wisselen.

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

5. Selecteer app-registratiesen selecteer vervolgens Nieuwe registratie.

6. Voer bij Naam een naam in voor de toepassing (bijvoorbeeld my-api1). Laat de standaardwaarden voor omleidings-URI en ondersteunde accounttypen staan.

7. Selecteer Registreren.

8. Nadat de app-registratie is voltooid, selecteert u Overzicht.

9. Noteer voor later gebruik de waarde van de toepassings-id (client) wanneer u de webtoepassing configureert.

   

2.2 Bereiken configureren

1. Selecteer de my-api1-toepassing die u hebt gemaakt (app-id: 2) om de overzichtspagina te openen.

2. Selecteer onder Beherende optie Een API openstellen.

3. Selecteer naast URI voor de toepassings-id de link Instellen. Vervang de standaardwaarde (GUID) door een unieke naam (bijvoorbeeld tasks-api) en selecteer Opslaan.

   Wanneer uw webtoepassing een toegangstoken voor de web-API aanvraagt, moet deze URI als voorvoegsel worden toegevoegd voor elk bereik dat u voor de API definieert.

4. Selecteer onder bereiken die zijn gedefinieerd door deze APIde optie Een bereik toevoegen.

5. Een bereik maken dat de leestoegang tot de API definieert:

   1. Voer voor Bereiknaamtasks.read in.
   2. Voer voor Weergavenaam beheerderstoestemmingLeestoegang tot de Tasks-API in.
   3. Voer voor Beschrijving beheerderstoestemmingStaat leestoegang tot de taken-API toe in.

6. Selecteer Voeg bereik toe.

7. Selecteer Bereik toevoegen en voeg vervolgens een bereik toe dat de schrijftoegang tot de API definieert:

   1. Voer voor Bereiknaamtasks.write in.
   2. Voer voor Weergavenaam van de beheerderstoestemming de schrijftoegang tot de Tasks-API in.
   3. Voer bij Beschrijving beheerderstoestemming in: geeft schrijftoegang tot de taken-API.

8. Selecteer Voeg bereik toe.

2.3 Registreer de Angular-app

Volg deze stappen om de registratie van de Angular-app te maken:

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-registratiesen selecteer vervolgens Nieuwe registratie.
5. Voer bij Naam een naam in voor de toepassing. Voer bijvoorbeeld MyApp in.
6. Selecteer onder Ondersteunde accounttypenAccounts in een id-provider of organisatiemap (voor verificatie van gebruikers met gebruikersstromen).
7. Selecteer onder Omleidings-URISingle-page application (SPA) en voer vervolgens http://localhost:4200 in het URL-vak in.
8. Schakel onder Machtigingen het selectievakje Beheerdersgoedkeuring verlenen aan machtigingen van OpenID en offline_access in.
9. Selecteer Registreren.
10. Noteer de waarde van de toepassings-id (client) voor gebruik in een latere stap wanneer u de webtoepassing configureert.

2.5 Machtigingen verlenen

Voer de volgende stappen uit om uw app (app-id: 1) machtigingen te verlenen:

1. Selecteer App-registraties en selecteer vervolgens de app die u hebt gemaakt (App-id: 1).

2. Selecteer onder Beheren de optie API-machtigingen.

3. Selecteer onder Geconfigureerde machtigingen de optie Een machtiging toevoegen.

4. Selecteer het tabblad Mijn API's.

5. Selecteer de API (App-id: 2) waarvoor aan de webclienttoepassing toegang moet worden verleend. Voer bijvoorbeeld my-api1 in.

6. Vouw onder Machtiging de sectie Taken uit en selecteer vervolgens de scopes die u eerder hebt gedefinieerd (bijvoorbeeld tasks.read en tasks.write).

7. Selecteer Machtigingen toevoegen.

8. Selecteer beheerderstoestemming verlenen voor <uw tenantnaam>.

9. Selecteer Ja.

10. Klik op Vernieuwen en controleer vervolgens of Verleend voor... wordt weergegeven onder Status voor beide toepassingsgebieden.

11. Selecteer uw bereik in de lijst geconfigureerde machtigingen en kopieer vervolgens de volledige naam van het bereik.

    

Stap 3: De Angular-voorbeeldcode ophalen

In dit voorbeeld ziet u hoe een Angular-toepassing met één pagina Azure AD B2C kan gebruiken voor registratie en aanmelding van gebruikers. Vervolgens verkrijgt de app een toegangstoken en wordt een beveiligde web-API aangeroepen.

Download een .zip bestand van het voorbeeld of kloon het voorbeeld uit de GitHub-opslagplaats met behulp van de volgende opdracht:

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

3.1 Het Angular-voorbeeld configureren

Nu u het SPA-voorbeeld hebt verkregen, werkt u de code bij met uw Azure AD B2C- en web-API-waarden. Open het bestand auth-config.ts in de map src/app binnen de voorbeeldmap. Werk de sleutels bij met de bijbehorende waarden:

De resulterende src/app/auth-config.ts-code moet er ongeveer uitzien als in het volgende voorbeeld:

export const b2cPolicies = {
     names: {
         signUpSignIn: "b2c_1_susi_reset_v2",
         editProfile: "b2c_1_edit_profile_v2"
     },
     authorities: {
         signUpSignIn: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2",
         },
         editProfile: {
             authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile_v2"
         }
     },
     authorityDomain: "your-tenant-name.b2clogin.com"
 };
 
 
export const msalConfig: Configuration = {
     auth: {
         clientId: '<your-MyApp-application-ID>',
         authority: b2cPolicies.authorities.signUpSignIn.authority,
         knownAuthorities: [b2cPolicies.authorityDomain],
         redirectUri: '/', 
     },
    // More configuration here
 }

export const protectedResources = {
  todoListApi: {
    endpoint: "http://localhost:5000/api/todolist",
    scopes: ["https://your-tenant-namee.onmicrosoft.com/api/tasks.read"],
  },
}

Stap 4: De web-API-voorbeeldcode ophalen

Nu de web-API is geregistreerd en u de bereiken hebt gedefinieerd, moet u de web-API-code configureren om deze met uw Azure AD B2C-tenant te kunnen laten werken.

Download een *.zip archief of kloon het voorbeeldweb-API-project van GitHub. U kunt ook rechtstreeks bladeren naar het project Azure-Samples/active-directory-b2c-javascript-nodejs-webapi op GitHub met behulp van de volgende opdracht:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

4.1 De web-API configureren

Open het config.json bestand in de voorbeeldmap. Dit bestand bevat informatie over uw Azure AD B2C-id-provider. De web-API-app gebruikt deze informatie om het toegangstoken te valideren dat de web-app als bearer-token doorgeeft. Werk de volgende eigenschappen van de app-instellingen bij:

Het uiteindelijke configuratiebestand moet eruitzien als de volgende JSON:

{
    "credentials": {
        "tenantName": "<your-tenant-name>",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"] 
    },
    // More settings here
} 

Stap 5: De Angular SPA en web-API uitvoeren

U bent nu klaar om de Angular-toegang tot de API te testen. Voer in deze stap zowel de web-API als de voorbeeldtoepassing Angular uit op uw lokale computer. Meld u vervolgens aan bij de Angular-toepassing en selecteer de knop TodoList om een aanvraag voor de beveiligde API te starten.

De web-API uitvoeren

1. Open een consolevenster en ga naar de map die het web-API-voorbeeld bevat. Voorbeeld:

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. Voer de volgende opdrachten uit:

   npm install && npm update
   node index.js
   

   In het consolevenster wordt het poortnummer weergegeven waarop de toepassing wordt gehost:

   Listening on port 5000...
   

De Angular-toepassing uitvoeren

1. Open een ander consolevenster en ga naar de map met het Angular-voorbeeld. Voorbeeld:

   cd ms-identity-javascript-angular-tutorial-main/3-Authorization-II/2-call-api-b2c/SPA
   

2. Voer de volgende opdrachten uit:

   npm install && npm update
   npm start
   

   In het consolevenster wordt het poortnummer weergegeven van waar de toepassing wordt gehost:

   Listening on port 4200...
   

3. Ga naar http://localhost:4200 in uw browser om de toepassing weer te geven.

4. Selecteer Inloggen.

   

5. Voltooi het aanmeldings- of registratieproces.

6. Wanneer u zich hebt aangemeld, ziet u uw profiel. Selecteer TodoList in het menu.

   

7. Selecteer Toevoegen om nieuwe items toe te voegen aan de lijst of gebruik de pictogrammen om items te verwijderen of te bewerken.

   

Uw toepassing implementeren

In een productietoepassing is de omleidings-URI voor de app-registratie doorgaans een openbaar toegankelijk eindpunt waarop uw app wordt uitgevoerd, zoals https://contoso.com.

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.
• De antwoord-URL is hoofdlettergevoelig. Het hoofdlettergebruik moet overeenkomen met het URL-pad van de actieve toepassing.

Verwante inhoud

• Meer informatie over het codevoorbeeld
• Verificatie inschakelen in uw eigen Angular-toepassing
• Verificatieopties configureren in uw Angular-toepassing
• Verificatie inschakelen in uw eigen web-API