Guida introduttiva: configurare l'accesso per un'applicazione ASP.NET usando 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) consente la gestione delle identità del cloud per garantire la protezione costante dell'applicazione, delle attività aziendali e dei clienti.Azure Active Directory B2C (Azure AD B2C) provides cloud identity management to keep your application, business, and customers protected. Azure AD B2C consente alle applicazioni di eseguire l'autenticazione per account di social networking e account aziendali usando protocolli standard aperti.Azure AD B2C enables your applications to authenticate to social accounts and enterprise accounts using open standard protocols. In questa guida introduttiva si usa un'applicazione ASP.NET per eseguire l'accesso con un provider di identità basato su social network e chiamare un'API Web protetta da Azure AD B2C.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.

Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.If you don't have an Azure subscription, create a free account before you begin.

PrerequisitiPrerequisites

  • Visual Studio 2019 con il carico di lavoro Sviluppo ASP.NET e Web.Visual Studio 2019 with the ASP.NET and web development workload.

  • Un account di social networking di Facebook, Google o Microsoft.A social account from Facebook, Google, or Microsoft.

  • Scaricare un file ZIP o clonare l'applicazione Web di esempio da 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
    

    La soluzione di esempio contiene due progetti:There are two projects are in the sample solution:

    • TaskWebApp: applicazione Web che crea e modifica un elenco attività.TaskWebApp - A web application that creates and edits a task list. L'applicazione Web usa il flusso utente di iscrizione o accesso per l'iscrizione o l'accesso degli utenti.The web application uses the sign-up or sign-in user flow to sign up or sign in users.
    • TaskService: API Web che supporta le funzionalità di creazione, lettura, aggiornamento ed eliminazione dell'elenco attività.TaskService - A web API that supports the create, read, update, and delete task list functionality. L'API Web è protetta da Azure AD B2C e viene chiamata dall'applicazione Web.The web API is protected by Azure AD B2C and called by the web application.

Eseguire l'applicazione in Visual StudioRun the application in Visual Studio

  1. Nella cartella del progetto dell'applicazione di esempio aprire la soluzione B2C-WebAPI-DotNet.sln in Visual Studio.In the sample application project folder, open the B2C-WebAPI-DotNet.sln solution in Visual Studio.

  2. Per questa guida introduttiva si eseguono contemporaneamente entrambi i progetti TaskWebApp e TaskService.For this quickstart, you run both the TaskWebApp and TaskService projects at the same time. Fare clic con il pulsante destro del mouse sulla soluzione B2C-WebAPI-DotNet in Esplora soluzioni e quindi scegliere Imposta progetti di avvio.Right-click the B2C-WebAPI-DotNet solution in Solution Explorer, and then select Set StartUp Projects.

  3. Selezionare Progetti di avvio multipli e modificare l'impostazione di Azione in Avvia per entrambi i progetti.Select Multiple startup projects and change the Action for both projects to Start.

  4. Fare clic su OK.Click OK.

  5. Premere F5 per eseguire il debug di entrambe le applicazioni.Press F5 to debug both applications. Ogni applicazione viene visualizzata in una scheda del browser separata:Each application opens in its own browser tab:

    • https://localhost:44316/: applicazione Web ASP.NET.https://localhost:44316/ - The ASP.NET web application. Nella guida introduttiva si interagisce direttamente con l'applicazione.You interact directly with this application in the quickstart.
    • https://localhost:44332/: API Web chiamata dall'applicazione Web ASP.NET.https://localhost:44332/ - The web API that's called by the ASP.NET web application.

Eseguire l'accesso con il proprio accountSign in using your account

  1. Fare clic su Sign up / Sign in (Iscrizione/Accesso) nell'applicazione Web ASP.NET per avviare il flusso di lavoro.Click Sign up / Sign in in the ASP.NET web application to start the workflow.

    App Web ASP.NET di esempio nel browser con collegamento per iscrizione/accesso evidenziato

    L'esempio supporta alcune opzioni di iscrizione, tra cui l'uso di un provider di identità di social networking o la creazione di un account locale tramite un indirizzo di posta elettronica.The sample supports several sign-up options including using a social identity provider or creating a local account using an email address. Per questo argomento di avvio rapido, usare un account di provider di identità basato su social network, ovvero un account di Facebook, Google o Microsoft.For this quickstart, use a social identity provider account from either Facebook, Google, or Microsoft.

  2. Azure AD B2C presenta una pagina di accesso per un'azienda fittizia denominata Fabrikam per l'applicazione Web di esempio.Azure AD B2C presents a sign-in page for a fictitious company called Fabrikam for the sample web application. Per iscriversi usando un provider di identità basato su social network, fare clic sul pulsante del provider di identità che si vuole usare.To sign up using a social identity provider, click the button of the identity provider you want to use.

    Pagina di accesso o di iscrizione che mostra i pulsanti del provider di identità

    È necessario eseguire l'autenticazione (accesso) tramite le credenziali dell'account di social networking e autorizzare l'applicazione a leggere informazioni da questo account.You authenticate (sign in) using your social account credentials and authorize the application to read information from your social account. Dopo la concessione dell'accesso, l'applicazione può recuperare le informazioni sul profilo dall'account, ad esempio il nome e la città dell'utente.By granting access, the application can retrieve profile information from the social account such as your name and city.

  3. Completare il processo di accesso per il provider di identità.Finish the sign-in process for the identity provider.

Modificare il profiloEdit your profile

Azure Active Directory B2C offre funzionalità che consentono agli utenti di aggiornare il profilo.Azure Active Directory B2C provides functionality to allow users to update their profiles. L'app Web di esempio usa un flusso utente di modifica dei profili di Azure AD B2C per il flusso di lavoro.The sample web app uses an Azure AD B2C edit profile user flow for the workflow.

  1. Sulla barra dei menu dell'applicazione fare clic sul nome del profilo e selezionare Edit profile (Modifica profilo) per modificare il profilo creato.In the application menu bar, click your profile name and select Edit profile to edit the profile you created.

    App Web di esempio nel browser con il collegamento Modifica profilo evidenziato

  2. Modificare Display name (Nome visualizzato) o City (Città) e quindi fare clic su Continue (Continua) per aggiornare il profilo.Change your Display name or City, and then click Continue to update your profile.

    La modifica viene visualizzata in alto a destra nella home page dell'applicazione Web.The changed is displayed in the upper right portion of the web application's home page.

Accedere a una risorsa API protettaAccess a protected API resource

  1. Fare clic su Elenco attività per immettere e modificare gli elementi elenco attività.Click To-Do List to enter and modify your to-do list items.

  2. Immettere il testo nella casella di testo Nuovo elemento.Enter text in the New Item text box. Fare clic su Aggiungi per chiamare l'API Web protetta di Azure AD B2C che aggiunge un elemento elenco attività.Click Add to call the Azure AD B2C protected web API that adds a to-do list item.

    App Web di esempio nel browser con l'opzione per aggiungere un elemento elenco attività

    L'applicazione Web ASP.NET include un token di accesso di Azure AD nella richiesta alla risorsa API Web protetta per l'esecuzione di operazioni sugli elementi elenco attività dell'utente.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.

È stato usato l'account utente Azure AD B2C per eseguire una chiamata autorizzata a un'API Web protetta da Azure AD B2C.You've successfully used your Azure AD B2C user account to make an authorized call an Azure AD B2C protected web API.

Pulire le risorseClean up resources

È possibile usare il tenant di Azure AD B2C se si prevede di provare altre guide introduttive o esercitazioni relative ad Azure AD B2C.You can use your Azure AD B2C tenant if you plan to try other Azure AD B2C quickstarts or tutorials. Quando non è più necessario, è possibile eliminare il tenant di Azure AD B2C.When no longer needed, you can delete your Azure AD B2C tenant.

Passaggi successiviNext steps

In questo argomento di avvio rapido è stata usata un'applicazione ASP.NET di esempio per:In this quickstart, you used a sample ASP.NET application to:

  • Accedere con una pagina di accesso personalizzataSign in with a custom login page
  • Accedere con un provider di identità basato su social networkSign in with a social identity provider
  • Creare un account Azure AD B2CCreate an Azure AD B2C account
  • Chiamare un'API Web protetta da Azure AD B2CCall a web API protected by Azure AD B2C

Iniziare ora a creare un tenant di Azure AD B2C.Get started creating your own Azure AD B2C tenant.