Autenticare le app JavaScript nei servizi di Azure durante lo sviluppo locale usando account per sviluppatori

Quando si creano applicazioni cloud, gli sviluppatori devono eseguire il debug e il test delle applicazioni nella workstation locale. Quando un'applicazione viene eseguita nella workstation di uno sviluppatore durante lo sviluppo locale, deve comunque eseguire l'autenticazione a tutti i servizi di Azure usati dall'app. Questo articolo illustra come usare le credenziali di Azure di uno sviluppatore per autenticare l'app in Azure durante lo sviluppo locale.

Affinché un'app esegua l'autenticazione in Azure durante lo sviluppo locale usando le credenziali di Azure dello sviluppatore, lo sviluppatore deve accedere ad Azure dall'estensione Strumenti di Azure di Visual Studio Code, dall'interfaccia della riga di comando di Azure o da Azure PowerShell. Azure SDK per JavaScript è in grado di rilevare che lo sviluppatore ha eseguito l'accesso da uno di questi strumenti e quindi ottenere le credenziali necessarie dalla cache delle credenziali per autenticare l'app in Azure come utente connesso.

Questo approccio è più semplice da configurare per un team di sviluppo perché sfrutta gli account Azure esistenti degli sviluppatori. Tuttavia, l'account di uno sviluppatore avrà probabilmente più autorizzazioni rispetto a quelle richieste dall'applicazione, superando quindi le autorizzazioni eseguite dall'app nell'ambiente di produzione. In alternativa, è possibile creare entità servizio dell'applicazione da usare durante lo sviluppo locale, che possono essere definite come ambito per avere solo l'accesso necessario per l'app.

1 - Creare un gruppo Microsoft Entra per lo sviluppo locale

Poiché ci sono quasi sempre più sviluppatori che lavorano su un'applicazione, è consigliabile creare prima un gruppo Di Entra di Microsoft per incapsulare i ruoli (autorizzazioni) necessari per l'app nello sviluppo locale. Questo offre i vantaggi seguenti:

• Ogni sviluppatore ha la certezza di avere gli stessi ruoli assegnati perché i ruoli vengono assegnati a livello di gruppo.
• Se è necessario un nuovo ruolo per l'app, deve essere aggiunto solo al gruppo Microsoft Entra per l'app.
• Se un nuovo sviluppatore si aggiunge al team, deve semplicemente essere aggiunto al gruppo Microsoft Entra corretto per ottenere le autorizzazioni corrette per lavorare sull'app.

Se si dispone di un gruppo Microsoft Entra esistente per il team di sviluppo, è possibile usare tale gruppo. In caso contrario, completare la procedura seguente per creare un gruppo Microsoft Entra.

Azure portal

Istruzioni	Schermata
Passare alla pagina MICROSOFT Entra ID nella portale di Azure digitando Microsoft Entra ID nella casella di ricerca nella parte superiore della pagina e quindi selezionando Microsoft Entra ID da in servizi.
Nella pagina Microsoft Entra ID selezionare Gruppi dal menu a sinistra.
Nella pagina Tutti i gruppi, selezionare Nuovo gruppo.
Nella pagina Nuovo gruppo: Tipo di gruppo → Sicurezza. Nome gruppo → Un nome per il gruppo di sicurezza, in genere creato dal nome dell'applicazione. È anche utile includere una stringa come local-dev nel nome del gruppo per indicare lo scopo del gruppo. Descrizione del gruppo → Una descrizione dello scopo del gruppo. Selezionare il collegamento Nessun membro selezionato in Membri per aggiungere membri al gruppo.
Nella finestra di dialogo Aggiungi membri: Usare la casella di ricerca per filtrare l'elenco di nomi utente nell'elenco. Scegliere uno o più utenti per lo sviluppo locale per questa app. Quando si sceglie un oggetto, l'oggetto passa all'elenco Elementi selezionati nella parte inferiore della finestra di dialogo. Al termine, scegliere il pulsante Seleziona .
Nella pagina Nuovo gruppo, selezionare Crea per creare il gruppo. Il gruppo verrà creato e si tornerà alla pagina Tutti i gruppi. La visualizzazione del gruppo potrebbe richiedere fino a 30 secondi e potrebbe essere necessario aggiornare la pagina a causa della memorizzazione nella cache nel portale di Azure.

Interfaccia della riga di comando di Azure

Il comando az ad group create viene usato per creare gruppi in Microsoft Entra ID. I parametri --display-name e --main-nickname sono obbligatori. Il nome assegnato al gruppo deve essere basato sul nome dell'applicazione. È anche utile includere una stringa come local-dev nel nome del gruppo per indicare lo scopo del gruppo.

az ad group create \
    --display-name MyDisplay \
    --mail-nickname MyDisplay  \
    --description <group-description>

Per aggiungere membri al gruppo, è necessario l'ID oggetto dell'utente di Azure. Usare az ad user list per elencare le entità servizio disponibili. Il comando del parametro --filter accetta filtri di stile OData e può essere usato per filtrare l'elenco in base al nome visualizzato dell'utente, come illustrato. Il --query parametro restituisce le colonne specificate.

az ad user list \
    --filter "startswith(displayName, 'Bob')" \
    --query "[].{objectId:objectId, displayName:displayName}" \
    --output table

Il comando az ad group member add può quindi essere usato per aggiungere membri ai gruppi.

az ad group member add \
    --group <group-name> \
    --member-id <object-id>

2 - Assegnare ruoli al gruppo Microsoft Entra

Successivamente, è necessario determinare i ruoli (autorizzazioni) necessari per l'app in base alle risorse e assegnare tali ruoli all'app. In questo esempio i ruoli vengono assegnati al gruppo Microsoft Entra creato nel passaggio 1. I ruoli possono essere assegnati a una risorsa, a gruppo di risorse o a una sottoscrizione. Questo esempio illustra come assegnare ruoli nell'ambito del gruppo di risorse perché la maggior parte delle applicazioni raggruppa tutte le risorse di Azure in un singolo gruppo di risorse.

Azure portal

Istruzioni	Schermata
Individuare il gruppo di risorse per l'applicazione cercando il nome del gruppo di risorse usando la casella di ricerca nella parte superiore del portale di Azure. Passare al gruppo di risorse selezionando il nome del gruppo di risorse nell'intestazione Gruppi di risorse della finestra di dialogo.
Nella pagina del gruppo di risorse selezionare Controllo di accesso (IAM) nel menu a sinistra.
Nella pagina Controllo di accesso (IAM): Selezionare la scheda Assegnazioni di ruolo. Selezionare + Aggiungi nel menu in alto e quindi Aggiungi assegnazione di ruolo nel menu a discesa risultante.
Nella pagina Aggiungi assegnazione di ruolo sono elencati tutti i ruoli che è possibile assegnare per il gruppo di risorse. Usare la casella di ricerca per filtrare l'elenco in modo da renderlo più gestibile. Questo esempio illustra come filtrare i ruoli di BLOB del servizio di archiviazione. Selezionare il ruolo che si vuole assegnare. Selezionare Avanti per passare alla schermata successiva.
La pagina Aggiungi assegnazione di ruolo successiva consente di specificare a quale utente assegnare il ruolo. Selezionare Utente, gruppo o servizio principale in Assegnazione dell'accesso a . Selezionare + Selezionare membri in Membri Viene visualizzata una finestra di dialogo sul lato destro del portale di Azure.
Nella finestra di dialogo Seleziona membri: La casella di testo Seleziona può essere usata per filtrare l'elenco di utenti e gruppi nella sottoscrizione. Se necessario, digitare i primi caratteri del gruppo Microsoft Entra di sviluppo locale creato per l'app. Selezionare il gruppo Microsoft Entra di sviluppo locale associato all'applicazione. Selezionare Seleziona nella parte inferiore della finestra di dialogo per continuare.
Il gruppo Microsoft Entra viene visualizzato come selezionato nella schermata Aggiungi assegnazione di ruolo. Selezionare Rivedi e assegna per passare alla pagina finale e quindi Rivedi e assegna di nuovo per completare il processo.

Interfaccia della riga di comando di Azure

A un'entità servizio dell'applicazione viene assegnato un ruolo in Azure usando il comando az role assignment create.

az role assignment create --assignee "{appId}" \
    --scope /subscriptions/"{subscriptionName}" \
    --role "{roleName}" \
    --resource-group "{resourceGroupName}"

Per ottenere i nomi di ruolo a cui è possibile assegnare un'entità servizio, usare il comando az role definition list.

az role definition list --query "sort_by([].{roleName:roleName, description:description}, &roleName)" --output table

Ad esempio, per consentire all'entità servizio dell'applicazione il valore appId di 00000000-0000-0000-0000-000000000000 lettura, scrittura ed eliminazione dell'accesso a Archiviazione di Azure contenitori BLOB e dati a tutti gli account di archiviazione nel gruppo di risorse msdocs-sdk-auth-example, è necessario assegnare l'entità servizio dell'applicazione al ruolo collaboratore ai dati BLOB Archiviazione usando il comando seguente.

az role assignment create --assignee "00000000-0000-0000-0000-000000000000" \
    --scope /subscriptions/"Storage Blob Data Subscriber" \
    --role "Storage Blob Data Contributor" \
    --resource-group "msdocs-sdk-auth-example"

Per informazioni sull'assegnazione delle autorizzazioni a livello di risorsa o sottoscrizione tramite l'interfaccia della riga di comando di Azure, vedere l'articolo Assegnare ruoli di Azure usando l'interfaccia della riga di comando di Azure.

3 - Accedere ad Azure usando VS Code, l'interfaccia della riga di comando di Azure o Azure PowerShell

Azure PowerShell

Aprire un terminale nella workstation per sviluppatori e accedere ad Azure da Azure PowerShell.

Connect-AzAccount

4 - Implementare DefaultAzureCredential nell'applicazione

Per autenticare gli oggetti client di Azure SDK in Azure, l'applicazione deve usare la DefaultAzureCredential classe del @azure/identity pacchetto. In questo scenario, DefaultAzureCredential verificherà in sequenza se lo sviluppatore ha eseguito l'accesso ad Azure usando l'estensione strumenti di Azure di VS Code, l'interfaccia della riga di comando di Azure o Azure PowerShell. Se lo sviluppatore ha eseguito l'accesso ad Azure usando uno di questi strumenti, le credenziali usate per accedere allo strumento verranno usate dall'app per l'autenticazione in Azure.

Per iniziare, aggiungere il pacchetto di @azure/identità all'applicazione.

npm install @azure/identity

Successivamente, per qualsiasi codice JavaScript che crea un oggetto client azure SDK nell'app, è necessario:

1. Importare la DefaultAzureCredential classe dal @azure/identity modulo.
2. Creare un oggetto DefaultAzureCredential.
3. Passare l'oggetto al costruttore dell'oggetto DefaultAzureCredential client di Azure SDK.

Un esempio è illustrato nel segmento di codice seguente.

import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';

// Acquire a credential object
const tokenCredential = DefaultAzureCredential();

const blobServiceClient = BlobServiceClient(
        `https://${accountName}.blob.core.windows.net`,
        tokenCredential
);

DefaultAzureCredential rileverà automaticamente il meccanismo di autenticazione configurato per l'app e otterrà i token necessari per autenticare l'app in Azure. Se un'applicazione usa più client SDK, è possibile usare lo stesso oggetto credenziale con ogni oggetto client SDK.