login

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");

src/plugins/http.ts

@@ -10,7 +10,7 @@ const http = Axios.create({
 
 http.interceptors.request.use(
   async function (config: AxiosRequestConfig<any>) {
-    await keycloak.updateToken(1);
+    // await keycloak.updateToken(1);
     config.headers = config.headers ?? {};
     const token = keycloak.token;
     // const token = localStorage.getItem("access_token")

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 };

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;

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();

src/views/login.vue

@@ -1,11 +1,75 @@
+<!-- authen with keycloak client -->
 <script setup lang="ts">
 import { ref } from "vue";
+import axios from "axios";
+import { keycloakConfig } from "@/plugins/keycloak";
+import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+const router = useRouter();
+const mixin = useCounterMixin();
+const $q = useQuasar(); //ใช้ noti quasar
+
+const { showLoader, hideLoader, messageError } = mixin;
+
+function setCookie(name: string, value: any, days: number) {
+  let expires = "";
+  if (days) {
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = "; expires=" + date.toUTCString();
+  }
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
 
 const username = ref<string>("");
 const password = ref<string>("");
-const holdLogin = ref<boolean>(false);
-function onSubmit() {}
+async function onSubmit() {
+  showLoader();
+  const formdata = new URLSearchParams();
+  formdata.append("client_id", keycloakConfig.clientId);
+  formdata.append("client_secret", keycloakConfig.clientSecret);
+  formdata.append("grant_type", "password");
+  formdata.append(
+    "requested_token_type",
+    "urn:ietf:params:oauth:token-type:refresh_token"
+  );
+  formdata.append("username", username.value);
+  formdata.append("password", password.value);
+
+  await axios
+    .post(
+      `${keycloakConfig.url}/realms/${keycloakConfig.realm}/protocol/openid-connect/token`,
+      formdata,
+      {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      }
+    )
+    .then(async (res) => {
+      await setCookie("BMAHRIS_KEYCLOAK_IDENTITY", res.data.access_token, 1);
+      await setCookie("BMAHRIS_KEYCLOAK_REFRESH", res.data.refresh_token, 1);
+      window.location.href = "/";
+    })
+    .catch((err) => {
+      messageError($q, err, "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
+    })
+    .finally(() => {
+      hideLoader();
+    });
+
+  // if (response.status !== 200) {
+  //   messageError($q, err)
+  // } else {
+  //   await setCookie('BMAHRIS_KEYCLOAK_IDENTITY', response.data.access_token, 1)
+  //   await setCookie('BMAHRIS_KEYCLOAK_REFRESH', response.data.refresh_token, 1)
+  //   router.push('/')
+  // }
+}
 </script>
+
 <template>
   <div class="bg-image">
     <div class="login-pf-page">
@@ -102,7 +166,7 @@ function onSubmit() {}
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .link {
   text-decoration: none;
   color: #cc0004;
@@ -134,6 +198,7 @@ input[type="radio"] {
 }
 .form-group {
   margin-bottom: 15px;
+  text-align: left;
 }
 #kc-content {
   width: 100%;
@@ -158,7 +223,7 @@ input[type="radio"] {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: url(/src/style/keycloak-bg.png) no-repeat center center fixed;
+  background: url(@/assets/keycloak-bg.png) no-repeat center center fixed;
   background-size: cover;
   height: 100vh;
   font-size: 12px;
@@ -180,8 +245,7 @@ input[type="radio"] {
   object-position: center;
   background-repeat: no-repeat;
   background-size: 100% !important;
-  background: white url(/src/style/keycloak-logo-poc.png) no-repeat center
-    center;
+  background: white url(@/assets/keycloak-logo-poc.png) no-repeat center center;
   margin-bottom: 7%;
 }
 .text-logo {