Guida introduttiva: Accesso degli utenti in un'app desktop di esempio
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
- Node.js
- visual Studio Code o un altro editor di codice
Registrare l'app Web
Per registrare l'applicazione e aggiungere manualmente le informazioni di registrazione dell'app alla soluzione, seguire questa procedura:
- Accedi al centro di amministrazione di Microsoft Entra come almeno un amministratore di applicazioni cloud .
- 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.
- Passare a Identity>Applications>App registrations e selezionare New registration.
- 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. - Selezionare Registra per creare l'applicazione.
- In Gestisci, selezionare Autenticazione.
- Selezionare Aggiungi una piattaforma>Applicazioni per dispositivi mobili e desktop.
- Nella sezione URI di reindirizzamento , immettere
http://localhost
. - Selezionare Configura.
Scaricare il progetto di esempio
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
È necessario installare le dipendenze di questo esempio una volta:
cd ms-identity-javascript-nodejs-desktop-main npm install
Eseguire quindi l'applicazione tramite il prompt dei comandi o la console:
npm start
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:
Prerequisiti
- Node.js
- visual Studio Code o un altro editor di codice
- Un tenant esterno. Per crearne uno, scegliere tra i metodi seguenti:
- (Scelta consigliata) Usare l'estensione MICROSOFT Entra External ID per configurare un tenant esterno direttamente in Visual Studio Code
- Creare un nuovo tenant esterno nel centro di amministrazione di Microsoft Entra
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:
Accedere all'interfaccia di amministrazione di Microsoft Entra almeno un Application Developer.
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.
Vai a Identity>Applications>Registrazioni app.
Selezionare + Nuova registrazione.
Nella pagina Registrare un'applicazione visualizzata;
- Immettere un Nome applicazione significativo che viene visualizzato dagli utenti dell'app, ad esempio ciam-client-app.
- In Tipi di account supportatiselezionare account in questa directory organizzativa solo.
Selezionare Registra.
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:
- In Gestisciselezionare Autenticazione.
- Nella pagina configurazioni della piattaforma, selezionare Aggiungi una piattaforma, e quindi selezionare l'opzione Applicazioni per dispositivi mobili e desktop.
- Per gli URI di reindirizzamento personalizzati immettere
http://localhost
, quindi selezionare Configura. - Selezionare Configura per salvare le modifiche.
Concedere il consenso amministrativo
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:
Nella pagina Registrazioni dell'app, selezionare l'applicazione da te creata (ad esempio ciam-client-app) per aprire la relativa pagina Panoramica.
In Gestisciselezionare autorizzazioni API .
- Selezionare Concedi consenso amministratore per <nome tenant>e quindi selezionare Sì.
- 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.
Accedi all'interfaccia di amministrazione di Microsoft Entra come almeno un amministratore del flusso di utenti per ID esterno .
Se hai accesso a più tenant, usa l'icona Impostazioni
nel menu superiore per passare al tenant esterno dal menu Directory + sottoscrizioni.
Passare a Identità >Identità Esterne>Flussi Utente.
Selezionare + Nuovo flusso utente.
Nella pagina Crea:
Immettere un Nome per il flusso utente, ad esempio SignInSignUpSample.
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.
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.
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.
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.
Nel menu della barra laterale selezionare Identity.
Seleziona Identità esterne, quindi Flussi utente.
Nella pagina Flussi utente selezionare il nome del flusso utente creato in precedenza, ad esempio SignInSignUpSample.
In Usa, seleziona Applicazioni.
Selezionare Aggiungi applicazione.
Selezionare l'applicazione dall'elenco, ad esempio ciam-client-app o usare la casella di ricerca per trovare l'applicazione e quindi selezionarla.
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
Aprire una finestra della console e passare alla directory che contiene l'app di esempio Electron:
cd 1-Authentication\3-sign-in-electron\App
Eseguire i comandi seguenti per installare le dipendenze dell'app:
npm install && npm update
Configurare l'app Web di esempio
Nell'editor di codice aprire
App\authConfig.js
file.Trova il segnaposto:
Enter_the_Application_Id_Here
e sostituirlo con l'ID applicazione (client) dell'app registrata in precedenza.Enter_the_Tenant_Subdomain_Here
e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant ècontoso.onmicrosoft.com
, usarecontoso
. 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:
Nel terminale eseguire il comando seguente:
npm start
Nella finestra del desktop visualizzata, selezionare il pulsante Accedi o Registrati. Viene visualizzata una finestra del browser e viene richiesto di eseguire l'accesso.
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.
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.