Share via

Guida introduttiva: Introduzione all'estensione Microsoft Entra per ID esterno per Visual Studio Code (anteprima)

  • Articolo

Si applica a: Cerchio bianco con un simbolo X grigio. Tenant esterni della forza lavoro Cerchio verde con un simbolo di segno di spunta bianco. (altre informazioni)

L'integrazione dell'autenticazione nelle applicazioni consumer e dei clienti aziendali è essenziale per proteggere le risorse e i dati dei clienti. L'estensione Microsoft Entra per ID esterno per Visual Studio Code consente di aggiungere rapidamente l'autenticazione alle applicazioni per scenari CIAM (Customer Identity and Access Management). Usando gli esempi di applicazione forniti, è possibile vedere come configurare un'esperienza di accesso personalizzata e personalizzata per gli utenti esterni dell'applicazione senza uscire dall'ambiente di sviluppo.

Screenshot che mostra una panoramica dell'estensione.

Questa estensione fornisce una configurazione di base che crea automaticamente un tenant per le applicazioni e la prepara per gli utenti. Semplifica anche il flusso di lavoro popolando automaticamente valori come gli ID applicazione nel file di configurazione per un processo di installazione più semplice.

L'ID esterno è un servizio che può essere aggiunto a una sottoscrizione di Azure. Se ne hai già uno, puoi facilmente includere l'ID esterno. In caso contrario, configurare una versione di valutazione gratuita di Microsoft Entra per ID esterno in Visual Studio Code e iniziare configurando un'app di esempio.

Installare l'estensione

L'estensione Microsoft Entra per ID esterno è disponibile in Visual Studio Code Marketplace.

  1. Se Visual Studio Code non è già installato, scaricare Visual Studio Code e completare i passaggi di installazione.
  2. Aprire Visual Studio Code. Nella barra delle attività a sinistra selezionare il pulsante Estensioni .
  3. Nella casella di ricerca Extensions Marketplace cercare e selezionare Microsoft Entra per ID esterno.
  4. Nella pagina Introduzione a Microsoft Entra per ID esterno panoramica selezionare il pulsante Installa.
  5. Riavviare Visual Studio Code quando richiesto.

Dopo aver installato l'estensione, è possibile accedervi usando l'icona sulla barra delle attività.

Screenshot che mostra le opzioni della procedura dettagliata per l'estensione aperta.

È anche possibile aprire l'estensione dalla pagina di benvenuto di Visual Studio Code: selezionare Guida>di benvenuto e quindi in Procedure dettagliate selezionare Introduzione a Microsoft Entra per ID esterno. Potrebbe essere necessario selezionare Altro per espandere l'elenco delle estensioni.

Introduzione alla configurazione dell'ID esterno

L'estensione Microsoft Entra per ID esterno crea un tenant in una configurazione esterna che contiene l'app e la directory degli utenti esterni. È possibile aggiungere questo nuovo tenant alla sottoscrizione di Azure esistente. In alternativa, se non si ha una sottoscrizione di Azure, creare un tenant di valutazione che non ne richieda uno (altre informazioni).

  • Nella pagina di benvenuto Introduzione a Microsoft Entra per ID esterno scegliere un'opzione:

    • Se non si ha già un account Azure, selezionare Configura una versione di valutazione gratuita.
    • Se si ha già un account Azure, selezionare Usa sottoscrizione di Azure.

Configurare una versione di valutazione gratuita

  1. Selezionare Configura una versione di valutazione gratuita.

  2. Nel messaggio di conferma dell'accesso selezionare Consenti.

  3. Verrà visualizzata una nuova finestra del browser. Accedere usando l'account personale, l'account Microsoft (MSA) o l'account GitHub. Dopo aver eseguito l'accesso, chiudere la finestra del browser.

  4. Tornare a Visual Studio Code. Nel menu Dove deve trovarsi il tenant? selezionare una posizione per i dati del tenant. Non sarà possibile modificare questa selezione in seguito.

  5. Immettere un nome per il tenant.

    Screenshot del campo nome tenant.

  6. L'estensione crea il tenant di valutazione. È possibile visualizzare lo stato di avanzamento aprendo la finestra Visualizza>output. Al termine del processo, viene visualizzato il tenant creato .

Usare la sottoscrizione

  1. Selezionare Usa sottoscrizione personale.

  2. Se sono presenti più tenant associati all'account, viene visualizzato il menu Scegli una directory . Selezionare la directory (tenant) associata alla sottoscrizione da usare.

    Screenshot del campo della directory.

    Nota

    Se viene visualizzato il messaggio Nessuna sottoscrizione disponibile , è possibile configurare invece una versione di valutazione gratuita.

  3. Viene visualizzata una pagina del browser in cui è possibile accedere al proprio account. Dopo l'accesso, tornare a Visual Studio Code.

  4. Nel menu Aggiungi una sottoscrizione selezionare la sottoscrizione.

  5. Nel menu Selezionare un gruppo di risorse scegliere un gruppo di risorse.

  6. Nel menu Dove deve trovarsi il tenant? selezionare una posizione per i dati del tenant. Non sarà possibile modificare questa selezione in seguito.

  7. Immettere un nome per il tenant e quindi selezionare Invio per creare il tenant.

    Screenshot del campo nome tenant della versione di valutazione.

    Nota

    Il processo di creazione del tenant può richiedere fino a 30 minuti. Dopo aver creato il tenant, è possibile accedervi sia nell'interfaccia di amministrazione di Microsoft Entra che nella portale di Azure.

Configurare l'accesso per gli utenti

È possibile configurare l'app per consentire agli utenti di accedere con il proprio indirizzo di posta elettronica e una password o un passcode monouso. È anche possibile progettare l'aspetto dell'esperienza utente aggiungendo il logo aziendale, modificando il colore di sfondo o modificando il layout di accesso. Queste modifiche si applicano all'aspetto di tutte le app in questo nuovo tenant.

  1. In Configura accesso per gli utenti selezionare Configura accesso e personalizzazione.

    Screenshot che mostra il passaggio di configurazione dell'accesso e della personalizzazione.

  2. Viene richiesto di accedere al nuovo tenant. Selezionare Consenti e nella finestra del browser visualizzata scegliere l'account attualmente in uso e accedere. Tornare a Visual Studio Code.

  3. Nella parte superiore del menu Stabilire come si desidera che gli utenti eseseguono l'accesso? scegliere il metodo di accesso che si vuole rendere disponibile agli utenti: Posta elettronica e password o Indirizzo di posta elettronica e passcode monouso.

    Screenshot che mostra i metodi di accesso.

  4. Seleziona OK.

  5. Scegliere dove visualizzare la pagina di accesso nella finestra del browser, allineata al centro o allineata a destra.

    Screenshot che mostra le selezioni del layout di accesso.

  6. Selezionare un colore di sfondo per la pagina di iscrizione.

    Screenshot che mostra i colori di sfondo.

  7. Verrà quindi visualizzata una finestra Esplora file in modo da poter aggiungere il logo aziendale. Passare al file di logo aziendale e quindi selezionare Carica.

    Nota

    I requisiti dell'immagine sono i seguenti:

    • Dimensioni immagine 245 x 36 px
    • Dimensioni massime file di 50 KB
    • Tipo di file: Transparent PNG o JPEG

  8. Viene visualizzato il messaggio Configurazione del flusso di accesso. È possibile visualizzare lo stato di avanzamento nella finestra Output. Al termine della configurazione, viene visualizzato il messaggio Installazione del flusso utente completata .

Configurare ed eseguire un'app di esempio

L'estensione contiene diversi esempi di codice che illustrano come l'autenticazione viene implementata in diversi tipi di applicazioni e linguaggi di sviluppo. Scegliere un'applicazione a pagina singola (JavaScript, React, Angular) dall'interno dell'estensione e l'estensione configura automaticamente l'applicazione con l'esperienza di accesso.

  1. In selezionare Configura ed eseguire un'app di esempio selezionare il pulsante Configura app di esempio.

    Screenshot del passaggio Configura ed esegui un'app di esempio.

  2. Nel menu selezionare il tipo di app da scaricare. Se viene richiesto di selezionare di nuovo l'account, scegliere lo stesso account in uso.

    Screenshot della selezione dell'app.

  3. Viene visualizzata una finestra Esplora file in modo da poter scegliere dove salvare il repository di esempio. Selezionare una cartella e quindi selezionare Scarica repository qui.

  4. Al termine del download, viene aperta una nuova area di lavoro del progetto di Visual Studio Code con la cartella dell'app scaricata visualizzata in Esplora risorse.

  5. Aprire un nuovo terminale nella finestra di Visual Studio Code.

  6. Nel menu in alto selezionare Esegui>senza eseguire il debug. La console di debug mostra lo stato dello script di avvio. Si verifica un breve ritardo durante la configurazione del progetto e l'esecuzione dello script di compilazione.

Quando l'estensione scarica l'applicazione, aggiorna automaticamente la configurazione di Microsoft Authentication Library (MSAL) per connettersi al nuovo tenant e per usare l'esperienza configurata. Non sono necessarie altre configurazioni; è possibile eseguire l'applicazione non appena viene compilato il progetto. Ad esempio, nel file authConfig, clientId viene impostato sull'ID applicazione e l'autorità viene impostata sul sottodominio per il nuovo tenant.

Screenshot di un file auth-config.

Eseguire l'esperienza

Al termine dell'installazione, provare l'esperienza di accesso immettendo l'URI di reindirizzamento host locale per l'applicazione in un browser. L'URL di reindirizzamento è disponibile nel file di README.md dell'applicazione.

Usare la visualizzazione Explorer

La visualizzazione Esplora risorse visualizza le applicazioni registrate e i flussi utente di autenticazione nel tenant. È possibile visualizzare le informazioni di configurazione o passare direttamente all'interfaccia di amministrazione di Microsoft Entra per configurare o gestire ulteriormente la risorsa. Per accedere alla visualizzazione Explorer, aprire l'estensione Microsoft Entra per ID esterno selezionando l'icona nella barra delle attività.

Gestione risorse

Per visualizzare le risorse del progetto, espandere i nodi nel pannello sinistro in Gestisci risorse.

Screenshot della visualizzazione Explorer.

Nella visualizzazione Explorer è possibile selezionare una risorsa e passare direttamente all'interfaccia di amministrazione di Microsoft Entra per gestirla o configurarla. Ad esempio, fare clic con il pulsante destro del mouse su un'applicazione e selezionare Apri nell'interfaccia di amministrazione. Viene richiesto di eseguire l'accesso e quindi l'interfaccia di amministrazione di Microsoft Entra si apre direttamente alla pagina di registrazione dell'app per l'applicazione.

Screenshot dell'opzione apri nell'interfaccia di amministrazione.

Azioni introduttive

Nella sezione Introduzione è possibile accedere alla documentazione per la versione di valutazione gratuita oppure passare direttamente alla configurazione dell'esperienza di accesso o alle pagine di download di app di esempio senza aprire la procedura dettagliata dell'estensione.

Screenshot dell'opzione di menu a sinistra per avviare la procedura dettagliata.

Passaggi successivi

Altre informazioni sui tenant della versione di valutazione gratuita di ID esterno.