diff --git a/src/assets/keycloak-bg.png b/src/assets/keycloak-bg.png new file mode 100644 index 0000000..f6b0837 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 0000000..f16aa38 Binary files /dev/null and b/src/assets/keycloak-logo-poc.png differ diff --git a/src/main.ts b/src/main.ts index 98cedae..da7d314 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,6 +9,8 @@ import "@vuepic/vue-datepicker/dist/main.css"; import "quasar/src/css/index.sass"; import http from "./plugins/http"; +import keycloak from "@/plugins/keycloak"; + // import OpenLayersMap from "vue3-openlayers"; // import './assets/main.css' @@ -40,4 +42,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/http.ts b/src/plugins/http.ts index 494c9aa..813c81a 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 587050d..214c25e 100644 --- a/src/plugins/keycloak.ts +++ b/src/plugins/keycloak.ts @@ -1,23 +1,13 @@ -/** - * front connect to keycloak - */ -import Keycloak from "keycloak-js" -// import config from "../app.config"; -// import http from "../shared/http"; -// import router from "../router"; +// 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, - realm: "bma-ehr", - clientId: "bma-ehr-vue3", - url: "https://id.frappet.synology.me/", -} //option keycloak ที่จะ connect +const keycloakConfig = { + url: "https://id.frappet.synology.me", + realm: "bma-ehr", + clientId: "gettoken", + clientSecret: "qsFwDb5anVoXKKwoeivrByIn9VYWQNRn", +}; -const keycloak = Keycloak(initOptions) - -keycloak.onAuthSuccess = () => {} //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้ - -await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }) //ทำการ connect keycloak -export default keycloak +const keycloak = new Keycloak(keycloakConfig); +export default keycloak; +export { keycloakConfig }; diff --git a/src/router/index.ts b/src/router/index.ts index e39062d..ad5dd66 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -47,7 +47,7 @@ const router = createRouter({ Key: [7], }, }, - + ...ModuleTransfer, ...ModuleRetire, ...ModuleCheckin, @@ -68,27 +68,23 @@ const router = createRouter({ name: "loginMain", component: loginMain, meta: { - Auth: true, + Auth: false, Key: [7], }, }, ], }); +// 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 { - next(); + 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 ee0d691..131d71b 100644 --- a/src/views/MainLayout.vue +++ b/src/views/MainLayout.vue @@ -91,14 +91,22 @@ const fetchlistNotification = async (index: number, type: string) => { const doLogout = () => { dialogConfirm( $q, - () => { - keycloak.logout(); + async () => { + // keycloak.logout(); + // authen with keycloak client + await deleteCookie("BMAHRIS_KEYCLOAK_IDENTITY"); + await deleteCookie("BMAHRIS_KEYCLOAK_REFRESH"); + window.location.href = "/login"; }, "ยืนยันการออกจากระบบ", "ต้องการออกจากระบบใช่หรือไม่" ); }; +function deleteCookie(name: string) { + document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`; +} + const clickDelete = async (id: string, index: number) => { dialogRemove($q, async () => { // showLoader(); diff --git a/src/views/login.vue b/src/views/login.vue index 7917556..efd5039 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -1,11 +1,75 @@ + + -