Implement authorization code flow

Author: ArneLimburg

README.md

@@ -48,4 +48,3 @@ code: <<der Authorization Code>>
 
 In der Antwort dieses Requests ist das JWT enthalten.
 Dieses kann nun auf der Startseite angezeigt werden.
-

authentication-ui/nginx.conf

@@ -1,9 +1,26 @@
 events {
 }
+
+env CODESPACE_NAME;
+
 http {
 
+  map $CODESPACE_NAME CODESPACE_HOST {
+    ""      "localhost:6060";
+    default "$CODESPACE_NAME-6060.app.github.dev";
+  }
+
   server {
     listen 8080;
     root /var/www;
+
+    location /resources/ {
+      proxy_pass http://keycloak:8080;
+    }
+
+    location /realms {
+      proxy_pass http://keycloak:8080;
+      proxy_set_header Host $CODESPACE_HOST;
+    }
   }
 }

authentication-ui/nginx.conf.template

@@ -0,0 +1,19 @@
+events {
+}
+
+http {
+
+  server {
+    listen 8080;
+    root /var/www;
+
+    location /resources/ {
+      proxy_pass http://keycloak:8080;
+    }
+
+    location /realms {
+      proxy_pass http://keycloak:8080;
+      proxy_set_header Host ${CODESPACE_HOST};
+    }
+  }
+}

authentication-ui/static/index.html

@@ -9,16 +9,43 @@ <h1>Onlineshop</h1>
     <button id="loginButton">Login</button>
     <div id="result"></div>
     <script>
+        const authorizeEndpoint = "/realms/master/protocol/openid-connect/auth";
+        const tokenEndpoint = "/realms/master/protocol/openid-connect/token";
+
         document.getElementById("loginButton").onclick = function() {
-            console.log("Redirect to authentication server");
+            var redirectUri = window.location.href;
+            var args = new URLSearchParams({
+                client_id: "onlineshop",
+                scope: "openid",
+                response_type: "code",
+                redirect_uri: redirectUri
+            });
+            console.log("args", args);
+            window.location = authorizeEndpoint + "/?" + args;
         }
 
         if (window.location.search) {
             var args = new URLSearchParams(window.location.search);
             var code = args.get("code");
 
             if (code) {
-                console.log("Authenticate with authorization code");
+                fetch(tokenEndpoint, {
+                    method: "POST",
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: new URLSearchParams({
+                        client_id: "onlineshop",
+                        scope: "openid",
+                        grant_type: "authorization_code",
+                        redirect_uri: location.href.replace(location.search, ''),
+                        code: code
+                    })
+                }
+                ).then(response => response.json()
+                ).then(json => {
+                    document.getElementById("result").innerHTML = json.access_token;
+                });
             }
         }
     </script>

docker-compose.yaml

@@ -4,8 +4,29 @@ services:
     ports:
       - "6060:8080"
     volumes:
-      - ./authentication-ui/nginx.conf:/etc/nginx/nginx.conf
+      - ./authentication-ui/nginx.conf.template:/etc/nginx/nginx.conf.template
       - ./authentication-ui/static:/var/www
+    environment:
+      CODESPACE_NAME: ${CODESPACE_NAME:-}
+    command: |
+      /bin/bash -c '
+      export CODESPACE_HOST=$([ -n "$CODESPACE_NAME" ] && echo "$CODESPACE_NAME-6060.app.github.dev" || echo "localhost:6060");
+      envsubst < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf;
+      exec nginx -g "daemon off;"
+      '
+
+#    environment:
+#      - CODESPACE=${CODESPACE_NAME}-6060.app.github.dev
+#    command: /bin/bash -c "if [[ $CODESPACE == -6060* ]]; then CODESPACE_HOST="localhost:6060"; else CODESPACE_HOST=${CODESPACE}; fi && echo "Hallo" && echo ${CODESPACE_HOST} && envsubst < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && nginx -g 'daemon off;'" 
+#    environment:
+#      - CODESPACE_HOST=${CODESPACE_NAME:+${CODESPACE_NAME}-6060.app.github.dev}
+#      - CODESPACE_HOST=${CODESPACE_HOST:-localhost:6060}
+#      - CODESPACE_LOCAL=localhost:6060
+#      - CODESPACE_HOST=${CODESPACE_NAME}-6060.app.github.dev}${CODESPACE_NAME:-localhost:6060}
+#      - CODESPACE_HOST=${CODESPACE_NAME}-6060.app.github.dev
+#    command: /bin/bash -c "envsubst < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && nginx -g 'daemon off;'" 
+#    command: /bin/bash -c 'export CODESPACE_HOST="${CODESPACE_NAME:+$CODESPACE_NAME-6060.app.github.dev}" && CODESPACE_HOST="${CODESPACE_HOST:-localhost:6060}" && envsubst < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf'
+#    command: /bin/bash -c 'export CODESPACE_HOST=$([ -n "$CODESPACE_NAME" ] && echo "$CODESPACE_NAME-6060.app.github.dev" || echo "localhost:6060"); envsubst '$CODESPACE_HOST' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf'
 
   customer-service:
     build: customer-service/