Condividi tramite

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

si applica a: cerchio verde con un segno di spunta bianco. inquilini della forza lavoro cerchio verde con un segno di spunta bianco. inquilini esterni (scopri di più)

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

  • Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, Crea un account gratuitamente.
  • Questo account di Azure deve disporre delle autorizzazioni per gestire le applicazioni. Uno dei seguenti ruoli di Microsoft Entra include le autorizzazioni necessarie:
    • Amministratore di applicazioni
    • Sviluppatore di applicazioni
  • Inquilino della forza lavoro. Puoi utilizzare la directory predefinita oppure configurare un nuovo tenant.
  • Registrare una nuova app nell'interfaccia di amministrazione di Microsoft Entra, configurata solo per gli account in questa directory organizzativa. Per altri dettagli, vedere Registrare un'applicazione . Registrare i valori seguenti dalla pagina Panoramica dell'applicazione per usarli in un secondo momento:
    • ID applicazione (cliente)
    • ID della directory (cliente)

Scaricare il progetto di esempio

Annotazioni

Il campione di Electron fornito in questo tutorial è specificamente progettato per funzionare con MSAL-node. MSAL-browser non è supportato nelle applicazioni basate su Electron. Assicurarsi di completare i passaggi seguenti per configurare correttamente il progetto.

  • Per clonare l'esempio, aprire un prompt dei comandi e passare alla posizione in cui si vuole creare il progetto e immettere il comando seguente:

    git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

  • Scaricare il file di .zip. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Configurare il progetto

Nell'editor di codice aprire il file ms-identity-javascript-nodejs-desktop-main/App/authConfig.js . Sostituire il valore come segue:

Variabile Descrizione Esempio/i
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_Info_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_Graph_Endpoint_Here Istanza cloud dell'API Microsoft Graph che verrà chiamata dall'app https://graph.microsoft.com/ (includere la barra 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.

Passaggio successivo

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

Scaricare il progetto di esempio

Annotazioni

Il campione di Electron fornito in questo tutorial è specificamente progettato per funzionare con MSAL-node. MSAL-browser non è supportato nelle applicazioni basate su Electron. Assicurati di completare i seguenti passaggi per configurare correttamente il tuo progetto.

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 dell'ID del token.

    Screenshot delle informazioni sui token nell'app desktop Electron.

Contenuto correlato