Autenticare le app JavaScript nei servizi di Azure durante lo sviluppo locale usando le entità servizio

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 configurare oggetti entità servizio dell'applicazione dedicati da usare durante lo sviluppo locale.

Diagramma che mostra come un'app JavaScript durante lo sviluppo locale usa le credenziali dello sviluppatore per connettersi ad Azure ottenendo tali credenziali negli strumenti di sviluppo installati localmente.

Le entità servizio dell'applicazione dedicate per lo sviluppo locale consentono di seguire il principio dei privilegi minimi durante lo sviluppo di app. Poiché l'ambito delle autorizzazioni è esattamente quello necessario per l'app durante lo sviluppo, il codice dell'app non può accedere accidentalmente a una risorsa di Azure destinata all'uso da parte di un'app diversa. Questo metodo impedisce inoltre che si verifichino bug quando l'app viene spostata nell'ambiente di produzione perché l'app è stata priva di privilegi nell'ambiente di sviluppo.

Un'entità servizio dell'applicazione viene configurata per l'app quando l'app viene registrata in Azure. Quando si registrano app per lo sviluppo locale, è consigliabile:

  • Creare registrazioni app separate per ogni sviluppatore che lavora sull'app. Questo metodo crea entità servizio applicazione separate per ogni sviluppatore da usare durante lo sviluppo locale ed evitare la necessità per gli sviluppatori di condividere le credenziali per una singola entità servizio dell'applicazione.
  • Creare registrazioni di app separate per ogni app. Questo definisce l'ambito delle autorizzazioni dell'app solo a ciò che è necessario per l'app.

Durante lo sviluppo locale, le variabili di ambiente vengono impostate con l'identità dell'entità servizio dell'applicazione. Azure SDK per JavaScript legge queste variabili di ambiente e usa queste informazioni per autenticare l'app nelle risorse di Azure necessarie.

1 - Registrare l'applicazione in Azure

Gli oggetti entità servizio dell'applicazione vengono creati con una registrazione dell'app in Azure. È possibile creare entità servizio usando il portale di Azure o l'interfaccia della riga di comando di Azure.

Accedere al portale di Azure e seguire la procedura seguente.

Istruzioni Schermata
Nel portale di Azure:
  1. Immettere registrazioni app nella barra di ricerca nella parte superiore del portale di Azure.
  2. Selezionare l'elemento etichettato Registrazioni app sotto l'intestazione Servizi del menu visualizzato sotto la barra di ricerca.
Screenshot che mostra come usare la barra di ricerca superiore nella portale di Azure per trovare e passare alla pagina Registrazioni app.
Nella pagina registrazioni app, selezionare + Nuova registrazione. Screenshot che mostra il percorso del pulsante Nuova registrazione nella pagina Registrazioni app.
Nella pagina Registrare un'applicazione, compilare il modulo come segue.
  1. Nome → Immettere un nome per la registrazione app in Azure. È consigliabile che questo nome includa il nome dell'app, l'utente per la registrazione dell'app e un identificatore come "dev" per indicare che la registrazione dell'app è da usare nello sviluppo locale.
  2. Tipi di account supportatiAccount solo in questa directory organizzativa.
Selezionare Registra per registrare l'app e creare l'entità servizio dell'applicazione.
Screenshot che mostra come compilare la pagina Registra un'applicazione assegnando all'app un nome e specificando i tipi di account supportati come account solo in questa directory organizzativa.
Nella pagina Registrazione app per l'app:
  1. ID applicazione (client) → Questo è l'ID app che l'app userà per accedere ad Azure durante lo sviluppo locale. Copiare questo valore in una posizione temporanea in un editor di testo perché sarà necessario in un passaggio futuro.
  2. ID directory (tenant) → Questo valore sarà necessario anche per l'app quando esegue l'autenticazione in Azure. Copiare questo valore in una posizione temporanea in un editor di testo, in quanto sarà necessario in un passaggio futuro.
  3. Credenziali client → È necessario impostare le credenziali client per l'app prima che l'app possa eseguire l'autenticazione in Azure e usare i servizi di Azure. Selezionare Aggiungi un certificato o un segreto per aggiungere le credenziali per l'app.
Screenshot dopo che la registrazione dell'app è stata completata con il percorso dell'ID applicazione, l'ID tenant.
Nella pagina Certificati e segreti, selezionare + Nuovo segreto client. Screenshot che mostra il percorso del collegamento da usare per creare un nuovo segreto client nella pagina certificati e segreti.
La finestra di dialogo Aggiungi un segreto client verrà visualizzata dal lato destro della pagina. In questa finestra di dialogo:
  1. Descrizione → Immettere un valore Corrente.
  2. Scade → Selezionare un valore di 24 mesi.
Selezionare Aggiungere per aggiungere il segreto.
Screenshot che mostra la pagina in cui viene aggiunto un nuovo segreto client per l'entità servizio dell'applicazione creata dal processo di registrazione dell'app.
Nella pagina Certificati e segreti verrà visualizzato il valore del segreto client.

Copiare questo valore in una posizione temporanea in un editor di testo perché sarà necessario in un passaggio futuro.

IMPORTANTE: questa è l'unica volta che verrà visualizzato questo valore. Dopo aver lasciato o aggiornato questa pagina, non sarà più possibile visualizzare questo valore. È possibile aggiungere altri segreti client senza invalidare questo segreto client, ma questo valore non verrà visualizzato di nuovo.
Screenshot che mostra la pagina con il segreto client generato.

2 - Creare un gruppo di sicurezza Microsoft Entra per lo sviluppo locale

Poiché in genere più sviluppatori che lavorano su un'applicazione, è consigliabile creare un gruppo Microsoft Entra per incapsulare i ruoli (autorizzazioni) necessari per l'app nello sviluppo locale anziché assegnare i ruoli ai singoli oggetti entità servizio. 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, viene creata una nuova entità servizio dell'applicazione per lo sviluppatore e aggiunta al gruppo, assicurando che lo sviluppatore disponga delle autorizzazioni appropriate per lavorare sull'app.
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. Screenshot che mostra come usare la barra di ricerca superiore nella portale di Azure per cercare e passare alla pagina MICROSOFT Entra ID.
Nella pagina Microsoft Entra ID selezionare Gruppi dal menu a sinistra. Screenshot che mostra la posizione della voce di menu Gruppi nel menu a sinistra della pagina Microsoft Entra ID Default Directory.
Nella pagina Tutti i gruppi, selezionare Nuovo gruppo. Screenshot che mostra la posizione del pulsante Nuovo gruppo nella pagina Tutti i gruppi.
Nella pagina Nuovo gruppo:
  1. Tipo di gruppo: → Sicurezza
  2. 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.
  3. Descrizione del gruppo → Una descrizione dello scopo del gruppo.
  4. Selezionare il collegamento Nessun membro selezionato in Membri per aggiungere membri al gruppo.
Screenshot che mostra come creare un nuovo gruppo Microsoft Entra per l'applicazione.
Nella finestra di dialogo Aggiungi membri:
  1. Usare la casella di ricerca per filtrare l'elenco di nomi principali nell'elenco.
  2. Selezionare le entità servizio dell'applicazione per lo sviluppo locale per questa app. Quando vengono selezionati gli oggetti, verranno disabilitati e spostati nell'elenco Elementi selezionati nella parte inferiore della finestra di dialogo.
  3. Al termine, selezionare il pulsante Seleziona.
Screenshot della finestra di dialogo Aggiungi membri che mostra come selezionare le entità servizio dell'applicazione da includere nel gruppo.
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.
Screenshot della pagina Nuovo gruppo che mostra come completare il processo selezionando il pulsante Crea.

3 - Assegnare ruoli all'applicazione

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 2. 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.

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.
Screenshot che mostra come usare la casella di ricerca superiore nel portale di Azure per individuare e passare al gruppo di risorse a cui assegnare ruoli (autorizzazioni).
Nella pagina del gruppo di risorse selezionare Controllo di accesso (IAM) nel menu a sinistra. Screenshot della pagina del gruppo di risorse che mostra la posizione della voce di menu Controllo di accesso (IAM).
Nella pagina Controllo di accesso (IAM):
  1. Selezionare la scheda Assegnazioni di ruolo.
  2. Selezionare + Aggiungi nel menu in alto e quindi Aggiungi assegnazione di ruolo nel menu a discesa risultante.
Screenshot che mostra come passare alla scheda Assegnazioni di ruolo e alla posizione del pulsante usato per aggiungere assegnazioni di ruolo a un gruppo di risorse.
Nella pagina Aggiungi assegnazione di ruolo sono elencati tutti i ruoli che è possibile assegnare per il gruppo di risorse.
  1. 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.
  2. Selezionare il ruolo che si vuole assegnare.
    Selezionare Avanti per passare alla schermata successiva.
Screenshot che mostra come filtrare e selezionare le assegnazioni di ruolo da aggiungere al gruppo di risorse.
La pagina Aggiungi assegnazione di ruolo successiva consente di specificare a quale utente assegnare il ruolo.
  1. Selezionare Utente, gruppo o servizio principale in Assegnazione dell'accesso a .
  2. Selezionare + Selezionare membri in Membri
Viene visualizzata una finestra di dialogo sul lato destro del portale di Azure.
Screenshot che mostra il pulsante di opzione a cui selezionare per assegnare un ruolo a un gruppo Microsoft Entra e il collegamento usato per selezionare il gruppo a cui assegnare il ruolo.
Nella finestra di dialogo Seleziona membri:
  1. 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.
  2. Selezionare il gruppo Microsoft Entra di sviluppo locale associato all'applicazione.
Selezionare Seleziona nella parte inferiore della finestra di dialogo per continuare.
Screenshot che mostra come filtrare e selezionare il gruppo Microsoft Entra per l'applicazione nella finestra di dialogo Seleziona membri.
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.
Screenshot che mostra la pagina Aggiungi assegnazione di ruolo completata e il percorso del pulsante Rivedi e assegna usato per completare il processo.

4 - Impostare le variabili di ambiente di sviluppo locale

L'oggetto DefaultAzureCredential cerca le informazioni sull'entità servizio in un set di variabili di ambiente in fase di esecuzione. Poiché la maggior parte degli sviluppatori lavora su più applicazioni, è consigliabile usare un pacchetto come dotenv per accedere all'ambiente da un .env file archiviato nella directory dell'applicazione durante lo sviluppo. In questo modo le variabili di ambiente usate per autenticare l'applicazione in Azure possono essere usate solo da questa applicazione.

Il .env file non viene mai archiviato nel controllo del codice sorgente perché contiene la chiave privata dell'applicazione per Azure. Il file .gitignore standard per JavaScript esclude automaticamente il file dall'archiviazione.env.

Per usare il dotenv pacchetto, installare prima di tutto il pacchetto nell'applicazione.

npm install dotenv

Creare quindi un .env file nella directory radice dell'applicazione. Impostare i valori delle variabili di ambiente con i valori ottenuti dal processo di registrazione dell'app come indicato di seguito:

  • AZURE_CLIENT_ID → Il valore dell'ID dell'app.
  • AZURE_TENANT_ID → Il valore dell'ID del tenant.
  • AZURE_CLIENT_SECRET → Password/credenziali generate per l'app.
AZURE_CLIENT_ID=00000000-0000-0000-0000-000000000000
AZURE_TENANT_ID=11111111-1111-1111-1111-111111111111
AZURE_CLIENT_SECRET=abcdefghijklmnopqrstuvwxyz

Infine, nel codice di avvio per l'applicazione usare la dotenv libreria per leggere le variabili di ambiente dal file all'avvio .env .

import 'dotenv/config'

5 - 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 rileva le variabili AZURE_CLIENT_IDdi ambiente , AZURE_TENANT_IDe vengono impostate e AZURE_CLIENT_SECRET leggono tali variabili per ottenere le informazioni sull'entità servizio dell'applicazione con cui connettersi ad 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.

// Azure authentication dependency
import { DefaultAzureCredential } from '@azure/identity';

// Azure resource management dependency
import { SubscriptionClient } from "@azure/arm-subscriptions";

// Acquire credential
const tokenCredential = new DefaultAzureCredential();

async function listSubscriptions() {
  try {

    // use credential to authenticate with Azure SDKs
    const client = new SubscriptionClient(tokenCredential);

    // get details of each subscription
    for await (const item of client.subscriptions.list()) {
      const subscriptionDetails = await client.subscriptions.get(
        item.subscriptionId
      );
      /* 
        Each item looks like:
      
        {
          id: '/subscriptions/123456',
          subscriptionId: '123456',
          displayName: 'YOUR-SUBSCRIPTION-NAME',
          state: 'Enabled',
          subscriptionPolicies: {
            locationPlacementId: 'Internal_2014-09-01',
            quotaId: 'Internal_2014-09-01',
            spendingLimit: 'Off'
          },
          authorizationSource: 'RoleBased'
        },
    */
      console.log(subscriptionDetails);
    }
  } catch (err) {
    console.error(JSON.stringify(err));
  }
}

listSubscriptions()
  .then(() => {
    console.log("done");
  })
  .catch((ex) => {
    console.log(ex);
  });

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.