Självstudier: Aktivera autentisering i ett program med en enda sida med hjälp av Azure Active Directory B2C (Azure AD B2C)Tutorial: Enable authentication in a single-page application using Azure Active Directory B2C (Azure AD B2C)

Den här självstudien visar hur du använder Azure Active Directory B2C (Azure AD B2C) för att logga in och registrera användare i ett enda webb program (SPA).This tutorial shows you how to use Azure Active Directory B2C (Azure AD B2C) to sign in and sign up users in a single-page application (SPA). Med Azure AD B2C kan program autentisera med konton på sociala medier, företagskonton och Azure Active Directory-konton med hjälp av öppna standardprotokoll.Azure AD B2C enables your applications to authenticate to social accounts, enterprise accounts, and Azure Active Directory accounts using open standard protocols.

I den här guiden får du lära dig att:In this tutorial, you learn how to:

  • Uppdatera programmet i Azure AD B2CUpdate the application in Azure AD B2C
  • Konfigurera exemplet för att använda programmetConfigure the sample to use the application
  • Registrera dig via användarflödetSign up using the user flow

Om du inte har en Azure-prenumeration kan du skapa ettkostnadsfritt konto innan du börjar.If you don't have an Azure subscription, create a free account before you begin.

FörutsättningarPrerequisites

Du behöver följande Azure AD B2C resurser på plats innan du fortsätter med stegen i den här självstudien:You need the following Azure AD B2C resources in place before continuing with the steps in this tutorial:

Dessutom behöver du följande i din lokala utvecklings miljö:Additionally, you need the following in your local development environment:

Uppdatera programmetUpdate the application

I den andra själv studie kursen som du avslutade som en del av förutsättningarna registrerade du ett webb program i Azure AD B2C.In the second tutorial that you completed as part of the prerequisites, you registered a web application in Azure AD B2C. För att möjliggöra kommunikation med exemplet i självstudien behöver du lägga till en omdirigerings-URI i programmet i Azure AD B2C.To enable communication with the sample in the tutorial, you need to add a redirect URI to the application in Azure AD B2C.

  1. Logga in på Azure Portal.Sign in to the Azure portal.
  2. Kontrol lera att du använder den katalog som innehåller din Azure AD B2C klient genom att välja filtret katalog + prenumeration på den översta menyn och välja den katalog som innehåller din klient.Make sure you're using the directory that contains your Azure AD B2C tenant by selecting the Directory + subscription filter in the top menu and choosing the directory that contains your tenant.
  3. Välj alla tjänster i det övre vänstra hörnet av Azure Portal och Sök sedan efter och välj Azure AD B2C.Select All services in the top-left corner of the Azure portal, and then search for and select Azure AD B2C.
  4. Välj Program och därefter programmet webapp1.Select Applications, and then select the webapp1 application.
  5. Under Svars-URL lägger du till http://localhost:6420.Under Reply URL, add http://localhost:6420.
  6. Välj Spara.Select Save.
  7. På sidan Egenskaper registrerar du program-ID: t.On the properties page, record the Application ID. Du använder app-ID i ett senare steg när du uppdaterar koden i webb programmet med en sida.You use the app ID in a later step when you update the code in the single-page web application.

Hämta exempelkodenGet the sample code

I den här självstudien konfigurerar du ett kod exempel som du hämtar från GitHub.In this tutorial, you configure a code sample that you download from GitHub. Exemplet visar hur ett program med en enda sida kan använda Azure AD B2C för användarens registrering och inloggning och för att anropa ett skyddat webb-API.The sample demonstrates how a single-page application can use Azure AD B2C for user sign-up and sign-in, and to call a protected web API.

Ladda ned en zip-fil eller klona exemplet från GitHub.Download a zip file or clone the sample from GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp.git

Uppdatera exempletUpdate the sample

Nu när du har hämtat exemplet uppdaterar du koden med ditt Azure AD B2C klient namn och det program-ID som du registrerade i ett tidigare steg.Now that you've obtained the sample, update the code with your Azure AD B2C tenant name and the application ID you recorded in an earlier step.

  1. index.html Öppna filen i roten i exempel katalogen.Open the index.html file in the root of the sample directory.

  2. I definitionen ändrar du clientId-värdet med det program-ID som du registrerade i ett tidigare steg. msalConfigIn the msalConfig definition, modify the clientId value with the Application ID you recorded in an earlier step. Uppdatera sedan URI- värdet för utfärdaren med ditt Azure AD B2C klient namn.Next, update the authority URI value with your Azure AD B2C tenant name. Uppdatera även URI: n med namnet på det användar flöde för registrering/inloggning som du skapade i en av kraven (till exempel B2C_1_signupsignin1).Also update the URI with the name of the sign-up/sign-in user flow you created in one of the prerequisites (for example, B2C_1_signupsignin1).

    var msalConfig = {
        auth: {
            clientId: "00000000-0000-0000-0000-000000000000", //This is your client ID
            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi", //This is your tenant info
            validateAuthority: false
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };
    

    Namnet på det användarflöde som används i den här självstudien är B2C_1_signupsignin1.The name of the user flow used in this tutorial is B2C_1_signupsignin1. Om du använder ett annat användar flödes namn anger du det namnet i authority värdet.If you're using a different user flow name, specify that name in the authority value.

Kör exempletRun the sample

  1. Öppna ett konsol fönster och ändra till den katalog som innehåller exemplet.Open a console window and change to the directory containing the sample. Exempel:For example:

    cd active-directory-b2c-javascript-msal-singlepageapp
    
  2. Kör följande kommandon:Run the following commands:

    npm install && npm update
    node server.js
    

    Konsol fönstret visar port numret för det lokalt använda Node. js-servern:The console window displays the port number of the locally running Node.js server:

    Listening on port 6420...
    
  3. Gå till http://localhost:6420 i webbläsaren om du vill visa programmet.Go to http://localhost:6420 in your browser to view the application.

Exempelappen har stöd för registrering, inloggning, redigering av profil och återställning av lösenord.The sample supports sign-up, sign-in, profile editing, and password reset. Den här självstudien visar hur en användare registrerar sig med hjälp av en e-postadress.This tutorial highlights how a user signs up using an email address.

Registrera sig med en e-postadressSign up using an email address

  1. Välj Logga in för att initiera det B2C_1_signupsignin1 -användarkonto du angav i ett tidigare steg.Select Login to initiate the B2C_1_signupsignin1 user flow you specified in an earlier step.

  2. Azure AD B2C visar en inloggningssida med en registreringslänk.Azure AD B2C presents a sign-in page with a sign-up link. Eftersom du ännu inte har ett konto väljer du länken Registrera dig nu .Since you don't yet have an account, select the Sign up now link.

  3. Arbetsflödet för registrering visar en sida för att samla in och verifiera användarens identitet med en e-postadress.The sign-up workflow presents a page to collect and verify the user's identity using an email address. Arbetsflödet för registrering samlar även in användarens lösenord och de attribut som definierats i användarflödet.The sign-up workflow also collects the user's password and the requested attributes defined in the user flow.

    Använd en giltig e-postadress och verifiera med verifieringskoden.Use a valid email address and validate using the verification code. Ange ett lösenord.Set a password. Ange värden för de begärda attributen.Enter values for the requested attributes.

    Registrerings sidan som visas i användar flödet för inloggning/registrering

  4. Välj skapa för att skapa ett lokalt konto i katalogen Azure AD B2C.Select Create to create a local account in the Azure AD B2C directory.

När du väljer skapastängs sidan Registrera dig och inloggnings sidan visas igen.When you select Create, the sign up page closes and the sign in page reappears.

Du kan nu använda din e-postadress och ditt lösen ord för att logga in i programmet.You can now use your email address and password to sign in to the application.

Fel: otillräcklig behörighetError: insufficient permissions

När du har loggat in visas ett fel meddelande om otillräcklig behörighet. dettaär förväntat:After you sign in, the app displays an insufficient permissions error - this is expected:

ServerError: AADB2C90205: This application does not have sufficient permissions against this web resource to perform the operation.
Correlation ID: ce15bbcc-0000-0000-0000-494a52e95cd7
Timestamp: 2019-07-20 22:17:27Z

Du får det här felet eftersom webb programmet försöker få åtkomst till ett webb-API som skyddas av demo katalogen, fabrikamb2c.You receive this error because the web application is attempting to access a web API protected by the demo directory, fabrikamb2c. Eftersom din åtkomsttoken bara är giltig för din Azure AD-katalog är API-anropet därför obehörigt.Because your access token is valid only for your Azure AD directory, the API call is therefore unauthorized.

Du kan åtgärda det här felet genom att fortsätta till nästa självstudie i serien (se Nästa steg) för att skapa ett skyddat webb-API för din katalog.To fix this error, continue on to the next tutorial in the series (see Next steps) to create a protected web API for your directory.

Nästa stegNext steps

I den här artikeln lärde du dig att:In this article, you learned how to:

  • Uppdatera programmet i Azure AD B2CUpdate the application in Azure AD B2C
  • Konfigurera exemplet för att använda programmetConfigure the sample to use the application
  • Registrera dig via användarflödetSign up using the user flow

Gå vidare till nästa självstudie i serien för att bevilja åtkomst till ett skyddat webb-API från SPA:Now move on to the next tutorial in the series to grant access to a protected web API from the SPA: