This commit is contained in:
ari
2025-11-21 14:43:08 +07:00
parent bbdaeee304
commit 9ce103f38e
9 changed files with 167 additions and 233 deletions
+12 -15
View File
@@ -3,6 +3,8 @@ import type { z } from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
import { Loader2 } from 'lucide-vue-next'
import { useForm } from 'vee-validate'
import { useRouter } from 'vue-router'
import { useKeycloak } from "~/composables/useKeycloack"
interface Props {
schema: z.ZodSchema<any>
@@ -14,7 +16,6 @@ const props = defineProps<Props>()
const emit = defineEmits<{
submit: [data: any]
sso: []
response: [state: string]
}>()
const { handleSubmit, defineField, errors, meta } = useForm({
@@ -36,24 +37,24 @@ const onSubmit = handleSubmit(async (values) => {
}
})
const { initKeycloak, getProfile, login } = useKeycloak()
const profile = ref<any>(null)
onMounted(async () => {
await initKeycloak('check-sso')
profile.value = getProfile()
console.log(profile)
})
const onSSO = (async () => {
console.log("Emitting SSO...")
try {
await emit('sso')
const redirect = window.location.origin + '/auth/sso'
await login({ redirectUri: redirect })
} catch (error) {
console.error('Call SSO failed:', error)
}
});
const test = useRoute()
const responseSSO = test.hash
if (responseSSO != null && responseSSO != '') {
console.log("Getting Response SSO...")
await emit('response', responseSSO)
}
</script>
<template>
@@ -93,11 +94,7 @@ if (responseSSO != null && responseSSO != '') {
</Button>
</form>
<a href="/auth/keycloak/login">Login with Keycloak</a>
<Button @click="onSSO" target="_blank">
Login SSO
</Button>
<span>success {{ responseSSO }}</span>
</template>
+1 -112
View File
@@ -41,121 +41,10 @@ async function onSubmit(data: LoginFormData) {
isLoading.value = false
}
const config = useRuntimeConfig()
// const store = useKeycloak()
const state = reactive({
loggedIn: false
})
async function onSSO() {
console.log("=================== on SSO! ===================")
const config = useRuntimeConfig()
const keycloak = new Keycloak({
url: config.public.KEYCLOAK_URL,
realm: config.public.KEYCLOAK_REALM,
clientId: config.public.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID,
});
try {
const authenticatedResult = await keycloak.init({ onLoad: 'login-required' }); // Or 'login-required'
// seelah line ini aku mek paham logic e tapi faktane dunno
const nuxtApp = useNuxtApp()
nuxtApp.provide('keycloak', keycloak);
} catch (error) {
console.error('Keycloak initialization failed:', error);
}
// const initOptions = {
// url: config.public.KEYCLOAK_URL,
// realm: config.public.KEYCLOAK_REALM,
// clientId: config.public.KEYCLOAK_ID,
// onLoad: 'login-required'
// }
// const keycloak = new Keycloak(initOptions)
// console.log("=================== balik gak se! ===================")
// keycloak
// .init({ onLoad: initOptions.onLoad })
// .then((auth) => {
// console.log(auth)
// if (!auth) {
// window.location.reload()
// } else {
// // store.setup(keycloak)
// state.loggedIn = true
// }
// })
console.log("=================== onto login fes! ===================")
// if (state.loggedIn) {
// const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
// data: keycloak,
// })
// if (result.success) {
// const { data: rawdata, meta } = result.body
// if (meta.status === 'verified') {
// login(rawdata)
// navigateTo('/')
// }
// } else {
// if (result.errors) {
// Object.entries(result.errors).forEach(
// ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
// )
// } else {
// apiErrors.value.general = result.error?.message || result.message || 'Login failed'
// }
// }
// }
// const urlSSO =
// config.public.KEYCLOAK_ISSUER +
// '/protocol/openid-connect/auth?client_id=' +
// config.public.KEYCLOAK_ID +
// '&scope=openid%20email%20profile&response_type=code&redirect_uri=' +
// config.public.KEYCLOAK_LOGOUT_REDIRECT +
// '%2Fapi%2Fauth%2Fcallback%2Fkeycloak&state=AKf-WHWdL822V3LaNS5MSFzJ96-VHp6FUXlXxIAzXXM&code_challenge=nXOcGLLlA1NtXI4RM4hL59iP_I_yQAsUDd5sAOkKBF4&code_challenge_method=S256'
// await navigateTo(urlSSO,
// {
// open: { target: '_blank' },
// external: true
// })
}
async function onResponseSSO(authenticatedResult: string) {
console.log("=================== onto login fes!!! ===================")
console.log(authenticatedResult)
if (authenticatedResult) {
const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
data: authenticatedResult,
})
if (result.success) {
const { data: rawdata, meta } = result.body
if (meta.status === 'verified') {
login(rawdata)
navigateTo('/')
}
} else {
if (result.errors) {
Object.entries(result.errors).forEach(
([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
)
} else {
apiErrors.value.general = result.error?.message || result.message || 'Login failed'
}
}
}
}
</script>
<template>
<AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" @sso="onSSO" @response="onResponseSSO" />
<AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" />
</template>
<style scoped></style>