Compartir a través de

Autenticador web

Examinar ejemplo. Examinar el ejemplo

En este artículo se describe cómo puede usar la interfaz de usuario de aplicación multiplataforma de .NET (.NET MAUI).IWebAuthenticator Esta interfaz permite iniciar flujos de autenticación basados en navegador, que escuchan un callback a una URL específica asignada a la aplicación.

La implementación predeterminada de la interfaz IWebAuthenticator está disponible a través de la propiedad WebAuthenticator.Default. Tanto la interfaz IWebAuthenticator como la clase WebAuthenticator se encuentran en el espacio de nombres Microsoft.Maui.Authentication.

Información general

Muchas aplicaciones requieren agregar autenticación de usuario y esto a menudo significa permitir que los usuarios inicien sesión en su cuenta existente de Microsoft, Facebook, Google o Apple Sign In.

Sugerencia

La Biblioteca de autenticación de Microsoft (MSAL) proporciona una excelente solución llave en clave para agregar autenticación a la aplicación.

Si está interesado en usar su propio servicio web para la autenticación, es posible usar WebAuthenticator para implementar la funcionalidad del lado cliente.

¿Por qué usar un back-end de servidor?

Muchos proveedores de autenticación solo se han movido a ofrecer flujos de autenticación explícitos o de dos patas para garantizar una mejor seguridad. Esto significa que necesitará un secreto de cliente del proveedor para completar el flujo de autenticación. Desafortunadamente, las aplicaciones móviles no son un excelente lugar para almacenar secretos y nada almacenado en el código de una aplicación móvil, archivos binarios o, de lo contrario, se considera inseguro.

Este es el procedimiento recomendado para usar un back-end web como una capa intermedia entre la aplicación móvil y el proveedor de autenticación.

Importante

Se recomienda encarecidamente usar bibliotecas y patrones de autenticación solo móviles antiguos que no aprovechan un back-end web en el flujo de autenticación, debido a su falta inherente de seguridad para almacenar secretos de cliente.

Comienza

Para acceder a la WebAuthenticator funcionalidad se requiere la siguiente configuración específica de la plataforma.

Android requiere una configuración de Filtro de intención para controlar el URI de devolución de llamada. Esto se logra heredando de la WebAuthenticatorCallbackActivity clase :

using Android.App;
using Android.Content.PM;

namespace YourNameSpace;

[Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
[IntentFilter(new[] { Android.Content.Intent.ActionView },
              Categories = new[] { Android.Content.Intent.CategoryDefault, Android.Content.Intent.CategoryBrowsable },
              DataScheme = CALLBACK_SCHEME)]
public class WebAuthenticationCallbackActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity
{
    const string CALLBACK_SCHEME = "myapp";

}

Si la versión de Android de destino del proyecto está establecida en Android 11 (R API 30) o superior, debe actualizar el manifiesto de Android con consultas que usen los requisitos de visibilidad de paquetes de Android.

En el archivo Platforms/Android/AndroidManifest.xml , agregue los siguientes queries/intent nodos en el manifest nodo:

<queries>
  <intent>
    <action android:name="android.support.customtabs.action.CustomTabsService" />
  </intent>
</queries>

Uso de WebAuthenticator

La API consta principalmente de un único método, , AuthenticateAsyncque toma dos parámetros:

  1. Dirección URL que se usa para iniciar el flujo del explorador web.
  2. El URI al que se espera que el flujo retorne en última instancia, que esté registrado en tu aplicación.

Nota:

También hay una sobrecarga del método `AuthenticateAsync` que permite cancelar un flujo de autenticación por vía programática con el argumento `CancellationToken`.

El resultado es "WebAuthenticatorResult, que incluye los parámetros de consulta analizados desde el URI de devolución de llamada:

try
{
    WebAuthenticatorResult authResult = await WebAuthenticator.Default.AuthenticateAsync(
        new Uri("https://mysite.com/mobileauth/Microsoft"),
        new Uri("myapp://"));

    string accessToken = authResult?.AccessToken;

    // Do something with the token
}
catch (TaskCanceledException e)
{
    // Use stopped auth
}

La WebAuthenticator API se encarga de iniciar la URL en el navegador y esperar hasta que se reciba el callback.

Flujo de autenticación web típico.

Si el usuario cancela el flujo en cualquier momento, se lanza una excepción TaskCanceledException.

Sesión de autenticación privada

iOS 13 introdujo una API de explorador web efímera para que los desarrolladores inicien la sesión de autenticación como privada. Esto permite a los desarrolladores solicitar que no haya cookies compartidas ni datos de exploración disponibles entre sesiones de autenticación y serán una sesión de inicio de sesión nueva cada vez. Esto está disponible a través del parámetro WebAuthenticatorOptions pasado al método AuthenticateAsync.

try
{
    WebAuthenticatorResult authResult = await WebAuthenticator.Default.AuthenticateAsync(
        new WebAuthenticatorOptions()
        {
            Url = new Uri("https://mysite.com/mobileauth/Microsoft"),
            CallbackUrl = new Uri("myapp://"),
            PrefersEphemeralWebBrowserSession = true
        });

    string accessToken = authResult?.AccessToken;

    // Do something with the token
}
catch (TaskCanceledException e)
{
    // Use stopped auth
}

Diferencias de plataforma

En esta sección se describen las diferencias específicas de la plataforma con la API de autenticación web.

Las pestañas personalizadas se usan siempre que esté disponible; de lo contrario, el explorador del sistema se usa como reserva.

Inicio de sesión de Apple

Según las directrices de revisión de Apple, si la aplicación de Apple usa cualquier servicio de inicio de sesión social para autenticarse, también debe ofrecer Apple Sign In como opción. Para agregar Apple Sign In a tus aplicaciones, deberá agregar el permiso de inicio de sesión con Apple a tu aplicación. Este derecho se define usando la clave com.apple.developer.applesignin, de tipo Array de String.

<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

Para obtener más información, consulte Credencial de Apple: Iniciar sesión en developer.apple.com.

Para iOS 13 y versiones posteriores, llame al método AppleSignInAuthenticator.AuthenticateAsync. Esto usa las API nativas de inicio de sesión de Apple para que los usuarios obtengan la mejor experiencia posible en estos dispositivos. Por ejemplo, puede escribir el código compartido para usar la API correcta en tiempo de ejecución:

var scheme = "..."; // Apple, Microsoft, Google, Facebook, etc.
var authUrlRoot = "https://mysite.com/mobileauth/";
WebAuthenticatorResult result = null;

if (scheme.Equals("Apple")
    && DeviceInfo.Platform == DevicePlatform.iOS
    && DeviceInfo.Version.Major >= 13)
{
    // Use Native Apple Sign In API's
    result = await AppleSignInAuthenticator.AuthenticateAsync();
}
else
{
    // Web Authentication flow
    var authUrl = new Uri($"{authUrlRoot}{scheme}");
    var callbackUrl = new Uri("myapp://");

    result = await WebAuthenticator.Default.AuthenticateAsync(authUrl, callbackUrl);
}

var authToken = string.Empty;

if (result.Properties.TryGetValue("name", out string name) && !string.IsNullOrEmpty(name))
    authToken += $"Name: {name}{Environment.NewLine}";

if (result.Properties.TryGetValue("email", out string email) && !string.IsNullOrEmpty(email))
    authToken += $"Email: {email}{Environment.NewLine}";

// Note that Apple Sign In has an IdToken and not an AccessToken
authToken += result?.AccessToken ?? result?.IdToken;

Sugerencia

Para dispositivos que no son iOS 13, se iniciará el flujo de autenticación web, que también se puede usar para habilitar el inicio de sesión de Apple en los dispositivos Android y Windows. Puede iniciar sesión en su cuenta de iCloud en el simulador de iOS para probar el inicio de sesión de Apple.

back-end del servidor principal de ASP.NET

Es posible usar la WebAuthenticator API con cualquier servicio back-end web. Para usarlo con una aplicación principal de ASP.NET, configure la aplicación web con los pasos siguientes:

  1. Configura tus proveedores de autenticación social externos en tu aplicación web de ASP.NET Core.
  2. Establezca el esquema de autenticación predeterminado en CookieAuthenticationDefaults.AuthenticationScheme en tu .AddAuthentication() llamada.
  3. Usa .AddCookie() en tu llamada Startup.cs.AddAuthentication().
  4. Todos los proveedores deben configurarse con .SaveTokens = true;.
services.AddAuthentication(o =>
    {
        o.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    })
    .AddCookie()
    .AddFacebook(fb =>
    {
        fb.AppId = Configuration["FacebookAppId"];
        fb.AppSecret = Configuration["FacebookAppSecret"];
        fb.SaveTokens = true;
    });

Sugerencia

Si desea incluir el inicio de sesión de Apple, puede usar el AspNet.Security.OAuth.Apple paquete NuGet. Puede ver el ejemplo completo de Startup.cs.

Adición de un controlador de autenticación móvil personalizado

Con un flujo de autenticación móvil, normalmente se inicia el flujo directamente a un proveedor que el usuario ha elegido. Por ejemplo, al hacer clic en un botón "Microsoft" en la pantalla de inicio de sesión de la aplicación. También es importante devolver información relevante a la aplicación en un URI de devolución de llamada específico para finalizar el flujo de autenticación.

Para ello, use un controlador de API personalizado:

[Route("mobileauth")]
[ApiController]
public class AuthController : ControllerBase
{
    const string callbackScheme = "myapp";

    [HttpGet("{scheme}")] // eg: Microsoft, Facebook, Apple, etc
    public async Task Get([FromRoute]string scheme)
    {
        // 1. Initiate authentication flow with the scheme (provider)
        // 2. When the provider calls back to this URL
        //    a. Parse out the result
        //    b. Build the app callback URL
        //    c. Redirect back to the app
    }
}

El propósito de este controlador es deducir el esquema (proveedor) que solicita la aplicación e iniciar el flujo de autenticación con el proveedor social. Cuando el proveedor vuelve a llamar al backend web, el controlador analiza el resultado y redirige al URI de devolución de llamada de la aplicación con los correspondientes parámetros.

A veces, es posible que desee devolver datos como los de access_token del proveedor a la aplicación, lo cual puede hacer mediante los parámetros de la consulta del URI de devolución de llamada. O bien, es posible que quiera crear su propia identidad en el servidor y pasar su propio token a la aplicación. ¡Qué y cómo haces esta parte es para ti!

Consulte el ejemplo de controlador completo.

Nota:

En el ejemplo anterior se muestra cómo devolver el token de acceso del proveedor de autenticación de terceros (es decir, OAuth). Para obtener un token que puede usar para autorizar las solicitudes web al propio back-end web, debe crear su propio token en la aplicación web y devolverlo en su lugar. La información general sobre la autenticación de ASP.NET Core tiene más información sobre los escenarios de autenticación avanzados en ASP.NET Core.