ASPNETcoreAngularJWT

ASPNETcoreAngularJWT

A continuación se muestra un caso muy básico para la autorización de tokens de portador jwt, utilizando angular como interfaz y ASP.NET Core como backend. ASP.NET Core3.1 angular7.2.1 con systemjs. (Asegúrese de tener instalado dotnet core 3.1 + y Angular7.2.1)

---

(¿Por qué systemjs no webpack? Opinión personal: webpack es demasiado complicado de usar para cualquier aplicación simple y de tamaño pequeño, prefiero ser eficiente para permitir que la mayoría de los programadores puedan leer mi código de ejemplo)

---

Ahora puede detener Google y descubrir cómo realizar la autenticación con token JWT, ¡es simple!

En el backend: MS$ proporciona middleware AddAuthentication().AddJwtBearer() para la autenticación del token JWT, por lo que las cosas resultan tan simples como agregar el middleware en Startup.cs

En la interfaz (angular en este caso): guarde el token en sessionStorage y, cuando hable con el backend, establezca el encabezado de la solicitud http (https para producción) como:

 let headers = new HttpHeaders()
                    .set('Content-Type','application/json')
                    .set("Authorization", "Bearer " + token);

---

Angular & material 7.2.1 en ASP.NET Core 3.1 (versión VS2019 o csproj) con solución JWT.

Cerciorarse:

Se ha instalado ASP.NET CORE 3.1; si no, consígalo desde aquí: https://www.microsoft.com/net/download/core

Nodejs se ha instalado; si no, consígalo en https://nodejs.org/en/download/

Después de descargar este repositorio, vaya a la carpeta con el archivo ASPNETCoreAngularJWT.csproj y ejecute el comando:

 >dotnet restore

>npm install

>npm start

Finalmente inicie dotnet y el navegador http://localhost:5000 mediante

 >dotnet run

Y no olvide ejecutar "npm start" después de modificar cualquier archivo mecanografiado.

Puede ejecutar esto para compilación angular y ejecución dotnet.

 >npm run runall

También se puede abrir tanto con Visual Studio 2017 como con Visual Studio Code. Después de abrir con VS2017 y antes de ejecutarlo como depuración, asegúrese de que proyecto-> propiedad -> Depuración y URL de la aplicación ="http://localhost:5000" y reconstruya nuevamente antes de comenzar a depurar