¡Buenas! Una de las novedades de ASP.NET MVC4 es la facilidad para incorporar pseudo-autenticación basada en oAuth. Si seleccionamos la plantilla de proyecto de “internet application” esta ya viene configurada por defecto y usarla es de lo más sencillo.
Veamos ahora como añadirla en el caso de que estemos usando otra plantilla de proyecto. En este caso usaremos la plantilla de proyecto “Empty” que en el caso de MVC4 significa vacío de verdad, ya que no tendremos apenas nada en nuestro proyecto.
El módulo que se encarga de proporcionarnos pseudo-autenticación oAuth en MVC4 es un paquete de NuGet llamado Microsoft WebPages OAuth Library, así que el primer paso será añadirlo a nuestro proyecto. Para ello abrimos la Package Manager Console y tecleamos Install-Package Microsoft.AspNet.WebPages.OAuth. Esto nos instalará el paquete y todas sus dependencias (entre las que están DotNetOpenAuth y algunos ensamblados propios de WebPages).
Como parte de instalación del paquete se nos modificará el web.config, básicamente con la configuración de DotNetOpenAuth.
Una vez tenemos el paquete instalado, ya podemos registrar proveedores de oAuth, es decir que sitios de oAuth vamos a poder usar para registrarnos en nuestra aplicación web. Para ello usaremos la clase OAuthWebSecurity. Esta es una clase estática que es la que usaremos para todo el flujo de pseudo-autenticación de oAuth. Lo bueno es que es extremadamente simple de usar 🙂
Para registrar un proveedor de oAuth usamos el método RegisterXXXClient donde XXX es el nombre del proveedor usado. Están soportados los más importantes como Facebook, Twitter y Linkedin p.ej. Para ello añadimos el siguiente código en el Application_Start:
OAuthWebSecurity.RegisterTwitterClient(
consumerKey: "dhkdshdhasjhdaskdhsk",
consumerSecret: "eyuweywuieywuieywi");
Por supuesto debeís usar los valores correctos de consumerKey y consumerSecret (esos valores son proporcionados por el proveedor de oAuth, en este caso twitter).
Ahora debemos crear el flujo de autenticación de nuestra aplicación. Va a ser muy sencillo:
- Le mostraremos una lista de los proveedores válidos que puede usar para autenticarse (en este caso tan solo twitter).
- Cuando seleccione uno, empezará el flujo de oAuth: el usuario será redirigido hacia el proveedor (twitter) para que introduzca allí sus credenciales.
- El proveedor nos hará hará una petición a nuestra dirección de callback y en esa dirección deberemos autenticar al usuario en nuestra aplicación web.
Vamos a encapsularlo todo dentro de un controlador al que llamaremos AccountController. El primer paso es crear la vista que contenga la lista con los proveedores válidos a usar. Llamaremos Login a esta vista:
@using Microsoft.Web.WebPages.OAuth
@{
ViewBag.Title = "Login";
}
<h2>Login to BeerHunters</h2>
@using (Html.BeginForm())
{
foreach (var registerData in OAuthWebSecurity.RegisteredClientData)
{
<input name="provider" type="submit" value="@registerData.DisplayName" />
}
}
Esta vista utiliza la propiedad RegisteredClientData de OAuthWebSecurity para mostrar tantos botones como clientes hayamos registrado. En este caso es un poco inútil ya que tan solo hemos registrado un proveedor (twitter) pero bueno… nos sirve para ver como tratar varios proveedores. Al final termina haciendo un post con el nombre del cliente registrado (según el botón que se pulse). Es en el método de acción que trata dicho post donde debemos lanzar el flujo de oAuth.
Para lanzar el flujo de oAuth es suficiente con llamar al método RequestAuthentication de OAuthWebSecurity. A este método le tenemos que pasar el nombre del proveedor usado:
[HttpPost]
public ActionResult Login(string provider)
{
OAuthWebSecurity.RequestAuthentication(provider);
return null;
}
Podemos devolver null como ActionResult porque el resultado “escapa” a ASP.NET MVC: seremos redirigidos a twitter y allí entraremos las credenciales. Cuando las haya entrado twitter me mandará de vuelta (hacia la dirección que se le especifique, que por defecto es la misma de la cual venimos), pero en la querystring me dejará datos relativos a la autenticación:
Si no queremos ser redirigidos a la URL de donde venimos (/Account/Login) podemos usar el método RequestAuthentication con dos parámetros, el segundo del cual es la URL a la cual seremos redirigidos:
[HttpPost]
public ActionResult Login(string provider)
{
OAuthWebSecurity.RequestAuthentication(provider, Url.Action("ExternalLogin"));
return null;
}
Ahora seremos redirigidos a la acción ExternalLogin una vez hayamos entrado las credenciales en twitter.
Finalmente tan sólo nos queda validar que todo ha ido bien. Para ello en la acción ExternalLogin miramos si la autenticación ha sido correcta, y si lo es autorizar al usuario en nuestra aplicación:
public ActionResult ExternalLogin()
{
var result = OAuthWebSecurity.VerifyAuthentication();
if (result.IsSuccessful)
{
FormsAuthentication.SetAuthCookie(result.UserName, false);
return RedirectToAction("Private");
}
return View();
}
El método VerifyAuthentication hace su trabajo basándose en los datos que nos ha enviado el proveedor via la querystring. El objeto result contiene los datos relativos al intento de autenticación. Si en lugar del nombre del usuario queremos su ID (su id dentro de twitter en este caso) debemos usar result.ProviderUserID.
La acción “Private” es una acción privada, tan solo accesible a usuarios autenticados:
[Authorize]
public ActionResult Private()
{
ViewBag.UserName = User.Identity.Name;
return View();
}
Y listos! Con esto ya tenemos el usuario identificado en nuestra web a través de su cuenta de twitter. La verdad es que más simple y sencillo no podía ser 🙂
Buen post Edu!
En el post anterior vimos como integrar pseudo-autenticación basada en oAuth en aplicaciones MVC4, usando
Motivado por el post de Eduard Tomas acerca de “ Integrar OAuth en tu aplicacion ASP.NET MVC ”