Forem: Dan Espinoza

.Net Core Autorización basada en políticas con Auth0

Dan Espinoza — Fri, 02 Apr 2021 06:26:37 +0000

Llegamos a la ultima entrada de este tutorial, lo prometo.

Puedes ver las entradas anteriores desde aquí.

En la entrada anterior, logramos configurar Auth0 en nuestras aplicaciones para que pudieran autenticar un usuario y realizar llamadas a las apis solo cuando el usuario haya iniciado sesión, lo que ahora haremos es hacer que una api sea accesible solo cuando el usuario tenga ciertos privilegios otorgados por un rol.

Manos a la obra!.

Validando scopes

Tenemos ya casi todo terminado, pero tenemos un gran problema de seguridad, si bien nuestros servicios están protegidos para que se puedan acceder únicamente cuando un usuario tenga una sesión activa, no queremos permitir que cualquier usuario acceda al tercer servicio, por lo que tenemos que implementar un paso más en nuestra capa de seguridad para proteger este endpoint.

Antes de tirar cualquier clase de código vayamos a nuestro dashboard de Auth0 y hagamos unos ajustes.

¡Manos a la obra!.

Vayamos al dashboard de Auth0 e ingresemos a la configuración de nuestra api.

Applications ⇒ API´s ⇒

Una vez ahí vayamos al tab de Permissions y agreguemos un permiso para nuestra API

Acabamos de agregar un permiso con un scope llamado read:permissions y añadimos la descripción de lo que hace.

La elección del nombre de nuestro scope personalizado puede ser cualquiera, pero un standard es nombrarlos de esta manera ya que explícitamente indica su función. nosotros usamos read⇒ para definir la lectura y permissions ⇒ para definir el nombre del endpoint. Tambien podríamos utilizar nombres como por ejemplo: view:events , register:events upload:image, transfer:founds ó quedarnos únicamente con los nombres read: update: write: y delete: Es tu decision pero trata de seguir ese standard.

Si quieres saber más acerca de los api-scopes puedes revisar la documentación oficial de Auth0 dando click aquí

Antes de salir de la configuración de la API habilitemos la configuración RBAC ( Rol based access control ó control de acceso basado en roles). Para eso vayamos a el tab de settings en el apartado de RBAC.

Al habilitar RBCA, las políticas de autorización serán forzadas para esta API, eso quiere decir que los roles y permisos asignados a un usuario serán evaluados cuando el usuario intente acceder al recurso.

También habilitamos la segunda opción para que los permisos del usuario se incluyan en el token de acceso.

Teniendo configurada nuestra API toca que configuremos un rol de usuario que incluya el permiso que acabamos de agregar.

Vayamos a la siguiente ruta en el dashboard.

User Management ⇒ Roles

Una vez ahí click en + CREATE ROLE, nos pedirá que asignemos un nombre y una descripción. Los agregamos y damos click en CREATE.

Ahora vamos a la pestaña Permissions y agregamos el permiso que queremos que tenga ese Rol.

nos pedirá que seleccionemos la API a la cual tendrá permiso y seleccionamos el permiso que creamos anteriormente. Finalmente damos click en ADD PERMISSIONS

Ahora toca asignarle el rol a un usuario. Para ello vayamos a

User Management ⇒ Users

En este punto del tutorial deberíamos de tener un usuario el cual creamos al realizar las primeras pruebas. Si estuviste jugando en este apartado y no tienes ningún usuario es momento de crearlo.

Haz click en +CREATE USER y llena los datos, posteriormente crea un segundo usuario.

En mi caso ya tengo tengo dos usuarios creados.

Considerando esto, le asignaré el Rol que acabamos de crear solo a uno de estos usuarios, el segundo usuario NO TENDRÁ NINGUN ROL. Recuerda, esto es importante.

Para otorgarle un Rol al usuario basta con hacer click en el botón con los tres puntos y dar click en Assign Roles.

Seleccionamos el rol que le queremos asignar y finalizamos dando click en el boton ASSIGN

Genial!! hemos terminado las configuraciones, ahora hagamos los últimos cambios en nuestro código del backend.

Policy Based Authorization .Net Core

Una política de autorización consiste en que uno o mas requerimientos sean registrados como parte de la configuración del authorization service. Para poder validar que nuestro usuario cumpla con las reglas que necesitamos, crearemos dos clases con las cuales nos vamos a ayudar.

Creemos un requerimiento de autorización y llamémoslo HasScopeRequirement, este requerimiento se encargará de revisar si el scope claim issued emitido por nuestro tenant de Auth0 está presente en el request. De ser así, si el scope claim existe, entonces el requirement revisará que el scope claim contenga el request scope. No te asustes, suena más complejo de lo que en verdad es.

Si quieres saber más de la autorización basada en políticas en Asp .NetCore da click aquí.

Veámoslo en código.

En la raíz de nuestro proyecto de netcore api-resource-server creemos una nueva carpeta y nombrémosla Utils, dentro de utils creemos otra de nombre Auth. Dentro de auth crearemos dos clases y las nombraremos HasScopeRequirement y HasScopeHandler . la estructura quedará de esta forma

Vayamos a la clase HasScopeRequirement.cs y escribamos el siguiente código.

// ### HasScopeRequirement.cs ###

using Microsoft.AspNetCore.Authorization;
using System;

namespace api_resource_server.Utils.Auth
{
    public class HasScopeRequirement: IAuthorizationRequirement
    {
        public string Issuer { get; }
        public string Scope { get; }

        public HasScopeRequirement(string scope, string issuer)
        {
            Scope = scope ?? throw new ArgumentNullException(nameof(scope));
            Issuer = issuer ?? throw new ArgumentNullException(nameof(issuer));
        }
    }
}

Si observamos la clase está implementando de la interfaz IAuthorizationRequirement, esta interfaz es un servicio de marcador la cual no contiene ningún método, pero su función es rastrear si la autorización es exitosa.

Su constructor simplemente se encargará de validar que tenga un scope y un Issuer, de lo contrario fallará.

Ahora es turno de la clase HasScopeHandler.cs

// ### HasScopeHandler.cs ###

using Microsoft.AspNetCore.Authorization;
using System.Linq;
using System.Threading.Tasks;

namespace api_resource_server.Utils.Auth
{
    public class HasScopeHandler : AuthorizationHandler<HasScopeRequirement>
    {
        protected override Task HandleRequirementAsync(AuthorizationHandlerContext context, HasScopeRequirement requirement)
        {
            if (!context.User.HasClaim(c => c.Type == "permissions" && c.Issuer == requirement.Issuer))
            {
                return Task.CompletedTask;
            }

            var scopes = context.User.FindFirst(c => c.Type == "permissions" && c.Issuer == requirement.Issuer).Value.Split(' ');

            if (scopes.Any(s=> s== requirement.Scope))
            {
                context.Succeed(requirement);
            }

            return Task.CompletedTask;
        }
    }
}

Acabamos de crear un manejador de scopes, esta clase extiende de AuthorizationHandler a la cual le pasamos como tipo la clase HasScopeRequirement que creamos anteriormente. Posteriormente comprueba que nuestro contexto tenga un claim de tipo scope y que su issuer sea igual al que protege el servicio, de no ser así no lo deja pasar el request. Si cumple con lo solicitado el contexto acepta el requirement y permite el paso del request.

Ahora toca añadir una nueva política a nuestro middleware y configurar nuestro HasScopeHandler como singleton. En el Startup.cs añadimos el siguiente Código

// ### Startup.cs ###

public class Startup
{
     //Código existenete...
    const string ReadPermissions = "read:permissions";

    public void ConfigureServices(IServiceCollection services)
    {
          // Código existente...
          services.AddAuthorization(options =>
          {
               options.AddPolicy(
                name: ReadPermissions,
                policy => policy.Requirements.Add(new HasScopeRequirement(
                  ReadPermissions, "https://ng-dotnet-auth.us.auth0.com/"))
                );
           });

           services.AddSingleton<IAuthorizationHandler, HasScopeHandler>();
           // Código existente...
        }
        // Código existente...
}

Finalmente protegeremos nuestro endpoint con la política que acabamos de crear. Quedando de la siguiente manera

// ### TestController.cs ###

// Código existente...
[Authorize("read:permissions")]
[HttpGet("permission")]
public IActionResult GetPermission()
{
    var result = new Result("Se llamó al servicio privado con permisos de manera satisfactoria.!");
  return Ok(result);
}
// Código existente...

Ahora si lo que tanto esperábamos...

Pruebas!!!! 🤓🤓🤓

Primero realicemos una prueba sin sesión de usuario.

Observamos como sin sesión solo podemos acceder al servicio publico, los otros dos servicios nos piden iniciar sesión.

Ahora hagamos otra prueba. Iniciemos sesión con la cuenta que NO tiene asignado un rol.

Con el usuario sin Rol asignado vemos como podemos acceder tanto al servicio publico como al privado, pero en el caso del privado + permisos, nos indica que no tenemos los permisos necesarios.

Si miramos el apartado de network, en las developer tools de chrome veremos lo siguiente:

Los dos primeros retornan un estatus 200 que la petición fue satisfactoria y la tercera retorna un estatus 403 que significa forbidden en español prohibido y, en palabras mortales, que no tenemos permisos para ver ese contenido.

Todo esto significa que logramos nuestro objetivo, proteger la API incluso cuando el usuario haya iniciado sesión.

Pero, ¿que pasa con un usuario que si tiene el rol necesario?

Iniciemos sesión y veamos.

¡¡Genial!! Nuestro usuario con rol asignado tiene los permisos para realizar peticiones a los tres servicios.

Cumplimos nuestra misión. ¡¡Hurra!! 🎉🥳🎈

Reacapitulando

Después de un buen rato, configurando una integración de tres ecosistemas distintos recapitulemos lo que hemos conseguido.

Conocimos Auth0 y la diferencia entre una APP y una API.
Configuramos Auth0 para proteger nuestra primer aplicación SPA y Nuestra API.
Creamos una aplicación en angular, con la cual puedes realizar el registro e inicio de sesión de un usuario mediante el sdk de auth0.
Vimos una ligera introducción de lo que es JSON Web Token y en que consiste.
Configuramos en angular, un interceptor para incluir un JSON Web Token en los request coincidentes con nuestros endpoints, gracias al sdk que provee auth0.
Consumimos tres servicios diferentes para conectar nuestro cliente con el backend mediante APIRest con HTTPModule de Angular.
Creamos un proyecto backend con Net Core Web API.
Configuramos el middleware del backend para permitir la autenticación de usuarios mediante JWT y añadimos una política para permitir los orígenes cruzados.
Configuramos el middleware para añadir una política basada en Autorización.
Creamos un manejador que permitiera validar si en el JWT existe uno o mas scopes y validar los requirements gracias a la interfaz IAuthorizationRequirement y a la clase AuthorizationHandler.
Conocimos algunas de las principales respuestas del protocolo HTTP.

WOW! Fueron bastantes temas aprendidos o repasados.

¡¡Felicidades!!.

Este fue mi primer articulo y mi primer tutorial paso a paso, de lo que espero seguir sacando muchos mas.

Espero que haya sido de tu agrado, pero en especial, que te sea de mucha utilidad. Al final de cuentas esa es la principal razón de haberlo realizado.

Te dejo la url del repositorio por si te perdiste de algún paso, puedas comparar el código.

Repositorio en Github

Sígueme en twitter @yosisoydanny o en Linkedin @odprz

Hasta la otra!

Autenticación en Angular con Auth0

Dan Espinoza — Fri, 02 Apr 2021 04:16:47 +0000

Hola, esta es la segunda parte del tutorial donde intentaremos conectar una SPA en Angular con un servicio creado en .Net core y añadir autenticación y autorización con Auth0.

Si aún no viste la primera parte puedes encontrarla aquí

En la primera parte creamos tanto el proyecto en angular como el de .Net Core y realizamos la comunicación entre ellos, pero nos quedamos con un problema de seguridad que a continuación resolveremos.

Así que comencemos.

Configurando Tenant de Auth0

Ya vamos avanzando, daré por hecho que en este momento ya cuentas con una cuenta de Auth0. Si no es así ¿Que esperas? es gratis! bueno de pende que plan elijas 😂.
https://auth0.com/

Una vez creada la cuenta nos pedirá que configuremos un Tenant, basta con asignar un nombre y una región. Dependiendo de tu criterio y de la protección general de regularización de datos elige la región que mas te guste. a continuación damos en CREATE

Listo! tenemos nuestro Tenant creado. Es momento de crear nuestra aplicación y la API.

lo primero que haremos será configurar la protección de nuestra API, para ello daremos click en APIs que se encuentra en el menu lateral dentro de Applications

Crearemos una nueva API dando click en el botón + CREATE API

En la pantalla de creación elegiremos un nombre que sea amistoso y fácil, tambien necesitamos dar un Identifier que por recomendación nos piden que sea una url, no es necesario que esta sea publica simplemente es para identificarla. Finalmente un algoritmo para generar los tokens utilizaremos en este caso RS256. Clicamos en CREATE

A continuación damos click en la API que acabamos de crear, vamos a la pestaña settings y en el apartado General Settings copiamos el Id. Lo mantendremos copiado y lo utilizaremos más adelante.

Listo hemos configurado nuestra API, ahora creemos nuestro Aplicación. Demos click en Applications que se encuentra en el menu lateral dentro de Applications

A continuación Click en +CREATE APPLICATION

Elegimos un nombre para distinguir nuestra aplicación y seleccionamos el tipo de aplicación Single Page Web Applications y damos click en CREATE.

Listo tenemos la aplicación creada, configuremos solo una cosa mas en la pantalla de nuestra nueva aplicación. Seleccionemos la pestaña de settings.

en el apartado de Application URIs agregamos la uri de nuestro cliente angular http://localhost:4200/ a los siguientes campos

Allowed Callback URLs
Allowed Logout URLs
Allowed Web Origins
Allowed Origins (CORS)

y guardamos los cambios.

al final de la pagina de configuración damos click en Advanced Settings y posteriormente en la pestaña OAuth.

En el campo Allowed APPs / APIs pegamos o escribimos el Id de la API que creamos anteriormente. Sí, el que te dije que copiaras y lo mantuvieras en tu portapapeles. Si no lo recuerdas ve a la sección APIs > Click en la API que creamos > Click en Settings. Se encuentra en la sección General Settings en el campo Id.

Demos click en SAVE CHANGES. Terminamos de configurar Auth0... por ahora.

De vuelta al código

Implementemos un sistema de login en nuestro proyecto de angular con Auth0. Para ello vamos a nuestra consola dentro da la raíz del proyecto e instalemos el sdk que nos proporciona Auth0

npm install @auth0/auth0-angular

Una vez instalado el paquete necesitamos primero recuperar el dominio y el clientId que registramos en la aplicación cliente en el Dashboard de Auth0. Si no las recordamos podemos encontrarlas en el menú Applications ⇒ Applications ⇒ ⇒ settings

Una vez que nos hagamos de ellas agregaremos algunas líneas de código al app.module.ts quedando de la siguiente manera

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AuthModule } from '@auth0/auth0-angular';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    AuthModule.forRoot({
      domain: 'Domain',
      clientId: 'ClientID'
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Acabamos de importar al modulo principal Auth0Module y lo configuramos para que funcione con las credenciales de nuestra aplicación. Asegúrate de cambiar Domain y ClientId por los de tu aplicación SPA configurada anteriormente.

Crearemos un nuevo componente que se encargará de realizar el login y logout de nuestra aplicación

ng g c components/auth-button

El comando anterior genero un componente llamado auth-button.component agreguemos funcionalidad a este componente

// ### auth-button.component.ts ###

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';

@Component({
  selector: 'app-auth-button',
  templateUrl: './auth-button.component.html',
  styleUrls: ['./auth-button.component.scss']
})
export class AuthButtonComponent implements OnInit {

  constructor(@Inject(DOCUMENT) public document: Document, public auth: AuthService) {}

  ngOnInit(): void {

  }

}

<!-- ### auth-button.component.ts ### -->

<ng-container *ngIf="auth.isAuthenticated$ | async; else loggedOut">
  <div class="profile-container">
    <div class="profile" *ngIf="auth.user$ | async as user">
      <img class="img-profile" *ngIf="user.picture" [src]="user.picture" alt="image profile">
      {{user.name}}
    </div>
    <button class="btn btn-red" (click)="auth.logout({ returnTo: document.location.origin })">
      Log out
    </button>
  </div>
</ng-container>

<ng-template #loggedOut>
  <button  class="btn btn-red" (click)="auth.loginWithRedirect()">Log in</button>
</ng-template>

Lo que acabamos de hacer es definir un botón que se encargara de hacer la petición a Auth0 para realizar el login del usuario mediante el método auth.loginWithRedirect() , al dar click redirigirá al usuario al Universal Login Page de Auth0 para poder registrarlo y autenticarlo. Una vez autenticado Auth0 redireccionara a la url que definimos anteriormente [http://localhost:4200](http://localhost:4200) .

Una vez autenticados en nuestra aplicación, podremos observar un poco de la información del usuario activo gracias al observable atuth.user$ , este observable tiene información sensible del usuario autenticado. Cabe aclarar que este observable solo emitirá su valor si isAuthenticate$ es true a demás de la información del usuario, veremos que el botón login ha cambiado a logout.

Esto es gracias que estamos utilizando isAuthenticated$ para validar si el usuario está autenticado, ahora al hacer click en Logout para salir se llamará al método logouth() quien se encargara de terminar la sesión del usuario. Es importante saber que le estamos diciendo al método logouth() que redireccione a http://localhost:4200 que definimos en la sección de Allowed Logout URLs en el dashboard. Solo que estamos haciendo uso de window.location.origin para indicar lo mismo.

Listo! Pudimos configurar el cliente para que permita el registro e inicio de sesión, pero si hacemos click en los botones para llamar a los servicios de backend notamos que funcionan aun cuando no se haya iniciado sesión. De los tres servicios que tenemos solo queremos que uno sea público, los otros dos botones no deberían retornarnos una respuesta (200OK) a menos que tengamos iniciada la sesión. Vamos a solucionar esta problemática.

Configurando autenticación en backend mediante JWT

A continuación protegeremos la API mediante la validación de un token emitido por Auth0, para eso haremos uso de una librería que nos ayudara con eso.

La libreria en cuestion es Microsoft.AspNetCore.Authentication.JwtBearer y la podemos instalar de 2 formas distintitas. La primera mediante el administrador de paquetes nugget en Visual Studio y la otra con el CLI de .Net.

Para instalarla con el CLI de .NET basta con ir a la rais de nuestro proyecto de .Net y ejecutar mediante la consola lo siguiente

dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer

La otra opción es ir al Administrador de paquetes.

En Visual Studio dar click derecho sobre el proyecto > Administrar Paquetes Nuget...
Se abrirá una pestaña dar click en examinar y buscar el paquete por su nombre, posteriormente dar click en instalar y aceptar las dependencias y licencias.

// ### TestController.ts ###

// Código existente...
public class TestController : ControllerBase
{
    [HttpGet("public")]
  public IActionResult GetPublic()
  {
      var result = new Result("Se llamó al servicio publico de manera satisfactoria.!");
    return Ok(result);
  }
  [Authorize]
  [HttpGet("private")]
  public IActionResult GetPrivate()
  {
      var result = new Result("Se llamó al servicio privado de manera satisfactoria.!");
    return Ok(result);
  }

  [Authorize]
  [HttpGet("permission")]
  public IActionResult GetPermission()
  {
      var result = new Result("Se llamó al servicio privado con permisos de manera satisfactoria.!");
    return Ok(result);
  }
}
// Código existente...

Ejecutamos la solución y probamos los servicios en postman o tu entorno de desarrollo de APIs y pruebas favorito.

Notamos como el estatus de la respuesta es un 401 Lo que significa que no tiene autorización para ver este contenido.

Excelente, hemos conseguido poner seguridad y evitar el acceso a usuarios no autorizados. Ahora probemos con nuestra aplicación en angular.

Si haz iniciado sesión, es momento de que hagas logout y finalices la sesión del usuario. Si es así prueba a pulsar los botones a ver que pasa.

Muy bien, observamos que esta aplicada la seguridad en nuestros endpoints. Ahora inicia sesión y prueba nuevamente.

🤔 Umm... Parece que algo no esta bien, deberíamos tener acceso al menos a la api privada ya que estamos logueados.

¿Que Pasó?

JWT (Json Web Token) eso es lo que pasó. ¿O no pasó?.

No voy a profundizar mucho en lo que es JWT y prometo hacer un articulo dedicado a eso, pero en pocas palabras un JWT es un JSON codificado en Base 64 que emite un servidor para verificar la identidad de un usuario que intenta acceder a un recurso. Cuando un usuario quiere acceder a un recurso mediante el protocolo HTTP debe añadir en su petición ese JWT codificado mediante la autenticación bearer. es una cadena mas o menos así:

bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Im1GS0hoVGdJdDVKZUdxLWtWLXZOcCJ9.eyJpc3MiOiJodHRwczovL2hlYWRsZXNzLWFwaS51cy5hdXRoMC5jb20vIiwic3ViIjoiYXV0aDB8NjA1Y2JjYjJlZDNlMjgwMDZmNmQyZTI2IiwiYXVkIjpbImh0dHA6Ly9tb25nb2RlYmFwaS5jb20iLCJodHRwczovL2hlYWRsZXNzLWFwaS51cy5hdXRoMC5jb20vdXNlcmluZm8iXSwiaWF0IjoxNjE2Njk0NzkzLCJleHAiOjE2MTY3ODExOTMsImF6cCI6Ijl1S3A0T2dvdkRLQTBZM2E3eDV1MXdhWDhvcGpDa3dtIiwic2NvcGUiOiJvcGVuaWQgZW1haWwgcHJvZmlsZSIsImd0eSI6InBhc3N3b3JkIn0.SuL3hCo9mKM8SwV-CsRwRkP7jHL6_26-wCO4gzIjyhV89356dugoFtPa_hRPfO2HyT8tyrGI2SCytdS8tcsbqjpLDbZ8AO2b1TbJgt1Wedq8dPgF1uYsmHp-VrKOdFbQK2824kNzBVuOPEzSkgX7v2KQdBtyAlHcyuEMjaT7sSqxeq0acosJGeJ7pvYyz-Tsy6AcgNVOst3RZNrwYoqzNcBey__53HqyEFku-cblpVuMBOqq1snDgdq24rxjRHnVWNvxqwmDWu1wIwyNHzAUnEoJttHJB84aZtX8XAZvQ9zG1QHLfxwB4sB87JQz2UY1jgWxeio0hvBe0OqR_nGgxw

una vez que el servidor de recursos api recibe una petición, revisa que en las cabeceras venga ese token, de ser así lo valida con el servidor que lo emitió, si el Token es valido, no fue alterado ni ha expirado, el servidor de recursos Api permite que la petición pase, de lo contrario no lo hace y retorna un error 401 Unauthorize.

De vuelta al proyecto de angular. Si recordamos, en ningún momento estamos recuperando ese token ni tampoco lo hemos incluido en las peticiones a las api que estamos llamando. Afortunadamente Auth0 también provee una solución sensilla de configurar un interceptor así que solucionemos eso.

// ### app.module ###

// Código existente...
import { AuthHttpInterceptor, AuthModule } from '@auth0/auth0-angular';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// Código existente...
 AuthModule.forRoot({
  // Código existente...

    // configuración del interceptor
  httpInterceptor: {
      allowedList: [{
          uri: 'https://localhost:44386/api/v2/*',
      tokenOptions: {
          audience: 'audience asignada a tu api en el dashboard de Auth0',
          }
       },
         {uri:'https://localhost:44386/api/test/private'},
     {uri:'https://localhost:44386/api/test/permission'}
        ]
   }
    // termina configuración del interceptor

 }),
],
  providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true }
    ],
// Código existente...

Agregamos una configuración al array de los providers y le decimos que configure como de tipo HTTP_INTERCEPTOR el cual proviene de AutHttpInterceptor asegúrate de agregar la clase a tus imports.

dentro de la configuración de AuthModule agregamos un interceptor donde indicamos la lista de sitios que funcionaran con este interceptor, aqui solo hemos configurado uno y le indicamos que le añada el token a las urls que coincidan con la uri indicada. En la primera regla que puse como ejemplo, le decimos en este caso que apunte a las url de nuestro backend. Observa como finaliza con * el cual es un comodín que le indica que todas las urls que inicien con lo que esta antes de el * deberá añadir el token.

ESTA REGLA NO LA VAMOS A EMPLEAR EN ESTE TUTORIAL solo la puse para que sepas que puedes forzar la inclusion de todas las url que coincidan con un patron.

Añadiremos únicamente las url que queremos proteger, por seguridad siempre es recomendable mandar el token a las urls solo cuando es necesario, si una api es publica no deberíamos de mandar el encabezado con un token.

Existe otro modo de trabajar con estas reglas pero por ahora solo veremos esta forma.

Antes de continuar modificaremos la política de seguridad en nuestro servidor backend para que acepte el encabezado de autorización de lo contrario recibiremos un error de cross origins.

En la clase Startup.cs modificamos el middleware AddCors() para que quede de la siguiente forma

// ### Startup.cs ### 
// Código existente ..
services.AddCors(options =>
{
    options.AddPolicy(name: AngularClient, builder =>
  {
      builder.WithOrigins("https://localhost:4200", "http://localhost:4200");
    builder.WithHeaders("authorization");
   });
 });
// Código existente ...

Una vez realizados estos cambios, probemos nuestra aplicación de dos maneras, sin sesión y con una sesión activa.

Observemos que cuando hacemos las peticiones a los servicios cuando la sesión no esta iniciada, llama de manera satisfactoria a nuestro servicio publico. Sin embargo cuando queremos llamar los servicios protegidos, el interceptor se encarga de decirnos que para poder utilizar esos servicios requerimos tener una sesión iniciada, ya que si no inicia sesión no existe un token para ser añadido a la cabecera de la petición.

Si notamos en la herramientas de desarrolladores la petición hacia los servicios private y permission ni siquiera fueron enviadas.

Con sesión activa

Por otro Lado cuando la sesión está iniciada, AuthModule puede generar un token y enviarlo en los request que definimos en la configuración. Por lo tanto obtenemos una respuesta 200 OK en cada uno de nuestros servicios solicitados.

Vamos a dejarlo por hoy terminemos para una tercer entrada la finalización de este tutorial y que cada vez se pone mas interezante.

Nos metermos de lleno a configurar y crear las politicas de autorización para permitir acciones a ciertos usuarios que cumplan con un cierto rol.

Así que hasta la otra.

Si aún no viste la primera parte puedes encontrarla aquí

Angular + Net Core Web Api + Auth0 Autorización basada en políticas.

Dan Espinoza — Fri, 02 Apr 2021 02:46:12 +0000

Hola!. Esta es la primera entrada del tutorial donde te enseñare a registrar y autenticar a un usuario desde angular, consumir una web api desarrollada en .net core. Además gracias a Auth0 autenticaremos y validaremos que el usuario tenga suficientes privilegios para realizar dichas acciones.

Hoy en día, diseñar una aplicación con la más mínima funcionalidad requerirá persistir los datos; la mayoría de las veces nos veremos forzados a implementar de alguna manera, una función que nos garantice la autenticidad y validez de esos datos así como definir quien o quienes están destinados a verlos.

Controlando el acceso

Si no me has entendido aun, me refiero a implementar un método de seguridad que ayude a proteger y a restringir los accesos y modificaciones a un recurso.

Si bien, podríamos implementar desde cero un método de autenticación de usuarios y seguridad, no queremos reinventar la rueda. Afortunadamente existen muchas formas de solucionar el problema que nos planteamos.

Por ejemplo. Microsoft proporciona la Api ASP.Net Core Identity para permitir el control de usuarios en una aplicación Web (Administración de usuarios, contraseñas, claims, roles, tokens etc..). Pero cuando queremos proteger una SPA, App Móvil, Web api o un servidor de recursos, la recomendación de ellos es utilizar algún medio mas sofisticado para su protección. La verdad es que harán mas fácil y seguro todo el proceso.

Dentro de las recomendaciones que Microsoft menciona encontramos:

No te preocupes, también existen otros servicios de terceros que nos pueden ayudar a lidiar de una manera sencilla con este problema.

Auth0 al rescate

Hoy quiero hablar de Auth0. En sus propias palabras Auth0 es una plataforma adaptable de autenticación y autorización, fácil de implementar.

Auth0 es una solución de identidad basada en la nube, que ofrece una plataforma de autenticación y autorización que protege las identidades de cualquier tipo de usuarios dentro de una aplicación.

¿Que podemos hacer con Auth0?

Crear un sistema de registro y autenticación de usuarios para una aplicación mediante cuentas de usuario tradicionales (email y contraseña), con servicios de terceros (gmail, facebook, twitter etc..) así como con conexiones empresariales tales como AD, SAML, Google Workspace y otros.
Proteger servidores de recursos web api.
Usar cualquier base de datos de nuestra propiedad para el almacenamiento de usuarios.
Manejo de permisos basados en roles.
Entre otras funcionalidades avanzadas que permite la plataforma.

A demás cuenta con un plan gratuito que nos brinda un alcance de mas de 7,000 usuarios activos al mes entre otras características que para pequeños proyectos nos vendrá muy bien.

¿Que vamos a hacer?

Implementaremos una solución basada en Una SPA(Single Page Application) en Angular como capa de presentación.

Posteriormente conectaremos esa aplicación a un servidor de recursos en Net Core el cual consumiremos mediante servicios web api.

Finalmente integraremos esas aplicaciones con Auth0 que nos permitirá proteger el acceso a esos recursos. El acceso a la aplicación en angular sera mediante la autenticación de usuario y el acceso a los endpoints será mediante un JsonWebtoken. Solo los usuarios que tengan la autorización requerida podrán acceder a dichos recursos.

Manos a la obra

Pues dejemos atrás las palabras y entremos de lleno a ensuciarnos las manos.
Comenzaremos por crear tanto el proyecto de angular como el de net core. Para esto abriré una consola y utilizare el CLI de angular para crear una nueva aplicación

Daré por hecho que ya tienes instalado lo necesario para crear una aplicación de angular y de net core. De no ser así hay muchos tutoriales de los que puedes hacer uso y siempre tendrás las documentaciones oficiales.

#Creamos la aplicacion de angular
npx -p @angular/cli@latest ng new client-app-identity --style=scss
# o si tienes el cli instalado
ng new client-app-identity --style=scss

ya va de cada quien habilitar el modo estricto y configurar el routing en el momento que nos lo pregunte el cli. Cuestión de configurarlo a su criterio.

una vez creado el cliente seguiremos con la creación del proyecto de net core.

Al momento de escribir este articulo estoy utilizando Net Core 5.0 como framework

#creamos e ingresamos al directorio de la applicacion
mkdir backend-app-idnetity && cd backend-app-idnetity
#creamos una solucion para gestionar nuestro proyecto
dotnet new sln
#creamos un nuevo proyecto webapi
dotnet new webapi -n api-resource-server
#agregamos el proyecto a la solucion
dotnet sln add api-resource-server

Tambien puedes crear un proyecto web-api de la manera tradicional entrando a Visual Studio y dando click en nuevo proyecto

Nunca esta de más saber todas las opciones que tenemos a la mano.

Volviendo a lo anterior, si observamos el directorio raíz encontraremos dos carpetas. Una es para nuestro proyecto de angular y otro el de net core

#regresamos al directorio raíz
cd ..
#revisamos el contenido del directorio 
#en bash
ll
#en CMD
dir

Abrimos la carpeta client-app-identity con tu editor favorito. Yo utilizare VS Code, este es nuestro proyecto.

Presionamos ctrl+ñ para lanzar la consola incluida con VSC y lanzamos nuestra aplicación

ng server -o

Si todo sale bien Veremos nuestra aplicación inicial ejecutándose en nuestro navegador.

vamos a hacer algunas modificaciones a los siguientes archivos

// #### styles.scss ####

// para no centrarnos tanto en el diseño copiaremos el código 
// que se encuentra entre las etiquetas <style></style> en nuestro app.component.html
// y lo pegamos en este archivo

<!--app.component.html -->

<div class="toolbar" role="banner">
  <img
    width="40"
    alt="Angular Logo"

  />
  <span>Angular + NetCore WebApi + Auth0</span>
    <div class="spacer"></div>
    <button style="margin-right: 2rem;">Login</button>
</div>

<div class="content" role="main">
  <h1>Bienvenido</h1>
</div>

<router-outlet></router-outlet>

partiremos con estos cambios para tener la interfaz limpia. Deberíamos de ver este resultado

si observamos bien a demás de limpiar la vista añadimos en la parte superior derecha un botón para realizar el login en nuestra aplicación.

// #### style.scss ####
@import url('https://fonts.googleapis.com/css2?family=Roboto');
// ... Codigo anterior

.btn{
  padding: 8px;
  border-radius: 5px;
  border-width: 0 0 5px 0;
  border-style: solid;
  background-color: #c2c3c4;
}

.btn:hover{
  cursor: pointer;
}

.btn.btn-red{
  color: white;
  background-color: #F2385A;
  border-color: #d63452;
}

.btn.btn-red:hover{
  background-color: #eb2c4f;
  border-color: #d12d4b;
}

.btn.btn-blue{
  color: white;
  background-color: #3498DB;
  border-color: #258cd1;
}

.btn.btn-blue:hover{
  background-color: #2589cc;
  border-color: #1777b8;
}

.btn.btn-yellow{
  color: white;
  background-color: #dbbc34;
  border-color: #d1a925;
}

.btn.btn-yellow:hover{
  background-color:  #ceaf25;
  border-color: #c59c16;
}

.btn.btn-green{
  color: white;
  background-color: #34db3c;
  border-color: #39d125;
}

.btn.btn-green:hover{
  background-color: #2cc534;
  border-color: #32b820;
}

.apis-section{
  display: flex;
  width: 100%;
  flex-direction: column;
  row-gap: 1rem;
}
.result{
  padding: 1rem 0 .5rem 3rem;
  color: #24292e;
}

.profile-container{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 2em;
}
.profile{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  margin-right: 10px;
}

.img-profile{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

Lo que hicimos en styles.scss importar la fuente roboto desde la api de google.fonts y añadimos un poco mas de estilos al final de nuestro css para mejorar un poco los botones tambien añadimos una sección para organizarlos

<!--app.component.html -->

<!-- ... Codigo anterior -->
<div class="content" role="main">
  <h1>Bienvenido</h1>

<div class="apis-section">
    <div class="api">
      <button class="btn btn-blue" (click)="onPublicButtonClick()">Llamar Api Publica</button>
    </div>
    <div class="api" >
<button class="btn btn-yellow" (click)="onPrivateButtonClick()">Llamar Api Privada</button>
    </div>
    <div class="api">
      <button class="btn btn-green" (click)="onPermissionsButtonClick()" >Api privada + permisos</button>
    </div>
  </div>

<!-- ... Codigo anterior -->

En app.component.html agregamos tres botones que invocan un método distinto

// ##### app.component.ts ####

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  onPublicButtonClick(){

  }

  onPrivateButtonClick(){

  }

  onPermissionsButtonClick(){

  }
}

En app.component.ts añadimos tres métodos que llamaremos desde el evento click a los botones en nuestro template y desde los cuales haremos una llamada a nuestras api´s.

Ahora nuestra vista queda de la siguiente manera

Haremos una pausa en angular y pasaremos a generar nuestros servicios web api en el servidor de recursos en Net Core.

Generando los servicios en Net Core

Para comenzar abrimos la solución en Visual Studio, el explorador de soluciones se encuentra de la siguiente manera

Lo primero que haremos será crear 3 servicios, para esto daremos click derecho en la carpeta controllers y a continuación agregar>controller. Nos pedirá que indiquemos que tipo de controlador queremos y seleccionaremos Controlador de API: en blanco y lo nombraremos TestController.cs

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace api_resource_server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TestController : ControllerBase
    {
        [HttpGet("public")]
        public IActionResult GetPublic()
        {
            var result = new Result("Se llamó al servicio publico de manera satisfactoria.!");
            return Ok(result);
        }

        [HttpGet("private")]
        public IActionResult GetPrivate()
        {
            var result = new Result("Se llamó al servicio privado de manera satisfactoria.!");
            return Ok(result);
        }

        [HttpGet("permission")]
        public IActionResult GetPermissions()
        {
            var result = new Result("Se llamó al servicio privado con permisos de manera satisfactoria.!");
            return Ok(result);
        }
    }

    public class Result
    {
        public Result(string msg)
        {
            this.Msg = msg;
        }
        public string Msg { get; set; }
    }
}

Se crearon tres servicios los cuales accederemos desde nuestro cliente en angular, a demás se creo una clase de nombre Result que nos servirá para mapear nuestra respuesta.

Por el momento los tres endpoints son accesibles para cualquier persona que haga el llamado, más adelante vamos a restringir el acceso solo a ciertos usuarios con ciertos privilegios.

Antes de continuar, agregaremos una política de seguridad de orígenes cruzados para permitir la comunicación entre nuestro cliente y el backend.

Para esto modificaremos el archivo Startup.cs

// #### Startup.cs####

// Codigo existente ...

const string AngularClient = "angular-client";

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
   services.AddCors(options =>
   {
       options.AddPolicy(name: AngularClient, builder => builder.WithOrigins("https://localhost:4200", "http://localhost:4200"));
   });

// codigo existente ...
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// codigo existente ..
    app.UseCors(AngularClient);
// codigo existente ...
}

Lo que hicimos fue agregar al middleware mediante services.addCors() una regla para que permita orígenes cruzados con la URL de nuestra aplicación angular.

y agregamos esa regla mediante app.UseCors()

Ahora podemos probar los servicios que acabamos de hacer, para esto podemos usar POSTMAN o cualquier aplicación de este tipo, la que más te guste.

En visual studio ejecutaremos el proyecto F5 o click en el botón ▶.

Lo primero que veremos sera la documentación de swagger junto con los endpoints que hemos creado.

Seguimos realizando las pruebas de los servicios.

Como lo mencione anteriormente los servicios funcionan pero cualquier persona puede acceder a ellos.

Conectando backend y cliente

Con los servicios creados y la plantilla que hicimos en Angular ya estamos listo para conectarlos así que manos a la obra.

Regresemos al proyecto de angular y realizaremos la siguiente modificación al código.

// ### app.module.ts ###

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Añadimos a los imports de app.module.ts el modulo de HttpClient para poder realizar llamadas a servicios http. asegúrate de realizar la importación desde '@angular/common/http'

A continuación creamos una nueva carpeta de nombre models y dentro de ella un archivo llamado result.ts

El código quedaría de la siguiente forma

// ### result.ts ##

export interface Result{
  msg:string;
}

este modelo servirá para poder mapear la respuesta de nuestro servicio.

Los otros archivos quedarían de la siguiente manera.

// ### app.component.ts ###

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component } from '@angular/core';
import { Result } from './models/result';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  serverUri = 'https://localhost:44386/api/test/';

  headers: HttpHeaders = new HttpHeaders();

  publicResponse:Result;
  privateResponse:Result;
  permissionResponse:Result;

  constructor(private httpClient: HttpClient){
    this.headers.set('Content-Type','application/json');
    this.headers.set('Accept', 'application/json');
  }

  onPublicButtonClick(){
    console.log('response',this.publicResponse)
    this.httpClient.get<Result>(this.serverUri+'public',{headers:this.headers}).subscribe(
      result=>this.publicResponse = result,
      err=> this.publicResponse  = this.isUnauthorized(err)
    );
  }

  onPrivateButtonClick(){
    this.httpClient.get<Result>(this.serverUri+'private',{headers:this.headers}).subscribe(
      result=> this.privateResponse = result,
      err=>this.privateResponse = this.isUnauthorized(err)
    );
  }

  onPermissionsButtonClick(){
    this.httpClient.get<Result>(this.serverUri+'permission',{headers:this.headers}).subscribe(
      result=> this.permissionResponse = result,
      err=>this.permissionResponse = this.isUnauthorized(err)
    );
  }

    isUnauthorized(err:HttpErrorResponse):Result{
    if (err.status === 401 || err.status === 403){
      return {msg:'No tienes permisos para ver este contenido.'};
    }
    else{
      return {msg: err.error || 'Ocurrio un error en el servidor'};

    }
  }
}

En app.component.ts se añadieron variables para guardar cada una de las respuestas de los servicios que se consuman. En cada uno de los métodos se agrego una petición al servicio mediante httpClient().

<!-- ### app.component.html ### -->

<div class="toolbar" role="banner">
  <img
    width="40"
    alt="Angular Logo"

  />
  <span>Angular + NetCore WebApi + Auth0</span>
    <div class="spacer"></div>
    <button style="margin-right: 2rem;">Login</button>
</div>

<div class="content" role="main">
  <h1>Bienvenido</h1>

  <div class="apis-section">
    <div class="api">
      <button class="btn btn-blue" (click)="onPublicButtonClick()">Llamar Api Publica</button>
      <div *ngIf="publicResponse" class="result">{{publicResponse.msg}}</div>
    </div>
    <div class="api" >
      <button class="btn btn-yellow" (click)="onPrivateButtonClick()">Llamar Api Privada</button>
      <div *ngIf="privateResponse" class="result">{{privateResponse.msg}}</div>
    </div>
    <div class="api">
      <button class="btn btn-green" (click)="onPermissionsButtonClick()" >Api privada + permisos</button>
      <div *ngIf="permissionResponse" class="result">{{permissionResponse.msg}}</div>
    </div>
  </div>

</div>

<router-outlet></router-outlet>

En app.component.html agregamos un div que valida si tenemos una respuesta y muestra el mensaje.

Cuando hagamos click en cada uno de los botones se conectara a su respectivo servicio y mostrará la respuesta que entregue ese servicio.

Si todo sale bien al hacer clic en los botones, la vista se verá de la siguiente forma.

Y verificamos que la información viene desde nuestros servicios del backend.

Yey!! hemos conectado la aplicación cliente de angular con nuestro servidor backend de net core. Pero aun tenemos una situación. NO tenemos aun un registro de usuarios, a demás podemos acceder a todos los servicios sin estar logueados.

¡SI! PROBLEMAS DE SEGURIDAD. 😱

Por el momento y para no hacer mas largo el post lo dejaremos aquí. En la siguiente entrada resolveremos el problema que se nos presenta con la ayuda de Auth0.

Hasta la próxima.

Ya esta lista la segunda parte, puedes ir haciendo click aquí