Cómo implementar la autenticación y autorización OpenID de Angular y ASP.NET Core?

Uso OKTA para autenticación y autorización con OpenID. Actualmente utilizo páginas razor en mi aplicación, pero quiero convertirla en una Web API con Angular.

Este es mi flujo actual:

Hacer clic en el botón de inicio de sesión

activar la acción de inicio de sesión
ir a OKTA e iniciar sesión con las credenciales
OKTA me envía cookies y se guardan en el navegador

Código:

public IActionResult Login()
{
if (!HttpContext.User.Identity.IsAuthenticated)
{
return Challenge(OpenIdConnectDefaults.AuthenticationScheme);
}

// ¿Cómo puedo cambiar este método para devolverlo a Angular en lugar de utilizar páginas Razor? return RedirectToAction("Index", "Home");

}

¿Qué puedo hacer después? Mis cookies se ven así después de iniciar sesión correctamente en OKTA:

https://i.stack.imgur.com/WhngD.png

Ahora quiero saber qué puedo hacer, ¿cómo puedo cambiar este método para devolver algo a Angular?

¿Debería enviar estas cookies o algo similar? ¿O cambiar estas cookies por JWT?

davy.ai

July 23, 2023 at 5:11 pm

Para modificar el método Login() y devolver algo a Angular, puedes devolver un objeto JSON que contenga el token de autenticación (JWT) y cualquier dato adicional que tu aplicación Angular pueda necesitar.

Puedes usar una biblioteca como jsonwebtoken para generar y firmar el JWT, y luego devolverlo como parte del objeto JSON en la respuesta.

Aquí tienes un ejemplo de implementación:

public IActionResult Login()
{
    if (!HttpContext.User.Identity.IsAuthenticated)
    {
        return Challenge(OpenIdConnectDefaults.AuthenticationScheme);
    }

    // Generar token JWT
    var claimsIdentity = HttpContext.User.Identity as ClaimsIdentity;
    var tokenHandler = new JwtSecurityTokenHandler();
    var jwtToken = tokenHandler.CreateJwtSecurityToken(
        issuer: "tu_emisor",
        audience: "tu_audiencia",
        subject: claimsIdentity,
        expires: DateTime.UtcNow.AddHours(1),
        signingCredentials: new SigningCredentials(
            new SymmetricSecurityKey(Encoding.UTF8.GetBytes("tu_secreto")),
            SecurityAlgorithms.HmacSha256));
    var token = tokenHandler.WriteToken(jwtToken);

    // Construir respuesta JSON
    var response = new {
        token = token,
        additionalData = "algún_dato_adicional"
    };

    // Devolver respuesta JSON
    return Ok(response);
}

En este ejemplo, estamos usando la clase JwtSecurityTokenHandler para crear y firmar un token JWT. Incluimos cualquier dato adicional que queramos devolver a la aplicación Angular como parte de la respuesta JSON.

En el lado de Angular, deberás manejar la respuesta y almacenar el token de autenticación (y cualquier dato adicional) en el almacenamiento local o una cookie. Luego puedes usar este token para hacer solicitudes autenticadas a tu API web.

Answer

davy.ai

July 23, 2023 at 5:11 pm
Para modificar el método Login() y devolver algo a Angular, puedes devolver un objeto JSON que contenga el token de autenticación (JWT) y cualquier dato adicional que tu aplicación Angular pueda necesitar.

Puedes usar una biblioteca como jsonwebtoken para generar y firmar el JWT, y luego devolverlo como parte del objeto JSON en la respuesta.

Aquí tienes un ejemplo de implementación:
```
public IActionResult Login()
{
    if (!HttpContext.User.Identity.IsAuthenticated)
    {
        return Challenge(OpenIdConnectDefaults.AuthenticationScheme);
    }

    // Generar token JWT
    var claimsIdentity = HttpContext.User.Identity as ClaimsIdentity;
    var tokenHandler = new JwtSecurityTokenHandler();
    var jwtToken = tokenHandler.CreateJwtSecurityToken(
        issuer: "tu_emisor",
        audience: "tu_audiencia",
        subject: claimsIdentity,
        expires: DateTime.UtcNow.AddHours(1),
        signingCredentials: new SigningCredentials(
            new SymmetricSecurityKey(Encoding.UTF8.GetBytes("tu_secreto")),
            SecurityAlgorithms.HmacSha256));
    var token = tokenHandler.WriteToken(jwtToken);

    // Construir respuesta JSON
    var response = new {
        token = token,
        additionalData = "algún_dato_adicional"
    };

    // Devolver respuesta JSON
    return Ok(response);
}
```
En este ejemplo, estamos usando la clase JwtSecurityTokenHandler para crear y firmar un token JWT. Incluimos cualquier dato adicional que queramos devolver a la aplicación Angular como parte de la respuesta JSON.

En el lado de Angular, deberás manejar la respuesta y almacenar el token de autenticación (y cualquier dato adicional) en el almacenamiento local o una cookie. Luego puedes usar este token para hacer solicitudes autenticadas a tu API web.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo implementar la autenticación y autorización OpenID de Angular y ASP.NET Core?

Answer

davy.ai