Snabbstart: Konfigurera inloggning för ett ASP.NET-program med hjälp av Azure Active Directory B2CQuickstart: Set up sign in for an ASP.NET application using Azure Active Directory B2C

Azure Active Directory B2C (Azure AD B2C) tillhandahåller moln identitets hantering för att hålla ditt program, din verksamhet och dina kunder skyddade.Azure Active Directory B2C (Azure AD B2C) provides cloud identity management to keep your application, business, and customers protected. Med Azure AD B2C kan program autentisera med konton på sociala medier och företagskonton med öppna protokoll.Azure AD B2C enables your applications to authenticate to social accounts and enterprise accounts using open standard protocols. I den här snabbstarten använder du ett ASP.NET-program för att logga in med en social identitetsprovider och anropa en Azure AD B2C-skyddad webb-API.In this quickstart, you use an ASP.NET application to sign in using a social identity provider and call an Azure AD B2C protected web API.

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

  • Visual Studio 2019 med arbets belastningen ASP.net och webb utveckling .Visual Studio 2019 with the ASP.NET and web development workload.

  • Ett socialt konto från Facebook, Google eller Microsoft.A social account from Facebook, Google, or Microsoft.

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

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

    Det finns två projekt i exempel lösningen:There are two projects are in the sample solution:

    • TaskWebApp – Ett webbprogram som skapar och redigerar en uppgiftslista.TaskWebApp - A web application that creates and edits a task list. Webb programmet använder användar flödet för registrering eller inloggning för att registrera eller logga in användare.The web application uses the sign-up or sign-in user flow to sign up or sign in users.
    • TaskService – Ett webb-API med stöd för att skapa, läsa, uppdatera och ta bort en uppgiftslista.TaskService - A web API that supports the create, read, update, and delete task list functionality. Webb-API:n skyddas av Azure AD B2C och anropas av webbprogrammet.The web API is protected by Azure AD B2C and called by the web application.

Kör programmet i Visual StudioRun the application in Visual Studio

  1. I exempelprogrammets projektmapp öppnar du lösningen B2C-WebAPI-DotNet.sln i Visual Studio.In the sample application project folder, open the B2C-WebAPI-DotNet.sln solution in Visual Studio.

  2. För den här snabbstarten kör du både TaskWebApp- och TaskService-projektet samtidigt.For this quickstart, you run both the TaskWebApp and TaskService projects at the same time. Högerklicka på lösningen B2C-WebAPI-DotNet i Solution Explorer och välj sedan Ange startprojekt.Right-click the B2C-WebAPI-DotNet solution in Solution Explorer, and then select Set StartUp Projects.

  3. Välj Flera startprojekt och ändra Åtgärd för båda projekten till Start.Select Multiple startup projects and change the Action for both projects to Start.

  4. Klicka på OK.Click OK.

  5. Tryck på F5 för att felsöka båda programmen.Press F5 to debug both applications. Varje program öppnas i ett eget webbläsarfönster:Each application opens in its own browser tab:

    • https://localhost:44316/ – ASP.NET-webbprogrammet.https://localhost:44316/ - The ASP.NET web application. Du kan interagera direkt med det här programmet i snabbstarten.You interact directly with this application in the quickstart.
    • https://localhost:44332/ – Webb-API som anropas av ASP.NET-webbprogrammet.https://localhost:44332/ - The web API that's called by the ASP.NET web application.

Logga in på ditt kontoSign in using your account

  1. Klicka på Registrera dig/Logga in i ASP.NET-webbprogrammet för att starta arbetsflödet.Click Sign up / Sign in in the ASP.NET web application to start the workflow.

    Exempel på ASP.NET-webbapp i webbläsare med registrering/Sign-länk markerad

    Exemplet stöder flera registreringsalternativ, till exempel att använda en social identitetsprovider eller att skapa ett lokalt konto med en e-postadress.The sample supports several sign-up options including using a social identity provider or creating a local account using an email address. I den här snabb starten ska du använda ett konto för sociala identitets leverantörer från Facebook, Google eller Microsoft.For this quickstart, use a social identity provider account from either Facebook, Google, or Microsoft.

  2. Azure AD B2C visar en inloggnings sida för ett fiktivt företag som kallas Fabrikam för exempel webb programmet.Azure AD B2C presents a sign-in page for a fictitious company called Fabrikam for the sample web application. Klicka på knappen för den identitetsprovider som du vill använda för att registrera dig med en social identitetsprovider.To sign up using a social identity provider, click the button of the identity provider you want to use.

    Sidan logga in eller registrera dig med identitets leverantörs knappar

    Du autentiserar (loggar in) med dina autentiseringsuppgifter för ditt sociala konto och godkänner att programmet läser information från ditt sociala konto.You authenticate (sign in) using your social account credentials and authorize the application to read information from your social account. När du beviljar åtkomst kan programmet hämta profilinformation från det sociala kontot, till exempel ditt namn och din ort.By granting access, the application can retrieve profile information from the social account such as your name and city.

  3. Avsluta inloggningsprocessen för identitetsprovidern.Finish the sign-in process for the identity provider.

Redigera din profilEdit your profile

Azure Active Directory B2C tillhandahåller funktioner som gör det möjligt för användare att uppdatera sina profiler.Azure Active Directory B2C provides functionality to allow users to update their profiles. Exempelwebbappen använder ett Azure AD B2C-användarflöde för att redigera profiler för arbetsflödet.The sample web app uses an Azure AD B2C edit profile user flow for the workflow.

  1. Klicka på ditt profilnamn på programmets menyrad och välj Redigera profil för att redigera profilen som du har skapat.In the application menu bar, click your profile name and select Edit profile to edit the profile you created.

    Exempel på webbapp i webbläsaren med länken Redigera profil markerad

  2. Ändra Visningsnamn eller Ort och klicka sedan på Fortsätt för att uppdatera din profil.Change your Display name or City, and then click Continue to update your profile.

    Den ändrade visas uppe till höger på webbprogrammets startsida.The changed is displayed in the upper right portion of the web application's home page.

Få åtkomst till en skyddad API-resursAccess a protected API resource

  1. Klicka på att göra-listan för att redigera objekten på att göra-listan.Click To-Do List to enter and modify your to-do list items.

  2. Ange text i textrutan Nytt objekt.Enter text in the New Item text box. Klicka på Lägg till för att anropa det Azure AD B2C-skyddade webb-API:et som lägger till ett objekt i att göra-listan.Click Add to call the Azure AD B2C protected web API that adds a to-do list item.

    Exempel på webbapp i webbläsare med Lägg till ett objekt i att göra-listan

    ASP.NET-webbtillämpningsprogrammet innehåller en åtkomsttoken för Azure AD i begäran till den skyddade web API-resursen som utför åtgärder på användarnas objekt för att göra-listor.The ASP.NET web application includes an Azure AD access token in the request to the protected web API resource to perform operations on the user's to-do list items.

Du har använt ditt Azure AD B2C-användarkonto för att utföra ett auktoriserat anrop till ett Azure AD B2C-skyddat webb-API.You've successfully used your Azure AD B2C user account to make an authorized call an Azure AD B2C protected web API.

Rensa resurserClean up resources

Du kan använda Azure AD B2C-klientorganisationen om du vill prova andra snabbstarter eller självstudier för Azure AD B2C.You can use your Azure AD B2C tenant if you plan to try other Azure AD B2C quickstarts or tutorials. När den inte längre behövs kan du ta bort Azure AD B2C-klientorganisationen.When no longer needed, you can delete your Azure AD B2C tenant.

Nästa stegNext steps

I den här snabb starten använde du ett exempel på ASP.NET-program för att:In this quickstart, you used a sample ASP.NET application to:

  • Logga in med en anpassad inloggnings sidaSign in with a custom login page
  • Logga in med en social identitetsproviderSign in with a social identity provider
  • Skapa ett Azure AD B2C kontoCreate an Azure AD B2C account
  • Anropa ett webb-API som skyddas av Azure AD B2CCall a web API protected by Azure AD B2C

Kom igång med att skapa en egen Azure AD B2C-klientorganisation.Get started creating your own Azure AD B2C tenant.