Passer au contenu principal

​
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. À la fin, votre application prendra en charge la connexion, la déconnexion et l’affichage des renseignements de profil de l’utilisateur. Ce guide utilise la version 1.x de Auth0.OidcClient.UWP.

​
Prérequis

Avant de commencer, vous aurez besoin des éléments suivants :
  • Visual Studio 2019 (16.11+) or Visual Studio 2022 avec la charge de travail « Universal Windows Platform Development » installée
  • Windows 10 SDK 10.0.16299 ou une version ultérieure (installé avec la charge de travail UWP)
  • Un compte Auth0 (créez-en un gratuitement)

​
Pour commencer

1

Configurez votre application Auth0

Vous devez configurer une application Auth0 dans votre Auth0 Dashboard pour que votre application UWP puisse se 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. Allez à l’onglet Settings de la page Application Details
  8. Notez votre Domaine et votre ID client en haut de la page — vous en aurez besoin dans votre code
Notez les valeurs du Domaine et de l’ID client — vous en aurez besoin plus tard
Ensuite, configurez votre URL de rappel :
  1. Dans l’onglet Settings, faites défiler 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 à l’étape 3.
  1. Ouvrez Visual Studio
  2. Sélectionnez File > New > Project
  3. Recherchez “UWP” et sélectionnez Blank App (Universal Windows)
  4. Donnez un nom à votre projet (par exemple, “Auth0Sample”)
  5. Sélectionnez Next
  6. Pour “Minimum version”, sélectionnez Windows 10 (version 1909) ou une version ultérieure
  7. Pour “Target version”, sélectionnez la version la plus récente offerte (actuellement Windows 11)
  8. Sélectionnez Create
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ée) :
  1. Cliquez avec le bouton droit sur votre projet dans l’Explorateur de solutions
  2. Sélectionnez Manage NuGet Packages
  3. Accédez à l’onglet Browse
  4. Recherchez “Auth0.OidcClient.UWP”
  5. Sélectionnez la version la plus récente, puis cliquez sur Install
  6. Acceptez toutes les invites relatives aux dépendances
Ou à l’aide de la console du gestionnaire de packages :
Install-Package Auth0.OidcClient.UWP
Ou avec l’interface de ligne de commande dotnet :
dotnet add package Auth0.OidcClient.UWP
Vérifiez que l’installation s’est terminée sans erreurs. Si des messages d’erreur s’affichent, vérifiez votre connexion Internet et réessayez.
4

Ajoutez la connexion et la déconnexion à votre page principale

Ajoutez maintenant 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>
Maintenant, mettez à 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} - L’ID client de votre application Auth0
  • Auth0Sample - Le véritable nom 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. Touchez Login → Une fenêtre du 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 la connexion, le navigateur se ferme automatiquement
  5. Votre application affiche votre nom et votre courriel
  6. Le bouton devient “Logout”
  7. Touchez 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 Domaine et votre ClientId sont corrects, que votre Allowed Callback URL dans Auth0 Dashboard correspond à https://{yourDomain}/mobile et que votre connexion Internet fonctionne.
VérificationVous avez maintenant une expérience de connexion Auth0 entièrement fonctionnelle dans votre application UWP.

​
Dépannage

Problème : Problème de connectivité réseau ou configuration invalide.Solution :
  1. Vérifiez votre connexion Internet
  2. Vérifiez que votre Domaine est exactement le bon (p. ex., mycompany.auth0.com)
  3. Vérifiez que votre ClientId est exact (sans espaces ni fautes de frappe)
  4. Assurez-vous d’exécuter l’application sur Windows 10 (Fall Creators Update) ou une version ultérieure
Problème : L’URL de redirection dans votre application Auth0 ne correspond pas à celle de votre code.Solution :
  1. Accédez à Auth0 Dashboard > Applications > Your App > 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
Problème : Directives using manquantes ou références d’espace de noms incorrectes.Solution :
  1. Assurez-vous d’avoir using Auth0.OidcClient; en haut de MainPage.xaml.cs
  2. Regénérez la solution (Build > Rebuild Solution)
Problème : Votre jeton d’actualisation a expiré ou les informations d’identification en cache ne sont pas valides.Solution :
  1. Touchez Logout pour effacer les jetons en cache
  2. Touchez Login de nouveau et authentifiez-vous à nouveau
  3. Si le problème persiste, accédez à Auth0 Dashboard et effacez les jetons d’actualisation de votre application
Problème : Le scope profile n’a pas été demandé; les revendications de l’utilisateur ne sont donc pas disponibles.Solution :
  1. Mettez à jour votre Auth0ClientOptions pour demander le scope 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 scopes mis à jour

​
Prochaines étapes

Vous disposez maintenant d’une intégration Auth0 fonctionnelle dans votre application UWP. Explorez les rubriques suivantes pour enrichir votre implémentation :

Appeler une API protégée

Utilisez votre jeton d’accès pour authentifier les requêtes vers une API côté serveur

Jetons d’actualisation

Maintenez les sessions utilisateur d’un redémarrage de l’application à l’autre

Organisations

Prenez en charge les applications B2B multilocataires

Personnaliser Universal Login

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

Contrôle d’accès basé sur les rôles

Gérez les autorisations des utilisateurs en fonction de leurs rôles

​
Ressources supplémentaires

Client OIDC d’Auth0

Code source et documentation du SDK 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