Integrace s piratskou identitou

.gitignore

@@ -85,3 +85,5 @@ sw.*
 
 # GitLab Pages
 public/
+
+.ssl

app.vue

 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+  <client-only>
+    <app-navbar />
+  </client-only>
+  <nuxt-page />
 </template>

components/AppNavbar.vue

+<script setup lang="ts">
+const { $keycloak } = useNuxtApp();
+
+const login = () => {
+  $keycloak.login()
+}
+
+const logout = () => {
+  $keycloak.logout({ redirectUri: location.origin + "/" });
+}
+
+</script>
+
+<template>
+  <div>
+    <button @click="logout" v-if="$keycloak.authenticated">Logout</button>
+    <button @click="login" v-else>Login</button>
+  </div>
+</template>

index.d.ts

+import type Keycloak from "keycloak-js";
+
+declare module "#app" {
+  interface NuxtApp {
+    $keycloak: Keycloak;
+  }
+}

middleware/authenticatedMiddleware.ts

+/**
+ * Middleware that requires the user to be authenticated.
+ */
+export default defineNuxtRouteMiddleware(async () => {
+  // Only run on client side.
+  if (import.meta.server)
+    return;
+  const { $keycloak } = useNuxtApp();
+  console.log($keycloak)
+  if (!$keycloak.authenticated) {
+    await $keycloak.login();
+    // If the user is not redirected by `Keycloak.login`
+    // This shouldn't happen.
+    return abortNavigation("You must be authenticated to view this page.");
+  }
+});

nuxt.config.ts

 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2024-04-03',
-  devtools: { enabled: true }
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: false },
+  ssr: false,
+
+  runtimeConfig: {
+    public: {
+      keycloakUrl: "https://auth.pirati.cz/auth",
+      keycloakRealm: "pirati",
+      keycloakClientId: "nuxt",
+    },
+  },
+
 })

package.json

@@ -10,7 +10,10 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "nuxt": "^3.12.4",
-    "vue": "latest"
+    "keycloak-js": "^26.1.4",
+    "nuxt": "^3.16.1",
+    "remeda": "^2.21.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   }
 }

pages/index.vue

+<template>
+<h1>Public page.</h1>
+</template>

pages/protected.vue

+<script setup lang="ts">
+definePageMeta({
+  middleware: ["authenticated-middleware"],
+});
+</script>
+<template>
+<h1>Private page.</h1>
+<div v-if="$keycloak.authenticated">Subject: {{ $keycloak.subject }}</div>  	  
+<div v-if="$keycloak.authenticated">Token: {{ $keycloak.token }}</div>  	  
+<div v-if="$keycloak.authenticated">TokenParsed: {{ $keycloak.tokenParsed }}</div>  	  
+</template>

plugins/keycloakjs.client.ts

+/**
+ * Keycloak.js support for Nuxt.
+ * 
+ * Note that this plugin should only work at the client side.
+ */
+
+import Keycloak from "keycloak-js";
+import { omit } from "remeda";
+
+// Query parameters used by Keycloak.
+const KEYCLOAK_PARAMS = [
+  "state",
+  "session_state",
+  "code",
+]
+
+const plugin = defineNuxtPlugin({
+  name: "keycloakjs",
+  enforce: "pre",
+  hooks: {
+    // This hook fixes https://github.com/keycloak/keycloak/issues/14742
+    "app:mounted"() {
+      const router = useRouter();
+
+      // Filter query parameters. Remove query parameters used by Keycloak.
+      // (you can use you own logic here)
+      const query = omit(router.currentRoute.value.query, KEYCLOAK_PARAMS);
+      router.replace({ query });
+    },
+  },
+  async setup() {
+    const config = useRuntimeConfig();
+    try {
+      const keycloak = new Keycloak({
+        url: config.public.keycloakUrl,
+        realm: config.public.keycloakRealm,
+        clientId: config.public.keycloakClientId,
+      });
+      await keycloak.init({
+        onLoad: "check-sso",
+        // Optional
+	silentCheckSsoFallback: false, 
+        silentCheckSsoRedirectUri: location.origin + "/silent-check-sso.html",
+        responseMode: "query",
+      });
+
+      return {
+        provide: {
+          keycloak,
+        },
+      };
+    } catch (e) {
+      console.error(e)
+      throw createError({ statusCode: 401, message: "Keycloak error" });
+    }
+  },
+});
+
+export default plugin;