updated authen with keycloak client

src/main.ts

@@ -37,6 +37,7 @@ app.component(
 
 app.config.globalProperties.$http = http
 
+// authen with keycloak client
 function getCookie(name: string) {
   const nameEQ = name + '='
   const ca = document.cookie.split(';')
@@ -61,9 +62,11 @@ if (kcToken && kcRefreshToken) {
     })
     .then((authenticated) => {
       console.log('authenticated', authenticated)
-      //   //     // if (authenticated) {
+      if (!authenticated) {
-      //   //     //   app.mount('#app')
+        window.location.reload()
-      //   //     // }
+      } else {
+        console.log('Authenticated')
+      }
     })
     .catch((err) => {
       console.error('Keycloak initialization failed:', err)

src/plugins/keycloak.ts

@@ -1,10 +1,13 @@
+// authen with keycloak client
 import Keycloak from 'keycloak-js'
 
 const keycloakConfig = {
-  url: 'https://id.frappet.synology.me/auth',
+  url: 'https://id.frappet.synology.me',
   realm: 'bma-ehr',
   clientId: 'gettoken',
+  clientSecret: 'qsFwDb5anVoXKKwoeivrByIn9VYWQNRn',
 }
 
 const keycloak = new Keycloak(keycloakConfig)
 export default keycloak
+export { keycloakConfig }

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import MapView from '@/views/MapView.vue'
 import MainView from '@/views/MainView.vue'
+const loginView = () => import('@/views/login.vue')
 
 import keycloak from '@/plugins/keycloak'
 
@@ -67,25 +68,23 @@ const router = createRouter({
         },
       ],
     },
+    // authen with keycloak client
+    {
+      path: '/login',
+      name: 'loginMain',
+      component: loginView,
+      meta: {
+        Auth: false,
+      },
+    },
   ],
 })
 
+// authen with keycloak client
 router.beforeEach((to, from, next) => {
   if (to.meta.Auth) {
-    console.log('keycloak===>', keycloak)
+    if (keycloak.authenticated === undefined && to.meta.Auth) {
-    console.log('keycloak authenticated===>', keycloak.authenticated)
+      window.location.href = '/login'
-
-    if (keycloak.authenticated === undefined) {
-      window.location.href = 'https://bma-sso.frappet.synology.me'
-      //     } else {
-      //       //   keycloak.updateToken(60);
-      //       //   const role = keycloak.tokenParsed?.role
-      //       //   if (role.includes(to.meta.Role)) {
-      //       next()
-      //       //   } else {
-      //       //     next({ path: '' })
-      //       //     // next();
-      //       //   }
     }
   } else {
     next()

src/stores/mixin.ts

@@ -128,7 +128,7 @@ export const useCounterMixin = defineStore('mixin', () => {
       })
   }
 
-  const messageError = (q: any, e: any = '') => {
+  const messageError = (q: any, e: any = '', msg: string = '') => {
     // q.dialog.hide();
     if (e.response !== undefined) {
       if (e.response.data.status !== undefined) {
@@ -159,17 +159,30 @@ export const useCounterMixin = defineStore('mixin', () => {
         }
       } else {
         if (e.response.status == 401) {
-          //invalid_token
+          if (msg !== '') {
-          q.dialog({
+            q.dialog({
-            component: CustomComponent,
+              component: CustomComponent,
-            componentProps: {
+              componentProps: {
-              title: `พบข้อผิดพลาด`,
+                title: `พบข้อผิดพลาด`,
-              message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+                message: msg,
-              icon: 'warning',
+                icon: 'warning',
-              color: 'red',
+                color: 'red',
-              onlycancel: true,
+                onlycancel: true,
-            },
+              },
-          })
+            })
+          } else {
+            //invalid_token
+            q.dialog({
+              component: CustomComponent,
+              componentProps: {
+                title: `พบข้อผิดพลาด`,
+                message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
+                icon: 'warning',
+                color: 'red',
+                onlycancel: true,
+              },
+            })
+          }
         } else if (e.response.data.successful === false) {
           q.dialog({
             component: CustomComponent,

src/views/MainView.vue

@@ -98,13 +98,14 @@ function onClickLogout() {
     persistent: true,
   }).onOk(async () => {
     // keycloak.logout()
+    // authen with keycloak client
     await deleteCookie('BMAHRIS_KEYCLOAK_IDENTITY')
     await deleteCookie('BMAHRIS_KEYCLOAK_REFRESH')
-    window.location.href = 'https://bma-sso.frappet.synology.me'
+    window.location.href = '/login'
   })
 }
 
-function deleteCookie(name) {
+function deleteCookie(name: string) {
   document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
 }
 

src/views/login.vue

@@ -0,0 +1,327 @@
+<!-- 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>('')
+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">
+      <div id="kc-logo">
+        <div id="myimage"></div>
+        <div class="text-logo">
+          ระบบ<span style="color: #02a998">บริหารทรัพยากรบุคคล</span>
+        </div>
+        <div class="subtext-logo">ของกรุงเทพมหานคร</div>
+      </div>
+
+      <div class="card-pf">
+        <div class="login-pf-header">
+          <h1 id="kc-page-title">เข้าใช้งานระบบ</h1>
+        </div>
+        <q-form
+          greedy
+          @submit.prevent
+          @validation-success="onSubmit"
+          style="max-width: 100%; min-width: 30%"
+        >
+          <div class="row">
+            <div class="col-12 form-group">
+              <label
+                for="username"
+                class="pf-c-form__label pf-c-form__label-text"
+                >ชื่อผู้ใช้งาน</label
+              >
+              <q-input
+                v-model="username"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
+              ></q-input>
+            </div>
+            <div class="col-12 form-group">
+              <label
+                for="username"
+                class="pf-c-form__label pf-c-form__label-text"
+                >รหัสผ่าน</label
+              >
+              <q-input
+                v-model="password"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="password"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผ่าน'}`,]"
+              ></q-input>
+            </div>
+            <div class="col-12 form-group">
+              <div class="row justify-between">
+                <div id="kc-form-options">
+                  <div class="row items-center">
+                    <input
+                      tabindex="3"
+                      id="rememberMe"
+                      name="rememberMe"
+                      type="checkbox"
+                    />
+                    <label class=""> ล็อคอินค้างไว้ </label>
+                  </div>
+                </div>
+                <div>
+                  <span
+                    ><a
+                      tabindex="5"
+                      href="/realms/bma-ehr/login-actions/reset-credentials?client_id=bma-ehr-vue3&amp;tab_id=gg77yQ7AeAI"
+                      class="link"
+                      >ลืมรหัสผ่าน</a
+                    ></span
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="col-12">
+              <q-btn
+                unelevated
+                color="teal-5"
+                class="full-width"
+                label="เข้าระบบ"
+                style="font-size: 16px; border-radius: 8px"
+                type="submit"
+              >
+              </q-btn>
+            </div>
+          </div>
+        </q-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.link {
+  text-decoration: none;
+  color: #cc0004;
+}
+
+.link:hover {
+  color: #ff0004;
+  text-decoration: underline;
+}
+.checkbox,
+.radio {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  margin: 1px 3px 0 0;
+  line-height: normal;
+}
+.checkbox label,
+.radio label {
+  min-height: 20px;
+  margin-bottom: 0;
+  font-weight: 400;
+  cursor: pointer;
+}
+.form-group {
+  margin-bottom: 15px;
+  text-align: left;
+}
+#kc-content {
+  width: 100%;
+}
+#kc-content-wrapper {
+  margin-top: 20px;
+}
+#kc-form-options .checkbox {
+  margin-top: 0;
+  color: #72767b;
+}
+#kc-logo {
+  max-width: 25vw;
+  position: absolute;
+  margin-left: 5%;
+  /* margin-top: 5%; */
+  z-index: 1 !important;
+}
+.bg-image {
+  font-family: 'Noto Sans Thai', sans-serif;
+  font-family: 'Noto Sans Thai', sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: url(@/assets/keycloak-bg.png) no-repeat center center fixed;
+  background-size: cover;
+  height: 100vh;
+  font-size: 12px;
+  line-height: 1.66666667;
+  color: #363636;
+}
+
+.login-pf-page {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-top: 0px;
+}
+
+#myimage {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  object-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% !important;
+  background: white url(@/assets/keycloak-logo-poc.png) no-repeat center center;
+  margin-bottom: 7%;
+}
+.text-logo {
+  color: white;
+  font-weight: 800;
+  font-size: 1.6rem;
+}
+
+.subtext-logo {
+  color: white;
+  font-weight: 200;
+  font-size: 1.4rem;
+}
+
+.card-pf {
+  margin: 0 auto;
+  box-shadow: 0 1px 1px rgba(3, 3, 3, 0.175);
+  padding: 20px;
+  max-width: 400px;
+  min-width: 30%;
+  /* border-top: 4px solid; */
+  position: relative;
+  z-index: 10 !important;
+  border-radius: 10px;
+  /* border-color: var(--pf-global--primary-color--100); */
+  background: #fff;
+  border-top: 2px solid transparent;
+}
+
+.login-pf-page .login-pf-header {
+  margin-bottom: 20px;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.login-pf-page .login-pf-header h1 {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: start;
+}
+
+h1#kc-page-title {
+  margin-top: 10px;
+  font-weight: 800;
+  font-size: 1.3rem;
+  line-height: 1.1;
+}
+
+.login-pf-page .login-pf-header h1 {
+  font-size: 16px;
+}
+.login-pf-page .login-pf-header h1 {
+  text-align: center;
+}
+@media (max-width: 767px) {
+  #kc-logo {
+    display: none;
+  }
+  .login-pf-page .login-pf-header {
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 768px) {
+  .login-pf-page .login-pf-header {
+    margin-bottom: 10px;
+  }
+  .login-pf-page .login-pf-header h1 {
+    font-size: 24px;
+  }
+  .login-pf-page .card-pf {
+    padding: 20px 40px 30px 40px;
+  }
+}
+</style>