Verificatie configureren in een voorbeeld van een Node.js-web-API met behulp van Azure Active Directory B2C
In dit artikel leert u hoe u een voorbeeld van een Node.js-webtoepassing configureert om een voorbeeld van een Node.js-web-API aan te roepen. De web-API moet worden beveiligd door Azure AD B2C zelf. In deze installatie wordt een web-app, zoals app-id: 1 , een web-API aangeroepen, zoals app-id: 2. Gebruikers verifiëren zich bij de web-app om een toegangstoken te verkrijgen, dat vervolgens wordt gebruikt om een beveiligde web-API aan te roepen.
Overzicht
Verificatie op basis van tokens zorgt ervoor dat aanvragen voor een web-API vergezeld gaan van een geldig toegangstoken.
De web-app voltooit de volgende gebeurtenissen:
Gebruikers worden geverifieerd met Azure AD B2C.
Er wordt een toegangstoken verkregen met de vereiste machtigingen (bereiken) voor het web-API-eindpunt.
Het toegangstoken wordt doorgegeven als bearer-token in de verificatieheader van de HTTP-aanvraag. De indeling wordt gebruikt:
Authorization: Bearer <token>
De web-API voltooit de volgende gebeurtenissen:
Het Bearer-token wordt gelezen uit de autorisatieheader in de HTTP-aanvraag.
Het token wordt gevalideerd.
De machtigingen (bereiken) in het token worden gevalideerd.
Er wordt gereageerd op de HTTP-aanvraag. Als het token niet geldig is, reageert het eindpunt van de web-API met een
401 Unauthorized
HTTP-fout.
Overzicht van app-registratie
Als u wilt dat de app zich kan aanmelden met Azure AD B2C en een web-API kan aanroepen, moet u twee toepassingen registreren in de Azure AD B2C-directory.
Met de registratie van de web-toepassing kan uw app zich aanmelden met Azure AD B2C. Tijdens de registratie geeft u de omleidings-URI op. De omleidings-URI is het eindpunt waarnaar gebruikers worden omgeleid door Azure AD B2C nadat ze de verificatie hebben voltooid. Het app-registratieproces genereert een toepassings-id, ook wel client-id genoemd, waarmee uw toepassing op unieke wijze wordt aangeduid. U genereert ook een clientgeheim voor uw app. Uw app gebruikt het clientgeheim om een autorisatiecode uit te wisselen voor een toegangstoken.
Met de registratie van een web-API kan de app een beveiligde web-API aanroepen. De registratie omvat de web-API-bereiken. De bereiken bieden een manier om machtigingen tot beveiligde resources te beheren, zoals uw web-API. U verleent de webtoepassing machtigingen voor de web-API-bereiken. Wanneer een toegangstoken wordt aangevraagd, geeft uw app de gewenste machtigingen op in de parameter Bereik van de aanvraag.
De toepassingsregistraties en de toepassingsarchitectuur worden beschreven in het volgende diagram:
Vereisten
Visual Studio Code of een andere code-editor.
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_
vóór de naam van de gebruikersstroom toe. Zo wordt susi
gewijzigd in B2C_1_susi
.
Stap 2: uw web-app en API registreren
In deze stap maakt u de web- en web-API-toepassingsregistraties en geeft u de bereiken van uw web-API op.
Stap 2.1 Registreer de web-API-toepassing
Voer de volgende stappen uit om de web-API-app (app-id: 2) te registreren:
Meld u aan bij de Azure-portal.
Zorg ervoor dat u de map gebruikt die uw Azure AD B2C-tenant bevat. Selecteer op de portalwerkbalk het pictogram Mappen + abonnementen.
Ga op de pagina Portalinstellingen | Directory's en abonnementen naar uw Azure AD B2C-directory in de lijst Mapnaam en selecteer vervolgens Omzetten.
Zoek en selecteer Azure AD B2C in de Azure-portal.
Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.
Voer bij Naam een naam in voor de toepassing (bijvoorbeeld my-api1). Laat de standaardwaarden voor omleidings-URI en ondersteunde accounttypen staan.
Selecteer Registreren.
Nadat de app-registratie is voltooid, selecteert u Overzicht.
Noteer voor later gebruik de waarde van de toepassings-id (client) wanneer u de webtoepassing configureert.
Stap 2.2. Bereiken configureren
Selecteer de my-api1-toepassing die u hebt gemaakt (app-id: 2) om de overzichtspagina te openen.
Selecteer onder BeherenEen API beschikbaar maken.
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.
Onder Bereiken die door deze API worden bepaald selecteert u Een bereik toevoegen.
Een bereik maken dat de leestoegang tot de API definieert:
- Voer voor Bereiknaamtasks.read in.
- Voer voor Weergavenaam beheerderstoestemmingLeestoegang tot Tasks-API in.
- Voer voor Beschrijving beheerderstoestemmingStaat leestoegang toegang tot de Tasks-API toe in.
Selecteer Bereik toevoegen.
Selecteer Bereik toevoegen en voeg vervolgens een bereik toe dat de schrijftoegang tot de API definieert:
- Voer voor Bereiknaamtasks.write in.
- Voer voor Weergavenaam beheerderstoestemmingSchrijftoegang tot Tasks-API in.
- Voer voor Beschrijving beheerderstoestemmingStaat schrijftoegang tot de Tasks-API toe in.
Selecteer Bereik toevoegen.
Stap 2.3: De web-app registreren
Ga als volgt te werk om de beveiligd-WACHTWOORDVERIFICATIE-registratie te maken:
- Meld u aan bij de Azure-portal.
- 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.
- Zoek Azure AD B2C en selecteer deze.
- Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.
- Voer een naam in voor de toepassing (bijvoorbeeld app-id: 1).
- Selecteer onder Ondersteunde accounttypen de optie Accounts in een identiteitsprovider of organisatiemap (voor het verifiëren van gebruikers met gebruikersstromen).
- Selecteer onder Omleidings-URI web en voer
http://localhost:3000/redirect
het tekstvak URL in - Schakel onder Machtigingen het selectievakje Beheerdersgoedkeuring verlenen aan machtigingen van OpenID en offline_access in.
- Selecteer Registreren.
Stap 2.4: Een clientgeheim maken
- Selecteer op de pagina Azure AD B2C - App-registraties de toepassing die u hebt gemaakt, bijvoorbeeld app-id: 1.
- Selecteer in het menu links onder Beheren de optie Certificaten en geheimen.
- Selecteer Nieuw clientgeheim.
- Voer een beschrijving voor het clientgeheim in het vak Beschrijving in. Bijvoorbeeld clientsecret1.
- Selecteer onder Verloopt een duur waarvoor het geheim geldig is en selecteer vervolgens Toevoegen.
- Registreer de waarde van het geheim voor gebruik in de code van uw clienttoepassing. Deze geheimwaarde wordt nooit meer weergegeven nadat u deze pagina hebt verlaten. U gebruikt deze waarde als het toepassingsgeheim in de code van uw toepassing.
Stap 2.5: API-machtigingen verlenen aan de web-app
Voer de volgende stappen uit om uw app (app-id: 1) machtigingen te verlenen:
Selecteer App-registraties en selecteer vervolgens de app die u hebt gemaakt (App-id: 1).
Selecteer onder Beheren de optie API-machtigingen.
Selecteer onder Geconfigureerde machtigingen de optie Een machtiging toevoegen.
Selecteer het tabblad Mijn API's.
Selecteer de API (App-id: 2) waarvoor aan de webclienttoepassing toegang moet worden verleend. Voer bijvoorbeeld my-api1 in.
Vouw onder Machtigingtaken uit en selecteer vervolgens de bereiken die u eerder hebt gedefinieerd (bijvoorbeeld tasks.read en tasks.write).
Selecteer Machtigingen toevoegen.
Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam>.
Selecteer Ja.
Selecteer Vernieuwen en controleer vervolgens of voor beide bereiken Verleend voor... wordt weergegeven onder Status.
Selecteer uw bereik in de lijst geconfigureerde machtigingen en kopieer vervolgens de volledige naam van het bereik.
Stap 3: De voorbeeldcode van de web-app ophalen
In dit voorbeeld ziet u hoe een webtoepassing Azure AD B2C kan gebruiken voor het registreren en aanmelden van gebruikers. Vervolgens verkrijgt de app een toegangstoken en wordt een beveiligde web-API aangeroepen.
Als u de voorbeeldcode van de web-app wilt ophalen, kunt u een van de volgende handelingen uitvoeren:
Download een zip-bestand. U extraheert het zip-bestand om de voorbeeldweb-app op te halen.
Kloon het voorbeeld uit GitHub door de volgende opdracht uit te voeren:
git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git
Stap 3.1: App-afhankelijkheden installeren
Open een consolevenster en ga naar de map met het Node.js voorbeeld app. Bijvoorbeeld:
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
Voer de volgende opdrachten uit om de vereiste app-afhankelijkheden te installeren:
npm install && npm update
Stap 3.2: De voorbeeldweb-app configureren
Open uw web-app in een code-editor, zoals Visual Studio Code. Open het .env
bestand onder de call-protected-api
map. Het bestand bevat informatie over uw Azure AD B2C-id-provider. Werk de volgende app-instellingen bij:
Sleutel | Waarde |
---|---|
APP_CLIENT_ID |
De toepassings-id (client) voor de web-app die u hebt geregistreerd in stap 2.3. |
APP_CLIENT_SECRET |
De clientgeheimwaarde voor de web-app die u in stap 2.4 hebt gemaakt |
SIGN_UP_SIGN_IN_POLICY_AUTHORITY |
De instantie voor aanmelden en registreren van de gebruikersstroom voor de gebruikersstroom die u in stap 1 hebt gemaakt, zoals https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name> . Vervang <your-tenant-name> door de naam van uw tenant en <sign-in-sign-up-user-flow-name> door de naam van uw aanmeldings- en registratiegebruikersstroom, zoals B2C_1_susi . Meer informatie over het ophalen van uw tenantnaam. |
AUTHORITY_DOMAIN |
Uw Azure AD B2C-autoriteitdomein, zoals https://<your-tenant-name>.b2clogin.com . Vervang <your-tenant-name> door de naam van uw tenant. |
APP_REDIRECT_URI |
De omleidings-URI van de toepassing waarbij Azure AD B2C verificatiereacties (tokens) retourneert. Deze komt overeen met de omleidings-URI die u hebt ingesteld tijdens het registreren van uw app in Azure Portal. Deze URL moet openbaar toegankelijk zijn. Laat de waarde staan zoals het is. |
LOGOUT_ENDPOINT |
Het eindpunt voor afmelden bij Azure AD B2C, zoals https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000 . Vervang <your-tenant-name> door de naam van uw tenant en <sign-in-sign-up-user-flow-name> door de naam van uw aanmeldings- en registratiegebruikersstroom, zoals B2C_1_susi . |
Na de update moet het uiteindelijke configuratiebestand er ongeveer uitzien als in het volgende voorbeeld:
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
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.
Ga op een van de volgende manieren te werk om de voorbeeldcode van de web-API op te halen:
Kloon het voorbeeld van het web-API-project uit GitHub door de volgende opdracht uit te voeren:
git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git
U kunt ook rechtstreeks naar het project Azure-Samples/active-directory-b2c-javascript-nodejs-webapi op GitHub gaan.
Stap 4.1: De web-API bijwerken
Open het
config.json
bestand in de code-editor.Wijzig de variabelewaarden met de gebruikersstroom en toepassingsregistratie die u eerder hebt gemaakt:
Gebruik
tenantName
hiervoor de naam van uw tenantnaam , zoalsfabrikamb2c
.Gebruik
clientID
de toepassings-id (client) voor de web-API die u in stap 2.1 hebt gemaakt.Gebruik
policyName
de naam van de aanmeldings- en registratiegebruikersstroom die u in stap 1 hebt gemaakt, zoalsB2C_1_susi
.
Na de update moet uw code er ongeveer uitzien als in het volgende voorbeeld:
config.json:
{ "credentials": { "tenantName": "fabrikamb2c", "clientID": "93733604-cc77-4a3c-a604-87084dd55348" }, "policies": { "policyName": "B2C_1_susi" }, "resource": { "scope": ["tasks.read"] }, "metadata": { "authority": "login.microsoftonline.com", "discovery": ".well-known/openid-configuration", "version": "v2.0" }, "settings": { "isB2C": true, "validateIssuer": true, "passReqToCallback": false, "loggingLevel": "info" } }
Stap 4.2: App-afhankelijkheden installeren
Open een consolevenster en ga naar de map met het Node.js-web-API-voorbeeld. Bijvoorbeeld:
cd active-directory-b2c-javascript-nodejs-webapi
Voer de volgende opdrachten uit:
npm install && npm update
Stap 5: de web-app en API uitvoeren
U bent nu klaar om de bereiktoegang van de webtoepassing tot de web-API te testen. Voer zowel de Node.js-web-API als de voorbeeldwebtoepassing uit op uw lokale computer.
Navigeer in de terminal naar de voorbeeldweb-API en voer de Node.js-web-API-server uit. Bijvoorbeeld: '
cd active-directory-b2c-javascript-nodejs-webapi node index.js
Het consolevenster geeft het poortnummer van waar de app wordt gehost.
Listening on port 5000...
Navigeer in een ander terminalexemplaren naar de voorbeeldweb-app en voer de Node.js-web-app-server uit. Bijvoorbeeld:
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api node index.js
Het consolevenster geeft het poortnummer van waar de app wordt gehost.
Msal Node Auth Code Sample app listening on port !3000
Ga in uw browser naar
http://localhost:3000
. U ziet de pagina met twee knoppen: Meld u aan om de BEVEILIGDE API aan te roepen en of roep de ANONIEME API aan.Als u de anonieme API wilt aanroepen, selecteert u de of roept u de ANONIEME API aan. De API reageert met JSON-object met
date
sleutel zoals:{"date":"2022-01-27T14:21:22.681Z"}
De anonieme API is een niet-beveiligd eindpunt in de web-API. U hebt geen toegangstoken nodig om er toegang toe te krijgen.
Als u het beveiligde API-eindpunt wilt aanroepen, selecteert u de knop Aanmelden om de BEVEILIGDE API aan te roepen. U wordt gevraagd om u aan te melden.
Voer uw aanmeldingsreferenties in, zoals het e-mailadres en wachtwoord. Als u geen account hebt, selecteert u Nu registreren om een account te maken. Nadat u zich hebt aangemeld of zich hebt geregistreerd, ziet u de volgende pagina met de knop BEVEILIGDE API aanroepen.
Als u de beveiligde API wilt aanroepen, selecteert u de knop Beveiligde API aanroepen. De API reageert met JSON-object met een
name
sleutel waarvan de waarde de achternaam van uw account is, zoals:{"name": "User 1"}
Volgende stappen
Meer informatie over het inschakelen van verificatie in uw eigen web-API met behulp van Azure AD B2C