Configurare l'autenticazione in un'app desktop WPF di esempio usando Azure AD B2C

  • Articolo

Questo articolo usa un'applicazione desktop windows Presentation Foundation (WPF) di esempio per illustrare come aggiungere l'autenticazione di Azure Active Directory B2C (Azure AD B2C) alle app desktop.

Panoramica

OpenID Connect (OIDC) è un protocollo di autenticazione basato su OAuth 2.0. È possibile usare OIDC per consentire agli utenti di accedere in modo sicuro a un'applicazione. Questo esempio di app desktop usa il flusso Microsoft Authentication Library (MSAL) con codice di autorizzazione OIDC Proof Key for Code Exchange (PKCE). MSAL è una libreria fornita da Microsoft che semplifica l'aggiunta del supporto di autenticazione e autorizzazione alle app desktop.

Il flusso di accesso prevede i passaggi seguenti:

  1. Gli utenti aprono l'app e selezionano Accedi.
  2. L'app apre il browser di sistema del dispositivo desktop e avvia una richiesta di autenticazione ad Azure AD B2C.
  3. Gli utenti si registrano o accedono, reimpostano la password o accedono con un account di social networking.
  4. Dopo l'accesso degli utenti, Azure AD B2C restituisce un codice di autorizzazione all'app.
  5. L'app esegue le azioni seguenti:
    1. Scambia il codice di autorizzazione con un token ID, un token di accesso e un token di aggiornamento.
    2. Legge le attestazioni del token ID.
    3. Archivia i token in una cache in memoria per usarli in un secondo momento.

Panoramica della registrazione dell'app

Per consentire all'app di accedere con Azure AD B2C e chiamare un'API Web, registrare due applicazioni nella directory di Azure AD B2C.

  • La registrazione dell'applicazione desktop consente all'app di accedere con Azure AD B2C. Durante la registrazione dell'app specificare l'URI di reindirizzamento. L'URI di reindirizzamento è l'endpoint a cui gli utenti vengono reindirizzati da Azure AD B2C dopo l'autenticazione con Azure AD B2C. Il processo di registrazione dell'app genera un ID applicazione, noto anche come ID client, che identifica in modo univoco l'app desktop (ad esempio, ID app: 1).

  • La registrazione dell'API Web consente all'app di chiamare un'API Web protetta. La registrazione espone le autorizzazioni dell'API Web (ambiti). Il processo di registrazione dell'app genera un ID applicazione che identifica in modo univoco l'API Web (ad esempio, ID app: 2). Concedere all'app desktop (ID app: 1) le autorizzazioni per gli ambiti dell'API Web (ID app: 2).

La registrazione e l'architettura dell'applicazione sono illustrate nei diagrammi seguenti:

Diagram of the desktop app with web API, registrations, and tokens.

Chiamare a un'API Web

Al termine dell'autenticazione, gli utenti interagiscono con l'app, che richiama un'API Web protetta. L'API Web usa l'autenticazione del token di connessione. Il token di connessione è il token di accesso ottenuto dall'app da Azure AD B2C. L'app passa il token nell'intestazione di autorizzazione della richiesta HTTPS.

Authorization: Bearer <access token>

Se l'ambito del token di accesso non corrisponde agli ambiti dell'API Web, la libreria di autenticazione ottiene un nuovo token di accesso con gli ambiti corretti.

Flusso di disconnesso

Il flusso di disconnesso prevede i passaggi seguenti:

  1. Dall'app gli utenti si disconnetteno.
  2. L'app cancella gli oggetti sessione e la libreria di autenticazione cancella la cache dei token.
  3. L'app porta gli utenti all'endpoint di disconnesso di Azure AD B2C per terminare la sessione di Azure AD B2C.
  4. Gli utenti vengono reindirizzati all'app.

Prerequisiti

Un computer che esegue Visual Studio 2019 con lo sviluppo di desktop .NET.

Passaggio 1: Configurare il flusso utente

Quando gli utenti tentano di accedere all'app, l'app avvia una richiesta di autenticazione all'endpoint di autorizzazione tramite un flusso utente. Il flusso utente definisce e controlla l'esperienza utente. Dopo aver completato il flusso utente, Azure AD B2C genera un token e quindi reindirizza gli utenti all'applicazione.

Se non è già stato fatto, creare un flusso utente o un criterio personalizzato. Ripetere i passaggi per creare tre flussi utente separati come indicato di seguito:

  • Flusso utente di accesso e iscrizione combinato, ad esempio susi. Questo flusso utente supporta anche l'esperienza password dimenticata.
  • Flusso utente di modifica del profilo, ad esempio edit_profile.
  • Flusso utente di reimpostazione della password, ad esempio reset_password.

Azure AD B2C antepone B2C_1_ il nome del flusso utente. Ad esempio, susi diventa B2C_1_susi.

Passaggio 2: Registrare le applicazioni

Creare l'app desktop e la registrazione dell'applicazione API Web e specificare gli ambiti dell'API Web.

Passaggio 2.1: Registrare l'app per le API Web

Per creare la registrazione dell'app per le API Web (ID app: 2), seguire questa procedura:

  1. Accedere al portale di Azure.

  2. Assicurarsi di usare la directory che contiene il tenant di Azure AD B2C. Selezionare l'icona Directory e sottoscrizioni nella barra degli strumenti del portale.

  3. Nelle impostazioni del portale | Pagina Directory e sottoscrizioni , trovare la directory di Azure AD B2C nell'elenco Nome directory e quindi selezionare Cambia.

  4. Nel portale di Azure cercare e selezionare Azure AD B2C.

  5. Selezionare Registrazioni app e quindi Nuova registrazione.

  6. In Nome immettere un nome per l'applicazione, ad esempio my-api1. Lasciare i valori predefiniti per URI di reindirizzamento e Tipi di account supportati.

  7. Selezionare Registra.

  8. Al termine della registrazione dell'app, selezionare Panoramica.

  9. Registrare il valore ID applicazione (client) per usarlo in un secondo momento quando si configura l'applicazione Web.

    Screenshot that demonstrates how to get a web A P I application I D.

Passaggio 2.2: Configurare gli ambiti dell'app per le API Web

  1. Selezionare l'applicazione my-api1 creata (ID app: 2) per aprire la relativa pagina Panoramica.

  2. In Gestisci selezionare Esponi un'API.

  3. Accanto a URI ID applicazione selezionare il collegamento Imposta. Sostituire il valore predefinito (GUID) con un nome univoco (ad esempio, tasks-api) e quindi selezionare Salva.

    Quando l'applicazione Web richiede un token di accesso per l'API Web, deve aggiungere questo URI come prefisso per ogni ambito definito per l'API.

  4. In Ambiti definiti da questa API selezionare Aggiungi un ambito.

  5. Per creare un ambito che definisce l'accesso in lettura all'API:

    1. In Nome ambito immettere tasks.read.
    2. Per Amministrazione nome visualizzato del consenso, immettere Accesso in lettura all'API attività.
    3. Per Amministrazione descrizione del consenso, immettere Consente l'accesso in lettura all'API delle attività.

  6. Seleziona Aggiungi ambito.

  7. Selezionare Aggiungi un ambito e quindi aggiungere un ambito che definisce l'accesso in scrittura all'API:

    1. In Nome ambito immettere tasks.write.
    2. Per Amministrazione nome visualizzato del consenso, immettere Accesso in scrittura all'API attività.
    3. Per Amministrazione descrizione del consenso, immettere Consenti l'accesso in scrittura all'API delle attività.

  8. Seleziona Aggiungi ambito.

Passaggio 2.3: Registrare l'app desktop

Per creare la registrazione dell'app desktop, eseguire le operazioni seguenti:

  1. Accedere al portale di Azure.
  2. Selezionare Registrazioni app e quindi Nuova registrazione.
  3. In Nome immettere un nome per l'applicazione, ad esempio desktop-app1.
  4. Sotto Tipi di account supportati, seleziona Account in qualsiasi provider di identità o directory dell'organizzazione (per autenticare gli utenti con flussi utente).
  5. In URI di reindirizzamento selezionare Client pubblico/nativo (desktop e desktop) e quindi, nella casella URL immettere https://your-tenant-name.b2clogin.com/oauth2/nativeclient. Sostituire your-tenant-name con il nome del tenant. Per altre opzioni, vedere Configurare l'URI di reindirizzamento.
  6. Selezionare Registra.
  7. Al termine della registrazione dell'app, selezionare Panoramica.
  8. Registrare l'ID applicazione (client) per usarlo in un secondo momento, quando si configura l'applicazione desktop. Screenshot highlighting the desktop application ID.

Passaggio 2.4: Concedere le autorizzazioni dell'app desktop per l'API Web

Per concedere all'app (ID app: 1) le autorizzazioni, seguire questa procedura:

  1. Selezionare Registrazioni app e quindi selezionare l'app creata (ID app: 1).

  2. In Gestisci selezionare Autorizzazioni API.

  3. In Autorizzazioni configurate selezionare Aggiungi un'autorizzazione.

  4. Selezionare la scheda Le mie API.

  5. Selezionare l'API (ID app: 2) a cui concedere l'accesso all'applicazione Web. Ad esempio, immettere my-api1.

  6. In Autorizzazione espandere le attività e quindi selezionare gli ambiti definiti in precedenza, ad esempio tasks.read e tasks.write.

  7. Selezionare Aggiungi autorizzazioni.

  8. Selezionare Concedi consenso amministratore per <il nome> del tenant.

  9. Selezionare Sì.

  10. Selezionare Aggiorna e quindi verificare che Concesso per ... sia visualizzato in Stato per entrambi gli ambiti.

  11. Nell'elenco Autorizzazioni configurate selezionare l'ambito e quindi copiare il nome completo dell'ambito.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Passaggio 3: Configurare l'API Web di esempio

Questo esempio acquisisce un token di accesso con gli ambiti pertinenti che l'app desktop può usare per un'API Web. Per chiamare un'API Web dal codice, eseguire le operazioni seguenti:

  1. Usare un'API Web esistente o crearne una nuova. Per altre informazioni, vedere Abilitare l'autenticazione nell'API Web usando Azure AD B2C.
  2. Dopo aver configurato l'API Web, copiare l'URI dell'endpoint DELL'API Web. L'endpoint DELL'API Web verrà usato nei passaggi successivi.

Suggerimento

Se non si ha un'API Web, è comunque possibile eseguire questo esempio. In questo caso, l'app restituisce il token di accesso, ma non sarà in grado di chiamare l'API Web.

Passaggio 4: Ottenere l'esempio di app desktop WPF

  1. Scaricare il file ZIP o clonare l'applicazione Web di esempio dal repository GitHub.

    git clone https://github.com/Azure-Samples/active-directory-b2c-dotnet-desktop.git

  2. Aprire la soluzione active-directory-b2c-wpf (il file active-directory-b2c-wpf.sln ) in Visual Studio.

Passaggio 5: Configurare l'app desktop di esempio

Nel progetto active-directory-b2c-wpf aprire il file App.xaml.cs. I membri della App.xaml.cs classe contengono informazioni sul provider di identità di Azure AD B2C. L'app desktop usa queste informazioni per stabilire una relazione di trust con Azure AD B2C, consentire l'accesso e l'uscita degli utenti, acquisire i token e convalidarli.

Aggiornare i membri della classe seguenti:

Chiave valore
TenantName La prima parte del nome del tenant di Azure AD B2C, ad esempio contoso.b2clogin.com.
ClientId ID applicazione desktop del passaggio 2.3.
PolicySignUpSignIn Il flusso utente di iscrizione o di accesso o i criteri personalizzati creati nel passaggio 1.
PolicyEditProfile Flusso utente del profilo di modifica o criterio personalizzato creato nel passaggio 1.
ApiEndpoint (Facoltativo) Endpoint DELL'API Web creato nel passaggio 3 , https://contoso.azurewebsites.net/helload esempio .
ApiScopes Ambiti dell'API Web creati nel passaggio 2.4.

Il file App.xaml.cs finale dovrebbe essere simile al codice C# seguente:

public partial class App : Application
{

private static readonly string TenantName = "contoso";
private static readonly string Tenant = $"{TenantName}.onmicrosoft.com";
private static readonly string AzureAdB2CHostname = $"{TenantName}.b2clogin.com";
private static readonly string ClientId = "<web-api-app-application-id>";
private static readonly string RedirectUri = $"https://{TenantName}.b2clogin.com/oauth2/nativeclient";

public static string PolicySignUpSignIn = "b2c_1_susi";
public static string PolicyEditProfile = "b2c_1_edit_profile";
public static string PolicyResetPassword = "b2c_1_reset";

public static string[] ApiScopes = { $"https://{Tenant}//api/tasks.read" };
public static string ApiEndpoint = "https://contoso.azurewebsites.net/hello";

Passaggio 6: Eseguire e testare l'app desktop

  1. Ripristinare i pacchetti NuGet.

  2. Selezionare F5 per compilare ed eseguire l'esempio.

  3. Selezionare Accedi e quindi iscriversi o accedere con l'account locale o social di Azure AD B2C.

    Screenshot highlighting how to start the sign-in flow.

  4. Dopo l'iscrizione o l'accesso, i dettagli del token vengono visualizzati nel riquadro inferiore dell'app WPF.

    Screenshot highlighting the Azure AD B2C access token and user ID.

  5. Selezionare Chiama API per chiamare l'API Web.

Passaggi successivi

Informazioni su come configurare le opzioni di autenticazione in un'app desktop WPF usando Azure AD B2C.