Seguridad OAuth en MVC

En este post aprenderemos a integrar seguridad con OAuth para iniciar sesión con la cuenta de Google.

Creamos una solución MVC marcando la opción de crear un «Host in the Cloud»

He creado una App Web en Azure para colgar la web

En la carpeta Shared dentro de Views abrimos la vista _Layout y copiamos el siguiente código:

@Html.ActionLink(«Autorización OAuth», «Index», «Contactos», new { area = «» }, new { @class = «navbar-brand» })

Configuramos el proyecto para que trabaje sobre SSL

Ahora debemos cambiar la URL inicial del proyecto de forma que utilizará la ruta SSL como inicial. Pulsamos botón derecho sobre el proyecto, propiedades y Web y escribimos la nueva ruta.

Ejecutamos el proyecto y nos saldran dos avisos:

• El primero para indicarnos que el proyecto trabajará sobre SSL
• El segundo es del navegador para indicarnos que se va a instalar un nuevo certificado.

Hecho esto, nos cargará la pagina notificando de que es segura

Ahora nos iremos a crear un nuevo modelo, le llamaremos «Contacto».

Una vez creado le agregamos las siguientes líneas:

[Key]
public int ContactoGoogleId { get; set; }
public string Nombre { get; set; }
public string Direccion { get; set; }
public string Ciudad { get; set; }
[DataType(DataType.EmailAddress)]
public string Email { get; set; }

Ahora nos creamos un controlador usando Entity Framework

Nos toca instalar NuGet, para ello abrimos la consola del manejador de paquetes

1. Habilitamos las migraciones
   1. Enable-migrations
2. Iniciamos una migración
   1. add-migration Initial

 

Vamos a actualizar el método Seed para que actualice los datos de la base de datos con los que deseemos, creando nuevos contactos.

protected override void Seed(SeguridadOAuth.Models.ApplicationDbContext context)
        {
            context.ContactoGoogles.AddOrUpdate(
                z => z.Nombre,
                new ContactoGoogle
                {
                    ContactoGoogleId = 1
                    , Nombre = "Alejandro Ramos"
                    , Ciudad = "Madrid"
                    , Direccion = "Avenida Reina Victoria"
                    , Email = "alejandro@mail.com"
                },
                new ContactoGoogle
                {
                    ContactoGoogleId = 2
                    , Nombre = "Carlos Tormo"
                    , Ciudad = "Elche"
                    , Direccion = "Calle Palmeras"
                    , Email = "carlostormo@mail.com"
                },
                new ContactoGoogle
                {
                    ContactoGoogleId = 2
                    , Nombre = "Adrian Gutierrez"
                    , Ciudad = "Salamanca"
                    , Direccion = "Calle Pez"
                    , Email = "adriangutierrez@mail.com"
                }
                );
        }

Actualizamos la BDD

1. update-database

Nos habrá creado la base de datos LocalDb en la propiedad DefaultConnection de nuestro fichero Web.config.

 

 

Ahora vamos a implementar la seguridad OAuth, de forma que solamente podrán realizar consultas de acción aquellos usuarios que se hayan validado con Google y que tengan un rol canEdit.

Nos dirigimos a console.developers.google.com

Pinchamos en «Credenciales»



Una vez rellenado todos los campos obligatorios nos vamos a «Biblioteca» y buscamos la api de Google +

Una vez habilitados los credenciales nos vamos a App_Start => Startup.Auth.cs.

Descomentamos la linea relacionada con google y metemos las claves que nos han dado en el paso anterior

Se nos Habilitara un nuevo botón en la página de login.

Una vez que nos hemos validado, ahora vamos a realizar la autorización para las acciones de edición a los usuarios de Google.

Abrimos el archivo Configuration.cs de la carpeta Migrations.

Creamos un nuevo método llamado AddUserAndRole a la clase:

 

bool AddUserAndRole(SeguridadOAuth.Models.ApplicationDbContext context)

{

IdentityResult ir;

var rm = new RoleManager<IdentityRole>

(new RoleStore<IdentityRole>(context));

ir = rm.Create(new IdentityRole(«canEdit»));

var um = new UserManager<ApplicationUser>(

new UserStore<ApplicationUser>(context));

var user = new ApplicationUser()

{

UserName = «usuario@usuario.com»,

};

ir = um.Create(user, «Mcsd2016»);

if (ir.Succeeded == false)

return ir.Succeeded;

ir = um.AddToRole(user.Id, «canEdit»);

return ir.Succeeded;

}

Llamamos al método desde el método Seed para que nos incluya al nuevo usuario en el Rol canEdit.

Luego nos vamos al AccountController

Añadimos la siguiente línea
await UserManager.AddToRoleAsync(user.Id, "canEdit");

Actualizamos de nuevo la BDD

En esta sección, se aplica el atributo Authorize para restringir el acceso a los métodos de acción. Los usuarios anónimos solo podrán ver el método de acción Index del controlador principal. Los usuarios registrados verán los datos de contacto (páginas Index y Details del controlador Cm) y las páginas About y Contact. Únicamente los usuarios incluidos en el rol canEdit podrán obtener acceso a los métodos de acción que cambian datos.

1. Abra el archivo App_Start\FilterConfig.cs y reemplace el método RegisterGlobalFilters con el siguiente código (que agrega los dos filtros):

Ahora vamos a asegurar los métodos de Edición del controlador ContactosGoogleController.

Ahora ejecutamos nuestra aplicación y veremos que no podemos ver la mayoría de vistas.

Si nos registramos con un usuario “local”, podremos visualizar Index, Contact, About e Index de Google, pero no podremos editar.

Ahora vamos a publicar el proyecto en Azure. En Settings, seleccionamos una base de datos de Azure

 

Descripción: Implementar seguridad con login de google desde MVC

Autor/a: Sergio Reguera del Pino

Curso:Microsoft MCSD Web Applications + SharePoint Apps

Centro: Tajamar

Año académico: 2016-2017

Linkedin: https://es.linkedin.com/in/sergioreguera