Serverloze API's beveiligen met Azure API Management en Azure AD B2C voor gebruik vanuit een BEVEILIGD-WACHTWOORDVERIFICATIE
VAN TOEPASSING OP: Alle API Management-lagen
In dit scenario ziet u hoe u uw Azure API Management-exemplaar configureert om een API te beveiligen. We gebruiken de Azure AD B2C SPA-stroom (Auth Code + PKCE) om een token te verkrijgen, naast API Management om een Back-end van Azure Functions te beveiligen met EasyAuth.
Zie Verificatie en autorisatie voor API's in API Management voor een conceptueel overzicht van API-autorisatie.
Doelstellingen
We gaan zien hoe API Management kan worden gebruikt in een vereenvoudigd scenario met Azure Functions en Azure AD B2C. U maakt een JavaScript-app (JS) die een API aanroept waarmee gebruikers worden aangemeld met Azure AD B2C. Vervolgens gebruikt u de functie validate-jwt, CORS en Rate Limit By Key van API Management om de back-end-API te beveiligen.
Ter diepgaande verdediging gebruiken we EasyAuth om het token opnieuw in de back-end-API te valideren en ervoor te zorgen dat API Management de enige service is die de Azure Functions-back-end kan aanroepen.
Wat leert u?
- Installatie van een app met één pagina en back-end-API in Azure Active Directory B2C
- Een Back-end-API voor Azure Functions maken
- Importeren van een Azure Functions-API in Azure API Management
- De API beveiligen in Azure API Management
- De Azure Active Directory B2C-autorisatie-eindpunten aanroepen via de Microsoft Identity Platform Libraries (MSAL.js)
- Een HTML-/Vanilla JS-toepassing met één pagina opslaan en deze leveren vanuit een Azure Blob Storage-eindpunt
Vereisten
Als u de stappen in dit artikel wilt volgen, moet u het volgende hebben:
- Een Azure-opslagaccount (StorageV2) Algemeen gebruik V2 voor het hosten van de front-end JS-app met één pagina.
- Een Azure API Management-exemplaar (elke laag werkt, inclusief Verbruik, maar bepaalde functies die van toepassing zijn op het volledige scenario zijn niet beschikbaar in deze laag (rate-limit-by-key en toegewezen virtueel IP-adres), worden hieronder in het artikel beschreven.
- Een lege Azure Function-app (met de V3.1 .NET Core-runtime, op een verbruiksabonnement) om de aangeroepen API te hosten
- Een Azure AD B2C-tenant, gekoppeld aan een abonnement.
Hoewel u in de praktijk resources in dezelfde regio in productieworkloads zou gebruiken, is de implementatieregio voor deze instructies niet belangrijk.
Overzicht
Hier volgt een afbeelding van de onderdelen die worden gebruikt en de stroom ertussen zodra dit proces is voltooid.
Hier volgt een kort overzicht van de stappen:
De Azure AD B2C-aanroepen (front-end, API Management) en API-toepassingen maken met bereiken en API-toegang verlenen
Het registratie- en aanmeldingsbeleid maken zodat gebruikers zich kunnen aanmelden met Azure AD B2C
API Management configureren met de nieuwe Azure AD B2C-client-id's en -sleutels om OAuth2-gebruikersautorisatie in te schakelen in de ontwikkelaarsconsole
De functie-API bouwen
Configureer de functie-API om EasyAuth in te schakelen met de nieuwe Azure AD B2C-client-id's en -sleutels en vergrendelen naar APIM VIP
De API-definitie bouwen in API Management
Oauth2 instellen voor de API Management API-configuratie
Het CORS-beleid instellen en het beleid validate-jwt toevoegen om het OAuth-token voor elke binnenkomende aanvraag te valideren
De aanroepende toepassing bouwen om de API te gebruiken
Het JS-BEVEILIGD-WACHTWOORDVERIFICATIE-voorbeeld uploaden
De JS-voorbeeldclient-app configureren met de nieuwe Azure AD B2C-client-id's en -sleutels
De clienttoepassing testen
Tip
We gaan heel wat stukjes informatie en sleutels vastleggen terwijl we dit document lopen. Het kan handig zijn om een teksteditor te openen om de volgende configuratie-items tijdelijk op te slaan.
B2C BACKEND CLIENT ID: B2C BACKEND CLIENT SECRET KEY: B2C BACKEND API SCOPE URI: B2C FRONTEND CLIENT ID: B2C USER FLOW ENDPOINT URI: B2C WELL-KNOWN OPENID ENDPOINT: B2C POLICY NAME: Frontendapp_signupandsignin FUNCTION URL: APIM API BASE URL: STORAGE PRIMARY ENDPOINT URL:
De back-endtoepassing configureren
Open de blade Azure AD B2C in de portal en voer de volgende stappen uit.
Selecteer het tabblad App-registraties
Klik op de knop Nieuwe registratie.
Kies Web in het selectievak Omleidings-URI.
Stel nu de weergavenaam in, kies iets unieks en relevants voor de service die wordt gemaakt. In dit voorbeeld gebruiken we de naam 'Back-endtoepassing'.
Gebruik tijdelijke aanduidingen voor de antwoord-URL's, zoals 'https://jwt.ms' (een microsoft-tokendecoderingssite). Deze URL's worden later bijgewerkt.
Zorg ervoor dat u de optie Accounts in een id-provider of organisatiemap (voor het verifiëren van gebruikers met gebruikersstromen) hebt geselecteerd
Schakel voor dit voorbeeld het selectievakje Beheerderstoestemming verlenen uit, omdat we momenteel geen offline_access machtigingen nodig hebben.
Klik op 'Registreren'.
Noteer de client-id van de back-endtoepassing voor later gebruik (weergegeven onder Toepassings-id (client).
Selecteer het tabblad Certificaten en geheimen (onder Beheren) en klik vervolgens op Nieuw clientgeheim om een verificatiesleutel te genereren (Accepteer de standaardinstellingen en klik op Toevoegen).
Wanneer u op Toevoegen klikt, kopieert u de sleutel (onder 'waarde') ergens veilig voor later gebruik als back-endclientgeheim. Houd er rekening mee dat dit dialoogvenster de ENIGE kans is dat u deze sleutel moet kopiëren.
Selecteer nu het tabblad Een API beschikbaar maken (onder Beheren).
U wordt gevraagd om de AppID-URI in te stellen, de standaardwaarde te selecteren en vast te leggen.
Maak en geef het bereik 'Hallo' voor uw functie-API, u kunt de woordgroep 'Hallo' gebruiken voor alle in te voeren opties, het opnemen van de ingevulde URI voor volledige bereikwaarde en vervolgens klikken op Bereik toevoegen.
Ga terug naar de hoofdmap van de blade Azure AD B2C door linksboven in de portal de breadcrumb 'Azure AD B2C' te selecteren.
Notitie
Azure AD B2C-bereiken zijn effectief machtigingen binnen uw API waartoe andere toepassingen toegang kunnen aanvragen via de blade API-toegang vanuit hun toepassingen. U hebt zojuist toepassingsmachtigingen voor uw aangeroepen API gemaakt.
De front-endtoepassing configureren
- Selecteer het tabblad App-registraties
- Klik op de knop Nieuwe registratie.
- Kies Toepassing met één pagina (SPA) in het selectievak Omleidings-URI.
- Stel nu de weergavenaam en appID-URI in, kies iets unieks en relevants voor de front-endtoepassing die gebruikmaakt van deze Azure Active Directory B2C-app-registratie. In dit voorbeeld kunt u Front-endtoepassing gebruiken
- Laat op basis van de eerste app-registratie de geselecteerde accounttypen standaard staan (gebruikers verifiëren met gebruikersstromen)
- Gebruik tijdelijke aanduidingen voor de antwoord-URL's, zoals 'https://jwt.ms' (een microsoft-tokendecoderingssite). Deze URL's worden later bijgewerkt.
- Laat het vakje toestemming van de toekenningsbeheerder ingeschakeld
- Klik op 'Registreren'.
- Noteer de front-endtoepassingsclient-id voor later gebruik (weergegeven onder Toepassings-id (client).
- Ga naar het tabblad API-machtigingen .
- Verken toegang tot de back-endtoepassing door te klikken op 'Een machtiging toevoegen', vervolgens 'Mijn API's', selecteer de 'Back-endtoepassing', selecteer 'Machtigingen', selecteer het bereik dat u in de vorige sectie hebt gemaakt en klik op Machtigingen toevoegen
- Klik op Beheerderstoestemming verlenen voor {tenant} en klik in het pop-upvenster op Ja. Met deze pop-up wordt toestemming gegeven voor de front-endtoepassing om de machtiging 'hallo' te gebruiken die is gedefinieerd in de back-endtoepassing die u eerder hebt gemaakt.
- Alle machtigingen moeten nu worden weergegeven voor de app als een groen vinkje onder de statuskolom
Een gebruikersstroom voor registreren en aanmelden maken
Ga terug naar de hoofdmap van de blade B2C door de Breadcrumb van Azure AD B2C te selecteren.
Schakel over naar het tabblad Gebruikersstromen (onder Beleid).
Klik op Nieuwe gebruikersstroom
Kies het gebruikersstroomtype 'Registreren en aanmelden' en selecteer 'Aanbevolen' en vervolgens 'Maken'
Geef het beleid een naam en noteer het voor later. In dit voorbeeld kunt u 'Frontendapp_signupandsignin' gebruiken. Houd er rekening mee dat dit wordt voorafgegaan door 'B2C_1_' om 'B2C_1_Frontendapp_signupandsignin' te maken
Schakel onder Id-providers en Lokale accounts het selectievakje 'E-mail registreren' (of 'Registratie van gebruikers-id' in, afhankelijk van de configuratie van uw B2C-tenant) en klik op OK. Deze configuratie komt omdat we lokale B2C-accounts registreren en niet uitstellen naar een andere id-provider (zoals een sociale id-provider) om het bestaande sociale media-account van een gebruiker te gebruiken.
Laat de standaardinstellingen voor MFA en voorwaardelijke toegang staan.
Klik onder 'Gebruikerskenmerken en -claims' op Meer weergeven...' kies vervolgens de claimopties die uw gebruikers moeten invoeren en die in het token moeten worden geretourneerd. Controleer ten minste 'Weergavenaam' en 'E-mailadres' om te verzamelen, met 'Weergavenaam' en 'E-mailadressen' om terug te keren (let goed op het feit dat u e-mailadressen, enkelvoud verzamelt en vraagt om e-mailadressen, meerdere te retourneren) en klik op OK en klik vervolgens op Maken.
Klik op de gebruikersstroom die u in de lijst hebt gemaakt en klik vervolgens op de knop Gebruikersstroom uitvoeren.
Met deze actie wordt de blade Gebruikersstroom uitvoeren geopend, de front-endtoepassing geselecteerd, het eindpunt van de gebruikersstroom gekopieerd en opgeslagen voor later gebruik.
Kopieer en sla de koppeling bovenaan op, opname als het 'bekende openid-configuratie-eindpunt' voor later gebruik.
Notitie
Met B2C-beleid kunt u de Azure AD B2C-aanmeldingseindpunten beschikbaar maken om verschillende gegevensonderdelen vast te leggen en gebruikers op verschillende manieren aan te melden.
In dit geval hebben we een registratie- of aanmeldingsstroom (beleid) geconfigureerd. Dit heeft ook een bekend configuratie-eindpunt weergegeven, in beide gevallen is ons gemaakte beleid geïdentificeerd in de URL door de queryreeksparameter 'p='.
Zodra dit is gebeurd, hebt u nu een functioneel Business to Consumer-identiteitsplatform waarmee gebruikers worden aangemeld bij meerdere toepassingen.
De functie-API bouwen
Ga terug naar uw standaard-Microsoft Entra-tenant in Azure Portal, zodat we items in uw abonnement opnieuw kunnen configureren.
Ga naar de blade Functie-apps van Azure Portal, open uw lege functie-app en klik vervolgens op Functies, klik op Toevoegen.
Kies in de flyout die wordt weergegeven 'Ontwikkelen in portal', kies onder 'Selecteer een sjabloon' en kies vervolgens 'HTTP-trigger', kies onder Sjabloondetails de naam 'hallo' met het autorisatieniveau 'Functie' en selecteer Vervolgens Toevoegen.
Ga naar de blade Code + Test en plak de voorbeeldcode hieronder boven de bestaande code die wordt weergegeven.
Selecteer Opslaan.
using System.Net; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Primitives; public static async Task<IActionResult> Run(HttpRequest req, ILogger log) { log.LogInformation("C# HTTP trigger function processed a request."); return (ActionResult)new OkObjectResult($"Hello World, time and date are {DateTime.Now.ToString()}"); }Tip
De code van de C#-scriptfunctie die u zojuist hebt geplakt, registreert gewoon een regel in de functielogboeken en retourneert de tekst 'Hallo wereld' met enkele dynamische gegevens (de datum en tijd).
Selecteer 'Integratie' in de linkerblade en klik vervolgens op de http-koppeling (req) in het vak Trigger.
Schakel in de vervolgkeuzelijst 'Geselecteerde HTTP-methoden' de http POST-methode uit, laat alleen GET geselecteerd en klik vervolgens op Opslaan.
Ga terug naar het tabblad Code + Test, klik op Functie-URL ophalen en kopieer de URL die wordt weergegeven en sla deze op voor later gebruik.
Notitie
De bindingen die u zojuist hebt gemaakt, vertellen Functions dat ze reageren op anonieme HTTP GET-aanvragen naar de URL die u zojuist hebt gekopieerd (
https://yourfunctionappname.azurewebsites.net/api/hello?code=secretkey). Nu hebben we een schaalbare serverloze HTTPS-API, die een zeer eenvoudige nettolading kan retourneren.U kunt deze API nu testen vanuit een webbrowser met behulp van uw versie van de bovenstaande URL die u zojuist hebt gekopieerd en opgeslagen. U kunt ook het gedeelte '?code=secretkey' van de URL verwijderen en opnieuw testen om te bewijzen dat Azure Functions een 401-fout retourneert.
De functie-API configureren en beveiligen
Er moeten twee extra gebieden in de functie-app worden geconfigureerd (autorisatie- en netwerkbeperkingen).
Eerst gaan we verificatie/autorisatie configureren, dus ga terug naar de hoofdblade van de functie-app via de breadcrumb.
Selecteer vervolgens Verificatie (onder 'Instellingen').
Klik op Id-provider toevoegen
Selecteer 'Microsoft' in de vervolgkeuzelijst Identity Provider
Voor app-registratie selecteert u 'Geef de details van een bestaande app-registratie op'
Plak de client-id van de back-endtoepassing (van Azure AD B2C) in het vak Toepassings-id (client) (we hebben deze configuratie eerder vastgelegd).
Plak het bekende open-id-configuratie-eindpunt uit het registratie- en aanmeldingsbeleid in het vak Issuer URL (we hebben deze configuratie eerder vastgelegd).
Plak het clientgeheim van de back-endtoepassing in het juiste vak (deze configuratie is eerder vastgelegd).
Bij Niet-geverifieerde aanvragen selecteert u HTTP 401 Niet geautoriseerd: aanbevolen voor API's
Token Store ingeschakeld laten (standaardinstelling).
Klik op Opslaan (linksboven op de blade).
Belangrijk
Uw functie-API is nu geïmplementeerd en moet 401 antwoorden genereren als de juiste JWT niet is opgegeven als autorisatie: Bearer-header en gegevens moet retourneren wanneer een geldige aanvraag wordt gepresenteerd. U hebt aanvullende diepgaande beveiliging in EasyAuth toegevoegd door de optie Aanmelden met Microsoft Entra ID te configureren om niet-geverifieerde aanvragen af te handelen.
Er is nog steeds geen IP-beveiliging toegepast, als u een geldige sleutel en een OAuth2-token hebt, kan iedereen dit vanaf elke locatie aanroepen. In het ideale voorkeur willen we alle aanvragen afdwingen om via API Management te komen.
Als u de lagen API Management Consumption, Basic v2 en Standard v2 gebruikt, is er geen toegewezen virtueel IP-adres van Azure API Management voor acceptatielijst met de toegangsbeperkingen voor functies. In de klassieke (toegewezen) azure API Management-lagen is het VIP één tenant en voor de levensduur van de resource. Voor de lagen die worden uitgevoerd op een gedeelde infrastructuur, kunt u uw API-aanroepen vergrendelen via de functiesleutel voor gedeeld geheim in het gedeelte van de URI die u hierboven hebt gekopieerd. Voor deze lagen geldt ook dat stap 12-17 hieronder niet van toepassing is.
Sluit de blade Verificatie vanuit de App Service/Functions-portal.
Open de blade API Management van de portal en open vervolgens uw exemplaar.
Noteer het privé-VIP dat wordt weergegeven op het tabblad Overzicht.
Ga terug naar de blade Azure Functions van de portal en open uw exemplaar opnieuw.
Selecteer Netwerken en selecteer vervolgens Toegangsbeperkingen configureren
Klik op Regel toevoegen en voer het VIP in dat u in stap 3 hierboven hebt gekopieerd in de indeling xx.xx.xx.xx/32.
Als u wilt blijven communiceren met de functieportal en de optionele stappen hieronder wilt uitvoeren, moet u hier ook uw eigen openbare IP-adres of CIDR-bereik toevoegen.
Zodra er een toegestane vermelding in de lijst staat, voegt Azure een impliciete regel voor weigeren toe om alle andere adressen te blokkeren.
U moet CIDR-opgemaakte blokken adressen toevoegen aan het deelvenster IP-beperkingen. Wanneer u één adres wilt toevoegen, zoals het VIP van API Management, moet u het adres toevoegen in de indeling xx.xx.xx.xx/32.
Notitie
Uw functie-API mag nu niet worden aangeroepen vanaf een andere locatie dan via API Management of uw adres.
Open de blade API Management en open vervolgens uw exemplaar.
Selecteer de blade API's (onder API's).
Kies in het deelvenster 'Een nieuwe API toevoegen' de optie 'Functie-app' en selecteer vervolgens 'Volledig' bovenaan het pop-upvenster.
Klik op Bladeren, kies de functie-app waarop u de API host en klik op Selecteren. Klik vervolgens nogmaals op Selecteren.
Geef de API een naam en beschrijving voor intern gebruik van API Management en voeg deze toe aan het 'onbeperkte' product.
Kopieer en noteer de 'basis-URL' van de API en klik op Maken.
Klik op het tabblad Instellingen en schakel onder abonnement het selectievakje Abonnement vereist uit, omdat we in dit geval het Oauth JWT-token gebruiken om de frequentielimiet te beperken. Houd er rekening mee dat als u de verbruikslaag gebruikt, dit nog steeds vereist is in een productieomgeving.
Tip
Als u de verbruikslaag van APIM gebruikt, is het onbeperkte product niet beschikbaar als out-of-the-box. Navigeer in plaats daarvan naar 'Producten' onder 'API's' en druk op Toevoegen. Typ 'Onbeperkt' als de productnaam en beschrijving en selecteer de API die u zojuist hebt toegevoegd in de bijschrift '+' API's linksonder in het scherm. Schakel het selectievakje 'gepubliceerd' in. Laat de rest standaard staan. Klik ten slotte op de knop Maken. Hiermee is het 'onbeperkte' product gemaakt en aan uw API toegewezen. U kunt uw nieuwe product later aanpassen.
De juiste opslageindpuntinstellingen configureren en vastleggen
Open de blade Opslagaccounts in Azure Portal
Selecteer het account dat u hebt gemaakt en selecteer de blade Statische website in de sectie Instellingen (als u geen optie 'Statische website' ziet, controleert u of u een V2-account hebt gemaakt).
Stel de functie voor statische webhosting in op Ingeschakeld en stel de naam van het indexdocument in op 'index.html' en klik vervolgens op Opslaan.
Noteer de inhoud van het primaire eindpunt voor later, omdat op deze locatie de front-endsite wordt gehost.
Tip
U kunt Azure Blob Storage + CDN herschrijven of Azure-app Service gebruiken om de beveiligd-WACHTWOORDVERIFICATIE te hosten. De functie voor het hosten van statische websites van Blob Storage biedt ons een standaardcontainer voor statische webinhoud/html/js/css uit Azure Storage en leidt een standaardpagina voor ons af voor nul werk.
CorS instellen en beleid valideren-jwt
De volgende secties moeten worden gevolgd, ongeacht de APIM-laag die wordt gebruikt. De URL van het opslagaccount is afkomstig van het opslagaccount dat u boven aan dit artikel beschikbaar hebt gesteld aan de vereisten.
Ga naar de blade API Management van de portal en open uw exemplaar.
Selecteer API's en selecteer vervolgens Alle API's.
Klik onder 'Binnenkomende verwerking' op de knop Codeweergave (</>) om de beleidseditor weer te geven.
Bewerk de binnenkomende sectie en plak de onderstaande XML, zodat deze als volgt wordt gelezen.
Vervang de volgende parameters in het beleid
{PrimaryStorageEndpoint} (Het primaire opslageindpunt dat u in de vorige sectie hebt gekopieerd), {b2cpolicy-known-openid} (het bekende openid-configuratie-eindpunt dat u eerder hebt gekopieerd) en {backend-api-application-client-id} (de B2C-toepassing/client-id voor de back-end-API) met de juiste waarden die u eerder hebt opgeslagen.
Als u de verbruikslaag van API Management gebruikt, moet u het beleid voor frequentielimiet per sleutel verwijderen omdat dit beleid niet beschikbaar is wanneer u de verbruikslaag van Azure API Management gebruikt.
<inbound> <cors allow-credentials="true"> <allowed-origins> <origin>{PrimaryStorageEndpoint}</origin> </allowed-origins> <allowed-methods preflight-result-max-age="120"> <method>GET</method> </allowed-methods> <allowed-headers> <header>*</header> </allowed-headers> <expose-headers> <header>*</header> </expose-headers> </cors> <validate-jwt header-name="Authorization" failed-validation-httpcode="401" failed-validation-error-message="Unauthorized. Access token is missing or invalid." require-expiration-time="true" require-signed-tokens="true" clock-skew="300"> <openid-config url="{b2cpolicy-well-known-openid}" /> <required-claims> <claim name="aud"> <value>{backend-api-application-client-id}</value> </claim> </required-claims> </validate-jwt> <rate-limit-by-key calls="300" renewal-period="120" counter-key="@(context.Request.IpAddress)" /> <rate-limit-by-key calls="15" renewal-period="60" counter-key="@(context.Request.Headers.GetValueOrDefault("Authorization","").AsJwt()?.Subject)" /> </inbound>Notitie
Azure API Management kan nu reageren op cross-origin-aanvragen van uw JavaScript SPA-apps en er wordt beperking, snelheidsbeperking en prevalidatie uitgevoerd van het JWT-verificatietoken dat wordt doorgegeven voordat de aanvraag wordt doorgestuurd naar de Functie-API.
Gefeliciteerd, u hebt nu Azure AD B2C, API Management en Azure Functions nodig om een API te publiceren, beveiligen en gebruiken.
Tip
Als u de API Management-verbruikslaag gebruikt, kunt u in plaats van frequentielimieten te beperken door het JWT-onderwerp of het binnenkomende IP-adres (oproepsnelheid beperken op basis van sleutelbeleid wordt momenteel niet ondersteund voor de categorie Verbruik), kunt u beperken door het quotum voor aanroepfrequentie te beperken. Aangezien dit voorbeeld een JavaScript-toepassing met één pagina is, gebruiken we de API Management-sleutel alleen voor frequentiebeperking en factureringsoproepen. De werkelijke autorisatie en verificatie worden verwerkt door Azure AD B2C en worden ingekapseld in de JWT, die tweemaal wordt gevalideerd, eenmaal door API Management en vervolgens door de back-end Azure-functie.
Het JavaScript SPA-voorbeeld uploaden naar statische opslag
Selecteer in de blade Opslagaccount de blade Containers in de sectie Blob Service en klik op de $web container die in het rechterdeelvenster wordt weergegeven.
Sla de onderstaande code lokaal op uw computer op als index.html en upload het bestand vervolgens index.html naar de $web container.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.11.1/js/msal-browser.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Azure Active Directory B2C with Azure API Management</a> <div class="navbar-nav"> <button class="btn btn-success" id="signinbtn" onClick="login()">Sign In</a> </div> </div> </nav> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card" > <div id="cardheader" class="card-header"> <div class="card-text"id="message">Please sign in to continue</div> </div> <div class="card-body"> <button class="btn btn-warning" id="callapibtn" onClick="getAPIData()">Call API</a> <div id="progress" class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> </div> </div> </div> </div> <script lang="javascript"> // Just change the values in this config object ONLY. var config = { msal: { auth: { clientId: "{CLIENTID}", // This is the client ID of your FRONTEND application that you registered with the SPA type in Azure Active Directory B2C authority: "{YOURAUTHORITYB2C}", // Formatted as https://{b2ctenantname}.b2clogin.com/tfp/{b2ctenantguid or full tenant name including onmicrosoft.com}/{signuporinpolicyname} redirectUri: "{StoragePrimaryEndpoint}", // The storage hosting address of the SPA, a web-enabled v2 storage account - recorded earlier as the Primary Endpoint. knownAuthorities: ["{B2CTENANTDOMAIN}"] // {b2ctenantname}.b2clogin.com }, cache: { cacheLocation: "sessionStorage", storeAuthStateInCookie: false } }, api: { scopes: ["{BACKENDAPISCOPE}"], // The scope that we request for the API from B2C, this should be the backend API scope, with the full URI. backend: "{APIBASEURL}/hello" // The location that we'll call for the backend api, this should be hosted in API Management, suffixed with the name of the API operation (in the sample this is '/hello'). } } document.getElementById("callapibtn").hidden = true; document.getElementById("progress").hidden = true; const myMSALObj = new msal.PublicClientApplication(config.msal); myMSALObj.handleRedirectPromise().then((tokenResponse) => { if(tokenResponse !== null){ console.log(tokenResponse.account); document.getElementById("message").innerHTML = "Welcome, " + tokenResponse.account.name; document.getElementById("signinbtn").hidden = true; document.getElementById("callapibtn").hidden = false; }}).catch((error) => {console.log("Error Signing in:" + error); }); function login() { try { myMSALObj.loginRedirect({scopes: config.api.scopes}); } catch (err) {console.log(err);} } function getAPIData() { document.getElementById("progress").hidden = false; document.getElementById("message").innerHTML = "Calling backend ... " document.getElementById("cardheader").classList.remove('bg-success','bg-warning','bg-danger'); myMSALObj.acquireTokenSilent({scopes: config.api.scopes, account: getAccount()}).then(tokenResponse => { const headers = new Headers(); headers.append("Authorization", `Bearer ${tokenResponse.accessToken}`); fetch(config.api.backend, {method: "GET", headers: headers}) .then(async (response) => { if (!response.ok) { document.getElementById("message").innerHTML = "Error: " + response.status + " " + JSON.parse(await response.text()).message; document.getElementById("cardheader").classList.add('bg-warning'); } else { document.getElementById("cardheader").classList.add('bg-success'); document.getElementById("message").innerHTML = await response.text(); } }).catch(async (error) => { document.getElementById("cardheader").classList.add('bg-danger'); document.getElementById("message").innerHTML = "Error: " + error; }); }).catch(error => {console.log("Error Acquiring Token Silently: " + error); return myMSALObj.acquireTokenRedirect({scopes: config.api.scopes, forceRefresh: false}) }); document.getElementById("progress").hidden = true; } function getAccount() { var accounts = myMSALObj.getAllAccounts(); if (!accounts || accounts.length === 0) { return null; } else { return accounts[0]; } } </script> </body> </html>Blader naar het primaire eindpunt van de statische website dat u eerder in de laatste sectie hebt opgeslagen.
Notitie
Gefeliciteerd, u hebt zojuist een JavaScript-app met één pagina geïmplementeerd voor het hosten van statische inhoud van Azure Storage. Omdat we de JS-app nog niet hebben geconfigureerd met uw Azure AD B2C-details, werkt de pagina nog niet als u deze opent.
De JavaScript-SPA configureren voor Azure AD B2C
- Nu weten we waar alles is: we kunnen de BEVEILIGD-WACHTWOORDVERIFICATIE configureren met het juiste API Management API-adres en de juiste Azure AD B2C-toepassing/client-id's.
- Ga terug naar de azure-portalopslagblade
- Selecteer 'Containers' (onder 'Instellingen')
- Selecteer de container '$web' in de lijst
- Selecteer index.html blob in de lijst
- Klik op Bewerken
- Werk de verificatiewaarden in de sectie MSAL-configuratie bij zodat deze overeenkomt met uw front-endtoepassing die u eerder hebt geregistreerd in B2C. Gebruik de codeopmerkingen voor hints over hoe de configuratiewaarden eruit moeten zien. De instantiewaarde moet de indeling hebben:- https://{b2ctenantname}.b2clogin.com/tfp/{b2ctenantname}.onmicrosoft.com}/{signupandsigninpolicyname}, als u onze voorbeeldnamen hebt gebruikt en uw b2c-tenant contoso wordt genoemd, verwacht u dat de instantie 'https://contoso.b2clogin.com/tfp/contoso.onmicrosoft.com/Frontendapp_signupandsignin' is.
- Stel de API-waarden in zodat deze overeenkomen met uw back-endadres (de API-basis-URL die u eerder hebt vastgelegd en de waarden 'b2cScopes' zijn eerder vastgelegd voor de back-endtoepassing).
- Klik op Opslaan
De omleidings-URI's instellen voor de Azure AD B2C-front-end-app
Open de blade Azure AD B2C en navigeer naar de toepassingsregistratie voor de JavaScript Front-endtoepassing.
Klik op Omleidings-URI's en verwijder de tijdelijke aanduiding 'https://jwt.ms' die we eerder hebben ingevoerd.
Voeg een nieuwe URI toe voor het primaire eindpunt (opslag) (min de afsluitende slash).
Notitie
Deze configuratie resulteert in een client van de front-endtoepassing die een toegangstoken ontvangt met de juiste claims van Azure AD B2C. De BEVEILIGD-WACHTWOORDVERIFICATIE kan dit als bearer-token toevoegen in de https-header in de aanroep naar de back-end-API.
API Management valideert het token vooraf, frequentielimietaanroepen naar het eindpunt door zowel het onderwerp van de JWT die is uitgegeven door Azure ID (de gebruiker) als het IP-adres van de aanroeper (afhankelijk van de servicelaag van API Management, zie de bovenstaande opmerking) voordat de aanvraag wordt doorgegeven aan de ontvangende Azure Function-API, waarbij de beveiligingssleutel voor functies wordt toegevoegd. De beveiligd-WACHTWOORDVERIFICATIE geeft het antwoord weer in de browser.
Gefeliciteerd, u hebt Azure AD B2C, Azure API Management, Azure Functions, Azure-app Service Authorization geconfigureerd om in perfecte harmonie te werken.
Nu hebben we een eenvoudige app met een eenvoudige beveiligde API, gaan we deze testen.
De clienttoepassing testen
- Open de URL van de voorbeeld-app die u hebt genoteerd vanuit het opslagaccount dat u eerder hebt gemaakt.
- Klik op Aanmelden in de rechterbovenhoek. Met deze klik wordt uw Azure AD B2C-registratie- of aanmeldingsprofiel weergegeven.
- De app zou u moeten verwelkomen op basis van de naam van uw B2C-profiel.
- Klik nu op 'API aanroepen' en de pagina moet worden bijgewerkt met de waarden die vanuit uw beveiligde API worden teruggestuurd.
- Als u herhaaldelijk op de knop API aanroepen klikt en u in de ontwikkelaarslaag of hoger van API Management wordt uitgevoerd, moet u er rekening mee houden dat uw oplossing begint met het beperken van de API en deze functie moet worden gerapporteerd in de app met een geschikt bericht.
En we zijn klaar
De bovenstaande stappen kunnen worden aangepast en bewerkt om veel verschillende toepassingen van Azure AD B2C met API Management toe te staan.
Volgende stappen
- Meer informatie over Microsoft Entra ID en OAuth2.0.
- Bekijk meer video's over API Management.
- Zie Wederzijdse certificaatverificatie voor andere manieren om uw back-endservice te beveiligen.
- Maak een API Management-service-exemplaar.
- Beheer uw eerste API.