Configuración de inicio de sesión externo de Facebook en ASP.NET Core

Artículo
08/17/2021
3 minutos para leer

En este tutorial con ejemplos de código se muestra cómo permitir que los usuarios inicien sesión con su cuenta de Facebook mediante un proyecto de ejemplo ASP.NET Core 3.0 creado en la página anterior. Para empezar, se crea un identificador de aplicación de Facebook siguiendo los pasos oficiales.

Creación de la aplicación en Facebook

Agregue el paquete de NuGet Microsoft.AspNetCore.Authentication.Facebook al proyecto.
Vaya a la página de la aplicación Para desarrolladores de Facebook e inicie sesión. Si aún no tiene una cuenta de Facebook, use el vínculo Registrarse para Facebook en la página de inicio de sesión para crear una. Una vez que tenga una cuenta de Facebook, siga las instrucciones para registrarse como desarrollador de Facebook.
En el Aplicaciones seleccione Crear aplicación para crear un nuevo identificador de aplicación.
Rellene el formulario y pulse el botón Create App ID (Crear id. de aplicación).
En la nueva tarjeta Aplicación, seleccione Agregar un producto. En la tarjeta Inicio de sesión de Facebook, haga clic en Configurar.
El Asistente para inicio rápido se inicia con Elegir una plataforma como primera página. Omita el asistente por ahora haciendo clic en el vínculo Inicio de sesión Configuración FaceBook en el menú de la parte inferior izquierda:
Se le presenta la página de Configuración cliente de OAuth:
Escriba el URI de desarrollo con /signin-facebook anexado al campo Valid OAuth Redirect URIs (URI de redireccionamiento de OAuth válidos) (por ejemplo: https://localhost:44320/signin-facebook ). La autenticación de Facebook configurada más adelante en este tutorial controlará automáticamente las solicitudes en la ruta /signin-facebook para implementar el flujo de OAuth.

Nota

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

Haga clic en Guardar cambios.
Haga clic Configuración > vínculo Básico en el panel de navegación izquierdo.

En esta página, tome nota de y App ID de App Secret . Agregará ambos a la aplicación ASP.NET Core en la sección siguiente:
Al implementar el sitio, debe volver a visitar la página de configuración de inicio de sesión de Facebook y registrar un nuevo URI público.

Almacenamiento del identificador y el secreto de la aplicación de Facebook

Almacene la configuración confidencial, como el identificador de aplicación de Facebook y los valores secretos con secret Manager. Para este ejemplo, siga estos pasos:

Inicialice el proyecto para el almacenamiento de secretos según las instrucciones de Habilitación del almacenamiento de secretos.
Almacene la configuración confidencial en el almacén de secretos local con las claves secretas Authentication:Facebook:AppId y Authentication:Facebook:AppSecret :
```
dotnet user-secrets set "Authentication:Facebook:AppId" "<app-id>"
dotnet user-secrets set "Authentication:Facebook:AppSecret" "<app-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 :.

Configuración de la autenticación de Facebook

Agregue el servicio facebook en ConfigureServices el método en el archivo Startup.cs:

services.AddAuthentication().AddFacebook(facebookOptions =>
{
    facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
    facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
});

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

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

Ejecute la aplicación y seleccione Iniciar sesión.
En Usar otro servicio para iniciar sesión., seleccione Facebook.
Se le redirigirá a Facebook para la autenticación.
Escriba sus credenciales de Facebook.
Se le redirigirá de nuevo al sitio donde puede establecer el correo electrónico.

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

AccessDeniedPath puede proporcionar una ruta de acceso de redireccionamiento al agente de usuario cuando el usuario no aprueba la solicitud de autorización solicitada.

El código siguiente establece en AccessDeniedPath "/AccessDeniedPathInfo" :

services.AddAuthentication().AddFacebook(options =>
{
    options.AppId = Configuration["Authentication:Facebook:AppId"];
    options.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
    options.AccessDeniedPath = "/AccessDeniedPathInfo";
});

Se recomienda que AccessDeniedPath la página contenga la siguiente información:

Se canceló la autenticación remota.
Esta aplicación requiere autenticación.
Para volver a intentar iniciar sesión, seleccione el vínculo Inicio de sesión.

Prueba de AccessDeniedPath

Vaya a facebook.com
Si ha iniciado sesión, debe cerrar sesión.
Ejecute la aplicación y seleccione Inicio de sesión de Facebook.
Seleccione No ahora. Se le redirigirá a la página AccessDeniedPath especificada.

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 obtener más información, consulta Configuración de ASP.NET Core para trabajar con servidores proxy y equilibradores de carga.

Varios proveedores de autenticación

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

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

Consulte la referencia de la API FacebookOptions para obtener más información sobre las opciones de configuración admitidas por la autenticación de Facebook. Las opciones de configuración se pueden usar para:

Solicite información diferente sobre el usuario.
Agregue argumentos de cadena de consulta para personalizar la experiencia de inicio de sesión.

Solución de problemas

ASP.NET Core solo 2.x: Si no se configura mediante una llamada a en , al intentar autenticarse se dará como resultado ArgumentException: se debe proporcionar la opción Identity services.AddIdentity ConfigureServices "SignInScheme". La plantilla de proyecto que se usa en este tutorial garantiza que esto se haga.
Si la base de datos del sitio no se ha creado aplicando la migración inicial, se produce un error en una operación de base de datos al procesar el error de solicitud. Pulse Aplicar migraciones para crear la base de datos y actualizarla para continuar después del error.

Pasos siguientes

En este artículo se ha mostrado cómo puede autenticarse con Facebook. Puede seguir un enfoque similar para autenticarse con otros proveedores enumerados en la página anterior.
Una vez publicado el sitio web en la aplicación web de Azure, debe restablecer en el portal para desarrolladores AppSecret de Facebook.
Establezca y Authentication:Facebook:AppId como configuración de la aplicación en el Authentication:Facebook:AppSecret Azure Portal. El sistema de configuración está configurado para leer claves de variables de entorno.