feat: add CIE authentication callback page with polling mechanism for session verification
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: 'guest'
|
||||
})
|
||||
|
||||
useHead({ title: 'Accesso CIE - Visione' })
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const { fetchCieSession, handleLoginSuccess } = useAuth()
|
||||
|
||||
const state = computed(() => {
|
||||
const value = route.query.state
|
||||
return typeof value === 'string' ? value : ''
|
||||
})
|
||||
|
||||
const isLoading = ref(true)
|
||||
const errorMessage = ref('')
|
||||
const statusMessage = ref('Verifica dell’autenticazione CIE in corso...')
|
||||
|
||||
let pollTimer: ReturnType<typeof setTimeout> | null = null
|
||||
let attempts = 0
|
||||
const maxAttempts = 30
|
||||
|
||||
const stopPolling = () => {
|
||||
if (pollTimer) {
|
||||
clearTimeout(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const scheduleNextPoll = () => {
|
||||
pollTimer = setTimeout(checkSession, 2000)
|
||||
}
|
||||
|
||||
const checkSession = async () => {
|
||||
if (!state.value) {
|
||||
isLoading.value = false
|
||||
errorMessage.value = 'Sessione CIE non valida: parametro state mancante.'
|
||||
return
|
||||
}
|
||||
|
||||
attempts += 1
|
||||
|
||||
try {
|
||||
const res = await fetchCieSession(state.value)
|
||||
|
||||
if (res.status === 'authenticated' && res.auth?.token) {
|
||||
stopPolling()
|
||||
await handleLoginSuccess(res.auth.token)
|
||||
return
|
||||
}
|
||||
|
||||
if (['failed', 'expired', 'cancelled', 'error'].includes(res.status)) {
|
||||
stopPolling()
|
||||
isLoading.value = false
|
||||
errorMessage.value = 'Autenticazione CIE non completata. Riprova dal login.'
|
||||
return
|
||||
}
|
||||
|
||||
if (attempts >= maxAttempts) {
|
||||
stopPolling()
|
||||
isLoading.value = false
|
||||
errorMessage.value = 'Tempo di attesa scaduto durante la verifica CIE. Riprova.'
|
||||
return
|
||||
}
|
||||
|
||||
statusMessage.value = 'Autenticazione completata sul provider. Attendo conferma finale da Visione...'
|
||||
scheduleNextPoll()
|
||||
} catch (err: any) {
|
||||
stopPolling()
|
||||
isLoading.value = false
|
||||
errorMessage.value = err.data?.message || 'Errore durante la verifica della sessione CIE.'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkSession()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopPolling()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-items-center bg-light py-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-8 col-lg-6">
|
||||
<div class="card card-bg shadow-sm">
|
||||
<div class="card-body p-4 p-md-5 text-center">
|
||||
<BIIcon name="it-card" size="xl" color="primary" class="mb-3" />
|
||||
<h1 class="h3 font-weight-bold mb-3">Accesso con CIE</h1>
|
||||
|
||||
<div v-if="isLoading" class="py-3">
|
||||
<div class="spinner-border text-primary mb-3" role="status">
|
||||
<span class="visually-hidden">Caricamento...</span>
|
||||
</div>
|
||||
<p class="text-muted mb-0">{{ statusMessage }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="errorMessage" class="py-2">
|
||||
<div class="alert alert-danger text-start mb-4" role="alert">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
<button class="btn btn-primary" @click="router.push('/auth/login')">
|
||||
Torna al login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user