Accedere agli utenti in un'app a pagina singola usando l'SDK di autenticazione nativa - Microsoft identity platform

2025-09-09

Si applica a: cerchio verde con un segno di spunta bianco che indica che il contenuto seguente si applica ai tenant esterni. Tenant esterni (altre informazioni)

In questa guida introduttiva si usa un'applicazione a pagina singola per illustrare come autenticare gli utenti usando l'SDK di autenticazione nativa. L'app di esempio illustra l'iscrizione, l'accesso e l'disconnesso dell'utente per la posta elettronica con i flussi di autenticazione con passcode monouso e password.

Prerequisiti

Un account Azure con una sottoscrizione attiva. Se non ne hai già uno, crea gratuitamente un account.
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
Un tenant esterno. Se non è disponibile, creare un nuovo tenant esterno nell'interfaccia di amministrazione di Microsoft Entra.
Un flusso utente. Per altre informazioni, vedere Creare flussi utente di iscrizione self-service per le app nei tenant esterni. In Provider di identità selezionare il metodo di autenticazione preferito, ovvero Posta elettronica con password o Passcode monouso tramite posta elettronica. Per questo esempio di codice, usare gli attributi utente seguenti nel flusso utente durante la raccolta dell'app di esempio dall'utente:
- nome specificato
- Cognome
- Posizione
- Paese/area geografica
Se non lo si è già fatto, registrare un'applicazione nell'interfaccia di amministrazione di Microsoft Entra. Assicurarsi di:
- Registrare l'ID applicazione (client) e l'ID directory (tenant) per un uso successivo.
- Concedere il consenso dell'amministratore alla registrazione dell'app.
Associare la registrazione dell'app al flusso utente
Node.js.
Visual Studio Code o un altro editor di codice.

Abilitare i flussi di autenticazione dei client pubblici e nativi

Per specificare che l'app è un client pubblico e può usare l'autenticazione nativa, abilitare i flussi di autenticazione pubblici e nativi del client:

Nella pagina Registrazioni app, seleziona la registrazione dell'app per cui si desidera abilitare i flussi di autenticazione cliente pubblico e nativo.
In Gestisci selezionare Autenticazione.
In Impostazioni avanzate, consenti i flussi client pubblici:
1. Per Abilitare i flussi per dispositivi mobili e desktop seguenti selezionare Sì.
2. Per Abilitare l'autenticazione nativa, selezionare Sì.
Selezionare il pulsante Salva .

Clonare o scaricare esempio di SPA

Per ottenere l'applicazione di esempio, è possibile clonarla da GitHub o scaricarla come file .zip.

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-ciam-native-javascript-samples.git
```
Scaricare l'esempio. Estrarlo in un percorso di file in cui la lunghezza del nome è inferiore a 260 caratteri.

Aprire una finestra del terminale e passare alla directory che contiene l'app di esempio React:
```
    cd typescript/native-auth/react-nextjs-sample
```
Eseguire il comando seguente per installare le dipendenze dell'app:
```
npm install
```

Aprire una finestra del terminale e passare alla directory che contiene l'app di esempio React:
```
    cd typescript/native-auth/angular-sample
```
Eseguire il comando seguente per installare le dipendenze dell'app:
```
npm install
```

Configurare l'app React di esempio

React
Angular

Aprire src/config/auth-config.ts e sostituire i segnaposto seguenti con i valori ottenuti dall'interfaccia di amministrazione di Microsoft Entra:
- Trovare il segnaposto e sostituirlo Enter_the_Application_Id_Here con l'ID applicazione (client) dell'app registrata in precedenza.
- Trovare il segnaposto e sostituirlo con il sottodominio Enter_the_Tenant_Subdomain_Here tenant nell'interfaccia di amministrazione di Microsoft Entra. Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il nome del tuo locatario, scopri come leggere i dettagli del locatario.
Salvare le modifiche.

Aprire src/app/config/auth-config.ts e sostituire i segnaposto seguenti con i valori ottenuti dall'interfaccia di amministrazione di Microsoft Entra:
- Trovare il segnaposto e sostituirlo Enter_the_Application_Id_Here con l'ID applicazione (client) dell'app registrata in precedenza.
- Trovare il segnaposto e sostituirlo con il sottodominio Enter_the_Tenant_Subdomain_Here tenant nell'interfaccia di amministrazione di Microsoft Entra. Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il nome del tuo locatario, scopri come leggere i dettagli del locatario.
Salvare le modifiche.

Configurare il server proxy CORS

L'API di autenticazione nativa non supporta la condivisione di risorse tra le origini (CORS), quindi è necessario configurare un server proxy tra l'app SPA e le API.

Questo esempio di codice include un server proxy CORS che inoltra le richieste agli endpoint dell'URL dell'API di autenticazione nativa. Il server proxy CORS è un server Node.js in ascolto sulla porta 3001.

Per configurare il server proxy, aprire il file proxy.config.js, quindi trovare il segnaposto:

tenantSubdomain e sostituirlo con il sottodominio Directory (tenant). Ad esempio, se il dominio primario del tenant è contoso.onmicrosoft.com, usare contoso. Se non hai il sottodominio del tuo tenant, scopri come leggere i dettagli del tuo tenant.
tenantId e sostituiscilo con l'ID del tenant (directory). Se non hai l'ID del tenant, scopri come leggere i dettagli del tenant.

Eseguire e testare l'app

L'app di esempio è stata configurata ed è pronta per l'esecuzione.

React
Angular

Dalla finestra del terminale eseguire i comandi seguenti per avviare il server proxy CORS:
```
cd typescript/native-auth/react-nextjs-sample/
npm run cors
```
Per avviare l'app React, aprire un'altra finestra del terminale, quindi eseguire i comandi seguenti:
```
cd typescript/native-auth/react-nextjs-sample/
npm run dev
```
Aprire un Web browser e passare a http://localhost:3000/.
Per iscriversi a un account, selezionare Iscrizione, quindi seguire le istruzioni.
Dopo l'iscrizione, testare l'accesso e la reimpostazione della password selezionando Accedi e reimposta password matorespectively.

Dalla finestra del terminale eseguire i comandi seguenti per avviare il server proxy CORS:
```
cd typescript/native-auth/angular-sample/
npm run cors
```
Per avviare l'app React, aprire un'altra finestra del terminale, quindi eseguire i comandi seguenti:
```
cd typescript/native-auth/angular-sample/
npm run start
```
Aprire un Web browser e passare a http://localhost:4200.
Per iscriversi a un account, selezionare Iscrizione, quindi seguire le istruzioni.
Dopo l'iscrizione, testare l'accesso e la reimpostazione della password selezionando Accedi e reimposta password matorespectively.

Commenti e suggerimenti

Questa pagina è stata utile?

Condividi tramite

Guida introduttiva: Accedere agli utenti in un'app a pagina singola usando JavaScript SDK per l'autenticazione nativa