Avvio rapido: Configurare l'accesso per un'app a singola pagina tramite Azure Active Directory B2CQuickstart: Set up sign in for a single-page app 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 di avvio rapido si usa un'applicazione a pagina singola 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 a single-page 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

Eseguire l'applicazioneRun the application

  1. Avviare il server eseguendo questi comandi al prompt dei comandi di Node.js:Start the server by running the following commands from the Node.js command prompt:

    npm install && npm update
    npm start
    

    Il server avviato da server. js visualizza la porta su cui è in ascolto:The server started by server.js displays the port it's listening on:

    Listening on port 6420...
    
  2. Passare all'URL dell'applicazione.Browse to the URL of the application. Ad esempio: http://localhost:6420.For example, http://localhost:6420.

    App di esempio dell'applicazione a pagina singola visualizzata nel browser

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

  1. Selezionare Accedi per iniziare il percorso utente.Select Sign In to start the user journey.

  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, selezionare il pulsante del provider di identità che si vuole usare.To sign up using a social identity provider, select 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.

Accedere a una risorsa API protettaAccess a protected API resource

Selezionare Call API (Chiama API) se si vuole che l'API Web restituisca il nome visualizzato come oggetto JSON.Select Call API to have your display name returned from the web API as a JSON object.

Applicazione di esempio nel browser che mostra la risposta dell'API Web

L'applicazione a pagina singola include un token di accesso nella richiesta alla risorsa API Web protetta.The sample single-page application includes an access token in the request to the protected web API resource.

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 a pagina singola di esempio per:In this quickstart, you used a sample single-page application to:

  • Accedere con un provider di identità basato su social networkSign in with a social identity provider
  • Creare un account utente Azure AD B2C (creato automaticamente all'accesso)Create an Azure AD B2C user account (created automatically at sign-in)
  • 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.