Accedere agli utenti in un'applicazione desktop Electron di esempio

Questa guida pratica usa un'applicazione desktop Electron di esempio per illustrare come aggiungere l'autenticazione a un'applicazione desktop. L'applicazione di esempio consente agli utenti di accedere e disconnettersi. L'applicazione Web di esempio usa Microsoft Authentication Library (MSAL) per Node per gestire l'autenticazione.

In questo articolo vengono eseguite le attività seguenti:

• Registrare un'applicazione desktop nell'interfaccia di amministrazione di Microsoft Entra.

• Creare un flusso utente di accesso e disconnesso nell'interfaccia di amministrazione di Microsoft Entra.

• Associare l'applicazione Web al flusso utente.

• Aggiornare un'applicazione desktop Electron di esempio usando i dettagli del tenant esterno.

• Eseguire e testare l'applicazione desktop di esempio.

Prerequisiti

• Node.js.

• Visual Studio Code o un altro editor di codice.

• Un tenant esterno. Se non è già disponibile, iscriversi per ottenere una versione di valutazione gratuita.

Registrare l'app desktop

Per consentire all'applicazione di accedere agli utenti con Microsoft Entra, Microsoft Entra per ID esterno deve essere informato dell'applicazione creata. La registrazione dell'app stabilisce una relazione di trust tra l'app e Microsoft Entra. Quando si registra un'applicazione, l'ID esterno genera un identificatore univoco noto come ID applicazione (client), un valore usato per identificare l'app durante la creazione di richieste di autenticazione.

I passaggi seguenti illustrano come registrare l'app nell'interfaccia di amministrazione di Microsoft Entra:

1. Accedere all'interfaccia di amministrazione di Microsoft Entra come almeno uno sviluppatore di applicazioni.

2. Se si ha accesso a più tenant, usare l'icona Impostazioni nel menu in alto per passare al tenant esterno dal menu Directory e sottoscrizioni.

3. Passare a Applicazioni> di identità>Registrazioni app.

4. Seleziona + Nuova registrazione.

5. Nella pagina Registra un'applicazione visualizzata;

   1. Immettere un nome di applicazione significativo visualizzato agli utenti dell'app, ad esempio ciam-client-app.
   2. In Tipi di account supportati selezionare Account solo in questa directory organizzativa.

6. Selezionare Registra.

7. Al termine della registrazione, viene visualizzato il riquadro Panoramica dell'applicazione. Registrare l'ID applicazione (client) da usare nel codice sorgente dell'applicazione.

Per specificare il tipo di app per la registrazione dell'app, seguire questa procedura:

1. In Gestisci selezionare Autenticazione.
2. Nella pagina Configurazioni della piattaforma selezionare Aggiungi una piattaforma e quindi selezionare l'opzione Applicazioni per dispositivi mobili e desktop .
3. Per gli URI di reindirizzamento personalizzati immettere http://localhost, quindi selezionare Configura.
4. Selezionare Configura per salvare le modifiche.

Concedere le autorizzazioni delle API

1. Nella pagina Registrazioni app selezionare l'applicazione creata (ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.

2. In Gestisci selezionare Autorizzazioni API.

3. In Autorizzazioni configurate selezionare Aggiungi un'autorizzazione.

4. Selezionare la scheda API Microsoft.

5. Nella sezione API Microsoft comunemente usate selezionare Microsoft Graph.

6. Selezionare l'opzione Autorizzazioni delegate.

7. Nella sezione Seleziona autorizzazioni cercare e selezionare sia openidche offline_access autorizzazioni.

8. Selezionare il pulsante Aggiungi autorizzazioni.

9. A questo punto, le autorizzazioni sono state assegnate correttamente. Tuttavia, poiché il tenant è un tenant di un cliente, gli utenti consumer stessi non possono fornire il consenso a queste autorizzazioni. L'amministratore deve fornire il consenso a queste autorizzazioni per conto di tutti gli utenti nel tenant:

   1. Selezionare Concedi consenso amministratore per <il nome> del tenant e quindi selezionare Sì.
   2. Selezionare Aggiorna, quindi verificare che Concesso per <il nome> del tenant venga visualizzato in Stato per entrambi gli ambiti.

Configurare le attestazioni facoltative

1. In Gestisci selezionare la configurazione del token.

2. Seleziona Aggiungi un'attestazione facoltativa.

3. Selezionare il tipo di attestazione facoltativo e quindi scegliere ID.

4. Selezionare l'attestazione facoltativa login_hint.

5. Selezionare Aggiungi per salvare le modifiche.

Creare un flusso utente

Seguire questa procedura per creare un flusso utente che un cliente può usare per accedere o iscriversi a un'applicazione.

1. Accedere all'interfaccia di amministrazione di Microsoft Entra come almeno un flusso utente CON ID esterno Amministrazione istrator.

2. Se si ha accesso a più tenant, usare l'icona Impostazioni nel menu in alto per passare al tenant esterno dal menu Directory e sottoscrizioni.

3. Passare a Identità>esterne Flussi> utente.

4. Selezionare + Nuovo flusso utente.

5. Nella pagina Crea :

   1. Immettere un nome per il flusso utente, ad esempio SignInSignUpSample.

   2. Nell'elenco Provider di identità selezionare Account di posta elettronica. Questo provider di identità consente agli utenti di accedere o iscriversi usando il proprio indirizzo di posta elettronica.

      Nota

      I provider di identità aggiuntivi verranno elencati qui solo dopo aver configurato la federazione con essi. Ad esempio, se si configura la federazione con Google o Facebook, sarà possibile selezionare questi provider di identità aggiuntivi qui.

   3. In Account di posta elettronica è possibile selezionare una delle due opzioni. Per questa esercitazione selezionare Posta elettronica con password.

      • Posta elettronica con password: consente ai nuovi utenti di iscriversi e accedere usando un indirizzo di posta elettronica come nome di accesso e una password come prima credenziale fattore.
      • Passcode monouso tramite posta elettronica: consente ai nuovi utenti di iscriversi e accedere usando un indirizzo di posta elettronica come nome di accesso e passcode monouso come prima credenziale di fattore. Il passcode monouso della posta elettronica deve essere abilitato a livello di tenant (Tutti i provider di>identità con passcode monouso) perché questa opzione sia disponibile a livello di flusso utente.

   4. In Attributi utente scegliere gli attributi da raccogliere dall'utente al momento dell'iscrizione. Selezionando Mostra altro, è possibile scegliere attributi e attestazioni per Paese/area geografica, Nome visualizzato e Codice postale. Seleziona OK. Gli utenti vengono richiesti solo gli attributi quando si registrano per la prima volta.

6. Seleziona Crea. Il nuovo flusso utente viene visualizzato nell'elenco Flussi utente. Se necessario, aggiornare la pagina.

Per abilitare la reimpostazione della password self-service, seguire la procedura descritta nell'articolo Abilitare la reimpostazione della password self-service.

Associare l'applicazione Web al flusso utente

Anche se molte applicazioni possono essere associate al flusso utente, una singola applicazione può essere associata solo a un flusso utente. Un flusso utente consente la configurazione dell'esperienza utente per applicazioni specifiche. Ad esempio, è possibile configurare un flusso utente che richiede agli utenti di accedere o iscriversi con l'indirizzo di posta elettronica.

1. Nel menu della barra laterale selezionare Identità.

2. Selezionare Identità esterne e quindi Flussi utente.

3. Nella pagina Flussi utente selezionare il nome del flusso utente creato in precedenza, ad esempio SignInSignUpSample.

4. In Usa selezionare Applicazioni.

5. Seleziona Aggiungi applicazione.

6. Selezionare l'applicazione dall'elenco, ad esempio ciam-client-app , oppure usare la casella di ricerca per trovare l'applicazione e quindi selezionarla.

7. Scegli Seleziona.

Clonare o scaricare un'applicazione Web di esempio

Per ottenere il codice di esempio dell'app desktop, scaricare il file di .zip o clonare l'applicazione Web di esempio da GitHub eseguendo il comando seguente:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Se si sceglie di scaricare il .zip file, estrarre il file dell'app di esempio in una cartella in cui la lunghezza totale del percorso è di 260 o meno caratteri.

Installare le dipendenze del progetto

1. Aprire una finestra della console e passare alla directory che contiene l'app di esempio Electron:

   cd 1-Authentication\3-sign-in-electron\App
   

2. Eseguire i comandi seguenti per installare le dipendenze dell'app:

   npm install && npm update
   

Configurare l'app Web di esempio

1. Nell'editor di codice aprire il App\authConfig.js file.

2. Trovare il segnaposto:

   1. Enter_the_Application_Id_Here e sostituirlo con l'ID applicazione (client) dell'app registrata in precedenza.

   2. Enter_the_Tenant_Subdomain_Here e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non si ha il nome del tenant, vedere come leggere i dettagli del tenant.

Eseguire e testare un'app Web di esempio

È ora possibile testare l'app desktop Electron di esempio. Dopo aver eseguito l'app, la finestra dell'app desktop viene visualizzata automaticamente:

1. Nel terminale eseguire il comando seguente:

   npm start
   

   

2. Nella finestra desktop visualizzata selezionare il pulsante Accedi o Iscriviti . Viene visualizzata una finestra del browser e viene richiesto di eseguire l'accesso.

3. Nella pagina di accesso del browser digitare l'indirizzo di posta elettronica, selezionare Avanti, digitare la password e quindi selezionare Accedi. Se non si ha un account, selezionare Nessun account? Creare un collegamento, che avvia il flusso di iscrizione.

4. Se si sceglie l'opzione di iscrizione, dopo aver compilato il messaggio di posta elettronica, il passcode monouso, la nuova password e altri dettagli dell'account, completare l'intero flusso di iscrizione. Viene visualizzata una pagina simile allo screenshot seguente. Se si sceglie l'opzione di accesso, viene visualizzata una pagina simile. Nella pagina vengono visualizzate le attestazioni ID token.

   

Vedi anche

• Abilitare la reimpostazione della password.
• Personalizzare la personalizzazione predefinita.
• Configurare l'accesso con Google.
• Esplorare il codice di esempio dell'app desktop Electron.