Saltar al contenido principal

​
Agrega el inicio de sesión a tu aplicación UWP

Esta guía muestra cómo integrar Auth0 con una aplicación de Universal Windows Platform (UWP) mediante el SDK Auth0.OidcClient.UWP. Al finalizar, tu aplicación permitirá iniciar sesión, cerrar sesión y mostrar la información del perfil del usuario. Esta guía usa la versión 1.x de Auth0.OidcClient.UWP.

​
Requisitos previos

Antes de empezar, necesitarás lo siguiente:
  • Visual Studio 2019 (16.11+) o Visual Studio 2022 con la carga de trabajo “Universal Windows Platform Development” instalada
  • Windows 10 SDK 10.0.16299 o una versión posterior (se instala con la carga de trabajo de UWP)
  • Una cuenta de Auth0 (regístrate gratis)

​
Primeros pasos

1

Configura tu aplicación de Auth0

Debes configurar una aplicación de Auth0 en tu Auth0 Dashboard para que tu aplicación UWP pueda conectarse.
  1. Ve al Auth0 Dashboard e inicia sesión
  2. En la barra lateral izquierda, ve a Applications > Applications
  3. Selecciona Create Application
  4. Introduce un nombre para tu aplicación (por ejemplo, “My UWP App”)
  5. Selecciona Native como tipo de aplicación
  6. Selecciona Create
  7. Ve a la pestaña Settings en la página de detalles de la aplicación
  8. Anota tu Domain y Client ID en la parte superior de la página; los necesitarás en tu código
Anota los valores de Domain y Client ID; los necesitarás más adelante
A continuación, configura la URL de callback:
  1. En la pestaña Settings, desplázate hacia abajo hasta Application URIs
  2. En el campo Allowed Callback URLs, introduce: https://{yourDomain}/mobile
    • Ejemplo: https://mycompany.auth0.com/mobile
  3. En el campo Allowed Logout URLs, introduce la misma URL: https://{yourDomain}/mobile
  4. Selecciona Save Changes
El patrón de URL de callback https://{yourDomain}/mobile es el estándar de Auth0 para aplicaciones nativas. Tu aplicación UWP gestionará automáticamente la redirección; no necesitas ninguna configuración personalizada.
2

Crea tu proyecto de UWP

Si ya tienes un proyecto UWP, ve al paso 3.
  1. Abre Visual Studio
  2. Selecciona File > New > Project
  3. Busca “UWP” y selecciona Blank App (Universal Windows)
  4. Asigna un nombre a tu proyecto (por ejemplo, “Auth0Sample”)
  5. Selecciona Next
  6. En “Minimum version,” selecciona Windows 10 (versión 1909) o una versión posterior
  7. En “Target version,” selecciona la última disponible (actualmente, Windows 11)
  8. Selecciona Create
Visual Studio crea tu proyecto UWP con los archivos básicos MainPage.xaml y MainPage.xaml.cs.
3

Instala el SDK de Auth0

Agrega el paquete NuGet Auth0.OidcClient.UWP a tu proyecto.Con la interfaz de usuario del Administrador de paquetes (recomendado):
  1. Haz clic con el botón derecho en tu proyecto en el Explorador de soluciones
  2. Selecciona Manage NuGet Packages
  3. Ve a la pestaña Browse
  4. Busca “Auth0.OidcClient.UWP”
  5. Selecciona la versión más reciente y haz clic en Install
  6. Acepta cualquier aviso sobre dependencias
O con la consola del Administrador de paquetes:
Install-Package Auth0.OidcClient.UWP
O bien con la CLI de dotnet:
dotnet add package Auth0.OidcClient.UWP
Verifica que la instalación se haya completado sin errores. Si aparece algún mensaje de error, comprueba tu conexión a Internet y vuelve a intentarlo.
4

Añade el inicio y cierre de sesión a tu página principal

Ahora añadirás botones para iniciar y cerrar sesión en tu aplicación. Actualiza MainPage.xaml y MainPage.xaml.cs.Primero, actualiza 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>
Ahora, actualiza 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}";
            }
        }
    }
}
Reemplaza los marcadores de posición en el código:
  • {yourDomain} - Tu dominio de Auth0 (p. ej., mycompany.auth0.com)
  • {yourClientId} - El ID de cliente de tu aplicación de Auth0
  • Auth0Sample - El nombre real de tu proyecto (debe coincidir con el nombre de tu proyecto UWP)
5

Ejecuta la aplicación

Pulsa F5 o selecciona Debug > Start Debugging para iniciar la aplicación.Comportamiento esperado:
  1. La aplicación UWP se inicia y muestra un botón de “Login”
  2. Tocas Login → Se abre una ventana del navegador con la página de inicio de sesión de Auth0
  3. Introduce tus credenciales de Auth0 (o crea una cuenta de prueba)
  4. Después de iniciar sesión, el navegador se cierra automáticamente
  5. La aplicación muestra tu nombre y correo electrónico
  6. El botón cambia a “Logout”
  7. Tocas Logout → El navegador se abre brevemente y luego se cierra
  8. El botón vuelve a mostrar “Login”
Si la página de inicio de sesión no aparece, comprueba que tu Domain y ClientId sean correctos, que la Allowed Callback URL del panel de Auth0 coincida con https://{yourDomain}/mobile y que tu conexión a internet funcione correctamente.
ComprobaciónAhora tienes una experiencia de inicio de sesión con Auth0 totalmente funcional en tu aplicación UWP.

​
Solución de problemas

Problema: Problema de conectividad de red o configuración no válida.Solución:
  1. Comprueba tu conexión a Internet
  2. Verifica que tu Domain sea exactamente correcto (p. ej., mycompany.auth0.com)
  3. Verifica que tu ClientId sea exactamente correcto (sin espacios ni errores tipográficos)
  4. Asegúrate de estar ejecutando Windows 10 (Fall Creators Update) o una versión posterior
Problema: La URL de redirección de tu aplicación de Auth0 no coincide con la que aparece en tu código.Solución:
  1. Ve a Auth0 Dashboard > Applications > Your App > Settings
  2. Desplázate hasta “Application URIs”
  3. Comprueba que “Allowed Callback URLs” contenga: https://{yourDomain}/mobile
  4. Verifica que coincida exactamente con el RedirectUri de tu código
  5. Haz clic en Save Changes si hiciste algún cambio
Problema: Faltan directivas using o hay referencias de espacio de nombres incorrectas.Solución:
  1. Asegúrate de tener using Auth0.OidcClient; al principio de MainPage.xaml.cs
  2. Vuelve a compilar la solución (Build > Rebuild Solution)
Problema: Tu token de actualización ha expirado o las credenciales en caché no son válidas.Solución:
  1. Toca Logout para borrar los tokens en caché
  2. Toca Login de nuevo y vuelve a autenticarte
  3. Si el problema persiste, ve a Auth0 Dashboard y borra los tokens de actualización de tu aplicación
Problema: No se solicitó el scope profile, por lo que los claims del usuario no están disponibles.Solución:
  1. Actualiza tus Auth0ClientOptions para solicitar el scope profile: 
    var options = new Auth0ClientOptions
{
    Domain = "{yourDomain}",
    ClientId = "{yourClientId}",
    Scope = "openid profile email" // Añade esta línea
};
  2. Cierra sesión y vuelve a iniciarla para obtener los scopes actualizados

​
Próximos pasos

Ahora tienes una integración de Auth0 funcional en tu aplicación UWP. Explora estos temas para ampliar tu implementación:

Llamar a una API protegida

Usa tu token de acceso para autenticar solicitudes a una API de backend

Tokens de actualización

Mantén las sesiones de los usuarios entre reinicios de la aplicación

Organizaciones

Compatibilidad con aplicaciones B2B multiempresa

Personalizar Universal Login

Haz que la página de inicio de sesión de Auth0 refleje tu marca

Control de acceso basado en roles

Controla los permisos de los usuarios según sus roles

​
Recursos adicionales

Cliente OIDC de Auth0

Código fuente y documentación del SDK en GitHub

OpenID Connect

Aprende cómo funciona OpenID Connect con Auth0

Prácticas recomendadas para los tokens de acceso

Prácticas recomendadas de seguridad para los tokens de acceso