Ajouter la connexion à votre application UWP

Intégrez Auth0 à votre application Universal Windows Platform à l’aide du SDK Auth0.OidcClient.UWP

​

Ajouter la connexion à votre application UWP

Ce guide explique comment intégrer Auth0 à une application Universal Windows Platform (UWP) à l’aide du SDK Auth0.OidcClient.UWP. Au terme de ce guide, votre application prendra en charge la connexion, le logout et l’affichage des renseignements du profil utilisateur.

Ce guide utilise la version 1.x de Auth0.OidcClient.UWP.

---

​

Prérequis

Vous aurez besoin des éléments suivants avant de commencer :

• Visual Studio 2019 (16.11+) ou Visual Studio 2022 avec la charge de travail « Développement de la plateforme Windows universelle » installée
• Windows 10 SDK 10.0.16299 ou version ultérieure (installé avec la charge de travail UWP)
• Un compte Auth0 (inscrivez-vous gratuitement)

---

​

Premiers pas

1. Configurer votre application Auth0

   Vous devez configurer une application Auth0 dans votre Auth0 Dashboard afin que votre application UWP puisse s’y connecter.

   1. Accédez au Auth0 Dashboard et connectez-vous
   2. Dans la barre latérale de gauche, allez à Applications > Applications
   3. Sélectionnez Create Application
   4. Entrez un nom pour votre application (par exemple, “My UWP App”)
   5. Sélectionnez Native comme type d’application
   6. Sélectionnez Create
   7. Ouvrez l’onglet Settings de la page Application Details
   8. Notez votre Domain et votre Client ID en haut de la page — vous en aurez besoin dans votre code

   Notez les valeurs de Domain et de Client ID — vous en aurez besoin plus tard

   Ensuite, configurez votre URL de rappel :

   1. Dans l’onglet Settings, faites défiler la page jusqu’à Application URIs
   2. Dans le champ Allowed Callback URLs, entrez : https://{yourDomain}/mobile
      • Exemple : https://mycompany.auth0.com/mobile
   3. Dans le champ Allowed Logout URLs, entrez la même URL : https://{yourDomain}/mobile
   4. Sélectionnez Save Changes

   Le format d’URL de rappel https://{yourDomain}/mobile est la norme d’Auth0 pour les applications natives. Votre application UWP gérera automatiquement la redirection — aucune configuration personnalisée n’est requise.

2. Créez votre projet UWP

   Si vous avez déjà un projet UWP, passez directement à l’étape 3.

   1. Ouvrez Visual Studio
   2. Sélectionnez Fichier > Nouveau > Projet
   3. Recherchez “UWP” et sélectionnez Blank App (Universal Windows)
   4. Donnez un nom à votre projet (par exemple, “Auth0Sample”)
   5. Sélectionnez Suivant
   6. Pour “Version minimale”, sélectionnez Windows 10 (version 1909) ou une version ultérieure
   7. Pour “Version cible”, sélectionnez la version disponible la plus récente (actuellement Windows 11)
   8. Sélectionnez Créer

   Visual Studio crée votre projet UWP avec les fichiers de base MainPage.xaml et MainPage.xaml.cs.

3. Installer le SDK Auth0

   Ajoutez le package NuGet Auth0.OidcClient.UWP à votre projet.

   À l’aide de l’interface utilisateur du gestionnaire de packages (recommandé) :

   1. Cliquez avec le bouton droit sur votre projet dans l’Explorateur de solutions
   2. Sélectionnez Manage NuGet Packages
   3. Allez à l’onglet Browse
   4. Recherchez “Auth0.OidcClient.UWP”
   5. Sélectionnez la version la plus récente et cliquez sur Install
   6. Acceptez tous les messages relatifs aux dépendances

   Ou à l’aide de la console du gestionnaire de packages :

   Install-Package Auth0.OidcClient.UWP
   

   Ou avec la CLI dotnet :

   dotnet add package Auth0.OidcClient.UWP
   

   Vérifiez que l’installation s’est terminée sans erreur. Si des messages d’erreur s’affichent, vérifiez votre connexion Internet et réessayez.

4. Ajoutez les fonctions de connexion et de déconnexion à votre page principale

   Vous allez maintenant ajouter des boutons de connexion et de déconnexion à votre application. Mettez à jour MainPage.xaml et MainPage.xaml.cs.

   Commencez par mettre à jour MainPage.xaml :

   <?xml version="1.0" encoding="utf-8"?>
   <Page
       x:Class="Auth0Sample.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   
       <StackPanel Padding="20" VerticalAlignment="Center" HorizontalAlignment="Center">
           <TextBlock Text="Auth0 UWP Sample" FontSize="28" Margin="0,0,0,20" />
           
           <Button x:Name="LoginButton" Click="LoginButton_Click" Content="Login" Padding="10" />
           <Button x:Name="LogoutButton" Click="LogoutButton_Click" Content="Logout" Padding="10" Margin="0,10,0,0" />
           
           <TextBlock x:Name="UserInfoText" Margin="0,20,0,0" FontSize="14" TextWrapping="Wrap" />
       </StackPanel>
   </Page>
   

   Mettez maintenant à jour MainPage.xaml.cs :

   using Auth0.OidcClient;
   using System;
   using Windows.UI.Xaml;
   using Windows.UI.Xaml.Controls;
   
   namespace Auth0Sample
   {
       public sealed partial class MainPage : Page
       {
           private Auth0Client _auth0Client;
   
           public MainPage()
           {
               InitializeComponent();
               InitializeAuth0();
           }
   
           private void InitializeAuth0()
           {
               _auth0Client = new Auth0Client(new Auth0ClientOptions
               {
                   Domain = "{yourDomain}",
                   ClientId = "{yourClientId}",
                   RedirectUri = "https://{yourDomain}/mobile",
                   PostLogoutRedirectUri = "https://{yourDomain}/mobile"
               });
           }
   
           private async void LoginButton_Click(object sender, RoutedEventArgs e)
           {
               try
               {
                   var loginResult = await _auth0Client.LoginAsync();
   
                   if (loginResult.IsError)
                   {
                       if (loginResult.Error == "UserCancel")
                       {
                           UserInfoText.Text = "Login cancelled";
                           return;
                       }
   
                       UserInfoText.Text = $"Login failed: {loginResult.Error}";
                       return;
                   }
   
                   var userEmail = loginResult.User.FindFirst("email")?.Value ?? "Unknown";
                   var userName = loginResult.User.FindFirst("name")?.Value ?? "User";
   
                   UserInfoText.Text = $"Welcome, {userName}!\nEmail: {userEmail}";
   
                   LoginButton.Visibility = Visibility.Collapsed;
                   LogoutButton.Visibility = Visibility.Visible;
               }
               catch (Exception ex)
               {
                   UserInfoText.Text = $"Error: {ex.Message}";
               }
           }
   
           private async void LogoutButton_Click(object sender, RoutedEventArgs e)
           {
               try
               {
                   await _auth0Client.LogoutAsync();
   
                   UserInfoText.Text = "You have been logged out";
                   LoginButton.Visibility = Visibility.Visible;
                   LogoutButton.Visibility = Visibility.Collapsed;
               }
               catch (Exception ex)
               {
                   UserInfoText.Text = $"Logout error: {ex.Message}";
               }
           }
       }
   }
   

   Remplacez les espaces réservés dans le code :

   • {yourDomain} - Votre domaine Auth0 (p. ex., mycompany.auth0.com)
   • {yourClientId} - Le Client ID de votre application Auth0
   • Auth0Sample - Le nom réel de votre projet (il doit correspondre au nom de votre projet UWP)
5. Lancez votre application

   Appuyez sur F5 ou sélectionnez Debug > Start Debugging pour lancer votre application.

   Comportement attendu :

   1. Votre application UWP se lance et affiche un bouton “Login”
   2. Vous appuyez sur Login → Une fenêtre de navigateur s’ouvre et affiche la page de connexion Auth0
   3. Entrez vos identifiants Auth0 (ou créez un compte de test)
   4. Après le login, le navigateur se ferme automatiquement
   5. Votre application affiche votre nom et votre courriel
   6. Le bouton devient “Logout”
   7. Vous appuyez sur Logout → Le navigateur s’ouvre brièvement, puis se ferme
   8. Le bouton redevient “Login”

   Si la page de connexion ne s’affiche pas, vérifiez que votre Domain et votre ClientId sont corrects, que votre Allowed Callback URL dans Auth0 Dashboard correspond à https://{yourDomain}/mobile et que votre connexion Internet fonctionne.

Vérification

Vous disposez maintenant d’une expérience de connexion Auth0 entièrement fonctionnelle dans votre application UWP.

---

​

Dépannage

La page de connexion ne s’ouvre pas

Problème : Problème de connectivité réseau ou configuration invalide.

Solution :

1. Vérifiez votre connexion Internet
2. Vérifiez que votre Domain est exact (par exemple, mycompany.auth0.com)
3. Vérifiez que votre ClientId est exact (sans espaces ni fautes de frappe)
4. Assurez-vous d’utiliser Windows 10 (Fall Creators Update) ou une version ultérieure

Erreur de non-correspondance de l’URL de rappel

Problème : L’URL de redirection de votre application Auth0 ne correspond pas à celle indiquée dans votre code.

Solution :

1. Accédez à Auth0 Dashboard > Applications > Votre application > Settings
2. Faites défiler jusqu’à « Application URIs »
3. Vérifiez que « Allowed Callback URLs » contient : https://{yourDomain}/mobile
4. Vérifiez que cela correspond exactement à RedirectUri dans votre code
5. Cliquez sur Save Changes si vous avez apporté des modifications

L’application plante après la connexion

Problème : Il manque des instructions using ou les références d’espace de noms sont incorrectes.

Solution :

1. Assurez-vous d’avoir using Auth0.OidcClient; en haut de MainPage.xaml.cs
2. Régénérez la solution (Build > Rebuild Solution)

Erreur d’autorisation invalide pendant la connexion

Problème : Votre jeton d’actualisation a expiré ou les informations d’authentification en cache sont invalides.

Solution :

1. Touchez Logout pour effacer les jetons en cache
2. Touchez Connexion de nouveau et authentifiez-vous à nouveau
3. Si le problème persiste, accédez à Auth0 Dashboard et supprimez les jetons d’actualisation de votre application

Aucune information utilisateur ne s’affiche

Problème : La portée profile n’a pas été demandée, donc les claims de l’utilisateur ne sont pas disponibles.

Solution :

1. Mettez à jour vos Auth0ClientOptions pour demander la portée profile :
   var options = new Auth0ClientOptions
   {
       Domain = "{yourDomain}",
       ClientId = "{yourClientId}",
       Scope = "openid profile email" // Ajoutez cette ligne
   };
   
2. Déconnectez-vous, puis reconnectez-vous pour obtenir les portées mises à jour

---

​

Étapes suivantes

Vous disposez maintenant d’une intégration Auth0 fonctionnelle dans votre application UWP. Explorez ces rubriques pour étendre votre mise en œuvre :

Faire une requête à une API protégée

Utilisez votre jeton d’accès pour authentifier les requêtes vers une API backend

Jetons d’actualisation

Maintenez les sessions utilisateur après le redémarrage de l’application

Organizations

Prenez en charge les applications B2B multilocataires

Personnaliser Universal Login

Adaptez la page de connexion d’Auth0 à votre image de marque

Role-Based Access Control

Contrôlez les permissions des utilisateurs en fonction de leurs rôles

---

​

Ressources supplémentaires

Auth0 OIDC Client

Code source du SDK et documentation sur GitHub

OpenID Connect

Découvrez le fonctionnement d’OpenID Connect avec Auth0

Bonnes pratiques relatives aux jetons d’accès

Bonnes pratiques de sécurité pour les jetons d’accès