Tutorial de como conectar angular con un backend desarrollado en net core web api y configurar una política de autorización y autenticación con ayuda de Auth0 Este repositorio forma parte del tutorial "Angular + .Net Core Web Api + Auth0. Autorización basada en políticas. "

El proyecto muestra una forma de conectar una aplicación cliente de angular con un servidor web api en .net Core. A demás gracias a auth0 establecemos una forma de autenticar usuarios y darles privilegios creando una política basada en autorización.

Para entender de que trata te invito a seguirlo dando click aquí

Antes que nada es importante que tengamos una cuenta en auth0, si no es así crear una en htttps://auth0.com

Configurar un tenant, crear una app y una api.

En el proyecto de .Net api-resource-server modificar la seccion auth: dentro del archivo appssetings.json como se muestra:

// ### appsetingss.json ###
{
  "auth": {
    "audience": "<my-audience>",
    "authority": "<my-authority>"
  
}

audience: es el Identifier que le asignaste a tu API dentro de la configuración de Auht0 Applications ⇒ APIs

authority: regularmente es: htttps://<nombre-del-tenant>.<region>.auth0.com/ una forma rapida de encontrarlo es yendo a settings ⇒ custom Domains

En el proyecto de angular client-app-identity modificar el archivo dentro de la carpeta enviroments llamado auth0-config.ts e incluir tu configuración

// ### auth0-config.ts ###

export const auth0 ={
  domain: '<my-domain>',
  clientId: '<my-clientId>',
  audience: '<my-audience>'
}

Como ya sabemos de donde sacar el domain y el audience no lo explicaré otra vez ( domain es lo mismo que authority).

el clientId lo obtendremos en Applications ⇒ Applications ⇒ <Nombre de nuestra aplicación>

listo ya teniendo configurado todo, basta con ejecutar los proyectos.

lanza los proyectoes en el siguiente orden

1. Servidor backend
2. Cliente Angular

Backend: abrimos visual studio y ejecutamos el proyecto con el botón ▶ o F5 esperemos a que instale las dependencias y se ejecutará.

Si estamos usando el cli de dotnet en la raíz de la solución backend-app-idnetity

#instalando paquetes nuguet
dotnet restore api-resource-server
#ejecutando el proyecto
dotnet run --project=api-resource-server --urls=https://localhost:44386

Frontend: para ejecutar nuestra aplicación de angular basta con instalas paquetes y ejecutar la aplicación desde el CLI.

### Con Yarn ###
yarn install
### Con NPM ##
npm install

# Una vez instaladas las dependencias 
ng serve -o

Vamos a http://localhost:4200/ y listo!!

Oscar Daniel Perez - [email protected] - @odprz-dev - 14-02-2021