update
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user