diff --git a/demos/janssen-tarp/README.md b/demos/janssen-tarp/README.md index f3d82a18f17..8fcff9aa803 100644 --- a/demos/janssen-tarp/README.md +++ b/demos/janssen-tarp/README.md @@ -1,104 +1,171 @@ +![Janssen Tarp](docs/images/logo.jpg) + # Janssen Tarp -## Table of Contents +Janssen Tarp is a browser extension from the [Janssen Project](https://github.com/JanssenProject/jans/tree/main/demos/janssen-tarp) that lets you test OpenID Connect (OIDC) authentication flows and [Cedarling](https://docs.jans.io/head/cedarling/cedarling-overview/) authorization decisions directly from your browser — no application code required. + +![Janssen Tarp](docs/images/tarp-demo.gif) + +In this tutorial you will: + +1. Install Janssen Tarp in your browser +2. Register an OIDC client with your identity provider (IdP) +3. Run an OAuth 2.0 Authorization Code flow and inspect the tokens +4. Configure Cedarling (bootstrap configuration and policy store) +5. Run a Cedarling multi-issuer authorization request and read the decision result + +--- + +## 1. Prerequisites + +- **Browser:** Chrome, or Firefox (version ≥ 115.0.3) +- **An OpenID Provider:** Janssen Auth Server, supports Dynamic Client Registration and is enabled + +> **Self-signed certificates:** If your auth server uses a self-signed TLS certificate, open the server's URL in a browser tab first and accept the security warning. Otherwise, client registration will fail with a TLS error. + +## 2. Install the extension + +Download the latest release assets from the [Janssen releases page](https://github.com/JanssenProject/jans/releases/latest): + +- Chrome: `demo-janssen-tarp-chrome-v{x.x.x}.zip` +- Firefox: `demo-janssen-tarp-firefox-v{x.x.x}.xpi` + +**Chrome** + +1. Unzip the downloaded file. +2. Go to `Settings > Extensions` and enable **Developer mode** (top right). +3. Click **Load unpacked** and select the unzipped folder. + +**Firefox** + +1. Open `about:addons` in the address bar. +2. Click **Extensions** in the left menu. +3. Click the gear icon next to *Manage Your Extensions*, then **Install Add-on From File...**. +4. Select the downloaded `.xpi` file. + +Open the extension. You'll land on the **Authentication** tab, with two more tabs available: **Cedarling** and **AI Agent**. + +![Janssen Tarp](docs/images/00-tarp-home.jpg) + +## 3. Register an OIDC client + +1. On the **Authentication** tab, click **+ Add Client**. +2. In the **Register OIDC Client** dialog, fill in: + - **Issuer** (required) — your OpenID Provider host, e.g. `your-op-host.gluu.org` + - **Scopes** — type a scope and press Enter (e.g. `openid`) + - **Client Expiry Date** — when the client should expire + - Tick **Add an existing client** only if you want to reuse an already-registered client instead of creating a new one. +3. Click **Register**. + +![Register OIDC Client dialog](docs/images/01-register-oidc-client.jpg) + +Tarp performs Dynamic Client Registration against the issuer. The new client appears in the **OIDC Clients** table with its Client ID, Client Secret, and an `Enabled` status. -1. [Overview](#overview) -2. [Supporting Browsers](#supporting-browser) -3. [Prerequisite](#prerequisite) -4. [Build Instructions](#build) -5. [Releases](#releases) -6. [Installation in Browser](#installation-in-browser) - - [Chrome](#chrome) - - [Firefox](#firefox) -7. [Note on Self-Signed Certificates](#self-signed-certificate-handling) -8. [Testing Using Janssen Tarp](#testing-using-janssen-tarp) -9. [Cedarling Authorization](#cedarling-authorization) -10. [Cedarling Unsigned Authorization](#cedarling-unsigned-authorization) -11. [AI Agents in Admin UI](./docs/ai-agents.md#ai-agents-in-admin-ui) -12. [Testing with Keycloak](#testing-with-keycloak-installed-on-localhost) +![Registered client in the OIDC Clients list](docs/images/02-client-registered.jpg) -## Overview +## 4. Run the authentication flow -Janssen Tarp is a browser extension demo tool built as part of the Janssen Project — an open-source Identity and Access Management (IAM) platform under the Linux Foundation. The extension allows developers and IAM engineers to quickly register OpenID Connect (OIDC) clients, trigger OAuth 2.0 Authorization Code flows, and test Cedarling-based authorization decisions — all directly from the browser without writing any application code. +1. In the client's row, click the ⚡ (trigger) icon under **Action**. +2. The **Authentication Flow Inputs** dialog opens. All inputs are optional: + - **Additional Params** — extra request parameters as JSON, e.g. `{"paramOne": "valueOne"}` + - **Acr Values** — pick the authentication method (ACR) to request + - **Scope** — additional scopes for the request + - **Display tokens after authentication** — tick this to see the tokens after login +3. Click **Trigger Auth Flow**. -[Demo Video](https://www.loom.com/share/b112b9c7214a4920812a2ebe9c36dbf5?sid=7a15d2e5-881e-4002-9b8c-902dd1d80cec) +![Authentication Flow Inputs dialog](docs/images/03-auth-flow-inputs.jpg) -- This extension is for convenient testing of authentication flows on browser. -- [Cedarling](https://docs.jans.io/head/cedarling/cedarling-overview/) is an embeddable stateful Policy Decision Point, or "PDP". Cedarling is integrated with Janssen Tarp to make authorization decision post-authentication. -- AI Agents can be configured on Janssen Tarp to register OIDC client and invoke authentication flow with natural language input. +Your browser is redirected to the IdP's login page. Sign in with your user credentials (if you already have a session, you may be logged in silently). -## Supporting Browser +After a successful login, Tarp shows the **User Details** page with expandable sections for the **Access Token**, **ID Token**, and **User Details** (userinfo). Use **Show Payload** to decode a token, **Copy** to copy the details, and **Logout** to end the session. -- Chrome -- Firefox (version >= 115.0.3 ) +![User Details page with tokens](docs/images/04-user-details-tokens.jpg) -## Prerequisite +## 5. Configure Cedarling -- Node.js (>= v18.15.0) +[Cedarling](https://docs.jans.io/stable/cedarling/) is an embedded Policy Decision Point (PDP) that evaluates authorization requests against Cedar policies. Configure it once, then test authorization decisions. -## Build +### 5.1 Add a bootstrap configuration -1. Change directory to the project directory (`/janssen-tarp/browser-extension`). -2. Run `npm install`. -3. Run `npm run build`. It will create Chrome and Firefox build in `/janssen-tarp/browser-extension/dist/chrome` and `/janssen-tarp/browser-extension/dist/firefox` directories respectively. -4. To pack the build into a zip file run `npm run pack`. This command will pack Chrome and Firefox builds in zip files at `/janssen-tarp/browser-extension/release`. +1. Open the **Cedarling** tab. You'll see the **Bootstrap Configuration** page. +2. Click **+ Add Configurations**. -## Releases +![Empty Bootstrap Configuration page](docs/images/05-cedarling-bootstrap-empty.jpg) -Instead of building from source code, you can download and install `janssen-tarp` directly in your browser. Look for the `demo-janssen-tarp-chrome-v{x.x.x}.zip` and `demo-janssen-tarp-firefox-v{x.x.x}.xpi` assets in the release section at https://github.com/JanssenProject/jans/releases/latest. +3. In the **Add Cedarling Configuration** dialog, choose **JSON** (or **URL**) input. A minimal configuration is pre-filled — edit it as needed. Key properties: + - `CEDARLING_APPLICATION_NAME` — any name, e.g. `My App` + - `CEDARLING_POLICY_STORE_URI` — URL of your Cedar policy store (`.cjar`) + - `CEDARLING_JWT_SIG_VALIDATION` / `CEDARLING_JWT_STATUS_VALIDATION` — `enabled`/`disabled` token validation + - `CEDARLING_LOG_TYPE`, `CEDARLING_LOG_LEVEL`, `CEDARLING_LOG_TTL` — logging options +4. Click **Save**. -## Installation in browser +![Add Cedarling Configuration dialog](docs/images/06-add-cedarling-configuration.jpg) -### Chrome -1. Unzip the downloaded `demo-janssen-tarp-chrome-v{x.x.x}.zip`file -2. Open Chrome and go to `Settings > Extensions`. -3. Enable `Developer mode` at the top right. -4. Click the `Load unpacked` button, and select the unzipped folder `demo-janssen-tarp-chrome-v{x.x.x}`. +The saved configuration appears in the table. Two more sub-tabs become available: **Cedarling Unsigned Authz Form** and **Cedarling Multi-Issuer Authz Form**. -### Firefox +![Saved bootstrap configuration](docs/images/07-bootstrap-configuration-saved.jpg) -1. In Firefox, open the `about:addons` on address bar. -2. Click the `Extension` link on left menu . -3. Click on `Setting` icon before `Manage your Extensions` label, then click the `Install Add-on from file...`. -4. Browse and open the downloaded `demo-janssen-tarp-firefox-v{x.x.x}.xpi` file to install the extension. +### 5.2 Browse the policy store (optional) -##### Self-Signed Certificate Handling: +Click **Browse Policy Store** in the configuration's row to inspect the loaded policy store: Cedar policies, trusted issuers, manifest, metadata, and schema. Click any file to view its contents — for example, a policy that only permits users with the `auditor` role to `Read`. -When testing against a Janssen Auth Server using a self-signed TLS certificate, you must configure browser trust for the certificate before attempting client registration. Failure to do so will result in TLS errors during the Dynamic Client Registration call. +![Policy Store viewer](docs/images/08-policy-store-viewer.jpg) -Follow your browser's procedure to import or trust the self-signed certificate authority (CA) used by the Janssen Auth Server. +## 6. Test authorization (Cedarling Multi-Issuer Authz Form) -1. Open the OP_HOST url on browser. -2. Accept the security risk due to self-signed cert and continue. +This form builds an authorization request from tokens, an action, a resource, and optional context — then asks Cedarling for a decision. -![self-signed cert risk](./docs/images/untrusted_cert_risk.png) +1. On the **Cedarling** tab, open **Cedarling Multi-Issuer Authz Form**. The status badge shows **Ready** once the bootstrap configuration is initialized. -## Testing using Janssen Tarp +![Cedarling Multi-Issuer Authorization form](docs/images/09-multi-issuer-authz-form.jpg) -* Setup Janssen-Tarp. [Instructions](https://github.com/JanssenProject/jans/tree/main/demos/janssen-tarp) +2. Fill in the **Request builder** (at least one token mapping, an action, and a non-empty resource are required): + - **Issuer-to-Token Mapping** — the tokens to evaluate, entered as a JSON array. Each entry has a `mapping` (the Cedar token entity type) and a `payload` (the raw JWT string). If you completed the authentication flow in Section 4, copy the Access Token / ID Token values from the **User Details** page and use them here: +```json + [ + { + "mapping": "Jans::Access_token", + "payload": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ.." + }, + { + "mapping": "Jans::id_token", + "payload": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ.." + }, + { + "mapping": "AGT::Access_token", + "payload": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ.." + } + ] +``` + + Add one object per token you want Cedarling to consider — typically the access token and, if you enabled **Display tokens after authentication**, the ID token as well. The `mapping` value must match a token entity type defined in your policy store's schema (see Section 5.2). + - **Action** — the Cedar action, e.g. `Jans::Action::"Read"` + - **Resource** — the Cedar entity, e.g. `entity_type: "Jans::Application"`, `id: "dashboard"` + - **Context** — optional additional context attributes + - **Log tag** — choose which logs to display: `Decision`, `System`, or `Metric` +3. Click **Run authorization**. -![image](./docs/images/1-add-client.png) -![image](./docs/images/2-DCR.png) -![image](./docs/images/3-cedarling-configuration.png) -![image](./docs/images/4-auth-code-flow.png) -![image](./docs/images/5-auth-code-flow.png) -* See the [Cedarling multi-issuer authorization reference](https://docs.jans.io/head/cedarling/reference/cedarling-multi-issuer/) for unsigned authorization details. -![image](./docs/images/6-unsigned-authz.png) -* See the [Cedarling multi-issuer authorization reference](https://docs.jans.io/head/cedarling/reference/cedarling-multi-issuer/) for multi-issuer authorization details. -![image](./docs/images/7-multi-issuer-authz.png) -
+![Request builder with action, resource, and context](docs/images/10-multi-issuer-request.jpg) -## Testing with Keycloak (installed on localhost) +The **Result** panel shows the outcome: -1. Login to KC admin console +- **Decision** — `True` (allow) or `False` (deny) +- **diagnostics → reason** — which policies matched (e.g. `AdminCanReadAndWrite`, `AuditorCanOnlyRead`) +- **errors** — any evaluation errors +- **request_id** — correlates with entries in the **Logs** panel below -2. Go to `Clients --> Client registration --> Client details --> Trusted Hosts` and set localhost as Trusted Hosts (as your KC is running on localhost). +![Authorization result with decision and diagnostics](docs/images/11-authz-result.jpg) -![Trusted Hosts](./docs/images/kc_trusted_hosts.png) +Use **Clear result** to reset and try different tokens, actions, or resources. See the [Cedarling multi-issuer authorization reference](https://docs.jans.io/head/cedarling/reference/cedarling-multi-issuer/) for details. -3. Go to `Client scopes` and create a scope with name `openid`. The assigned type should be `Optional`. +## 7. Troubleshooting -![Client scopes](./docs/images/kc_add_scope.png) +- **TLS error during client registration** — trust the server's self-signed certificate first (Section 1). +- **Registration fails against Keycloak on localhost** — in the KC admin console, set `localhost` under *Clients → Client registration → Trusted Hosts*, and create an **Optional** client scope named `openid`. +- **Authorization always denied** — verify the policy store URI in the bootstrap configuration, and that your token payloads match what the policies expect (use **Browse Policy Store** to check). -Once above configuration is done, janssen-tarp can be used test KC IdP. +## 8. More topics +- [Building Janssen Tarp from Source](./docs/build-from-source.md) +- [Using Janssen Tarp with Keycloak (localhost)](./docs/tarp-with-keycloak.md) +- [Using the AI Assistant in Janssen Tarp](./docs/ai-agents.md) diff --git a/demos/janssen-tarp/docs/build-from-source.md b/demos/janssen-tarp/docs/build-from-source.md new file mode 100644 index 00000000000..54823e28884 --- /dev/null +++ b/demos/janssen-tarp/docs/build-from-source.md @@ -0,0 +1,93 @@ +# Building Janssen Tarp from Source + +This tutorial walks through cloning the Janssen Project repository and building the Janssen Tarp browser extension yourself, instead of installing a pre-built release. + +## 1. Prerequisites + +- **Node.js** ≥ v18.15.0 (check with `node -v`) +- **npm** (bundled with Node.js) +- **git** + +## 2. Clone the repository + +Janssen Tarp lives inside the main `jans` monorepo, under `demos/janssen-tarp`. + +```bash +git clone https://github.com/JanssenProject/jans.git +cd jans +``` + +If you need a specific branch (for example, a feature branch that hasn't merged yet): + +```bash +git checkout jans-tarp-14557 +``` + +Otherwise, stay on `main` for the latest stable source. + +## 3. Install dependencies + +The actual extension project is in the `browser-extension` subfolder: + +```bash +cd demos/janssen-tarp/browser-extension +npm install +``` + +This pulls in the build tooling (Webpack, TypeScript, Tailwind CSS) and runtime dependencies (React, the Cedarling WASM bindings, the Anthropic and OpenAI SDKs used by the AI Agent tab, etc.), as declared in `package.json`. + +## 4. Build the extension + +```bash +npm run build +``` + +This runs Webpack in production mode and outputs two ready-to-load builds: + +- `dist/chrome` — Chrome/Chromium build +- `dist/firefox` — Firefox build + +**Other useful scripts:** + +| Command | Purpose | +|---|---| +| `npm run build-dev` | Development-mode build (unminified, easier to debug) | +| `npm run watch` | Watches source files and rebuilds automatically on change (development config) | +| `npm run pack` | Packages the `dist` builds into distributable zip/xpi files under `release/` | + +## 5. Load the unpacked extension into your browser + +### Chrome + +1. Open `chrome://extensions`. +2. Enable **Developer mode** (top right toggle). +3. Click **Load unpacked**. +4. Select the `demos/janssen-tarp/browser-extension/dist/chrome` folder. + +### Firefox + +Firefox requires a packed `.xpi` for the standard install flow, or a temporary load for development: + +1. Open `about:debugging#/runtime/this-firefox`. +2. Click **Load Temporary Add-on...**. +3. Select any file inside `dist/firefox` (e.g. `manifest.json`). + +> A temporary add-on is removed when Firefox restarts. For a persistent install, run `npm run pack` and install the generated `.xpi` from `release/` via `about:addons` (see the end-user tutorial for that flow). + +## 6. Verify the build + +Open the extension from your browser toolbar. You should see the **Authentication**, **Cedarling**, and **AI Agent** tabs — the same interface covered in the [end-user tutorial](../README.md). If the popup fails to load or shows a blank screen, check the browser's extension error console (`chrome://extensions` → the extension's **Errors** button, or Firefox's `about:debugging` → **Inspect**) for build/runtime errors. + +## 7. Iterating on the source + +If you're modifying the extension: + +1. Run `npm run watch` to rebuild automatically on file changes. +2. In Chrome, click the reload icon on the extension card in `chrome://extensions` after each rebuild (Chrome doesn't auto-reload unpacked extensions). +3. In Firefox, click **Reload** next to the temporary add-on in `about:debugging`. + +## 8. Troubleshooting + +- **`npm install` fails on native/WASM deps** — ensure your Node.js version meets the ≥ 18.15.0 requirement; older versions can fail to install the Cedarling WASM package. +- **Build succeeds but extension icon is missing/broken** — re-run `npm run build` (not `build-dev`) for a clean production output, since `dist/` is cleaned on each build. +- **Changes not reflected in browser** — remember unpacked extensions must be manually reloaded after each rebuild (Chrome) or are removed on restart (Firefox temporary add-ons). diff --git a/demos/janssen-tarp/docs/images/00-tarp-home.jpg b/demos/janssen-tarp/docs/images/00-tarp-home.jpg new file mode 100644 index 00000000000..77c6086b6f5 Binary files /dev/null and b/demos/janssen-tarp/docs/images/00-tarp-home.jpg differ diff --git a/demos/janssen-tarp/docs/images/01-register-oidc-client.jpg b/demos/janssen-tarp/docs/images/01-register-oidc-client.jpg new file mode 100644 index 00000000000..dd1eff620c6 Binary files /dev/null and b/demos/janssen-tarp/docs/images/01-register-oidc-client.jpg differ diff --git a/demos/janssen-tarp/docs/images/02-client-registered.jpg b/demos/janssen-tarp/docs/images/02-client-registered.jpg new file mode 100644 index 00000000000..05840cae14d Binary files /dev/null and b/demos/janssen-tarp/docs/images/02-client-registered.jpg differ diff --git a/demos/janssen-tarp/docs/images/03-auth-flow-inputs.jpg b/demos/janssen-tarp/docs/images/03-auth-flow-inputs.jpg new file mode 100644 index 00000000000..403dda4f9f5 Binary files /dev/null and b/demos/janssen-tarp/docs/images/03-auth-flow-inputs.jpg differ diff --git a/demos/janssen-tarp/docs/images/04-user-details-tokens.jpg b/demos/janssen-tarp/docs/images/04-user-details-tokens.jpg new file mode 100644 index 00000000000..cecf846cd09 Binary files /dev/null and b/demos/janssen-tarp/docs/images/04-user-details-tokens.jpg differ diff --git a/demos/janssen-tarp/docs/images/05-cedarling-bootstrap-empty.jpg b/demos/janssen-tarp/docs/images/05-cedarling-bootstrap-empty.jpg new file mode 100644 index 00000000000..d7b1a13a154 Binary files /dev/null and b/demos/janssen-tarp/docs/images/05-cedarling-bootstrap-empty.jpg differ diff --git a/demos/janssen-tarp/docs/images/06-add-cedarling-configuration.jpg b/demos/janssen-tarp/docs/images/06-add-cedarling-configuration.jpg new file mode 100644 index 00000000000..8ab0df5d676 Binary files /dev/null and b/demos/janssen-tarp/docs/images/06-add-cedarling-configuration.jpg differ diff --git a/demos/janssen-tarp/docs/images/07-bootstrap-configuration-saved.jpg b/demos/janssen-tarp/docs/images/07-bootstrap-configuration-saved.jpg new file mode 100644 index 00000000000..4bb12195c1c Binary files /dev/null and b/demos/janssen-tarp/docs/images/07-bootstrap-configuration-saved.jpg differ diff --git a/demos/janssen-tarp/docs/images/08-policy-store-viewer.jpg b/demos/janssen-tarp/docs/images/08-policy-store-viewer.jpg new file mode 100644 index 00000000000..184180621f8 Binary files /dev/null and b/demos/janssen-tarp/docs/images/08-policy-store-viewer.jpg differ diff --git a/demos/janssen-tarp/docs/images/09-multi-issuer-authz-form.jpg b/demos/janssen-tarp/docs/images/09-multi-issuer-authz-form.jpg new file mode 100644 index 00000000000..0bd9dce3ded Binary files /dev/null and b/demos/janssen-tarp/docs/images/09-multi-issuer-authz-form.jpg differ diff --git a/demos/janssen-tarp/docs/images/1-add-client.png b/demos/janssen-tarp/docs/images/1-add-client.png deleted file mode 100644 index dffb565a911..00000000000 Binary files a/demos/janssen-tarp/docs/images/1-add-client.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/10-multi-issuer-request.jpg b/demos/janssen-tarp/docs/images/10-multi-issuer-request.jpg new file mode 100644 index 00000000000..7917d1d5171 Binary files /dev/null and b/demos/janssen-tarp/docs/images/10-multi-issuer-request.jpg differ diff --git a/demos/janssen-tarp/docs/images/11-authz-result.jpg b/demos/janssen-tarp/docs/images/11-authz-result.jpg new file mode 100644 index 00000000000..eaba7863273 Binary files /dev/null and b/demos/janssen-tarp/docs/images/11-authz-result.jpg differ diff --git a/demos/janssen-tarp/docs/images/2-DCR.png b/demos/janssen-tarp/docs/images/2-DCR.png deleted file mode 100644 index 6d6f43860ce..00000000000 Binary files a/demos/janssen-tarp/docs/images/2-DCR.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/3-cedarling-configuration.png b/demos/janssen-tarp/docs/images/3-cedarling-configuration.png deleted file mode 100644 index cc524779957..00000000000 Binary files a/demos/janssen-tarp/docs/images/3-cedarling-configuration.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/4-auth-code-flow.png b/demos/janssen-tarp/docs/images/4-auth-code-flow.png deleted file mode 100644 index e7159fd4ff8..00000000000 Binary files a/demos/janssen-tarp/docs/images/4-auth-code-flow.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/5-auth-code-flow.png b/demos/janssen-tarp/docs/images/5-auth-code-flow.png deleted file mode 100644 index b9731d41bfb..00000000000 Binary files a/demos/janssen-tarp/docs/images/5-auth-code-flow.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/6-unsigned-authz.png b/demos/janssen-tarp/docs/images/6-unsigned-authz.png deleted file mode 100644 index 92029bdc4d1..00000000000 Binary files a/demos/janssen-tarp/docs/images/6-unsigned-authz.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/7-multi-issuer-authz.png b/demos/janssen-tarp/docs/images/7-multi-issuer-authz.png deleted file mode 100644 index 6e9c64a6702..00000000000 Binary files a/demos/janssen-tarp/docs/images/7-multi-issuer-authz.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/ai-agent-settings.png b/demos/janssen-tarp/docs/images/ai-agent-settings.png deleted file mode 100644 index 5c4cf8fda4a..00000000000 Binary files a/demos/janssen-tarp/docs/images/ai-agent-settings.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/kc_add_scope.png b/demos/janssen-tarp/docs/images/kc_add_scope.png deleted file mode 100644 index 3ac7102ec20..00000000000 Binary files a/demos/janssen-tarp/docs/images/kc_add_scope.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/kc_trusted_hosts.png b/demos/janssen-tarp/docs/images/kc_trusted_hosts.png deleted file mode 100644 index 8d37afb0666..00000000000 Binary files a/demos/janssen-tarp/docs/images/kc_trusted_hosts.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/images/logo.jpg b/demos/janssen-tarp/docs/images/logo.jpg new file mode 100644 index 00000000000..2928d3245bf Binary files /dev/null and b/demos/janssen-tarp/docs/images/logo.jpg differ diff --git a/demos/janssen-tarp/docs/images/tarp-demo.gif b/demos/janssen-tarp/docs/images/tarp-demo.gif new file mode 100644 index 00000000000..59b184b49e8 Binary files /dev/null and b/demos/janssen-tarp/docs/images/tarp-demo.gif differ diff --git a/demos/janssen-tarp/docs/images/untrusted_cert_risk.png b/demos/janssen-tarp/docs/images/untrusted_cert_risk.png deleted file mode 100644 index 3227faa7087..00000000000 Binary files a/demos/janssen-tarp/docs/images/untrusted_cert_risk.png and /dev/null differ diff --git a/demos/janssen-tarp/docs/tarp-with-keycloak.md b/demos/janssen-tarp/docs/tarp-with-keycloak.md new file mode 100644 index 00000000000..da8d3f2c565 --- /dev/null +++ b/demos/janssen-tarp/docs/tarp-with-keycloak.md @@ -0,0 +1,88 @@ +# Using Janssen Tarp with Keycloak (localhost) + +This tutorial shows how to point the Janssen Tarp browser extension at a **Keycloak** instance running on `localhost`, instead of a Janssen Auth Server. Tarp registers OIDC clients using Dynamic Client Registration (DCR), so Keycloak needs a couple of one-time settings enabled before registration will succeed. + +## 1. Prerequisites + +- Janssen Tarp installed in your browser (see the [end-user tutorial](./janssen-tarp-tutorial.md) or [build-from-source tutorial](./janssen-tarp-build-from-source.md)) +- Docker (or another way to run Keycloak locally) + +## 2. Start Keycloak locally + +The simplest way to run Keycloak for testing is via Docker: + +```bash +docker run -p 127.0.0.1:8080:8080 \ + -e KC_BOOTSTRAP_ADMIN_USERNAME=admin \ + -e KC_BOOTSTRAP_ADMIN_PASSWORD=admin \ + quay.io/keycloak/keycloak:latest start-dev +``` + +This exposes Keycloak on `http://localhost:8080` with an admin user `admin` / `admin`. `start-dev` runs it in development mode, which is fine for local testing (not for production). + +Log in to the Admin Console at `http://localhost:8080/admin`. + +## 3. Create a realm and a user + +1. In the Admin Console, click **Manage realms → Create realm**, give it a name (e.g. `myrealm`), and click **Create**. +2. Switch to that realm, go to **Users → Create new user**, fill in a username, and click **Create**. +3. Open the new user's **Credentials** tab, set a password, and toggle **Temporary** to **Off** so it doesn't need to be reset at first login. + +You'll use this realm and user later to sign in through Tarp's authentication flow. + +## 4. Configure Keycloak for Janssen Tarp + +Tarp calls Keycloak's client registration endpoint directly from the browser (anonymously, without an initial access token), so two realm settings need to be adjusted first. + +### 4.1 Trust `localhost` for client registration + +1. In the Admin Console, go to **Clients → Client registration → Client details** (Keycloak may also show this as **Initial access token / Registration policies** depending on version) **→ Trusted Hosts**. +2. Add `localhost` to the trusted hosts list, since your Keycloak instance is running on localhost. +3. Save. + +![Trusted Hosts configuration](https://raw.githubusercontent.com/JanssenProject/jans/main/demos/janssen-tarp/docs/images/kc_trusted_hosts.png) + +### 4.2 Add an `openid` client scope + +1. Go to **Client scopes → Create client scope**. +2. Name it `openid`. +3. Set its **Type** to **Optional**. +4. Save. + +![Add openid client scope](https://raw.githubusercontent.com/JanssenProject/jans/main/demos/janssen-tarp/docs/images/kc_add_scope.png) + +> Tarp requests the `openid` scope by default when registering a client. Without this scope existing on the realm, registration will fail or the resulting client won't behave as a proper OIDC client. + +Once these two settings are in place, your Keycloak realm is ready to accept registrations from Tarp. + +## 5. Register a client in Tarp against Keycloak + +1. Open the Janssen Tarp extension. On the **Authentication** tab, click **+ Add Client**. +2. In the **Register OIDC Client** dialog: + - **Issuer** — your Keycloak realm's issuer URL, e.g. `http://localhost:8080/realms/myrealm` + - **Scopes** — add `openid` (press Enter after typing it) + - Leave **Add an existing client** unchecked, since you want Tarp to dynamically register a new client +3. Click **Register**. + +![Register OIDC Client dialog](images/01-register-oidc-client.jpg) + +Tarp calls Keycloak's DCR endpoint and, on success, adds the new client to the **OIDC Clients** table with a generated Client ID and Client Secret. + +![Registered client in the OIDC Clients list](images/02-client-registered.jpg) + +> If registration fails here, double check `localhost` is listed under Trusted Hosts (step 4.1) and that the `openid` scope exists (step 4.2) — these are the two most common causes of DCR failures against Keycloak. + +## 6. Run the authentication flow against Keycloak + +1. In the client's row, click the ⚡ trigger icon. +2. In **Authentication Flow Inputs**, optionally tick **Display tokens after authentication**, then click **Trigger Auth Flow**. + +![Authentication Flow Inputs dialog](images/03-auth-flow-inputs.jpg) + +3. You'll be redirected to Keycloak's login page for `myrealm`. Sign in with the user you created in Step 3. +4. After a successful login, Tarp shows the **User Details** page with the Access Token, ID Token, and userinfo returned by Keycloak. + +![User Details page with tokens](images/04-user-details-tokens.jpg) + +From here, you can continue into the **Cedarling** tab exactly as described in the [end-user tutorial](./janssen-tarp-tutorial.md#5-configure-cedarling) — Cedarling authorization is independent of which IdP issued the tokens, as long as your policy store and trusted issuer configuration recognize Keycloak as a token issuer. +