Självstudier: Aktivera autentisering i en webbapp med hjälp av Azure Active Directory B2CTutorial: Enable authentication in a web application using Azure Active Directory 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 ASP.NET-webbprogram.This tutorial shows you how to use Azure Active Directory B2C (Azure AD B2C) to sign in and sign up users in an ASP.NET web application. 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

Uppdatera programmetUpdate the application

I den självstudien som du slutförde som en del av förutsättningarna lade du till en webbapp i Azure AD B2C.In the tutorial that you completed as part of the prerequisites, you added a web application in Azure AD B2C. För att möjliggöra kommunikation med exemplet i den här självstudien behöver du lägga till en omdirigerings-URI i programmet i Azure AD B2C.To enable communication with the sample in this 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 på menyn uppe till vänster i Azure Portal. Sök sedan efter och välj Azure AD B2C.Choose 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 https://localhost:44316.Under Reply URL, add https://localhost:44316.
  6. Välj Spara.Select Save.
  7. På egenskapssidan antecknar du det program-ID som du kommer att använda när du konfigurerar webbappen.On the properties page, record the application ID that you'll use when you configure the web application.
  8. Välj Nycklar följt av Skapa nyckel och sedan Spara.Select Keys, select Generate key, and select Save. Anteckna den nyckel som du kommer att använda när du konfigurerar webbappen.Record the key that you'll use when you configure the web application.

Konfigurera exempletConfigure the sample

I den här självstudien konfigurerar du ett exempel som du kan ladda ned från GitHub.In this tutorial, you configure a sample that you can download from GitHub. Exemplet använder ASP.NET för att tillhandahålla en enkel att göra-lista.The sample uses ASP.NET to provide a simple to-do list. I exemplet används Microsoft OWIN-mellanprogramkomponenter.The sample uses Microsoft OWIN middleware components. Ladda ned en zip-fil eller klona exemplet från GitHub.Download a zip file or clone the sample from GitHub. Se till att extrahera exempelfilen i en mapp där sökvägens totala teckenlängd är mindre än 260.Make sure that you extract the sample file in a folder where the total character length of the path is less than 260.

git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi.git

Följande två projekt finns i exempellösningen:The following two projects are in the sample solution:

  • TaskWebApp – Skapa och redigera en uppgiftslista.TaskWebApp - Create and edit a task list. Exemplet använder användar flödet för registrering eller inloggning för att registrera dig och logga in användare.The sample uses the sign-up or sign-in user flow to sign up and sign in users.
  • TaskService – Har stöd för att skapa, läsa, uppdatera och ta bort funktionen för uppgiftslistor.TaskService - Supports the create, read, update, and delete task list functionality. API:et skyddas av Azure AD B2C och anropas av TaskWebApp.The API is protected by Azure AD B2C and called by TaskWebApp.

Du ändrar exemplet till att använda det program som är registrerat i din klientorganisation, vilket innefattar det program-ID och den nyckel som du tidigare registrerade.You change the sample to use the application that's registered in your tenant, which includes the application ID and the key that you previously recorded. Du konfigurerar även de användarflöden som du skapade.You also configure the user flows that you created. Exemplet definierar konfigurations värden som inställningar i filen Web. config .The sample defines the configuration values as settings in the Web.config file.

Uppdatera inställningarna i Web. config-filen så att de fungerar med ditt användar flöde:Update the settings in the Web.config file to work with your user flow:

  1. Öppna B2C-WebAPI-DotNet-lösningen i Visual Studio.Open the B2C-WebAPI-DotNet solution in Visual Studio.
  2. I projektet TaskWebApp öppnar du Web.config-filen.In the TaskWebApp project, open the Web.config file.
    1. Uppdatera värdet för ida:Tenant och ida:AadInstance med namnet på Azure AD B2C klienten som du skapade.Update the value of ida:Tenant and ida:AadInstance with the name of the Azure AD B2C tenant that you created. Ersätt fabrikamb2c till exempel med contoso.For example, replace fabrikamb2c with contoso.
    2. Ersätt värdet för ida:ClientId med det program-ID som du har spelat in.Replace the value of ida:ClientId with the application ID that you recorded.
    3. Ersätt värdet för ida:ClientSecret med den nyckel som du registrerade.Replace the value of ida:ClientSecret with the key that you recorded. Du måste använda XML-koda klient hemligheten innan du lägger till den i Web. config.You must XML-encode the client secret before adding it to your Web.config.
    4. Ersätt värdet för ida:SignUpSignInPolicyId med b2c_1_signupsignin1.Replace the value of ida:SignUpSignInPolicyId with b2c_1_signupsignin1.
    5. Ersätt värdet för ida:EditProfilePolicyId med b2c_1_profileediting1.Replace the value of ida:EditProfilePolicyId with b2c_1_profileediting1.
    6. Ersätt värdet för ida:ResetPasswordPolicyId med b2c_1_passwordreset1.Replace the value of ida:ResetPasswordPolicyId with b2c_1_passwordreset1.

Kör exempletRun the sample

  1. I Solution Explorer högerklickar du på projektet TaskWebApp och klickar sedan på Set as StartUp Project (Konfigurera som StartUp-projekt).In Solution Explorer, right-click the TaskWebApp project, and then click Set as StartUp Project.
  2. Tryck på F5.Press F5. Standardwebbläsaren öppnas med den lokala webbplatsadressen https://localhost:44316/.The default browser launches to the local web site address https://localhost:44316/.

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

  1. Välj Registrera dig/logga in för att registrera dig som en användare av programmet.Select Sign up / Sign in to sign up as a user of the application. Användarflödet b2c_1_signupsignin1 används.The b2c_1_signupsignin1 user flow is used.

  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 inte har något konto än väljer du Registrera dig nu.Since you don't have an account yet, select Sign up now. 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.

  3. 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 visas som en del av inloggnings-och registrerings arbets flödet

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

Program användaren kan nu använda sin e-postadress för att logga in och använda webb programmet.The application user can now use their email address to sign in and use the web application.

Men att göra-lista- funktionen fungerar inte förrän du har slutfört nästa självstudie i serien, Självstudier: Använd Azure AD B2C för att skydda ett ASP.NET webb-API.However, the To-Do List feature won't function until you complete the next tutorial in the series, Tutorial: Use Azure AD B2C to protect an ASP.NET web API.

Nästa stegNext steps

I den här självstudiekursen lärde du dig att:In this tutorial, 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 för att aktivera funktionen att göra-listan i webb programmet.Now move on to the next tutorial to enable the To-Do List feature of the web application. I den registrerar du ett webb-API-program i din egen Azure AD B2C klient och ändrar sedan kod exemplet så att det använder klienten för API-autentisering.In it, you register a web API application in your own Azure AD B2C tenant, and then modify the code sample to use your tenant for API authentication.