Registrera ett ensidesprogram i Azure Active Directory B2C

Innan dina program kan interagera med Azure Active Directory B2C (Azure AD B2C) måste de vara registrerade i en klientorganisation som du hanterar. Den här guiden visar hur du registrerar ett ensidesprogram ("SPA") med hjälp av Azure-portalen.

Översikt över autentiseringsalternativ

Många moderna webbprogram skapas som enkelsidiga program på klientsidan ("SPAs"). Utvecklare skriver dem med hjälp av JavaScript eller ett SPA-ramverk som Angular, Vue och React. Dessa program körs i en webbläsare och har andra autentiseringsegenskaper än traditionella webbprogram på serversidan.

Azure AD B2C innehåller två alternativ för att aktivera ensidesprogram för att logga in användare och få token för åtkomst till serverdelstjänster eller webb-API:er:

Auktoriseringskodflöde (med PKCE)

Med OAuth 2.0-auktoriseringskodflödet (med PKCE) kan programmet utbyta en auktoriseringskod för ID-token för att representera de autentiserade användar- och åtkomsttoken som krävs för att anropa skyddade API:er. Dessutom returneras uppdateringstoken som ger långsiktig åtkomst till resurser för användarnas räkning utan att kräva interaktion med dessa användare.

Det här är den rekommenderade metoden. Att ha uppdateringstoken med begränsad livslängd hjälper ditt program att anpassa sig till moderna begränsningar för webbläsarens cookiesekretess, till exempel Safari ITP.

Om du vill dra nytta av det här flödet kan ditt program använda ett autentiseringsbibliotek som stöder det, till exempel MSAL.js.

Single-page applications-auth

Implicit beviljandeflöde

Vissa bibliotek, till exempel MSAL.js 1.x, stöder bara implicit beviljandeflöde eller så implementeras dina program för att använda implicit flöde. I dessa fall stöder Azure AD B2C implicit OAuth 2.0-flödet. Det implicita beviljandeflödet gör att programmet kan hämta ID och åtkomsttoken . Till skillnad från auktoriseringskodflödet returnerar implicit beviljandeflöde inte en uppdateringstoken.

Single-page applications-implicit

Det här autentiseringsflödet innehåller inte programscenarier som använder plattformsoberoende JavaScript-ramverk som Elektron och React-Native. Dessa scenarier kräver ytterligare funktioner för interaktion med de interna plattformarna.

Förutsättningar

Registrera SPA-programmet

  1. Logga in på Azure-portalen.

  2. Om du har åtkomst till flera klienter väljer du ikonen Inställningar på den översta menyn för att växla till din Azure AD B2C-klient från menyn Kataloger + prenumerationer.

  3. I Azure-portalen söker du efter och väljer Azure AD B2C.

  4. Välj Appregistreringar och välj sedan Ny registrering.

  5. Ange ett namn för programmet. Till exempel spaapp1.

  6. Under Kontotyper som stöds väljer du Konton i en identitetsprovider eller organisationskatalog (för att autentisera användare med användarflöden)

  7. Under Omdirigerings-URI väljer du Enkelsidigt program (SPA) och anger https://jwt.ms sedan i textrutan URL.

    Omdirigerings-URI:n är slutpunkten till där auktoriseringsservern (Azure AD B2C i det här fallet) skickar användaren när den har slutfört sin interaktion med användaren. Dessutom tar omdirigerings-URI-slutpunkten emot åtkomsttoken eller auktoriseringskoden vid lyckad auktorisering. I ett produktionsprogram är det vanligtvis en offentligt tillgänglig slutpunkt där appen körs, till exempel https://contoso.com/auth-response. I testsyfte som den här guiden kan du ställa in den på https://jwt.ms, ett Microsoft-ägt webbprogram som visar det avkodade innehållet i en token (innehållet i token lämnar aldrig webbläsaren). Under apputvecklingen kan du lägga till slutpunkten där programmet lyssnar lokalt, till exempel http://localhost:5000. Du kan lägga till och ändra omdirigerings-URI:er i dina registrerade program när som helst.

    Följande begränsningar gäller för omdirigerings-URI:er:

    • Svars-URL:en måste börja med schemat https, såvida du inte använder localhost.
    • Svars-URL:en är skiftlägeskänslig. Ärendet måste matcha fallet med URL-sökvägen för ditt program som körs. Om ditt program till exempel ingår som en del av sökvägen .../abc/response-oidcanger du .../ABC/response-oidc inte i svars-URL:en. Eftersom webbläsaren behandlar sökvägar som skiftlägeskänsliga kan cookies som är associerade med .../abc/response-oidc undantas om de omdirigeras till den skiftlägesmatchade .../ABC/response-oidc URL:en.
  8. Under Behörigheter markerar du kryssrutan Bevilja administratörsmedgivande till openid och offline_access behörigheter .

  9. Välj Registrera.

Aktivera implicit flöde

Om du använder MSAL.js 1.3 eller en tidigare version med implicit beviljandeflöde i din SPA-app, eller om du konfigurerar https://jwt.ms/ appen för att testa ett användarflöde eller en anpassad princip, måste du aktivera det implicita beviljandeflödet i appregistreringen:

  1. I den vänstra menyn går du till Hantera och väljer Autentisering.

  2. Under Implicit beviljande och hybridflöden markerar du kryssrutorna Åtkomsttoken (används för implicita flöden) och ID-token (används för implicita flöden och hybridflöden).

  3. Välj Spara.

Om din app använder MSAL.js 2.0 eller senare ska du inte aktivera implicit flödesbidrag eftersom MSAL.js 2.0+ stöder auktoriseringskodflödet med PKCE.

Migrera från det implicita flödet

Om du har ett befintligt program som använder det implicita flödet rekommenderar vi att du migrerar för att använda auktoriseringskodflödet med hjälp av ett ramverk som stöder det, till exempel MSAL.js 2.0+.

När all din produktions-SPA som representeras av en appregistrering börjar använda auktoriseringskodflödet inaktiverar du inställningarna för implicit beviljandeflöde på följande sätt:

  1. I den vänstra menyn går du till Hantera och väljer Autentisering.
  2. Under Implicit beviljande avmarkerar du kryssrutorna Åtkomsttoken och ID-token .
  3. Välj Spara.

Program som använder det implicita flödet kan fortsätta att fungera om du lämnar det implicita flödet aktiverat (markerat).

Nästa steg

Lär dig hur du skapar användarflöden i Azure Active Directory B2C.