add test frontend and automatic configuration

.gitignore

@@ -37,3 +37,179 @@ build/
 
 ### Mac OS ###
 .DS_Store
+
+# Created by https://www.toptal.com/developers/gitignore/api/node,angular
+# Edit at https://www.toptal.com/developers/gitignore?templates=node,angular
+
+### Angular ###
+## Angular ##
+# compiled output
+dist/
+tmp/
+app/**/*.js
+app/**/*.js.map
+
+# dependencies
+node_modules/
+bower_components/
+
+# IDEs and editors
+.idea/
+
+# misc
+.sass-cache/
+connect.lock/
+coverage/
+libpeerconnection.log/
+npm-debug.log
+testem.log
+typings/
+.angular/
+
+# e2e
+e2e/*.js
+e2e/*.map
+
+# System Files
+.DS_Store/
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/node,angular

README.md

@@ -14,7 +14,6 @@ The `restrictedID` changes when a user gets a new ID card. Currently, there is n
 :warning: This plugin is not considered production ready, but should rather show that eID authentication with Keycloak is possible. If you want to use this in production, feel free to reach out to [@schmitzhermes](https://github.com/schmitzhermes) directly or book a meeting on our [L21s website](https://l21s.de/).
 
 ## Installation guide
-
 ### 1) Run Keycloak with the eID Provider
 Use the following commands to set up Keycloak with the eID identity provider plugin in a Docker container.  
 
@@ -23,35 +22,32 @@ Use the following commands to set up Keycloak with the eID identity provider plu
 `mvn clean package -P dev`  
 `docker-compose up`
 
-If the eID identity provider plugin was registered successfully, `TcTokenEndpointFactory` and `EidIdentityProviderFactory` are detected and logged throughout the execution of the build and the run command.
+If everything ran correctly, Keycloak is already to configured to use an eID provider. This is done automatically using the beautiful `keycloak-config-cli` tool, which is also [open-source](https://github.com/adorsys/keycloak-config-cli). The corresponding config file is [config/realm.yaml](config/realm.yaml)
 
-<img width="1730" alt="Bildschirmfoto 2024-01-29 um 12 06 30" src="https://github.com/L21s/keycloak-eid-identity-provider/assets/85928453/1844fcfd-b863-4db6-944c-a383e56a3906">
+Please look [here](config/config.md) if you want to know how to manually configure Keycloak.
 
-### 2) Configure Keycloak to enable the eID provider
-Follow these steps to configure the eID identity provider for using the Proof-of-Concept. 
-1. Go to `https://localhost:8443` and log in to the Keycloak Admin UI with `admin` as Username and Password.
-2. Go to identity providers and select eID.
-3. Set dummy values for Client Id and Client Secret. They are not necessary for a functioning eID identity provider but are required by the current [Keycloak implementation](https://github.com/keycloak/keycloak/issues/21891).  
-4. Set the ID Panstar Server URL to `https://dev.id.governikus-eid.de/gov_autent/async`. 
-5. Set the SAML Request Entity Base URL to `https://localhost:8443`.
-6. Set the keys and certificates stored at `src/main/resources/keys` in the order specified by their names.   
+### 2) Configure the AusweisApp for test purposes
+> [!NOTE]
+> This is only necessary in a test setup. In production setups, of course, users do not need to follow these steps.
 
-The final configuration looks like this.
+For using the Proof-of-Concept, the AusweisApp must be running on the same machine as Keycloak. In addition, it must be configured to mock an ID card.  
 
-![screencapture-localhost-8443-admin-master-console-2024-01-29-11_07_58](https://github.com/L21s/keycloak-eid-identity-provider/assets/85928453/4a24f3e9-9dc7-4238-89a0-4db38819a166)
+To mock an ID card, the developer mode must be activated:
+- Open the AusweisApp
+- click on "Help"
+- click on "Information"
+- click ten times on the version number
 
-### 3) Configure the AusweisApp for test purposes
-> [!NOTE]
-> This is only necessary in a test setup. In production setups, of course, users do not need to follow these steps.
+Now, the developer mode is activated and you will see "developer settings" when you click on "settings". Here you can enable the "internal card simulator".  
 
-For using the Proof-of-Concept, the AusweisApp must be running on the same machine as Keycloak. In addition, it must be configured to mock an ID card.
-Therefore, the developer mode must be activated as described [here](https://www.ausweisapp.bund.de/ausweisapp2/help/1.20/en/Windows/settings-developer.html#aktivieren-des-entwicklermodus).
-Afterward, go to Settings -> Developer options and activate the internal card simulator.
+This is also described in [this official document](https://www.ausweisapp.bund.de/fileadmin/user_upload/AusweisApp-2.2.0-NetInstallation_Integration.pdf), but unfortunately only in German.  
 
-### 4) Login with (simulated) ID card
-If you now login into Keycloak, you can choose "eid" as an identity provider in the login dialog. If you click on it, the AusweisApp will start and authenticate you. If you followed the guide, it will also authenticate you without actually presenting an ID card, as the AusweisApp is in development mode.  
+### 3) Login with (simulated) ID card
+Open http://localhost:4200.  
+You will be redirected to Keycloak, where you can choose "eid" as a login method (below the username / password fields). You will then be redirected to the AusweisApp and the eID flow starts.  
 
-:warning: If you try this on the Keycloak admin console you will end up in a blank page, because the person registering via eID does not have access to the Keycloak admin console (as they are no admins, of course). 
+> [!NOTE]
+> Please note that if you activated the developer mode in the AusweisApp, the button you need to click to be redirected to the frontend when the authentication is done is sort of hidden behind the developer mode overlay.
 
 ## Detailed explanation of authentication flow
 ```mermaid

config/config.md

@@ -0,0 +1,24 @@
+# Configuration of Keycloak
+## 1) Configure Keycloak to enable the eID provider
+Follow these steps to configure the eID identity provider for using the Proof-of-Concept. 
+1. Go to `https://localhost:8443` and log in to the Keycloak Admin UI with `admin` as Username and Password.
+2. Go to identity providers and select eID.
+3. Set dummy values for Client Id and Client Secret. They are not necessary for a functioning eID identity provider but are required by the current [Keycloak implementation](https://github.com/keycloak/keycloak/issues/21891).  
+4. Set the ID Panstar Server URL to `https://dev.id.governikus-eid.de/gov_autent/async`. 
+5. Set the SAML Request Entity Base URL to `https://localhost:8443`.
+6. Set the keys and certificates stored at `src/main/resources/keys` in the order specified by their names.   
+
+The final configuration looks like this.
+
+![screencapture-localhost-8443-admin-master-console-2024-01-29-11_07_58](https://github.com/L21s/keycloak-eid-identity-provider/assets/85928453/4a24f3e9-9dc7-4238-89a0-4db38819a166)
+
+Of course, in real world scenarios you'd need different eID servers and thus also different keys/certificates.
+
+## 2) Create the client to work with the test frontend
+1. Go to `https://localhost:8443` and log in to the Keycloak Admin UI with `admin` as Username and Password.
+2. Go to Clients
+3. Click "Create Client"  
+    3.1 *General Settings*: Set `eid-test-frontend` as the client id  
+    3.2 *Capability config*: no config needed, just click next  
+    3.3 *Login Settings* Set the Root URL to `http://localhost:4200` and the redirect URIs and web origins to `*`  
+4. Click save