updated authen with keycloak client
This commit is contained in:
parent
93cf472aae
commit
9ec6a7696a
8 changed files with 378 additions and 32 deletions
BIN
src/assets/keycloak-bg.png
Normal file
BIN
src/assets/keycloak-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
src/assets/keycloak-logo-poc.png
Normal file
BIN
src/assets/keycloak-logo-poc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
|
|
@ -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) {
|
||||
// // // app.mount('#app')
|
||||
// // // }
|
||||
if (!authenticated) {
|
||||
window.location.reload()
|
||||
} else {
|
||||
console.log('Authenticated')
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Keycloak initialization failed:', err)
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
console.log('keycloak authenticated===>', keycloak.authenticated)
|
||||
|
||||
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();
|
||||
// // }
|
||||
if (keycloak.authenticated === undefined && to.meta.Auth) {
|
||||
window.location.href = '/login'
|
||||
}
|
||||
} else {
|
||||
next()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: `พบข้อผิดพลาด`,
|
||||
message: `ล็อกอินหมดอายุ กรุณาล็อกอินใหม่อีกครั้ง`,
|
||||
icon: 'warning',
|
||||
color: 'red',
|
||||
onlycancel: true,
|
||||
},
|
||||
})
|
||||
if (msg !== '') {
|
||||
q.dialog({
|
||||
component: CustomComponent,
|
||||
componentProps: {
|
||||
title: `พบข้อผิดพลาด`,
|
||||
message: msg,
|
||||
icon: 'warning',
|
||||
color: 'red',
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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=/;`
|
||||
}
|
||||
|
||||
|
|
|
|||
327
src/views/login.vue
Normal file
327
src/views/login.vue
Normal file
|
|
@ -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&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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue