Skip to main content

Secure a Web App Using Keycloak

About 2 min

Enable SSO and Granular Access Control For A Header-Based Web App with Keycloak

Preview

In this tutorial, we will use the Datawiza Access Proxy (DAP) to enable SSO and granular access control for a header-based web App. The IdP we will use is Keycloak. We will use DAP's side deployment mode, which means DAP and this app are running on the same server.

  • The application will run on localhost:3001.
  • The DAP will run on localhost:9772, which means the traffic to the app will reach DAP (running on port 9772) first and then be proxied to the application (running on port 3001).
  • We will provide the docker images for the DAP and this header-based application.

Part I: Keycloak Configuration

You will first need to start a Keycloak server. After registering an OIDC client on the server, obtain the following 4 values:

  • Keycloak Server
  • Realm Name
  • Client ID
  • Client Secret

These values will later be used to set up Datawiza Access Proxy in Datawiza Cloud Management Console. Please follow IdP Configuration Guide: Keycloak instructions on how to get those keys/values.

Part II: Create Application on Datawiza Cloud Management Console (DCMC)

You need to create an application and generate a keypair of (PROVISIONING_KEY, PROVISIONING_SECRET) for this app on the DCMC.

Please follow Step2 : Datawiza Cloud Management Console to configure.

The Keycloak IdP configuration should be as follows: Web App Keycloak SSO | DAP with Keycloak

Part III: Run DAP With a Header-Based Application

You can use either Docker or Kubernetes to run DAP. The following is an example docker-compose.yml file. You may need to login to our container registry to download the images of DAP and the header-based app. See Step3 : Configure DAP and SSO Integration for more details or Deploy DAP with Kubernetes for Kubernetes-specific instructions.

version: '3'

services:
  datawiza-access-proxy:
    image: registry.gitlab.com/datawiza/access-proxy
    container_name: datawiza-access-proxy
    restart: always
    ports:
      - "9772:9772"
    environment:
      PROVISIONING_KEY: #############################
      PROVISIONING_SECRET: #############################

  header-based-app:
    image: registry.gitlab.com/datawiza/header-based-app
    container_name: ab-demo-header-app
    restart: always
    ports:
      - "3001:3001"

After executing docker-compose -f docker-compose.yml up, the header-based app should have SSO enabled with Keycloak. Open a browser and type in http://localhost:9772/. You should see the Keycloak login page as follows. Web App Keycloak SSO | DAP with Keycloak

Part IV: Pass User Attributes to the Header-Based App

DAP gets user attributes from IdP and can pass the user attributes to the application via header or cookie.

Please follow the instructions of Step4 : Pass User Attributes to pass the user attributes to the header-based app, which is expecting:

  • email
  • firstname
  • lastname
  • groups

After successfully configuring the user attributes, you should see the green check sign for each of the user attributes as follows. Web App Keycloak SSO | Keycloak with DCMC attributes Notice, the user attributes will not be shown if you didn't add Client Roles view-users to user.

Part V: Achieve Granular Access Control

You can configure access control to an application based on user's attributes (e.g., groups, department) and other metadata of a request (e.g., URL, IP, http method, access time).

Please reference Step5 : Achieve Granular Access Control for detailed instructions on how to set up access rules. You can practice the rule configuration using the following example.

A Rule Example

  1. Create a user in Keycloak, put it in hr group, and then assign this person to your client on Keycloak.

  2. Create the following two rules:

  • hr path can only be accessed by hr group.
  • sales path can only be accessed by sales group.
  1. Verify that the user you created can only access hr page in the header-based app, but cannot access sales page. Trying to access the header-based application on localhost:9772 in your browser, you should get something similar to the following screenshots. http://localhost:9772/hr: Web App Keycloak SSO | Keycloak Examplehttp://localhost:9772/sales: Web App Keycloak SSO | Keycloak Example Access Forbidden