Guida introduttiva: Accedere agli utenti e ottenere un token di accesso in un'applicazione a pagina singola JavaScript usando il flusso del codice di autenticazione con PKCE

  • Articolo

Benvenuto! Questa probabilmente non è la pagina che ti aspettavi. Mentre si lavora su una correzione, questo collegamento dovrebbe portare all'articolo corretto:

Guida introduttiva: Accedere agli utenti in app a pagina singola (SPA) tramite il flusso del codice di autorizzazione con La chiave di prova per Code Exchange (PKCE) usando JavaScript

Ci scusiamo per l'inconveniente e apprezziamo la vostra pazienza mentre lavoriamo per risolvere questo problema.

In questa guida introduttiva si scarica ed esegue un esempio di codice che illustra come un'applicazione a pagina singola JavaScript possa accedere agli utenti e chiamare Microsoft Graph usando il flusso del codice di autorizzazione con La chiave di prova per Code Exchange (PKCE). L'esempio di codice dimostra come ottenere un token di accesso per chiamare l'API Microsoft Graph o qualsiasi API Web.

Per un'illustrazione, vedere Funzionamento dell'esempio.

Prerequisiti

Passaggio 1: Configurare l'applicazione nel portale di Azure

Per il corretto funzionamento dell'esempio di codice in questa guida introduttiva, aggiungere un URI di reindirizzamento di http://localhost:3000/.

Apporta queste modifiche per me

Already configured L'applicazione è configurata con questi attributi.

Passaggio 2: Scaricare il progetto

Eseguire il progetto con un server Web usando Node.js

Scaricare il codice di esempio

Nota

Enter_the_Supported_Account_Info_Here

Passaggio 3: L'app è configurata e pronta per l'esecuzione

Il progetto è stato configurato con i valori delle proprietà dell'app.

Eseguire il progetto con un server Web usando Node.js.

  1. Per avviare il server, eseguire i comandi seguenti nella directory del progetto:

    npm install
npm start

  2. Vai a http://localhost:3000/.

  3. Fare clic su Accedi per avviare il processo di accesso e quindi chiamare l'API Microsoft Graph.

    Al primo accesso viene chiesto di concedere il proprio consenso per consentire all'applicazione di accedere al profilo e completare la procedura di accesso. Dopo aver eseguito l'accesso, le informazioni sul profilo utente vengono visualizzate nella pagina.

Ulteriori informazioni

Funzionamento dell'esempio

Diagram showing the authorization code flow for a single-page application.

MSAL.js

La libreria MSAL.js accede agli utenti e richiede i token usati per accedere a un'API protetta da Microsoft > Identity Platform. Il file index.html dell'esempio contiene un riferimento alla libreria:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

Se Node.js è già installato, è possibile scaricare l'ultima versione usando Node.js Package Manager (npm):

npm install @azure/msal-browser

Passaggi successivi

Per una guida più dettagliata alla creazione dell'applicazione usata in questa guida introduttiva, vedere l'esercitazione seguente:

Esercitazione per l'accesso e la chiamata a MS Graph