Configuración de inicio de sesión externo de Twitter con ASP.NET Core

  • Artículo

Por Valeriy Novytskyy y Rick Anderson

Este ejemplo muestra cómo permitir a los usuarios iniciar sesión con su cuenta de Twitter utilizando un proyecto ASP.NET Core de ejemplo creado en la página anterior.

Nota:

El paquete Microsoft.AspNetCore.Authentication.Twitter que se describe a continuación usa las API de OAuth 1a proporcionadas por Twitter. Twitter ha agregado desde entonces api de OAuth 2 con un conjunto diferente de funcionalidades. El paquete AspNet.Security.OAuth.Twitter es una implementación de la comunidad que usa las nuevas API de OAuth 2.

Creación de la aplicación en Twitter

  • Agregar el paquete NuGet Microsoft.AspNetCore.Authentication. Twitter al proyecto.

  • Vaya al panel del portal para desarrolladores de Twitter e inicie sesión. Si aún no tiene una cuenta de Twitter, use el vínculo Registrarse ahora para crear una.

  • Si no tiene un proyecto, cree uno ahora.

  • Seleccione + Añadir aplicación. Rellene el nombre de la aplicación y, a continuación, registre la clave de API generada, el secreto de clave de API y el token de portador. Estos serán necesarios más adelante.

  • En la página Configuración de la aplicación, seleccione Editar en la sección Configuración de autenticación y, a continuación, haga lo siguiente:

    • Habilitar 3-legged OAuth
    • Solicitud de la dirección de correo electrónico de los usuarios
    • Rellene los campos obligatorios y seleccione Registrar.

    Nota:

    Microsoft.AspNetCore.Identity requiere que los usuarios tengan una dirección de correo electrónico de forma predeterminada. Para las direcciones URL de devolución de llamada durante el desarrollo, use https://localhost:{PORT}/signin-twitter, donde el {PORT} marcador de posición es el puerto de la aplicación.

    Nota:

    El segmento URI /signin-twitter se establece como la devolución de llamada predeterminada del proveedor de autenticación de Twitter. Puede cambiar el URI de devolución de llamada predeterminado al configurar el middleware de autenticación de Twitter a través de la propiedad heredada RemoteAuthenticationOptions.CallbackPath de la clase TwitterOptions.

Almacenar la clave y el secreto de la API de consumidor de Twitter

Almacene la configuración confidencial, como la clave de API de consumidor de Twitter y el secreto con Secret Manager. Para este ejemplo, siga estos pasos:

  1. Inicialice el proyecto para el almacenamiento de secretos según las instrucciones de Habilitar el almacenamiento de secretos.

  2. Almacene la configuración confidencial en el almacén de secretos local con las claves de secretos Authentication:Twitter:ConsumerKey y Authentication:Twitter:ConsumerSecret:

    dotnet user-secrets set "Authentication:Twitter:ConsumerAPIKey" "<consumer-api-key>"
dotnet user-secrets set "Authentication:Twitter:ConsumerSecret" "<consumer-secret>"

El separador : no funciona con claves jerárquicas de variables de entorno en todas las plataformas. __, el carácter de subrayado doble, tiene las siguientes características:

  • Es compatible con todas las plataformas. Por ejemplo, el separador : no es compatible con Bash, pero __ sí.
  • Se reemplaza automáticamente por un signo :.

Estos tokens se pueden encontrar en la pestaña Claves y tokens de acceso después de crear una nueva aplicación de Twitter:

Configurar la autenticación de Twitter

Agregue el servicio de autenticación al Startup.ConfigureServices:

{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));
    services.AddDefaultIdentity<IdentityUser>(options =>
        options.SignIn.RequireConfirmedAccount = true)
            .AddEntityFrameworkStores<ApplicationDbContext>();
    services.AddRazorPages();

    services.AddAuthentication().AddTwitter(twitterOptions =>
    {
        twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerAPIKey"];
        twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];
        twitterOptions.RetrieveUserDetails = true;
    });

}

var builder = WebApplication.CreateBuilder(args);
var services = builder.Services;
var configuration = builder.Configuration;

services.AddAuthentication().AddTwitter(twitterOptions =>
    {
        twitterOptions.ConsumerKey = configuration["Authentication:Twitter:ConsumerAPIKey"];
        twitterOptions.ConsumerSecret = configuration["Authentication:Twitter:ConsumerSecret"];
    });

La sobrecarga de AddAuthentication(IServiceCollection, String) establece la propiedad DefaultScheme. La sobrecarga de AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) permite configurar las opciones de autenticación, que se pueden usar para configurar esquemas de autenticación predeterminados con distintos fines. Las llamadas posteriores a AddAuthentication invalidan las propiedades AuthenticationOptions previamente configuradas.

Los métodos de extensión de AuthenticationBuilder que registran un controlador de autenticación solo se pueden llamar una vez por esquema de autenticación. Existen sobrecargas que permiten configurar las propiedades del esquema, el nombre del esquema y el nombre para mostrar.

Varios proveedores de autenticación

Cuando la aplicación requiera varios proveedores, encadene los métodos de extensión del proveedor de AddAuthentication:

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

Para obtener más información sobre las opciones de configuración admitidas por la autenticación de Twitter, consulte la referencia de API TwitterOptions. Esto se puede usar para solicitar información diferente sobre el usuario.

Inicio de sesión con Twitter

Ejecute la aplicación y seleccione Iniciar sesión. Aparecerá una opción para iniciar sesión con Twitter:

Al seleccionar Twitter se redirige a Twitter para la autenticación:

Después de escribir sus credenciales de Twitter, se le redirigirá de nuevo al sitio web donde puede establecer su correo electrónico.

Ahora ha iniciado sesión con sus credenciales de Twitter:

Reenvío de información de solicitud con un servidor proxy o un equilibrador de carga

Si la aplicación se implementa detrás de un servidor proxy o de un equilibrador de carga, parte de la información de solicitud original podría reenviarse a la aplicación en los encabezados de solicitud. Normalmente, esta información incluye el esquema de solicitud seguro (https), el host y la dirección IP del cliente. Las aplicaciones no leen automáticamente estos encabezados de solicitud para detectar y usar la información de solicitud original.

El esquema se usa en la generación de vínculos que afecta al flujo de autenticación con proveedores externos. El resultado de perder el esquema seguro (https) es que la aplicación genera direcciones URL incorrectas poco seguras.

Use middleware de encabezados reenviados para que la información de solicitud original esté disponible para la aplicación para procesar las solicitudes.

Para más información, vea Configurar ASP.NET Core para trabajar con servidores proxy y equilibradores de carga.

Solucionar problemas

  • Solo ASP.NET Core 2.x: si Identity no está configurado mediante una llamada a services.AddIdentity en ConfigureServices, al intentar autenticarse se producirá una excepción ArgumentException: se debe proporcionar la opción "SignInScheme". La plantilla de proyecto utilizada en este ejemplo asegura Identity está configurada.
  • Si la base de datos del sitio no se ha creado aplicando la migración inicial, se produce un error Se ha producido un error en una operación de base de datos al procesar la solicitud. Pulse Aplicar migraciones para crear la base de datos y actualizar para omitir el error y continuar.

Pasos siguientes

  • En este artículo se muestra cómo puede autenticarse con Twitter. Puede seguir un enfoque similar para autenticarse con otros proveedores enumerados en la página anterior.

  • Una vez que publique el sitio web en la aplicación web de Azure, debe restablecer el ConsumerSecret en el portal para desarrolladores de Twitter.

  • Establezca Authentication:Twitter:ConsumerKey y Authentication:Twitter:ConsumerSecret como configuración de la aplicación en Azure Portal. El sistema de configuración se configura para leer las claves de las variables de entorno.