diff --git a/src/assets/keycloak-bg.png b/src/assets/keycloak-bg.png new file mode 100644 index 00000000..f6b0837d Binary files /dev/null and b/src/assets/keycloak-bg.png differ diff --git a/src/assets/keycloak-logo-poc.png b/src/assets/keycloak-logo-poc.png new file mode 100644 index 00000000..f16aa38f Binary files /dev/null and b/src/assets/keycloak-logo-poc.png differ diff --git a/src/main.ts b/src/main.ts index 79578a04..646376a1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,9 +3,10 @@ import App from "./App.vue"; import router from "./router"; import { Dialog, Notify, Quasar, Loading } from "quasar"; import "./quasar-user-options"; +import keycloak from "@/plugins/keycloak"; -import qDraggableTable from 'quasar-ui-q-draggable-table'; -import 'quasar-ui-q-draggable-table/dist/index.css'; +import qDraggableTable from "quasar-ui-q-draggable-table"; +import "quasar-ui-q-draggable-table/dist/index.css"; import "quasar/src/css/index.sass"; import th from "quasar/lang/th"; @@ -81,4 +82,40 @@ app.component( app.config.globalProperties.$http = http; +// authen with keycloak client +function getCookie(name: string) { + const nameEQ = name + "="; + const ca = document.cookie.split(";"); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == " ") c = c.substring(1, c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); + } + return null; +} + +const kcToken = getCookie("BMAHRIS_KEYCLOAK_IDENTITY"); +const kcRefreshToken = getCookie("BMAHRIS_KEYCLOAK_REFRESH"); + +if (kcToken && kcRefreshToken) { + keycloak + .init({ + // onLoad: 'login-required', + checkLoginIframe: false, + token: kcToken, + refreshToken: kcRefreshToken, + }) + .then((authenticated) => { + console.log("authenticated", authenticated); + if (!authenticated) { + window.location.reload(); + } else { + console.log("Authenticated"); + } + }) + .catch((err) => { + console.error("Keycloak initialization failed:", err); + }); +} + app.mount("#app"); diff --git a/src/plugins/checkPermission.ts b/src/plugins/checkPermission.ts index 3b1be63e..594d3c2f 100644 --- a/src/plugins/checkPermission.ts +++ b/src/plugins/checkPermission.ts @@ -3,6 +3,7 @@ import keycloak from "@/plugins/keycloak"; const checkPermission = (array2: string[]): boolean => { if (keycloak.tokenParsed) { const array1: string[] = keycloak.tokenParsed?.role; + return array1.some((element) => array2.includes(element)); } else return false; }; diff --git a/src/plugins/http.ts b/src/plugins/http.ts index 494c9aa3..813c81a9 100644 --- a/src/plugins/http.ts +++ b/src/plugins/http.ts @@ -10,7 +10,7 @@ const http = Axios.create({ http.interceptors.request.use( async function (config: AxiosRequestConfig) { - await keycloak.updateToken(1); + // await keycloak.updateToken(1); config.headers = config.headers ?? {}; const token = keycloak.token; // const token = localStorage.getItem("access_token") diff --git a/src/plugins/keycloak.ts b/src/plugins/keycloak.ts index a2c6df50..214c25e2 100644 --- a/src/plugins/keycloak.ts +++ b/src/plugins/keycloak.ts @@ -1,30 +1,13 @@ -/** - * front connect to keycloak - */ +// authen with keycloak client import Keycloak from "keycloak-js"; -const initOptions = { - realm: import.meta.env.VITE_REALM_KEYCLOAK, - clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK, - url: import.meta.env.VITE_URL_KEYCLOAK, -}; //option keycloak ที่จะ connect +const keycloakConfig = { + url: "https://id.frappet.synology.me", + realm: "bma-ehr", + clientId: "gettoken", + clientSecret: "qsFwDb5anVoXKKwoeivrByIn9VYWQNRn", +}; -const keycloak = Keycloak(initOptions); - -keycloak.onAuthSuccess = () => { - // check role user - // const hasCommonValues = (array1: string[], array2: string[]): boolean => { - // return array1.some((element) => array2.includes(element)); - // }; - // const role = keycloak.tokenParsed?.role; - // const roleSys = ["SUPER_ADMIN", "ADMIN"]; - // const checkPermission = hasCommonValues(role, roleSys); - // if (!checkPermission) { - // keycloak.logout({ - // redirectUri: `${window.location.protocol}//${window.location.host}/`, - // }); - // } -}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้ - -await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }); //ทำการ connect keycloak +const keycloak = new Keycloak(keycloakConfig); export default keycloak; +export { keycloakConfig }; diff --git a/src/router/index.ts b/src/router/index.ts index c34caa34..8c3739a3 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from "vue-router"; const MainLayout = () => import("@/views/MainLayout.vue"); const Dashboard = () => import("@/views/Dashboard.vue"); const Error404NotFound = () => import("@/views/Error404NotFound.vue"); +const loginView = () => import("@/views/login.vue"); import ModuleMetadata from "@/modules/01_metadata/router"; import ModuleUser from "@/modules/02_users/router"; @@ -34,7 +35,7 @@ const router = createRouter({ ...ModuleMetadata, ...ModuleUser, ...ModuleLogs, - ...ModuleSystem + ...ModuleSystem, ], }, /** @@ -46,6 +47,16 @@ const router = createRouter({ path: "/:pathMatch(.*)*", component: Error404NotFound, }, + + // authen with keycloak client + { + path: "/login", + name: "loginMain", + component: loginView, + meta: { + Auth: false, + }, + }, ], scrollBehavior(to, from, savedPosition) { @@ -60,25 +71,16 @@ const router = createRouter({ }, }); +// authen with keycloak client router.beforeEach((to, from, next) => { if (to.meta.Auth) { - if (!keycloak.authenticated) { - keycloak.login({ - redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`, - locale: "th", - }); - } else { - // keycloak.updateToken(60); - // if (checkPermission(to.meta.Role)) { - next(); - // } else { - // next({ path: "" }); - // } + if (keycloak.authenticated === undefined && to.meta.Auth) { + window.location.href = "/login"; } } else { next(); } - // next(); + next(); }); export default router; diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue index 4b7eb41b..64d85301 100644 --- a/src/views/MainLayout.vue +++ b/src/views/MainLayout.vue @@ -260,15 +260,24 @@ const activeMenu = (path: string) => { const doLogout = () => { dialogConfirm( $q, - () => - keycloak.logout({ - redirectUri: `${window.location.protocol}//${window.location.host}/`, - }), + async () => { + await deleteCookie("BMAHRIS_KEYCLOAK_IDENTITY"); + await deleteCookie("BMAHRIS_KEYCLOAK_REFRESH"); + window.location.href = "/login"; + }, + // keycloak.logout({ + // redirectUri: `${window.location.protocol}//${window.location.host}/`, + // }) + // authen with keycloak client "ยืนยันการออกจากระบบ", "ต้องการออกจากระบบใช่หรือไม่?" ); }; +function deleteCookie(name: string) { + document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`; +} + /** * ดิงชื่อผู้ใช้งานจาก keycloak */ diff --git a/src/views/login.vue b/src/views/login.vue new file mode 100644 index 00000000..efd5039a --- /dev/null +++ b/src/views/login.vue @@ -0,0 +1,327 @@ + + + + + +