Condividi tramite

Accedere agli utenti in un'applicazione desktop Electron di esempio

  • Articolo

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

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 di disconnettersi. L'applicazione Web di esempio usa Microsoft Authentication Library (MSAL) per Node per gestire l'autenticazione.

In questo articolo si apprenderà come eseguire le attività seguenti:

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

  • Creare un flusso di accesso e disconnessione utente 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

Registrare l'app desktop

Per consentire all'applicazione di accedere agli utenti con Microsoft Entra, Microsoft Entra External ID deve essere a conoscenza 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.

La procedura seguente spiega come registrare l'app nell'Interfaccia di amministrazione di Microsoft Entra:

  1. Accedere all’Interfaccia di amministrazione di Microsoft Entra almeno come 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 Identità>Applicazioni>Registrazioni app.

  4. Seleziona + Nuova registrazione.

  5. Nella pagina Registra un'applicazione che viene visualizzata:

    1. Immettere un nome significativo per l’applicazione da mostrare 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 il valore di ID applicazione (client) che verrà usato 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, 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.

  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. Nell'elenco Autorizzazioni configurate all'applicazione è stata assegnata l'autorizzazione User.Read. Tuttavia, poiché il tenant è esterno, gli utenti consumer non possono fornire il consenso a questa autorizzazione. L'amministratore deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:

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

Creare un flusso utente

Seguire questa procedura per creare un flusso utente che un cliente possa usare per accedere o registrarsi a un'applicazione.

  1. Accedere all'Interfaccia di amministrazione di Microsoft Entra almeno come amministratore del flusso utente con ID esterno.

  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à>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 registrarsi usando il proprio indirizzo di posta elettronica.

      Nota

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

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

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

    4. In Attributi utentescegliere gli attributi da raccogliere dall'utente al momento della registrazione. Se si seleziona Mostra altro, è possibile scegliere attributi e attestazioni per paese/area geografica, nome visualizzato e codice postale. Seleziona OK. (Agli utenti vengono richiesti gli attributi solo 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

Per consentire agli utenti del cliente di visualizzare l'esperienza di iscrizione o di accesso quando usano l'app, è necessario associare l'app a un flusso utente. Sebbene sia possibile associare molte applicazioni al flusso utente, è possibile associare un solo flusso utente a una singola applicazione.

  1. Nel menu della barra laterale selezionare Identità.

  2. Selezionare Identità esterne, 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 o usare la casella di ricerca per trovare l'applicazione e selezionarla.

  7. Scegliere Seleziona.

Dopo aver associato l'app a un flusso utente, è possibile testare il flusso utente simulando l'esperienza di iscrizione o di accesso di un utente con l'applicazione dall'interfaccia di amministrazione di Microsoft Entra. A tale scopo, usare la procedura descritta in Testare il flusso utente di iscrizione e di accesso.

Clonare o scaricare un'applicazione Web di esempio

Per ottenere il codice di esempio dell'applicazione desktop, scaricare il file .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 file App\authConfig.js.

  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 della directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non si dispone del 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 compare automaticamente:

  1. Nel terminale eseguire il comando seguente:

    npm start

    Screenshot dell'accesso a un'app desktop Electron.

  2. Nella finestra desktop visualizzata, selezionare il pulsante Accedi o Registrati. Comparirà una finestra del browser e all’utente verrà richiesto di effettuare l'accesso.

  3. Nella pagina di accesso del browser, digitare il proprio indirizzo e-mail, selezionare Avanti, digitare la Password quindi selezionare Accedi. Se non si dispone di un account, selezionare Nessun account? Creare un collegamento per avviare il flusso di iscrizione.

  4. Se si sceglie l'opzione per iscriversi, dopo aver inserito l'indirizzo e-mail, il passcode monouso, la nuova password e altri dettagli dell'account, completare l'intero flusso di iscrizione. Verrà visualizzata una pagina simile a quella raffigurata nello screenshot seguente. Se si sceglie l'opzione di accesso, comparirà una pagina simile. La pagina mostra le richieste di un ID token.

    Screenshot delle richieste di visualizzazione del token in un'app desktop Electron.

Vedi anche