> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajouter Login à votre application UWP

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

export const HowToSchema = () => <script type="application/ld+json">
    {'{"@context":"https://schema.org","@type":"HowTo"}'}
  </script>;

<HowToSchema />

<div id="add-login-to-your-uwp-application">
  # Ajouter la connexion à votre application UWP
</div>

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`.

***

<div id="prerequisites">
  ## Prérequis
</div>

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](https://auth0.com/signup))

***

<div id="get-started">
  ## Pour commencer
</div>

<Steps>
  <Step title="Configurez votre application Auth0" stepNumber={1}>
    Vous devez configurer une application Auth0 dans votre Auth0 Dashboard pour que votre application UWP puisse se connecter.

    1. Accédez au [Auth0 Dashboard](https://manage.auth0.com/) 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

    <Note>
      Notez les valeurs du Domaine et de l’ID client — vous en aurez besoin plus tard
    </Note>

    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**

    <Note>
      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.
    </Note>
  </Step>

  <Step title="Créez votre projet UWP" stepNumber={2}>
    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`.
  </Step>

  <Step title="Installer le SDK Auth0" stepNumber={3}>
    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 :**

    ```powershell theme={null}
    Install-Package Auth0.OidcClient.UWP
    ```

    **Ou avec l’interface de ligne de commande dotnet :**

    ```bash theme={null}
    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.
  </Step>

  <Step title="Ajoutez la connexion et la déconnexion à votre page principale" stepNumber={4}>
    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` :

    ```xaml theme={null}
    <?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` :

    ```csharp theme={null}
    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)
  </Step>

  <Step title="Lancez votre application" stepNumber={5}>
    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"

    <Tip>
      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.
    </Tip>
  </Step>
</Steps>

<Check>
  **Vérification**

  Vous avez maintenant une expérience de connexion Auth0 entièrement fonctionnelle dans votre application UWP.
</Check>

***

<div id="troubleshooting">
  ## Dépannage
</div>

<AccordionGroup>
  <Accordion title="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 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
  </Accordion>

  <Accordion title="Erreur : l’URL de rappel ne correspond pas">
    **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
  </Accordion>

  <Accordion title="L'application plante après la connexion">
    **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)
  </Accordion>

  <Accordion title="Erreur de grant invalide lors de la connexion">
    **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
  </Accordion>

  <Accordion title="Aucune information sur l’utilisateur n’est affichée">
    **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` :
       ```csharp theme={null}
       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
  </Accordion>
</AccordionGroup>

***

<div id="next-steps">
  ## Prochaines étapes
</div>

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

<CardGroup cols={2}>
  <Card title="Appeler une API protégée" icon="plug" href="/fr-CA/docs/quickstart/backend/nodejs#call-your-api">
    Utilisez votre jeton d’accès pour authentifier les requêtes vers une API côté serveur
  </Card>

  <Card title="Jetons d’actualisation" icon="rotate" href="/fr-CA/docs/secure/tokens/refresh-tokens">
    Maintenez les sessions utilisateur d’un redémarrage de l’application à l’autre
  </Card>

  <Card title="Organisations" icon="building" href="/fr-CA/docs/manage-users/organizations">
    Prenez en charge les applications B2B multilocataires
  </Card>

  <Card title="Personnaliser Universal Login" icon="paintbrush" href="/fr-CA/docs/authenticate/login/auth0-universal-login">
    Adaptez la page de connexion d’Auth0 à votre image de marque
  </Card>

  <Card title="Contrôle d’accès basé sur les rôles" icon="shield-halved" href="/fr-CA/docs/manage-users/access-control/rbac">
    Gérez les autorisations des utilisateurs en fonction de leurs rôles
  </Card>
</CardGroup>

***

<div id="additional-resources">
  ## Ressources supplémentaires
</div>

<CardGroup cols={3}>
  <Card title="Client OIDC d’Auth0" icon="github" href="https://github.com/auth0/auth0-oidc-client-net">
    Code source et documentation du SDK sur GitHub
  </Card>

  <Card title="OpenID Connect" icon="book" href="/fr-CA/docs/authenticate/protocols/openid-connect-protocol">
    Découvrez le fonctionnement d’OpenID Connect avec Auth0
  </Card>

  <Card title="Bonnes pratiques relatives aux jetons d’accès" icon="key" href="/fr-CA/docs/secure/tokens/access-tokens">
    Bonnes pratiques de sécurité pour les jetons d’accès
  </Card>
</CardGroup>