¿Cómo puedo integrar keycloak a mi proyecto wasm desde la primera interación con la aplicación?

Question

El objetivo es que la primera acción en mi aplicación wasm sea la autenticación y autorización con keycloak. Trabajo con Blazor WebAssembly desde Visual Studio y Keycloak desde Docker.

Answer 1

Hola Jennifer Ortiz Méndez,

¡Bienvenido(a) a Microsoft Q&A!

Lamentamos mucho la demora en darle una respuesta a tu tema en este foro.

Si todavía tienes la misma consulta, por favor ten en cuenta que nosotros no soportamos código ni scripts sin embargo, para integrar Keycloak con tu proyecto Blazor WebAssembly para que la autenticación y autorización sean la primera acción es un proceso que implica varios pasos. Aquí te dejo una guía básica para lograrlo:

Configura Keycloak:

• Inicia Keycloak: Puedes hacerlo usando Docker. Ejecuta el siguiente comando en tu terminal:

 docker run -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin jboss/keycloak

• Crear un Realm y un Cliente: Accede a la consola de administración de Keycloak en http://localhost:8080 y crea un nuevo realm. Luego, crea un cliente dentro de ese realm y configura su URL de redirección para que apunte a tu aplicación Blazor WebAssembly.

Configura Blazor WebAssembly:

• Agregar paquetes necesarios: Asegúrate de tener los paquetes necesarios en tu proyecto Blazor WebAssembly. Puedes agregar Microsoft.AspNetCore.Authentication.JwtBearer y Microsoft.AspNetCore.Components.WebAssembly.Authentication a tu proyecto.
• Configurar el proveedor de autenticación: En tu archivo Program.cs, configura el proveedor de autenticación para usar Keycloak. Aquí tienes un ejemplo básico:

 builder.Services.AddOidcAuthentication(options =>
 {
     options.ProviderOptions.Authority = "http://localhost:8080/auth/realms/{your-realm}";
     options.ProviderOptions.ClientId = "{your-client-id}";
     options.ProviderOptions.ResponseType = "code";
     options.ProviderOptions.DefaultScopes.Add("openid");
     options.ProviderOptions.DefaultScopes.Add("profile");
     options.ProviderOptions.DefaultScopes.Add("email");
 });

Protege las rutas de tu aplicación:

• Configurar las rutas protegidas: En tu archivo App.razor, usa el componente AuthorizeRouteView para proteger las rutas que requieren autenticación.

 <CascadingAuthenticationState>
     <Router AppAssembly="@typeof(App).Assembly">
         <Found Context="routeData">
             <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
             <FocusOnNavigate RouteData="@routeData" Selector="h1" />
         </Found>
         <NotFound>
             <LayoutView Layout="@typeof(MainLayout)">
                 <p>Sorry, there's nothing at this address.</p>
             </LayoutView>
         </NotFound>
     </Router>
 </CascadingAuthenticationState>

Prueba la integración:

• Ejecuta tu aplicación: Asegúrate de que Keycloak esté corriendo y luego ejecuta tu aplicación Blazor WebAssembly desde Visual Studio. Deberías ser redirigido a la página de inicio de sesión de Keycloak al intentar acceder a una ruta protegida.

Estos son los pasos básicos para integrar Keycloak con Blazor WebAssembly. Puedes encontrar ejemplos más detallados y específicos en repositorios como este en GitHub

Adicionalmente, por favor ten en cuenta que si no recibimos una respuesta tuya en los próximos días, procederemos a cerrar el tema. Sin embargo, si tienes la misma consulta y la información proporcionada no te resulta útil, no dudes en crear un nuevo hilo.

Atentamente,

Gao

---

Si esta respuesta resolvió tu consulta, por favor haz clic en 'Aceptar respuesta'. Esto nos ayuda a mejorar continuamente la calidad y relevancia de nuestras soluciones.