Condividi tramite

Guida introduttiva: Accesso degli utenti in un'app desktop di esempio

  • Articolo

In questa guida introduttiva si userà un'applicazione di esempio per informazioni su come aggiungere l'autenticazione a un'applicazione desktop. L'applicazione di esempio consente agli utenti di accedere e disconnettersi e di usare Microsoft Authentication Library (MSAL) per gestire l'autenticazione.

Prima di iniziare, usa il selettore Scegli un tipo di tenant nella parte superiore di questa pagina per selezionare il tipo di tenant. Microsoft Entra ID offre due configurazioni tenant, forza lavoro e esterna. Una configurazione del tenant per la forza lavoro è destinata ai tuoi dipendenti, alle app interne e ad altre risorse dell'organizzazione. Un tenant esterno è destinato alle app rivolte ai clienti.

Prerequisiti

Registrare l'app Web

Per registrare l'applicazione e aggiungere manualmente le informazioni di registrazione dell'app alla soluzione, seguire questa procedura:

  1. Accedi al centro di amministrazione di Microsoft Entra come almeno un amministratore di applicazioni cloud .
  2. Se si ha accesso a più tenant, usare l'icona impostazioni nel menu in alto per passare al tenant in cui si vuole registrare l'applicazione dal menu Directory + sottoscrizioni.
  3. Passare a Identity>Applications>App registrations e selezionare New registration.
  4. Immettere un Nome per l'applicazione, ad esempio msal-node-desktop. Gli utenti dell'app potrebbero visualizzare questo nome ed è possibile modificarlo in un secondo momento.
  5. Selezionare Registra per creare l'applicazione.
  6. In Gestisci, selezionare Autenticazione.
  7. Selezionare Aggiungi una piattaforma>Applicazioni per dispositivi mobili e desktop.
  8. Nella sezione URI di reindirizzamento , immettere http://localhost.
  9. Selezionare Configura.

Scaricare il progetto di esempio

Scaricare l'esempio di codice

Configurare il progetto

*Estrarre il progetto, aprire la cartella ms-identity-JavaScript-nodejs-desktop-main e quindi aprire .authConfig.js file. Sostituire il valore come segue:

Variabile Descrizione Esempi
Enter_the_Cloud_Instance_Id_Here Istanza cloud di Azure in cui è registrata l'applicazione https://login.microsoftonline.com/ (includere la barra finale)
Enter_the_Tenant_Id_Here ID tenant o dominio primario contoso.microsoft.com o aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here ID client dell'applicazione registrata 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Redirect_Uri_Here URL di reindirizzamento dell'applicazione registrata msal00001111-aaaa-2222-bbbb-3333cccc4444://auth
Enter_the_Graph_Endpoint_Here Istanza cloud dell'API Microsoft Graph che verrà chiamata dall'app https://graph.microsoft.com/ (includere la barra obliqua finale)

Il file dovrebbe essere simile al seguente:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

Eseguire l'applicazione

  1. È necessario installare le dipendenze di questo esempio una volta:

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. Eseguire quindi l'applicazione tramite il prompt dei comandi o la console:

    npm start

  3. Selezionare Accedi per avviare il processo di accesso.

    La prima volta che si accede, viene richiesto di fornire il consenso per consentire all'applicazione di accedere e accedere al profilo. Dopo aver eseguito l'accesso, si verrà reindirizzati all'applicazione.

Passaggi successivi

Per saperne di più sullo sviluppo di app desktop Electron con MSAL Node, consulta il tutorial:

Esercitazione: Effettuare l'accesso per gli utenti e utilizzare l'API Microsoft Graph in un'app desktop Electron

Prerequisiti

Registrare l'app desktop

Per consentire alla tua applicazione di accedere agli utenti con Microsoft Entra, Microsoft Entra External ID deve venire a conoscenza dell'applicazione che crei. 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 almeno un Application Developer.

  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. Vai a Identity>Applications>Registrazioni app.

  4. Selezionare + Nuova registrazione.

  5. Nella pagina Registrare un'applicazione visualizzata;

    1. Immettere un Nome applicazione significativo che viene visualizzato dagli utenti dell'app, ad esempio ciam-client-app.
    2. In Tipi di account supportatiselezionare account in questa directory organizzativa solo.

  6. Selezionare Registra.

  7. Il riquadro Panoramica dell'applicazione viene visualizzato dopo la registrazione avvenuta con successo. Annotare l'ID applicazione (client) da usare nel codice sorgente dell'applicazione.

Specificare la piattaforma dell'app

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

  1. In Gestisciselezionare 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.

Dopo aver registrato l'applicazione, viene assegnata l'autorizzazione User.Read. Tuttavia, poiché il tenant è un tenant esterno, gli utenti del cliente stessi non possono fornire il consenso a questa autorizzazione. L'amministratore del tenant deve fornire il consenso a questa autorizzazione per conto di tutti gli utenti nel tenant:

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

  2. In Gestisciselezionare autorizzazioni API .

    1. Selezionare Concedi consenso amministratore per <nome tenant>e quindi selezionare Sì.
    2. Selezionare Aggiorna, quindi verificare che Concesso per <il nome del locatario> risulti sotto la voce Stato per il permesso.

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. Accedi all'interfaccia di amministrazione di Microsoft Entra come almeno un amministratore del flusso di utenti per ID esterno .

  2. Se hai accesso a più tenant, usa l'icona Impostazioni nel menu superiore per passare al tenant esterno dal menu Directory + 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 dei fornitori 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, Facebook, Apple o un provider di identità OIDC , sarà possibile selezionare tali provider di identità aggiuntivi qui.

    3. Sotto account di posta elettronica, è possibile selezionare una delle due opzioni. Per questa esercitazione, seleziona Email con password.

      • Messaggio di 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 di fattore.
      • Passcode monouso tramite posta elettronica: consente ai nuovi utenti di iscriversi e accedere usando un indirizzo di posta elettronica come nome utente e passcode monouso tramite posta elettronica come credenziale del primo fattore. Il codice monouso via email deve essere abilitato a livello di tenant (Tutti i provider di identità>Codice monouso via email) per rendere disponibile questa opzione a livello di flusso utente.

    4. In Attributi utentescegliere gli attributi da raccogliere dall'utente al momento dell'iscrizione. Selezionando Mostra altri, è possibile scegliere attributi e attestazioni per paese/area geografica, nome visualizzatoe codice postale. Selezionare OK. Gli utenti vengono richiesti solo gli attributi quando si registrano per la prima volta.

  6. Selezionare Crea. Il nuovo flusso utente appare 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 desktop 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. Anche se molte applicazioni possono essere associate al flusso utente, una singola applicazione può essere associata solo a un flusso utente.

  1. Nel menu della barra laterale selezionare Identity.

  2. Seleziona 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, seleziona Applicazioni.

  5. Selezionare Aggiungi applicazione.

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

  7. Scegliere Selezionare.

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 i passaggi descritti in Testare il flusso utente di iscrizione e accesso.

Scaricare il progetto di esempio

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

  2. Trova 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 hai il nome del tuo tenant, scopri come consultare i dettagli del tenant.

Eseguire e testare l'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

    Screenshot dell'accesso a un'app desktop elettrone.

  2. Nella finestra del desktop visualizzata, selezionare il pulsante Accedi o Registrati. 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 password, 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.

    Screenshot delle informazioni sui token nell'app desktop Electron.

Contenuto correlato